:root {
  color-scheme: only light;
  --bg: #eef4ff;
  --bg-deep: #dfe8f8;
  --panel: rgba(247, 250, 255, 0.95);
  --panel-solid: #f8fbff;
  --card: #ffffff;
  --border: #c9d7ef;
  --border-strong: rgba(24, 88, 184, 0.26);
  --border-glow: rgba(39, 144, 255, 0.16);
  --text: #14223c;
  --muted: #67758f;
  --accent: #2895ff;
  --accent-soft: #e7f2ff;
  --accent-strong: #163e8e;
  --accent-glow: rgba(40, 149, 255, 0.24);
  --warn: #b86b2f;
  --warn-soft: #f7e6d6;
  --danger: #b45050;
  --danger-soft: #f5dddd;
  --shadow: rgba(21, 42, 90, 0.14);
  --shadow-strong: rgba(8, 25, 62, 0.24);
  --ink-inverse: #f7fbff;
  --status-open: #446a91;
  --status-open-bg: #dde8f5;
  --status-wait: #9a6a28;
  --status-wait-bg: #f4e7d2;
  --status-progress: #8d3bdf;
  --status-progress-bg: #f0e6fd;
  --status-done: #6b6c76;
  --status-done-bg: #ebedf1;
  --status-invoice: #8e3b2e;
  --status-invoice-bg: #f5dfdb;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color-scheme: only light;
}

body.is-auth-mode {
  height: 100vh;
  overflow: hidden;
}

body.is-signup-open {
  overflow: hidden;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.86), transparent 28%),
    radial-gradient(circle at right, rgba(41, 144, 255, 0.12), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(22, 62, 142, 0.14), transparent 24%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
}

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

button,
input,
select,
textarea,
fieldset {
  border-radius: 14px;
}

.app-shell {
  min-height: 100vh;
  padding: 12px;
}

.app-frame {
  width: 100%;
  min-height: calc(100vh - 24px);
  margin: 0;
  background: var(--panel);
  border: 1px solid rgba(219, 166, 209, 0.78);
  border-radius: 32px;
  box-shadow:
    0 28px 84px var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 0 0 1px rgba(240, 79, 151, 0.05);
  padding: 18px;
  backdrop-filter: blur(14px);
  display: grid;
  grid-template-columns: 68px minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.app-frame.is-sidebar-collapsed {
  grid-template-columns: 68px 0 minmax(0, 1fr);
}

.app-frame.is-rail-hidden {
  grid-template-columns: 0 minmax(220px, 280px) minmax(0, 1fr);
}

.app-frame.is-rail-hidden.is-sidebar-collapsed {
  grid-template-columns: 0 0 minmax(0, 1fr);
}

.app-frame {
  position: relative;
}

.app-rail {
  position: sticky;
  top: 12px;
  z-index: 1700;
  min-height: calc(100vh - 60px);
  padding: 12px 9px;
  border-radius: 28px;
  border: 1px solid rgba(215, 146, 214, 0.82);
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 79, 151, 0.22), transparent 30%),
    radial-gradient(circle at 72% 18%, rgba(123, 92, 255, 0.2), transparent 28%),
    linear-gradient(180deg, #efe6fb 0%, #e5daf7 52%, #dccff3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 22px 40px rgba(92, 69, 140, 0.18);
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  justify-items: center;
  justify-content: center;
  gap: 12px;
}

.app-frame.is-rail-hidden .app-rail {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.app-rail-logo {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: linear-gradient(135deg, #f04f97, #7b5cff);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(145, 73, 192, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.app-rail-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 32px rgba(145, 73, 192, 0.32);
}

.app-rail-nav {
  display: grid;
  gap: 8px;
  width: auto;
  justify-items: center;
  justify-self: center;
  align-content: start;
}

.app-rail-toolbar {
  width: auto;
  display: flex;
  justify-content: center;
  padding-top: 0;
  margin-top: -4px;
  opacity: 0.72;
  transition: opacity 180ms ease;
}

.app-rail-toolbar:hover {
  opacity: 1;
}

.app-rail-footer {
  display: none;
}

.app-sidebar {
  position: sticky;
  top: 12px;
  min-height: calc(100vh - 60px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  gap: 12px;
  padding: 14px;
  border-radius: 26px;
  border: 1px solid rgba(223, 176, 225, 0.78);
  background:
    radial-gradient(circle at 18% 0%, rgba(240, 79, 151, 0.12), transparent 26%),
    radial-gradient(circle at 84% 8%, rgba(123, 92, 255, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(247, 242, 253, 0.99), rgba(239, 232, 249, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 36px rgba(90, 76, 126, 0.1);
}

.app-frame.is-sidebar-collapsed .app-sidebar {
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  min-height: 0;
}

.app-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.sidebar-brand-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  width: 100%;
  border: 1px solid rgba(221, 203, 241, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 242, 255, 0.94));
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.sidebar-brand-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(219, 144, 197, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 26px rgba(126, 74, 140, 0.14);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-header .sidebar-brand-pill {
  flex: 1;
  min-width: 0;
}

.sidebar-footer {
  display: none;
}

.rail-toggle-button,
.rail-restore-button,
.sidebar-collapse-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(168, 177, 199, 0.58);
  background: rgba(255, 255, 255, 0.66);
  color: #47506b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.rail-toggle-button:hover,
.rail-restore-button:hover,
.sidebar-collapse-button:hover {
  transform: translateX(-1px);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(147, 157, 183, 0.76);
}

.rail-restore-button {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 5;
}

.sidebar-brand-pill .auth-logo-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.sidebar-brand-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-brand-meta strong {
  font-size: 0.95rem;
  font-weight: 700;
}

.sidebar-brand-meta span {
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-section-label {
  margin: 8px 8px 2px;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(96, 103, 128, 0.82);
}

.sidebar-groups {
  display: grid;
  gap: 8px;
  align-content: start;
  align-items: start;
}

.sidebar-group {
  display: grid;
  gap: 6px;
  align-self: start;
}

.sidebar-group-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #485067;
}

.sidebar-group.is-open .sidebar-group-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 246, 252, 0.88));
  border-color: rgba(220, 152, 211, 0.52);
}

.sidebar-group-icon {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(230, 234, 246, 0.96), rgba(223, 216, 245, 0.92));
  color: #5b507d;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
}

.icon-svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.sidebar-group-label {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
}

.sidebar-group-caret {
  color: #8a90a6;
  font-size: 0.8rem;
  transition: transform 160ms ease;
}

.sidebar-group.is-open .sidebar-group-caret {
  transform: rotate(0deg);
}

.sidebar-group:not(.is-open) .sidebar-group-caret {
  transform: rotate(-90deg);
}

.sidebar-group-items {
  display: grid;
  gap: 6px;
  padding-left: 8px;
}

.auth-screen {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
}

.auth-screen::before,
.auth-screen::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
  filter: blur(0);
  pointer-events: none;
  z-index: -2;
}

.auth-screen::before {
  width: min(42vw, 620px);
  height: min(42vw, 620px);
  top: -16%;
  right: -12%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 248, 236, 0.92), rgba(255, 248, 236, 0) 34%),
    radial-gradient(circle, rgba(71, 163, 126, 0.18), rgba(71, 163, 126, 0) 72%);
  animation: auth-float 18s ease-in-out infinite alternate;
}

.auth-screen::after {
  width: min(36vw, 460px);
  height: min(36vw, 460px);
  bottom: -14%;
  left: -8%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 246, 224, 0.82), rgba(255, 246, 224, 0) 40%),
    radial-gradient(circle, rgba(30, 106, 82, 0.1), rgba(30, 106, 82, 0) 74%);
  animation: auth-float 22s ease-in-out infinite alternate-reverse;
}

.auth-layout {
  width: min(1540px, 100%);
  min-height: calc(100vh - clamp(36px, 6vw, 68px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(420px, 540px);
  gap: clamp(18px, 2vw, 24px);
}

.auth-showcase,
.auth-card {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(213, 220, 207, 0.75);
  box-shadow: 0 26px 80px var(--shadow-strong);
  backdrop-filter: blur(18px);
}

.auth-showcase {
  background:
    linear-gradient(145deg, rgba(12, 20, 21, 0.98), rgba(17, 32, 31, 0.96) 40%, rgba(20, 61, 48, 0.9)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
  color: var(--ink-inverse);
}

.auth-showcase::before,
.auth-showcase::after,
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-showcase::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(126, 220, 186, 0.12), rgba(126, 220, 186, 0) 26%),
    radial-gradient(circle at 82% 18%, rgba(255, 246, 224, 0.2), rgba(255, 246, 224, 0) 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}

.auth-showcase::after {
  inset: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
}

.auth-showcase-shell {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 30px;
  padding: clamp(28px, 4vw, 46px);
}

.auth-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.auth-brand-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(252, 245, 232, 0.22), rgba(252, 245, 232, 0.08)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff6ea;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-brand-copy {
  display: grid;
  gap: 4px;
}

.auth-brand-copy strong {
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.auth-brand-copy span {
  color: rgba(236, 246, 241, 0.68);
  font-size: 0.92rem;
}

.auth-copy {
  display: grid;
  gap: 18px;
  max-width: 72ch;
}

.auth-showcase .eyebrow {
  margin-bottom: 0;
  color: rgba(236, 246, 241, 0.74);
}

.auth-showcase h1 {
  margin: 0;
  font-size: clamp(3.2rem, 5.6vw, 6rem);
  line-height: 0.9;
  max-width: 11ch;
  letter-spacing: -0.04em;
}

.auth-intro {
  max-width: 58ch;
  color: rgba(236, 246, 241, 0.78);
  font-size: 1.02rem;
  line-height: 1.65;
}

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

.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(245, 252, 249, 0.06);
  color: rgba(245, 252, 249, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.auth-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f5dca7;
  box-shadow: 0 0 0 6px rgba(245, 220, 167, 0.12);
}

.auth-window,
.auth-trust-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-visual-stack {
  display: grid;
  gap: 16px;
  align-self: end;
}

.auth-window {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(250, 247, 241, 0.09), rgba(250, 247, 241, 0.03)),
    rgba(255, 255, 255, 0.02);
}

.auth-window-header {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.auth-window-header span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.auth-window-header span:first-child {
  background: #ffb86c;
}

.auth-window-header span:nth-child(2) {
  background: #ffd86c;
}

.auth-window-header span:nth-child(3) {
  background: #8ad9b3;
}

.auth-window-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auth-window-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-window-card span {
  display: inline-flex;
  align-items: center;
  color: rgba(245, 252, 249, 0.64);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-window-card strong {
  font-size: 1.05rem;
  line-height: 1.3;
}

.auth-window-card p {
  margin: 0;
  color: rgba(236, 246, 241, 0.76);
  line-height: 1.6;
}

.auth-window-card-primary {
  background:
    linear-gradient(180deg, rgba(250, 247, 241, 0.18), rgba(250, 247, 241, 0.08)),
    rgba(255, 255, 255, 0.06);
}

.auth-window-card-primary strong {
  font-size: 1.34rem;
  max-width: 12ch;
}

.auth-window-card-line {
  align-content: start;
}

.auth-window-line-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.auth-window-line-fill {
  width: 76%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f1dcae, #8ad9b3);
}

.auth-quote-card {
  padding: 20px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-quote-card p {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.65;
}

.auth-quote-card span {
  color: rgba(236, 246, 241, 0.7);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-panel {
  display: grid;
  align-items: center;
}

.auth-card {
  width: min(540px, 100%);
  margin-left: auto;
  background:
    linear-gradient(180deg, rgba(252, 249, 244, 0.94), rgba(250, 247, 241, 0.86)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12));
  padding: clamp(26px, 4vw, 38px);
}

.auth-card::before {
  background:
    radial-gradient(circle at top right, rgba(126, 220, 186, 0.12), rgba(126, 220, 186, 0) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.auth-card-topline,
.auth-card-copy,
.auth-trust-row,
.auth-form,
.auth-card .form-error,
.auth-security-note {
  position: relative;
  z-index: 1;
}

.auth-card-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.auth-card-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 75, 59, 0.08);
  color: var(--accent-strong);
  border: 1px solid rgba(20, 75, 59, 0.08);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-card-pill-soft {
  background: rgba(255, 255, 255, 0.72);
}

.auth-card-copy .eyebrow {
  margin-bottom: 12px;
}

.auth-card h2 {
  margin: 0 0 12px;
  font-size: clamp(2.3rem, 3.4vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.auth-card .intro {
  color: var(--muted);
  line-height: 1.65;
}

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

.auth-trust-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(213, 220, 207, 0.92);
}

.auth-trust-card strong {
  font-size: 0.96rem;
}

.auth-trust-card span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 0;
}

.auth-form .field {
  gap: 10px;
}

.auth-form .field > span {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth-form input {
  border-radius: 18px;
  min-height: 58px;
  padding: 15px 16px;
  border-color: rgba(201, 211, 196, 0.98);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.auth-form input::placeholder {
  color: rgba(104, 113, 100, 0.76);
}

.auth-form input:focus {
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 5px rgba(30, 106, 82, 0.09),
    0 18px 42px rgba(30, 106, 82, 0.08);
}

.auth-submit-button {
  min-height: 58px;
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 36px rgba(19, 75, 59, 0.2);
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  padding-right: 104px;
}

.auth-inline-button {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 84px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(19, 75, 59, 0.08);
  color: var(--accent-strong);
  border-color: rgba(19, 75, 59, 0.08);
}

.auth-security-note {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.auth-card .form-error {
  min-height: 1.4rem;
  margin-top: 14px;
  padding-left: 2px;
}

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

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.topbar-shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-shortcut-menu {
  position: relative;
}

.topbar-shortcut-button {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(219, 166, 209, 0.64);
  background: linear-gradient(145deg, rgba(241, 248, 255, 0.98), rgba(239, 226, 251, 0.9));
  color: #5a3f84;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 18px rgba(108, 83, 153, 0.1);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.topbar-shortcut-button .icon-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-shortcut-button:hover {
  transform: translateY(-1px);
  border-color: rgba(195, 129, 211, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 22px rgba(108, 83, 153, 0.14);
}

.topbar-shortcut-button.is-open,
.topbar-shortcut-button.has-unread {
  background: linear-gradient(135deg, rgba(120, 181, 255, 0.95), rgba(128, 82, 233, 0.95));
  color: #ffffff;
  border-color: rgba(136, 82, 233, 0.6);
}

.topbar-runtime-save-button:not([hidden]) {
  background: linear-gradient(135deg, rgba(40, 128, 240, 0.96), rgba(31, 80, 184, 0.96));
  color: #ffffff;
  border-color: rgba(31, 80, 184, 0.5);
}

.topbar-runtime-save-button.is-saving {
  cursor: wait;
  opacity: 0.72;
}

.topbar-runtime-resume-button:not([hidden]) {
  width: auto;
  min-width: 44px;
  padding-inline: 12px;
  gap: 7px;
  background: linear-gradient(135deg, rgba(255, 239, 179, 0.98), rgba(255, 191, 89, 0.98));
  color: #2b210d;
  border-color: rgba(185, 123, 24, 0.38);
  box-shadow: 0 12px 28px rgba(181, 117, 25, 0.18);
}

.topbar-runtime-resume-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.topbar-shortcut-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background: linear-gradient(135deg, #f04f97, #d22f65);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 7px 14px rgba(204, 39, 99, 0.32);
}

.notifications-menu {
  position: relative;
}

.notifications-trigger {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(219, 166, 209, 0.64);
  background: linear-gradient(145deg, rgba(241, 248, 255, 0.98), rgba(239, 226, 251, 0.9));
  color: #5a3f84;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 22px rgba(108, 83, 153, 0.12);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.notifications-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(195, 129, 211, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 26px rgba(108, 83, 153, 0.16);
}

.notifications-trigger.is-open,
.notifications-trigger.has-unread {
  background: linear-gradient(135deg, rgba(120, 181, 255, 0.95), rgba(128, 82, 233, 0.95));
  color: #ffffff;
  border-color: rgba(136, 82, 233, 0.6);
}

.notifications-trigger-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notifications-trigger-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  background: linear-gradient(135deg, #f04f97, #d22f65);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 7px 14px rgba(204, 39, 99, 0.32);
}

.notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(410px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(212, 219, 235, 0.9);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 46px rgba(18, 30, 59, 0.16);
  z-index: 26;
}

.topbar-shortcut-panel {
  width: min(360px, calc(100vw - 28px));
}

.weather-menu {
  position: relative;
}

.weather-trigger {
  width: auto;
  min-width: 44px;
  gap: 5px;
  padding-inline: 9px;
  overflow: hidden;
}

.weather-trigger.has-alert {
  border-color: rgba(230, 126, 34, 0.72);
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(255, 226, 188, 0.94));
  color: #8a4a0a;
}

.weather-trigger-temp {
  color: currentColor;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.weather-mini-icon,
.weather-visual-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}

.weather-mini-icon {
  width: 24px;
  height: 24px;
}

.weather-visual-icon {
  width: 130px;
  height: 104px;
}

.weather-sun,
.weather-moon,
.weather-cloud,
.weather-rain,
.weather-snow,
.weather-bolt,
.weather-fog {
  position: absolute;
  display: block;
}

.weather-sun {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #fff9c7 0 18%, #ffd66b 46%, #f59e0b 100%);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.16), 0 0 18px rgba(245, 158, 11, 0.42);
  animation: weatherSunPulse 2.8s ease-in-out infinite;
}

.weather-moon {
  display: none;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 33%, #ffffff 0 24%, #dbeafe 60%, #93c5fd 100%);
  box-shadow:
    inset -5px 1px 0 rgba(30, 41, 59, 0.14),
    0 0 0 4px rgba(147, 197, 253, 0.14),
    0 0 20px rgba(191, 219, 254, 0.46);
  animation: weatherMoonFloat 3.4s ease-in-out infinite;
}

.weather-cloud {
  width: 23px;
  height: 13px;
  left: 2px;
  bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  box-shadow: 0 5px 12px rgba(69, 97, 137, 0.18);
  animation: weatherCloudDrift 3.6s ease-in-out infinite;
}

.weather-cloud::before,
.weather-cloud::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: inherit;
}

.weather-cloud::before {
  width: 12px;
  height: 12px;
  left: 4px;
  top: -6px;
}

.weather-cloud::after {
  width: 14px;
  height: 14px;
  right: 3px;
  top: -8px;
}

.weather-rain {
  left: 8px;
  bottom: 0;
  width: 2px;
  height: 8px;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 6px -1px 0 #0ea5e9, 12px 1px 0 #7dd3fc;
  transform: rotate(14deg);
  animation: weatherRainDrop 700ms linear infinite;
}

.weather-snow {
  left: 7px;
  bottom: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #e0f2fe;
  box-shadow: 7px -1px 0 #ffffff, 14px 1px 0 #bae6fd;
  animation: weatherSnowFall 1.7s ease-in-out infinite;
}

.weather-bolt {
  right: 3px;
  bottom: -1px;
  width: 9px;
  height: 14px;
  background: linear-gradient(180deg, #fde047, #f97316);
  clip-path: polygon(45% 0, 100% 0, 62% 45%, 100% 45%, 22% 100%, 44% 55%, 0 55%);
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.8));
  animation: weatherBoltFlash 1.1s steps(2, end) infinite;
}

.weather-fog {
  left: 3px;
  bottom: 2px;
  width: 21px;
  height: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.88);
  box-shadow: 0 5px 0 rgba(203, 213, 225, 0.92), 0 10px 0 rgba(148, 163, 184, 0.72);
  animation: weatherFogSlide 2.6s ease-in-out infinite;
}

.weather-mini-icon.is-clear .weather-cloud,
.weather-mini-icon.is-clear .weather-rain,
.weather-mini-icon.is-clear .weather-snow,
.weather-mini-icon.is-clear .weather-bolt,
.weather-mini-icon.is-clear .weather-fog,
.weather-visual-icon.is-clear .weather-cloud,
.weather-visual-icon.is-clear .weather-rain,
.weather-visual-icon.is-clear .weather-snow,
.weather-visual-icon.is-clear .weather-bolt,
.weather-visual-icon.is-clear .weather-fog {
  display: none;
}

.weather-mini-icon.is-night .weather-sun,
.weather-visual-icon.is-night .weather-sun {
  display: none;
}

.weather-mini-icon.is-night .weather-moon,
.weather-visual-icon.is-night .weather-moon {
  display: block;
}

.weather-mini-icon.is-clouds .weather-sun,
.weather-visual-icon.is-clouds .weather-sun {
  transform: translate(-5px, -5px) scale(0.8);
  opacity: 0.72;
}

.weather-mini-icon.is-rain .weather-sun,
.weather-mini-icon.is-rain .weather-snow,
.weather-mini-icon.is-rain .weather-bolt,
.weather-mini-icon.is-rain .weather-fog,
.weather-visual-icon.is-rain .weather-sun,
.weather-visual-icon.is-rain .weather-snow,
.weather-visual-icon.is-rain .weather-bolt,
.weather-visual-icon.is-rain .weather-fog {
  display: none;
}

.weather-mini-icon.is-thunderstorm .weather-sun,
.weather-mini-icon.is-thunderstorm .weather-snow,
.weather-mini-icon.is-thunderstorm .weather-fog,
.weather-visual-icon.is-thunderstorm .weather-sun,
.weather-visual-icon.is-thunderstorm .weather-snow,
.weather-visual-icon.is-thunderstorm .weather-fog {
  display: none;
}

.weather-mini-icon.is-snow .weather-sun,
.weather-mini-icon.is-snow .weather-rain,
.weather-mini-icon.is-snow .weather-bolt,
.weather-mini-icon.is-snow .weather-fog,
.weather-visual-icon.is-snow .weather-sun,
.weather-visual-icon.is-snow .weather-rain,
.weather-visual-icon.is-snow .weather-bolt,
.weather-visual-icon.is-snow .weather-fog {
  display: none;
}

.weather-mini-icon.is-fog .weather-sun,
.weather-mini-icon.is-fog .weather-rain,
.weather-mini-icon.is-fog .weather-snow,
.weather-mini-icon.is-fog .weather-bolt,
.weather-visual-icon.is-fog .weather-sun,
.weather-visual-icon.is-fog .weather-rain,
.weather-visual-icon.is-fog .weather-snow,
.weather-visual-icon.is-fog .weather-bolt {
  display: none;
}

.weather-visual-icon .weather-sun {
  width: 50px;
  height: 50px;
}

.weather-visual-icon .weather-moon {
  width: 50px;
  height: 50px;
}

.weather-visual-icon .weather-cloud {
  width: 92px;
  height: 42px;
  left: 18px;
  bottom: 28px;
}

.weather-visual-icon .weather-cloud::before {
  width: 46px;
  height: 46px;
  left: 18px;
  top: -24px;
}

.weather-visual-icon .weather-cloud::after {
  width: 54px;
  height: 54px;
  right: 12px;
  top: -31px;
}

.weather-visual-icon .weather-rain {
  left: 39px;
  bottom: 9px;
  width: 4px;
  height: 22px;
  box-shadow: 18px -2px 0 #0ea5e9, 36px 2px 0 #7dd3fc;
}

.weather-visual-icon .weather-snow {
  left: 35px;
  bottom: 11px;
  width: 8px;
  height: 8px;
  box-shadow: 20px -2px 0 #ffffff, 40px 3px 0 #bae6fd;
}

.weather-visual-icon .weather-bolt {
  right: 22px;
  bottom: 6px;
  width: 28px;
  height: 42px;
}

.weather-visual-icon .weather-fog {
  left: 22px;
  bottom: 20px;
  width: 88px;
  height: 4px;
  box-shadow: 0 12px 0 rgba(203, 213, 225, 0.92), 0 24px 0 rgba(148, 163, 184, 0.72);
}

.weather-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(640px, calc(100vw - 28px));
  max-height: min(78vh, 760px);
  display: grid;
  gap: 12px;
  overflow-y: auto;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(188, 205, 231, 0.92);
  background:
    radial-gradient(circle at 12% 8%, rgba(125, 211, 252, 0.28), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 255, 0.97));
  box-shadow: 0 26px 58px rgba(25, 42, 72, 0.18);
  z-index: 28;
}

.weather-panel-head,
.weather-city-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weather-city-toolbar {
  position: relative;
  z-index: 18;
}

.weather-panel-head strong {
  display: block;
  color: #172033;
  font-size: 0.98rem;
}

.weather-panel-head span,
.weather-city-limit {
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.35;
}

.weather-icon-button,
.weather-add-button,
.weather-city-chip,
.weather-remove-city {
  border: 1px solid rgba(190, 205, 231, 0.88);
  background: rgba(255, 255, 255, 0.88);
  color: #24456f;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.weather-icon-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  line-height: 1;
}

.weather-icon-button .icon-svg {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weather-icon-button:hover,
.weather-add-button:hover,
.weather-city-chip:hover,
.weather-remove-city:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.48);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
}

.weather-hero {
  min-height: 214px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(188, 205, 231, 0.78);
  background:
    linear-gradient(135deg, rgba(20, 67, 116, 0.94), rgba(84, 140, 173, 0.84)),
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.24), transparent 42%);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.weather-hero.is-clear {
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 240, 165, 0.74), transparent 30%),
    linear-gradient(135deg, #2563eb, #38bdf8 58%, #f7c95f);
}

.weather-hero.is-rain,
.weather-hero.is-thunderstorm {
  background:
    radial-gradient(circle at 18% 8%, rgba(203, 213, 225, 0.28), transparent 30%),
    linear-gradient(135deg, #23364f, #3b536d 58%, #0f172a);
}

.weather-hero.is-snow {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.74), transparent 32%),
    linear-gradient(135deg, #4f8fb8, #b9e5f8);
}

.weather-hero.is-fog,
.weather-hero.is-clouds {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.4), transparent 34%),
    linear-gradient(135deg, #63758f, #9db0c5);
}

.weather-hero-copy {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-width: 0;
}

.weather-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 700;
}

.weather-location::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.weather-description {
  display: grid;
  gap: 7px;
}

.weather-description span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
}

.weather-description strong {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.02;
}

.weather-description p {
  margin: 0;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  line-height: 1.45;
}

.weather-current-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.weather-current-metrics span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.7rem;
  font-weight: 700;
}

.weather-temp-block {
  min-width: 145px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
}

.weather-temp-value {
  font-size: clamp(2.85rem, 4.2vw, 4rem);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: 0;
}

.weather-feels {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
}

.weather-city-form {
  min-width: min(100%, 360px);
  display: flex;
  gap: 8px;
}

.weather-city-form input {
  min-width: 0;
  flex: 1;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(196, 211, 236, 0.92);
  background: rgba(255, 255, 255, 0.94);
  color: #172033;
  padding: 0 12px;
  outline: none;
}

.weather-city-form input:focus {
  border-color: rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.weather-add-button {
  height: 38px;
  padding: 0 13px;
  border-radius: 14px;
  font-weight: 800;
}

.weather-city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.weather-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 9px 0 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}

.weather-city-chip.is-active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.92));
  border-color: rgba(37, 99, 235, 0.32);
  color: #ffffff;
}

.weather-remove-city {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: inherit;
  font-size: 0.7rem;
  line-height: 1;
}

.weather-alerts,
.weather-forecast {
  display: grid;
  gap: 8px;
}

.weather-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  border-radius: 16px;
  border: 1px solid rgba(240, 177, 91, 0.42);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 237, 213, 0.96));
  color: #7c3f04;
}

.weather-alert.is-danger {
  border-color: rgba(239, 68, 68, 0.34);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 228, 230, 0.96));
  color: #991b1b;
}

.weather-alert-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.weather-alert-copy {
  display: grid;
  gap: 2px;
}

.weather-alert-copy strong {
  font-size: 0.82rem;
}

.weather-alert-copy span {
  color: currentColor;
  opacity: 0.78;
  font-size: 0.73rem;
  line-height: 1.35;
}

.weather-forecast-title {
  color: #172033;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weather-forecast-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.9fr) auto minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(208, 220, 240, 0.88);
  background: rgba(255, 255, 255, 0.76);
}

.weather-forecast-row strong {
  color: #172033;
  font-size: 0.82rem;
}

.weather-forecast-row span {
  color: #64748b;
  font-size: 0.74rem;
}

.weather-forecast-temp {
  color: #1d4ed8;
  font-weight: 900;
}

.weather-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, 0.22);
  background: rgba(254, 242, 242, 0.94);
  color: #991b1b;
  font-size: 0.76rem;
}

.weather-loading {
  min-height: 112px;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.82rem;
}

.weather-trigger {
  min-width: 52px;
  height: 38px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.88)),
    radial-gradient(circle at 15% 10%, rgba(255, 213, 122, 0.34), transparent 42%);
  box-shadow: 0 10px 24px rgba(25, 67, 116, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.weather-trigger:has(.weather-mini-icon.is-night) {
  background:
    radial-gradient(circle at 22% 18%, rgba(191, 219, 254, 0.26), transparent 42%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
  color: #eaf4ff;
  border-color: rgba(147, 197, 253, 0.34);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.weather-trigger.is-open,
.weather-trigger:hover {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.9)),
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.55), transparent 42%);
  border-color: rgba(37, 99, 235, 0.35);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.weather-trigger.is-open:has(.weather-mini-icon.is-night),
.weather-trigger:hover:has(.weather-mini-icon.is-night) {
  background:
    radial-gradient(circle at 24% 16%, rgba(219, 234, 254, 0.32), transparent 44%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 58, 138, 0.94));
  border-color: rgba(147, 197, 253, 0.42);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.weather-trigger.is-loading .weather-mini-icon {
  animation: weatherTriggerBreath 1s ease-in-out infinite;
}

.weather-panel {
  width: min(980px, calc(100vw - 28px));
  max-height: none;
  gap: 9px;
  overflow: visible;
  padding: 12px;
  border-radius: 24px;
  border-color: rgba(178, 202, 236, 0.92);
  background:
    radial-gradient(circle at 9% 6%, rgba(125, 211, 252, 0.3), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(252, 211, 77, 0.2), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 246, 255, 0.96) 62%, rgba(249, 250, 255, 0.98));
  box-shadow: 0 34px 80px rgba(15, 32, 64, 0.2), 0 4px 22px rgba(37, 99, 235, 0.08);
  backdrop-filter: blur(18px);
}

.weather-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), transparent 24%);
}

.weather-panel > * {
  position: relative;
  z-index: 1;
}

.weather-panel .weather-city-toolbar {
  position: relative;
  z-index: 70;
}

.weather-panel .weather-city-form,
.weather-panel .weather-city-search {
  position: relative;
  z-index: 80;
}

.weather-panel-head {
  padding: 0 2px;
}

.weather-panel-head strong {
  font-size: 1.08rem;
  letter-spacing: 0;
}

.weather-panel-head span {
  color: #5f718e;
  font-weight: 650;
}

.weather-icon-button {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(31, 62, 111, 0.1);
}

.weather-hero {
  min-height: 154px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 28px rgba(15, 23, 42, 0.12);
}

.weather-hero::before,
.weather-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.weather-hero::before {
  width: 170px;
  height: 170px;
  right: -54px;
  top: -70px;
  background: rgba(255, 255, 255, 0.16);
  filter: blur(2px);
}

.weather-hero::after {
  width: 120px;
  height: 120px;
  left: -58px;
  bottom: -74px;
  background: rgba(255, 255, 255, 0.12);
}

.weather-hero-copy,
.weather-temp-block {
  position: relative;
  z-index: 1;
}

.weather-description strong {
  max-width: 26rem;
  font-size: clamp(1.35rem, 2vw, 2rem);
  text-wrap: balance;
}

.weather-description p {
  max-width: 41rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.36;
}

.weather-current-metrics span {
  backdrop-filter: blur(10px);
}

.weather-city-form {
  position: relative;
  z-index: 10110;
  align-items: stretch;
}

.weather-city-search {
  position: relative;
  z-index: 10111;
  flex: 1;
  min-width: min(100%, 360px);
}

.weather-city-form input {
  width: 100%;
  height: 36px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.weather-add-button {
  height: 36px;
  border-radius: 14px;
  color: #0f3a78;
  background: linear-gradient(180deg, #ffffff, #eef6ff);
}

.weather-city-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  max-height: 252px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(185, 205, 236, 0.92);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 44px rgba(23, 42, 76, 0.18);
  z-index: 10120;
}

.weather-city-suggestion {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #16243a;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.weather-city-suggestion:hover,
.weather-city-suggestion:focus-visible {
  border-color: rgba(59, 130, 246, 0.34);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(248, 250, 252, 0.96));
  transform: translateY(-1px);
  outline: none;
}

.weather-city-suggestion strong {
  min-width: 0;
  overflow: hidden;
  color: #14223c;
  font-size: 0.83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weather-city-suggestion span {
  grid-column: 1;
  color: #64748b;
  font-size: 0.72rem;
}

.weather-city-suggestion small {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 900;
}

.weather-city-suggestion-empty {
  padding: 11px 12px;
  color: #64748b;
  font-size: 0.78rem;
}

.weather-city-list {
  gap: 6px;
}

.weather-city-chip {
  min-height: 30px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 18px rgba(31, 62, 111, 0.08);
}

.weather-city-chip.is-active {
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
}

.weather-alert {
  box-shadow: 0 12px 24px rgba(180, 83, 9, 0.08);
}

.weather-forecast {
  gap: 7px;
  min-width: 0;
}

.weather-forecast-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.weather-forecast-head span {
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 650;
}

.weather-forecast-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 8px;
  overflow: visible;
  padding: 1px;
}

.weather-forecast-card {
  min-height: 108px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  justify-items: start;
  gap: 4px 8px;
  padding: 8px 9px;
  border-radius: 16px;
  border: 1px solid rgba(205, 219, 239, 0.9);
  background:
    radial-gradient(circle at 78% 8%, rgba(125, 211, 252, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
  box-shadow: 0 14px 28px rgba(31, 62, 111, 0.08);
}

.weather-forecast-card.is-next {
  border-color: rgba(37, 99, 235, 0.34);
  background:
    radial-gradient(circle at 82% 10%, rgba(252, 211, 77, 0.32), transparent 34%),
    linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.weather-forecast-card .weather-mini-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  margin-top: 0;
}

.weather-forecast-day {
  grid-column: 2;
  color: #64748b;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.weather-forecast-hour {
  color: #14223c;
  font-size: 1rem;
  line-height: 1;
}

.weather-daily-temps {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.weather-daily-temp-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.62);
  color: #1e3a5f;
  white-space: nowrap;
}

.weather-daily-temp-label {
  color: #64748b;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.weather-daily-temp-value {
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.weather-forecast-description {
  grid-column: 1 / -1;
  min-height: 18px;
  color: #475569;
  font-size: 0.66rem;
  line-height: 1.15;
}

.weather-forecast-card .weather-forecast-temp {
  color: #1d4ed8;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.weather-forecast-wind {
  grid-column: 1 / -1;
  margin-top: auto;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.7);
  color: #52627a;
  font-size: 0.59rem;
  font-weight: 800;
}

.weather-mini-icon,
.weather-visual-icon {
  overflow: visible;
  transform: translateZ(0);
}

.weather-visual-icon {
  width: 168px;
  height: 132px;
  filter: drop-shadow(0 20px 32px rgba(4, 18, 38, 0.22));
}

.weather-hero .weather-visual-icon {
  width: 108px;
  height: 86px;
  filter: drop-shadow(0 14px 24px rgba(4, 18, 38, 0.2));
}

.weather-halo,
.weather-rays,
.weather-moon,
.weather-wind,
.weather-sparkle {
  position: absolute;
  display: block;
  pointer-events: none;
}

.weather-halo {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.64) 0 24%, rgba(255, 219, 107, 0.34) 38%, transparent 72%);
  opacity: 0.88;
  animation: weatherHaloBreathe 3.4s ease-in-out infinite;
}

.weather-rays {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 232, 129, 0.96) 0 9deg, transparent 9deg 23deg);
  opacity: 0.78;
  -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 43% 100%);
  mask: radial-gradient(circle, transparent 0 42%, #000 43% 100%);
  animation: weatherRaysSpin 14s linear infinite;
}

.weather-sun {
  left: var(--weather-sun-left, 50%);
  top: var(--weather-sun-top, 50%);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 31%, #fffbe8 0 17%, #ffe58f 34%, #fbbf24 63%, #f97316 100%);
  box-shadow:
    0 0 0 4px rgba(251, 191, 36, 0.18),
    0 0 24px rgba(251, 191, 36, 0.58),
    inset -3px -5px 10px rgba(180, 83, 9, 0.18);
}

.weather-moon {
  left: var(--weather-moon-left, 50%);
  top: var(--weather-moon-top, 50%);
  display: none;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 34% 30%, #ffffff 0 18%, #dbeafe 52%, #93c5fd 100%);
  box-shadow:
    inset -9px 2px 0 rgba(15, 23, 42, 0.18),
    0 0 0 6px rgba(147, 197, 253, 0.12),
    0 0 28px rgba(191, 219, 254, 0.62);
  animation: weatherMoonFloat 3.6s ease-in-out infinite;
}

.weather-cloud {
  background:
    radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 42%, transparent 43%),
    linear-gradient(180deg, #ffffff, #d9eaff 64%, #b9d4f4);
  box-shadow:
    0 6px 16px rgba(48, 75, 112, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.weather-rain {
  background: linear-gradient(180deg, #a7f3ff, #0ea5e9);
  box-shadow:
    6px -1px 0 #38bdf8,
    12px 1px 0 #7dd3fc,
    18px -2px 0 rgba(14, 165, 233, 0.82);
  animation: weatherRainDrop 620ms linear infinite;
}

.weather-snow {
  background: #f8fbff;
  box-shadow:
    7px -1px 0 #ffffff,
    14px 1px 0 #bae6fd,
    19px -3px 0 rgba(255, 255, 255, 0.82);
  animation: weatherSnowFall 1.45s ease-in-out infinite;
}

.weather-bolt {
  background: linear-gradient(180deg, #fff7ad, #facc15 42%, #f97316 100%);
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 10px rgba(250, 204, 21, 0.92));
}

.weather-fog {
  background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.92), transparent);
  box-shadow:
    0 5px 0 rgba(203, 213, 225, 0.92),
    0 10px 0 rgba(148, 163, 184, 0.74),
    0 15px 0 rgba(226, 232, 240, 0.52);
}

.weather-wind {
  left: 2px;
  bottom: 2px;
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.92), transparent);
  box-shadow:
    7px 5px 0 rgba(186, 230, 253, 0.72),
    -2px 10px 0 rgba(147, 197, 253, 0.58);
  transform: skewX(-18deg);
  animation: weatherWindSweep 1.25s ease-in-out infinite;
}

.weather-sparkle {
  right: 3px;
  top: 4px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    -13px 3px 0 rgba(255, 255, 255, 0.78),
    -5px 16px 0 rgba(255, 255, 255, 0.64),
    8px 13px 0 rgba(252, 211, 77, 0.78);
  animation: weatherSparkleBlink 1.85s ease-in-out infinite;
}

.weather-mini-icon .weather-halo,
.weather-mini-icon .weather-rays {
  left: -4px;
  top: -5px;
}

.weather-visual-icon .weather-halo {
  width: 142px;
  height: 142px;
  left: 14px;
  top: -6px;
}

.weather-hero .weather-visual-icon .weather-halo {
  width: 96px;
  height: 96px;
  left: 8px;
  top: -3px;
}

.weather-visual-icon .weather-rays {
  width: 120px;
  height: 120px;
  left: 24px;
  top: 4px;
}

.weather-hero .weather-visual-icon .weather-rays {
  width: 82px;
  height: 82px;
  left: 15px;
  top: 5px;
}

.weather-visual-icon .weather-sun {
  width: 62px;
  height: 62px;
}

.weather-visual-icon .weather-moon {
  width: 62px;
  height: 62px;
}

.weather-hero .weather-visual-icon .weather-sun,
.weather-hero .weather-visual-icon .weather-moon {
  width: 46px;
  height: 46px;
}

.weather-visual-icon .weather-cloud {
  width: 108px;
  height: 48px;
  left: 30px;
  bottom: 31px;
}

.weather-hero .weather-visual-icon .weather-cloud {
  width: 76px;
  height: 34px;
  left: 18px;
  bottom: 21px;
}

.weather-visual-icon .weather-cloud::before {
  width: 54px;
  height: 54px;
  left: 20px;
  top: -29px;
}

.weather-hero .weather-visual-icon .weather-cloud::before {
  width: 38px;
  height: 38px;
  left: 14px;
  top: -20px;
}

.weather-visual-icon .weather-cloud::after {
  width: 62px;
  height: 62px;
  right: 10px;
  top: -36px;
}

.weather-hero .weather-visual-icon .weather-cloud::after {
  width: 43px;
  height: 43px;
  right: 8px;
  top: -25px;
}

.weather-visual-icon .weather-rain {
  left: 46px;
  bottom: 9px;
  width: 5px;
  height: 28px;
  box-shadow:
    20px -3px 0 #38bdf8,
    40px 2px 0 #7dd3fc,
    60px -5px 0 rgba(14, 165, 233, 0.82);
}

.weather-hero .weather-visual-icon .weather-rain {
  left: 31px;
  bottom: 6px;
  height: 19px;
  box-shadow:
    14px -2px 0 #38bdf8,
    28px 1px 0 #7dd3fc,
    42px -3px 0 rgba(14, 165, 233, 0.82);
}

.weather-visual-icon .weather-snow {
  left: 42px;
  bottom: 14px;
  width: 9px;
  height: 9px;
  box-shadow:
    22px -3px 0 #ffffff,
    45px 4px 0 #bae6fd,
    66px -5px 0 rgba(255, 255, 255, 0.86);
}

.weather-hero .weather-visual-icon .weather-snow {
  left: 29px;
  bottom: 9px;
  width: 7px;
  height: 7px;
  box-shadow:
    16px -2px 0 #ffffff,
    32px 3px 0 #bae6fd,
    48px -4px 0 rgba(255, 255, 255, 0.86);
}

.weather-visual-icon .weather-bolt {
  right: 28px;
  bottom: 8px;
  width: 32px;
  height: 50px;
}

.weather-hero .weather-visual-icon .weather-bolt {
  right: 20px;
  bottom: 5px;
  width: 24px;
  height: 36px;
}

.weather-visual-icon .weather-fog {
  left: 30px;
  bottom: 22px;
  width: 104px;
  height: 4px;
  box-shadow:
    0 13px 0 rgba(203, 213, 225, 0.92),
    0 26px 0 rgba(148, 163, 184, 0.72),
    0 39px 0 rgba(226, 232, 240, 0.52);
}

.weather-hero .weather-visual-icon .weather-fog {
  left: 20px;
  bottom: 16px;
  width: 72px;
  height: 3px;
  box-shadow:
    0 10px 0 rgba(203, 213, 225, 0.92),
    0 20px 0 rgba(148, 163, 184, 0.72),
    0 30px 0 rgba(226, 232, 240, 0.52);
}

.weather-visual-icon .weather-wind {
  left: 29px;
  bottom: 17px;
  width: 102px;
  height: 4px;
  box-shadow:
    24px 13px 0 rgba(186, 230, 253, 0.72),
    -11px 27px 0 rgba(147, 197, 253, 0.58);
}

.weather-visual-icon .weather-sparkle {
  right: 20px;
  top: 18px;
  width: 8px;
  height: 8px;
  box-shadow:
    -42px -3px 0 rgba(255, 255, 255, 0.78),
    -22px 48px 0 rgba(255, 255, 255, 0.64),
    15px 55px 0 rgba(252, 211, 77, 0.78);
}

:is(.weather-mini-icon, .weather-visual-icon).is-clear .weather-cloud,
:is(.weather-mini-icon, .weather-visual-icon).is-clear .weather-rain,
:is(.weather-mini-icon, .weather-visual-icon).is-clear .weather-snow,
:is(.weather-mini-icon, .weather-visual-icon).is-clear .weather-bolt,
:is(.weather-mini-icon, .weather-visual-icon).is-clear .weather-fog,
:is(.weather-mini-icon, .weather-visual-icon).is-clear .weather-wind {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon):not(.is-night) .weather-moon {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-night .weather-sun,
:is(.weather-mini-icon, .weather-visual-icon).is-night .weather-halo,
:is(.weather-mini-icon, .weather-visual-icon).is-night .weather-rays {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-night .weather-moon,
:is(.weather-mini-icon, .weather-visual-icon).is-night .weather-sparkle {
  display: block;
}

:is(.weather-mini-icon, .weather-visual-icon).is-night.is-rain .weather-moon,
:is(.weather-mini-icon, .weather-visual-icon).is-night.is-thunderstorm .weather-moon,
:is(.weather-mini-icon, .weather-visual-icon).is-night.is-snow .weather-moon,
:is(.weather-mini-icon, .weather-visual-icon).is-night.is-fog .weather-moon {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-rain,
:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-snow,
:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-bolt,
:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-fog,
:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-wind,
:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-sparkle {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-sun {
  --weather-sun-left: 34%;
  --weather-sun-top: 33%;
  opacity: 0.68;
}

:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-rays,
:is(.weather-mini-icon, .weather-visual-icon).is-clouds .weather-halo {
  opacity: 0.28;
}

:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-sun,
:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-halo,
:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-rays,
:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-snow,
:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-bolt,
:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-fog,
:is(.weather-mini-icon, .weather-visual-icon).is-rain .weather-sparkle {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-thunderstorm .weather-sun,
:is(.weather-mini-icon, .weather-visual-icon).is-thunderstorm .weather-halo,
:is(.weather-mini-icon, .weather-visual-icon).is-thunderstorm .weather-rays,
:is(.weather-mini-icon, .weather-visual-icon).is-thunderstorm .weather-snow,
:is(.weather-mini-icon, .weather-visual-icon).is-thunderstorm .weather-fog {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-thunderstorm .weather-cloud {
  background:
    radial-gradient(circle at 28% 10%, rgba(226, 232, 240, 0.94), rgba(148, 163, 184, 0.86) 42%, transparent 43%),
    linear-gradient(180deg, #cbd5e1, #64748b 72%, #334155);
}

:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-sun,
:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-halo,
:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-rays,
:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-rain,
:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-bolt,
:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-fog {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-snow .weather-cloud {
  background:
    radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.92) 42%, transparent 43%),
    linear-gradient(180deg, #ffffff, #e0f2fe 72%, #bfdbfe);
}

:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-sun,
:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-halo,
:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-rays,
:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-rain,
:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-snow,
:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-bolt,
:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-sparkle {
  display: none;
}

:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-cloud {
  opacity: 0.72;
}

:is(.weather-mini-icon, .weather-visual-icon).is-fog .weather-wind {
  background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.9), transparent);
  box-shadow:
    7px 5px 0 rgba(203, 213, 225, 0.62),
    -2px 10px 0 rgba(148, 163, 184, 0.52);
}

.weather-trigger {
  position: relative;
}

.weather-trigger::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), transparent 56%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.weather-trigger:hover::after,
.weather-trigger.is-open::after {
  opacity: 1;
}

.weather-hero {
  position: relative;
  background-size: 160% 160%;
  animation: weatherHeroAtmosphere 11s ease-in-out infinite;
}

.weather-hero.is-clear {
  background:
    radial-gradient(ellipse at 24% 8%, rgba(255, 245, 190, 0.78), transparent 26%),
    linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 52%, #f8c35a 100%);
}

.weather-hero.is-rain {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #162235 0%, #2f4c67 55%, #0f172a 100%);
}

.weather-hero.is-thunderstorm {
  background:
    radial-gradient(ellipse at 72% 14%, rgba(250, 204, 21, 0.24), transparent 22%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #101827 0%, #27364d 50%, #050816 100%);
}

.weather-hero.is-snow {
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255, 255, 255, 0.78), transparent 30%),
    linear-gradient(135deg, #2f7da6 0%, #91d5f5 58%, #f8fbff 100%);
}

.weather-hero.is-clouds,
.weather-hero.is-fog {
  background:
    linear-gradient(135deg, #566982 0%, #91a5bd 55%, #d7e1ec 100%);
}

.weather-hero.is-night {
  border-color: rgba(147, 197, 253, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 46px rgba(8, 13, 29, 0.22);
}

.weather-hero.is-clear.is-night {
  background:
    radial-gradient(circle at 74% 14%, rgba(226, 232, 240, 0.76) 0 4%, rgba(147, 197, 253, 0.18) 5%, transparent 19%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 34%, rgba(191, 219, 254, 0.72) 0 1px, transparent 2px),
    linear-gradient(135deg, #050816 0%, #111f3d 52%, #1e3a8a 100%);
}

.weather-hero.is-clouds.is-night,
.weather-hero.is-fog.is-night {
  background:
    radial-gradient(circle at 78% 10%, rgba(191, 219, 254, 0.18), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 54%, #334155 100%);
}

.weather-hero.is-snow.is-night {
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.42), transparent 31%),
    linear-gradient(135deg, #10233d 0%, #24527a 58%, #dbeafe 100%);
}

.weather-hero.is-rain::after,
.weather-hero.is-thunderstorm::after {
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(108deg, transparent 0 14px, rgba(186, 230, 253, 0.2) 14px 16px, transparent 16px 30px);
  animation: weatherHeroRain 820ms linear infinite;
}

.weather-hero.is-snow::after {
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 36%, rgba(255, 255, 255, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.64) 0 1px, transparent 2px);
  background-size: 90px 90px, 120px 120px, 140px 140px;
  animation: weatherHeroSnow 5.4s linear infinite;
}

.weather-hero.is-clear.is-night::after {
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  bottom: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 30%, rgba(191, 219, 254, 0.48) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 64%, rgba(255, 255, 255, 0.42) 0 1px, transparent 2px);
  background-size: 120px 96px, 150px 130px, 190px 160px;
  animation: weatherHeroStars 7s ease-in-out infinite alternate;
}

.weather-temp-block {
  min-width: 146px;
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
}

.weather-forecast-card {
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.weather-forecast-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 42%);
  opacity: 0.72;
}

.weather-forecast-card > * {
  position: relative;
  z-index: 1;
}

.weather-forecast-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 18px 34px rgba(31, 62, 111, 0.13);
}

.weather-forecast-card.is-rain,
.weather-forecast-card.is-thunderstorm {
  color: #eaf6ff;
  border-color: rgba(148, 163, 184, 0.5);
  background:
    radial-gradient(circle at 78% 8%, rgba(125, 211, 252, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(51, 65, 85, 0.98), rgba(15, 23, 42, 0.96));
}

.weather-forecast-card.is-rain .weather-forecast-day,
.weather-forecast-card.is-rain .weather-forecast-description,
.weather-forecast-card.is-rain .weather-forecast-wind,
.weather-forecast-card.is-thunderstorm .weather-forecast-day,
.weather-forecast-card.is-thunderstorm .weather-forecast-description,
.weather-forecast-card.is-thunderstorm .weather-forecast-wind {
  color: rgba(234, 246, 255, 0.78);
}

.weather-forecast-card.is-rain .weather-forecast-hour,
.weather-forecast-card.is-thunderstorm .weather-forecast-hour {
  color: #ffffff;
}

.weather-forecast-card.is-snow {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.54), transparent 34%),
    linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(224, 242, 254, 0.94));
}

.weather-forecast-card.is-fog,
.weather-forecast-card.is-clouds {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.94));
}

.weather-forecast-card.is-night {
  color: #eaf4ff;
  border-color: rgba(147, 197, 253, 0.26);
  background:
    radial-gradient(circle at 76% 8%, rgba(191, 219, 254, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96));
}

.weather-forecast-card.is-night::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 44%);
}

.weather-forecast-card.is-night .weather-forecast-day,
.weather-forecast-card.is-night .weather-forecast-description,
.weather-forecast-card.is-night .weather-forecast-wind {
  color: rgba(234, 244, 255, 0.72);
}

.weather-forecast-card.is-night .weather-forecast-hour,
.weather-forecast-card.is-night .weather-forecast-temp {
  color: #ffffff;
}

@keyframes weatherSunPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: saturate(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); filter: saturate(1.2); }
}

@keyframes weatherMoonFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); filter: saturate(0.96); }
  50% { transform: translate(-50%, -50%) translateY(-2px) scale(1.04); filter: saturate(1.08); }
}

@keyframes weatherHaloBreathe {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.12); opacity: 0.92; }
}

@keyframes weatherRaysSpin {
  to { transform: rotate(360deg); }
}

@keyframes weatherTriggerBreath {
  0%, 100% { opacity: 0.68; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes weatherCloudDrift {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(3px); }
}

@keyframes weatherRainDrop {
  0% { opacity: 0; transform: translateY(-4px) rotate(14deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px) rotate(14deg); }
}

@keyframes weatherSnowFall {
  0%, 100% { opacity: 0.62; transform: translateY(-3px); }
  50% { opacity: 1; transform: translateY(7px); }
}

@keyframes weatherBoltFlash {
  0%, 100% { opacity: 0.42; }
  45%, 55% { opacity: 1; }
}

@keyframes weatherFogSlide {
  0%, 100% { transform: translateX(-3px); opacity: 0.68; }
  50% { transform: translateX(5px); opacity: 1; }
}

@keyframes weatherWindSweep {
  0%, 100% { opacity: 0.42; transform: translateX(-4px) skewX(-18deg); }
  50% { opacity: 1; transform: translateX(7px) skewX(-18deg); }
}

@keyframes weatherSparkleBlink {
  0%, 100% { opacity: 0.28; transform: scale(0.86); }
  45%, 55% { opacity: 1; transform: scale(1.18); }
}

@keyframes weatherHeroAtmosphere {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes weatherHeroRain {
  to { background-position: 0 42px; }
}

@keyframes weatherHeroSnow {
  to { background-position: 0 120px, 0 150px, 0 180px; }
}

@keyframes weatherHeroStars {
  from { opacity: 0.52; transform: translateY(0); }
  to { opacity: 0.92; transform: translateY(4px); }
}

.topbar-help-panel {
  width: min(420px, calc(100vw - 28px));
  gap: 12px;
}

.topbar-help-panel-head {
  display: grid;
  gap: 3px;
  padding: 2px 2px 6px;
}

.topbar-help-panel-head strong {
  color: #1f2940;
  font-size: 0.92rem;
}

.topbar-help-panel-head span {
  color: #6f7a92;
  font-size: 0.76rem;
}

.topbar-help-options {
  display: grid;
  gap: 12px;
  max-height: min(58vh, 460px);
  overflow-y: auto;
  padding-right: 2px;
}

.topbar-help-group {
  display: grid;
  gap: 7px;
}

.topbar-help-group-title {
  color: #7c879d;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-help-group-list {
  display: grid;
  gap: 7px;
}

.topbar-help-option {
  width: 100%;
  border: 1px solid rgba(212, 219, 235, 0.9);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.96);
  color: #1f2940;
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.topbar-help-option:hover {
  border-color: rgba(120, 181, 255, 0.78);
  background: rgba(241, 247, 255, 0.98);
  transform: translateY(-1px);
}

.topbar-help-option strong {
  font-size: 0.84rem;
  line-height: 1.2;
}

.topbar-help-option span {
  color: #6f7a92;
  font-size: 0.74rem;
  line-height: 1.35;
}

.topbar-help-option[hidden] {
  display: none;
}

.topbar-help-empty {
  margin: 0;
  color: #6f7a92;
  font-size: 0.82rem;
  line-height: 1.4;
}

.topbar-shortcut-preview-row {
  width: 100%;
  border: 1px solid rgba(212, 219, 235, 0.88);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.95);
  padding: 9px 10px;
  display: grid;
  gap: 5px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.topbar-shortcut-preview-row:hover {
  border-color: rgba(188, 141, 230, 0.68);
  background: rgba(244, 236, 255, 0.92);
  transform: translateY(-1px);
}

.topbar-shortcut-preview-copy {
  display: grid;
  gap: 2px;
}

.topbar-shortcut-preview-copy strong {
  font-size: 0.85rem;
  color: #1f2940;
}

.topbar-shortcut-preview-copy span {
  font-size: 0.75rem;
  color: #6f7a92;
}

.topbar-shortcut-preview-meta {
  font-size: 0.72rem;
  color: #4f5c78;
  font-weight: 600;
}

body.is-app-capabilities-open {
  overflow: hidden;
}

.app-capabilities-modal {
  position: fixed;
  inset: 0;
  z-index: 48;
}

.app-capabilities-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(16, 25, 52, 0.42);
  cursor: pointer;
}

.app-capabilities-dialog {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100vw - 40px));
  height: calc(100dvh - 36px);
  max-height: calc(100dvh - 36px);
  margin: 18px auto;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(197, 170, 223, 0.42);
  background:
    radial-gradient(circle at top right, rgba(174, 128, 255, 0.14), transparent 30%),
    radial-gradient(circle at top left, rgba(101, 173, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 255, 0.98));
  box-shadow: 0 22px 46px rgba(22, 35, 68, 0.22);
  contain: layout paint;
  overflow: hidden;
}

.app-capabilities-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.app-capabilities-copy {
  display: grid;
  gap: 4px;
}

.app-capabilities-copy h3 {
  margin: 0;
}

.app-capabilities-copy .helper-copy {
  margin: 0;
  max-width: 72ch;
}

.help-tour-layer {
  --tour-x: 50vw;
  --tour-y: 50vh;
  --tour-w: 320px;
  --tour-h: 160px;
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: auto;
}

.help-tour-layer[hidden] {
  display: none;
}

.help-tour-scrim {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at var(--tour-x) var(--tour-y), rgba(255, 255, 255, 0.12), transparent 24rem),
    linear-gradient(135deg, rgba(15, 23, 42, 0.48), rgba(42, 45, 70, 0.34));
  backdrop-filter: blur(2px) saturate(1.03);
  animation: help-tour-scrim-in 180ms ease-out both;
}

.help-tour-focus-clone {
  position: fixed;
  z-index: 2;
  display: grid;
  place-items: start;
  padding: 12px;
  overflow: hidden;
  border-radius: 18px;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 24px 18px, rgba(255, 255, 255, 0.42), transparent 54%),
    rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 58px rgba(42, 81, 184, 0.22);
  animation: help-tour-focus-in 180ms ease-out both;
}

.help-tour-focus-clone[hidden] {
  display: none;
}

.help-tour-focus-surface {
  pointer-events: none !important;
  transform-origin: top left;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.help-tour-focus-surface,
.help-tour-focus-surface * {
  animation-play-state: paused !important;
}

.help-tour-spotlight {
  position: fixed;
  z-index: 3;
  left: var(--tour-x);
  top: var(--tour-y);
  width: var(--tour-w);
  height: var(--tour-h);
  border-radius: 18px;
  pointer-events: none;
  border: 2px solid rgba(115, 151, 255, 0.95);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 0 9999px rgba(10, 17, 31, 0.34),
    0 0 0 8px rgba(99, 137, 255, 0.18),
    0 18px 58px rgba(39, 89, 206, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  animation: help-tour-spotlight-pulse 1.85s ease-in-out infinite;
}

.help-tour-card {
  position: fixed;
  z-index: 4;
  left: 24px;
  top: 24px;
  width: min(410px, calc(100vw - 28px));
  max-height: min(82vh, 620px);
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(195, 210, 255, 0.92);
  background:
    radial-gradient(circle at 10% 0%, rgba(219, 228, 255, 0.88), transparent 38%),
    radial-gradient(circle at 100% 12%, rgba(247, 218, 255, 0.62), transparent 34%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  box-shadow:
    0 30px 90px rgba(17, 31, 66, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.74) inset;
  color: var(--text);
  animation: help-tour-card-in 220ms cubic-bezier(.2, .9, .25, 1.1) both;
}

.help-tour-card.is-centered {
  left: 50%;
  top: 50%;
  width: min(560px, calc(100vw - 30px));
  transform: translate(-50%, -50%);
  animation-name: help-tour-centered-card-in;
}

.help-tour-card-glow {
  position: absolute;
  inset: -60px -50px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(75, 111, 255, 0.26), transparent 68%);
  pointer-events: none;
}

.help-tour-card-head,
.help-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.help-tour-skip-button {
  min-height: 34px;
  padding: 7px 12px;
}

.help-tour-card h3 {
  margin: 0;
  position: relative;
  z-index: 1;
  color: #14213d;
  font-size: 1.26rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.help-tour-body {
  margin: 0;
  position: relative;
  z-index: 1;
  color: #465676;
  font-size: 0.94rem;
  line-height: 1.55;
}

.help-tour-points {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.help-tour-points span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid rgba(189, 207, 244, 0.88);
  background: rgba(255, 255, 255, 0.68);
  color: #31405f;
  font-size: 0.82rem;
  line-height: 1.35;
}

.help-tour-points span::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f7df0, #bd4ed9);
  box-shadow: 0 0 0 4px rgba(75, 125, 240, 0.14);
}

.help-tour-progress {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.help-tour-progress:empty {
  display: none;
}

.help-tour-progress-dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(187, 199, 226, 0.9);
  background: rgba(255, 255, 255, 0.76);
  color: #66728d;
  font-size: 0.68rem;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.help-tour-progress-dot.is-done {
  background: #e8f7ef;
  color: #1f8a52;
  border-color: rgba(79, 184, 126, 0.62);
}

.help-tour-progress-dot.is-active {
  transform: translateY(-2px) scale(1.08);
  background: linear-gradient(135deg, #3279ec, #a33be1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(73, 98, 220, 0.28);
}

.help-tour-actions {
  padding-top: 2px;
}

.help-tour-actions .primary-button,
.help-tour-actions .ghost-button {
  min-height: 38px;
}

.help-tour-card.is-welcome-card {
  padding: 22px;
  border-radius: 28px;
}

.help-tour-card.is-welcome-card h3 {
  font-size: 1.54rem;
}

body.is-help-tour-open .help-tour-layer {
  display: block;
}

@keyframes help-tour-scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes help-tour-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes help-tour-focus-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes help-tour-centered-card-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes help-tour-spotlight-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 9999px rgba(10, 17, 31, 0.34),
      0 0 0 8px rgba(99, 137, 255, 0.16),
      0 18px 58px rgba(39, 89, 206, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.56);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(10, 17, 31, 0.36),
      0 0 0 13px rgba(191, 92, 221, 0.18),
      0 22px 70px rgba(85, 79, 220, 0.42),
      inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  }
}

@media (max-width: 720px) {
  .help-tour-card,
  .help-tour-card.is-centered {
    left: 14px !important;
    right: 14px;
    top: auto !important;
    bottom: 14px;
    width: auto;
    transform: none;
    animation-name: help-tour-card-in;
    max-height: 72vh;
    overflow: auto;
  }

  .help-tour-progress-dot {
    width: 22px;
    height: 22px;
  }
}

.app-capabilities-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-capabilities-status-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-capabilities-list {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.app-capabilities-empty {
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: 22px;
  border: 1px dashed rgba(165, 178, 217, 0.7);
  background: rgba(244, 248, 255, 0.78);
  color: #5f6f8d;
}

.app-capabilities-empty strong {
  color: #243454;
}

.app-capabilities-module-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 28px;
  border: 1px solid rgba(184, 200, 235, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 40px rgba(56, 72, 112, 0.11);
  overflow: hidden;
}

.app-capabilities-module-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(50, 111, 233, 0.98), rgba(98, 187, 255, 0.98));
}

.app-capabilities-module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(214, 223, 242, 0.92);
}

.app-capabilities-module-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  align-self: flex-start;
}

.app-capabilities-module-title-wrap {
  min-width: min(420px, 100%);
  flex: 1 1 360px;
  display: grid;
  gap: 3px;
}

.app-capabilities-module-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #6b87c4;
}

.app-capabilities-module-title-input,
.app-capabilities-module-description-input,
.app-capabilities-item-input {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 194, 241, 0.96);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 248, 255, 0.96));
  color: #23324f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.app-capabilities-module-title-input {
  font-size: 1.04rem;
  font-weight: 700;
}

.app-capabilities-module-description-input {
  min-height: 70px;
  padding: 12px 16px;
  resize: vertical;
  line-height: 1.4;
}

.app-capabilities-module-meta {
  font-size: 0.82rem;
  line-height: 1.1;
  color: #62759c;
}

.app-capabilities-items-board {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-self: start;
  width: 100%;
  gap: 4px;
}

.app-capabilities-items-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 96px;
  gap: 12px;
  padding: 0 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7283a7;
}

.app-capabilities-items-head span:first-child,
.app-capabilities-items-head span:last-child {
  text-align: center;
}

.app-capabilities-items {
  display: grid;
  gap: 7px;
}

.app-capabilities-item-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid rgba(211, 222, 244, 0.98);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.app-capabilities-choice-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 56px;
  min-width: 56px;
  min-height: 44px;
  margin: 0 auto;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(197, 206, 232, 0.92);
  background: rgba(245, 248, 255, 0.94);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
}

.app-capabilities-choice-control .app-capabilities-status-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.app-capabilities-choice-label {
  display: none;
}

.app-capabilities-choice-chevron {
  display: none;
}

.app-capabilities-choice-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.app-capabilities-choice-control.is-readonly .app-capabilities-choice-chevron {
  display: none;
}

.app-capabilities-item-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-capabilities-item-actions .module-attachment-action-button,
.app-capabilities-module-actions .module-attachment-action-button {
  width: 40px;
  min-width: 40px;
  height: 40px;
}

.app-capabilities-module-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
}

.app-capabilities-add-item-button {
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 0.74rem;
  line-height: 1;
}

.app-capabilities-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(197, 206, 232, 0.92);
  background: rgba(245, 248, 255, 0.94);
  color: #475672;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.app-capabilities-status-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.app-capabilities-status-pill.is-implemented {
  color: #1f7a4c;
  border-color: rgba(72, 168, 110, 0.34);
  background: linear-gradient(180deg, rgba(232, 250, 239, 0.98), rgba(220, 245, 230, 0.94));
}

.app-capabilities-status-pill.is-in-progress {
  color: #245f9d;
  border-color: rgba(86, 134, 222, 0.34);
  background: linear-gradient(180deg, rgba(235, 244, 255, 0.98), rgba(222, 236, 255, 0.94));
}

.app-capabilities-status-pill.is-planned-later {
  color: #8a6316;
  border-color: rgba(214, 169, 79, 0.34);
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.99), rgba(255, 238, 200, 0.95));
}

.app-capabilities-status-pill.is-not-planned {
  color: #8a4d55;
  border-color: rgba(208, 122, 137, 0.34);
  background: linear-gradient(180deg, rgba(255, 240, 243, 0.99), rgba(255, 226, 231, 0.95));
}

.app-capabilities-choice-control.is-implemented {
  color: #1f7a4c;
  border-color: rgba(72, 168, 110, 0.34);
  background: linear-gradient(180deg, rgba(232, 250, 239, 0.98), rgba(220, 245, 230, 0.94));
}

.app-capabilities-choice-control.is-in-progress {
  color: #245f9d;
  border-color: rgba(86, 134, 222, 0.34);
  background: linear-gradient(180deg, rgba(235, 244, 255, 0.98), rgba(222, 236, 255, 0.94));
}

.app-capabilities-choice-control.is-planned-later {
  color: #8a6316;
  border-color: rgba(214, 169, 79, 0.34);
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.99), rgba(255, 238, 200, 0.95));
}

.app-capabilities-choice-control.is-not-planned {
  color: #8a4d55;
  border-color: rgba(208, 122, 137, 0.34);
  background: linear-gradient(180deg, rgba(255, 240, 243, 0.99), rgba(255, 226, 231, 0.95));
}

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

.notifications-panel-copy {
  display: grid;
  gap: 2px;
}

.notifications-panel-copy strong {
  font-size: 0.96rem;
}

.notifications-panel-copy span {
  font-size: 0.8rem;
  color: var(--muted);
}

.notifications-open-all-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.notifications-panel-list {
  display: grid;
  gap: 8px;
  max-height: min(340px, 62vh);
  overflow: auto;
  padding-right: 2px;
}

.notifications-panel-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
  padding: 12px 6px 8px;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.92rem;
  box-shadow: inset 0 0 0 1px rgba(28, 68, 150, 0.12);
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  cursor: pointer;
}

.user-badge-avatar-slot,
.user-menu-avatar,
.user-avatar-preview {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  background: linear-gradient(135deg, rgba(92, 131, 255, 0.18), rgba(206, 69, 201, 0.22));
  color: var(--accent-strong);
  font-weight: 700;
  overflow: hidden;
  position: relative;
}

.user-badge-avatar-slot::after,
.user-menu-avatar::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.96);
  background: #98a4b7;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.user-badge-avatar-slot[data-presence="online"]::after,
.user-menu-avatar[data-presence="online"]::after {
  background: #2fb36f;
}

.user-badge-avatar-slot[data-presence="away"]::after,
.user-menu-avatar[data-presence="away"]::after {
  background: #f1b44c;
}

.user-badge-avatar-slot[data-presence="busy"]::after,
.user-menu-avatar[data-presence="busy"]::after {
  background: #e06363;
}

.user-badge-avatar-slot[data-presence="offline"]::after,
.user-menu-avatar[data-presence="offline"]::after {
  background: #98a4b7;
}

.user-badge-avatar-slot img,
.user-menu-avatar img,
.user-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-badge-copy,
.user-menu-copy {
  display: grid;
  gap: 3px;
}

.user-badge-copy strong,
.user-menu-copy strong {
  font-size: 0.92rem;
}

.user-badge-copy span,
.user-menu-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 320px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(212, 219, 235, 0.9);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 22px 48px rgba(18, 30, 59, 0.14);
  z-index: 20;
}

.user-menu-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 223, 236, 0.88);
}

.user-menu-copy strong {
  font-size: 0.98rem;
  line-height: 1.15;
}

.user-menu-presence-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #586478;
  font-size: 0.8rem;
}

.user-menu-presence-current::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #98a4b7;
  box-shadow: 0 0 0 4px rgba(152, 164, 183, 0.08);
}

.user-menu-presence-current[data-presence="online"]::before {
  background: #2fb36f;
  box-shadow: 0 0 0 4px rgba(47, 179, 111, 0.1);
}

.user-menu-presence-current[data-presence="away"]::before {
  background: #f1b44c;
  box-shadow: 0 0 0 4px rgba(241, 180, 76, 0.12);
}

.user-menu-presence-current[data-presence="busy"]::before {
  background: #e06363;
  box-shadow: 0 0 0 4px rgba(224, 99, 99, 0.1);
}

.user-menu-presence-current[data-presence="offline"]::before {
  background: #98a4b7;
}

.user-menu-status-block {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(216, 223, 236, 0.88);
}

.user-menu-presence-picker {
  position: relative;
}

.user-menu-section-label,
.user-menu-metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.user-menu-presence-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #566275;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.user-menu-presence-trigger:hover {
  color: var(--accent-strong);
}

.user-menu-presence-trigger .user-presence-dot {
  box-shadow: none;
}

.user-menu-presence-trigger[data-presence="online"] .user-presence-dot {
  background: #2fb36f;
}

.user-menu-presence-trigger[data-presence="away"] .user-presence-dot {
  background: #f1b44c;
}

.user-menu-presence-trigger[data-presence="busy"] .user-presence-dot {
  background: #e06363;
}

.user-menu-presence-trigger[data-presence="offline"] .user-presence-dot {
  background: #98a4b7;
}

.user-menu-presence-caret {
  font-size: 0.7rem;
  color: #8b95ab;
  transition: transform 160ms ease;
}

.user-menu-presence-trigger.is-open .user-menu-presence-caret {
  transform: rotate(180deg);
}

.user-menu-presence-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 168px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(212, 219, 235, 0.94);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(18, 30, 59, 0.12);
  z-index: 3;
}

.user-presence-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #566275;
  border-radius: 0;
  padding: 3px 0;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.user-presence-option:hover {
  background: rgba(233, 239, 248, 0.86);
  border-radius: 10px;
  color: var(--accent-strong);
  transform: translateX(1px);
}

.user-presence-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #98a4b7;
  box-shadow: 0 0 0 4px rgba(152, 164, 183, 0.08);
}

.user-presence-option[data-presence="online"] .user-presence-dot {
  background: #2fb36f;
  box-shadow: 0 0 0 4px rgba(47, 179, 111, 0.1);
}

.user-presence-option[data-presence="away"] .user-presence-dot {
  background: #f1b44c;
  box-shadow: 0 0 0 4px rgba(241, 180, 76, 0.12);
}

.user-presence-option[data-presence="busy"] .user-presence-dot {
  background: #e06363;
  box-shadow: 0 0 0 4px rgba(224, 99, 99, 0.1);
}

.user-presence-option[data-presence="offline"] .user-presence-dot {
  background: #98a4b7;
}

.user-presence-option.is-active {
  color: var(--accent-strong);
  font-weight: 700;
  background: rgba(233, 239, 248, 0.92);
  border-radius: 10px;
}

.user-presence-option.is-active .user-presence-label {
  text-decoration: none;
}

.user-menu-metrics {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.user-menu-metric {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.user-menu-metric strong {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.25;
  text-align: left;
}

.user-menu-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(216, 223, 236, 0.88);
}

.user-menu-link-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.user-menu-link-danger {
  color: #a24f4f;
}

.user-menu-error {
  min-height: 0;
  font-size: 0.8rem;
  flex-basis: 100%;
  margin: 0;
}

body.is-profile-modal-open {
  overflow: hidden;
}

.profile-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 82;
  border: 0;
  padding: 0;
  background: rgba(16, 25, 52, 0.42);
  cursor: pointer;
}

.profile-modal {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 83;
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at top right, rgba(45, 111, 219, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.96));
}

.profile-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(219, 226, 242, 0.88);
}

.profile-modal-head h3,
.profile-password-head h4 {
  margin: 0;
}

.profile-modal-body {
  min-height: 0;
  display: grid;
  gap: 16px;
  overflow: auto;
  padding: 18px 22px 22px;
}

.profile-form,
.profile-password-form {
  display: grid;
  gap: 16px;
}

.profile-password-form {
  padding-top: 16px;
  border-top: 1px solid rgba(219, 226, 242, 0.88);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.profile-avatar-preview {
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #1e4f91;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(249, 250, 255, 0.94));
  border: 1px solid rgba(196, 210, 233, 0.9);
}

.profile-avatar-preview.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.profile-avatar-copy strong {
  color: #1f2940;
  font-size: 0.98rem;
}

.profile-form-grid,
.profile-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-form-grid .field-span-full {
  grid-column: 1 / -1;
}

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

.profile-report-schedule {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(191, 205, 230, 0.92);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.86);
}

.profile-report-sentence {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #1f2940;
  font-weight: 700;
  line-height: 1.35;
}

.profile-report-sentence input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #1d74f5;
}

.profile-report-sentence input[type="time"] {
  width: 116px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(184, 202, 231, 0.95);
  border-radius: 10px;
  background: #ffffff;
  color: #15213a;
  font: inherit;
}

.profile-report-sentence input[type="time"]:disabled {
  color: #71819f;
  background: #eef3fb;
}

.profile-report-actions {
  align-items: stretch;
}

#profile-feedback,
#profile-password-feedback {
  min-height: 1.1rem;
  margin: 0;
}

@media (max-width: 720px) {
  .profile-modal {
    top: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .profile-modal-head,
  .profile-modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .profile-form-grid,
  .profile-password-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.hero-copy {
  max-width: 60ch;
}

.eyebrow,
.section-kicker {
  margin: 0 0 10px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.92;
}

.hero-copy-minimal {
  display: none;
}

.intro,
.helper-copy {
  margin: 0;
  color: var(--muted);
}

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid #e7ebf3;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 32px rgba(43, 53, 84, 0.08);
  color: #263247;
  min-width: 220px;
}

.connection-status-copy {
  display: grid;
  gap: 2px;
}

.connection-status-label {
  color: #1f2940;
  font-size: 0.83rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.connection-status-meta {
  color: #7b8398;
  font-size: 0.74rem;
  line-height: 1.2;
}

.connection-status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.connection-status.is-connecting .connection-status-indicator {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(104, 117, 145, 0.22);
  border-top-color: #566683;
  background: transparent;
  animation: connection-spin 0.9s linear infinite;
}

.connection-status.is-live {
  border-color: #dfeee6;
  background: rgba(246, 252, 248, 0.92);
}

.connection-status.is-live .connection-status-indicator {
  background: #34b26e;
  box-shadow: 0 0 0 0 rgba(52, 178, 110, 0.35);
  animation: connection-pulse 1.8s ease-out infinite;
}

.connection-status.is-memory {
  border-color: #f0e0bf;
  background: rgba(255, 248, 233, 0.96);
}

.connection-status.is-memory .connection-status-indicator {
  background: #d5982c;
}

@keyframes connection-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes connection-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 178, 110, 0.35);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(52, 178, 110, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(52, 178, 110, 0);
  }
}

.summary-grid {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-left: auto;
}

.summary-card,
.panel {
  background: var(--panel-solid);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 0 0 1px rgba(240, 79, 151, 0.04),
    0 14px 30px rgba(108, 83, 153, 0.06);
}

.summary-card {
  border-radius: 16px;
  padding: 10px 12px;
  min-height: 88px;
  border-color: rgba(219, 166, 209, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 0 0 1px rgba(240, 79, 151, 0.04),
    0 10px 24px rgba(108, 83, 153, 0.06);
}

.summary-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-card strong {
  font-size: clamp(1.05rem, 1.8vw, 1.65rem);
  line-height: 1.05;
}

.tab-strip {
  display: grid;
  gap: 6px;
}

.tab-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  padding: 8px 11px;
  cursor: pointer;
  border-radius: 14px;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tab-button strong {
  font-size: 0.89rem;
  font-weight: 600;
}

.tab-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 241, 250, 0.8));
  border-color: rgba(219, 187, 230, 0.6);
}

.tab-button.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(251, 242, 255, 0.97));
  color: var(--text);
  border-color: rgba(220, 183, 232, 0.58);
  box-shadow: 0 10px 24px rgba(145, 92, 192, 0.12);
}

.tab-button-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(244, 233, 250, 0.96), rgba(235, 224, 249, 0.92));
  color: #6d5387;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
}

.tab-button.is-active .tab-button-icon {
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.22), rgba(123, 92, 255, 0.24));
  color: #6a41b4;
}

.sidebar-link {
  padding: 8px 11px;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.sidebar-link strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.sidebar-link:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(249, 241, 251, 0.76));
}

.sidebar-link.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 242, 255, 0.97));
  border-color: rgba(220, 183, 232, 0.52);
  box-shadow: 0 8px 20px rgba(145, 92, 192, 0.12);
}

.rail-button {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 0;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(214, 166, 218, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 237, 252, 0.9));
  color: #584d70;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 14px rgba(91, 103, 139, 0.08);
}

.rail-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 237, 248, 0.92));
  border-color: rgba(219, 166, 209, 0.88);
  color: #513962;
}

.rail-button.is-active {
  background: linear-gradient(180deg, #f05da9 0%, #d94aa8 45%, #8d3bdf 100%);
  border-color: rgba(172, 63, 194, 0.96);
  color: #ffffff;
  box-shadow:
    0 16px 30px rgba(173, 61, 191, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.rail-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  font-size: 1.02rem;
  font-weight: 700;
}

.rail-icon .icon-svg {
  width: 22px;
  height: 22px;
}

.sidebar-group-icon .icon-svg,
.tab-button-icon .icon-svg {
  width: 16px;
  height: 16px;
}

.rail-button.is-active .rail-icon {
  background: transparent;
}

.rail-label {
  display: none;
}

.sync-error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--danger-soft);
  border: 1px solid rgba(180, 80, 80, 0.24);
  color: var(--danger);
}

.workspace-view {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.module-panel {
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 18px;
}

.module-copy {
  max-width: 68ch;
  margin: 0;
}

.module-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.module-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(173, 181, 210, 0.32);
  background: rgba(255, 255, 255, 0.86);
  color: #4a5168;
  font-size: 0.88rem;
  font-weight: 600;
}

.settings-module {
  display: grid;
  gap: 10px;
}

.settings-notifications-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.settings-brand-panel {
  gap: 14px;
}

.settings-push-panel {
  gap: 12px;
}

.settings-push-preferences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.settings-push-preference-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(112, 131, 159, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.settings-push-preference-card.is-master {
  grid-column: 1 / -1;
  border-color: rgba(40, 111, 220, 0.28);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.9));
}

.settings-push-preference-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2563eb;
}

.settings-push-preference-card strong {
  display: block;
  color: #172033;
  font-size: 0.9rem;
  line-height: 1.25;
}

.settings-push-preference-card span {
  display: block;
  margin-top: 3px;
  color: #5c6a86;
  font-size: 0.78rem;
  line-height: 1.35;
}

.settings-brand-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.settings-brand-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-brand-copy strong {
  color: #172033;
  font-size: 0.94rem;
}

.settings-brand-copy span {
  color: #5c6a86;
  font-size: 0.78rem;
  line-height: 1.4;
}

.settings-brand-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings-brand-actions .ghost-button {
  min-height: 36px;
  white-space: nowrap;
}

.settings-stamp-layout {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px 14px;
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.9));
}

.settings-stamp-preview {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.85);
  border-radius: 14px;
  background:
    linear-gradient(45deg, rgba(226, 232, 240, 0.5) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(226, 232, 240, 0.5) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(226, 232, 240, 0.5) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(226, 232, 240, 0.5) 75%);
  background-color: #fff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.settings-stamp-preview.has-stamp {
  border-style: solid;
}

.settings-stamp-preview img {
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

.settings-stamp-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.settings-stamp-copy strong {
  color: #172033;
  font-size: 0.94rem;
}

.settings-stamp-copy > span {
  color: #5c6a86;
  font-size: 0.78rem;
  line-height: 1.4;
}

.settings-stamp-controls {
  display: grid;
  grid-template-columns: minmax(96px, auto) repeat(3, minmax(82px, 112px));
  gap: 8px;
  align-items: end;
}

.settings-stamp-controls > label:not(.field) {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  color: #26324a;
  font-size: 0.8rem;
  font-weight: 700;
}

.settings-stamp-controls input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #4f46e5;
}

.settings-stamp-controls .field > span {
  font-size: 0.68rem;
}

.settings-stamp-controls .field > input {
  height: 36px;
}

.danger-ghost-button {
  border-color: rgba(185, 28, 28, 0.26);
  color: #a93131;
  background: rgba(254, 242, 242, 0.76);
}

.settings-notification-stack {
  display: grid;
  gap: 12px;
}

.settings-notification-group {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.settings-notification-group > strong {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.76);
}

.settings-notification-inline {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(160px, 210px);
  gap: 10px;
  align-items: end;
}

.settings-notification-inline .field > span {
  font-size: 0.72rem;
}

.settings-notification-inline .field > input {
  height: 42px;
}

.settings-inline-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

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

.settings-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.settings-password-control input {
  min-width: 0;
  height: 42px;
}

.settings-password-toggle {
  min-width: 82px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.86);
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
}

.settings-password-toggle:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(219, 234, 254, 0.92);
}

.settings-password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-isznr-api-resource-status {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.settings-isznr-api-result-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(34, 197, 94, 0.26);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.96), rgba(236, 253, 245, 0.76));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.settings-isznr-api-result-card.is-warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(254, 243, 199, 0.72));
}

.settings-isznr-api-result-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 1.18rem;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.24);
}

.settings-isznr-api-result-card.is-warning .settings-isznr-api-result-icon {
  background: #f59e0b;
  box-shadow: 0 10px 20px rgba(245, 158, 11, 0.22);
}

.settings-isznr-api-result-card strong {
  display: block;
  color: #123524;
  font-size: 0.98rem;
}

.settings-isznr-api-result-card span:not(.settings-isznr-api-result-icon) {
  display: block;
  margin-top: 3px;
  color: rgba(15, 23, 42, 0.66);
  font-size: 0.86rem;
}

.settings-isznr-api-status-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.88);
}

.settings-isznr-api-status-title,
.settings-isznr-api-resource-group-head,
.settings-isznr-api-probe-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.settings-isznr-api-status-title strong,
.settings-isznr-api-resource-group-head strong {
  color: var(--text);
}

.settings-isznr-api-status-title span,
.settings-isznr-api-resource-group-head span,
.settings-isznr-api-probe-line span {
  color: var(--muted);
  font-size: 0.82rem;
}

.settings-isznr-api-probe-line,
.settings-isznr-api-resource-group {
  padding: 9px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.settings-isznr-api-probe-left {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.settings-isznr-api-probe-left > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-isznr-api-probe-left strong {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.1;
}

.settings-isznr-api-probe-left small {
  color: var(--muted);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-isznr-api-check {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 900;
}

.settings-isznr-api-probe-line.is-warning .settings-isznr-api-check {
  background: #f59e0b;
}

.settings-isznr-api-probe-line > strong {
  text-align: right;
  color: var(--text);
  font-size: 0.88rem;
}

.settings-isznr-api-probe-line.is-ok,
.settings-isznr-api-resource-group.is-ok {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(240, 253, 244, 0.72);
}

.settings-isznr-api-probe-line.is-warning,
.settings-isznr-api-resource-group.is-warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.78);
}

.settings-isznr-api-resource-group {
  display: grid;
  gap: 7px;
}

.settings-isznr-api-resource-failures {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: #92400e;
  font-size: 0.82rem;
}

.settings-points-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.settings-points-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-points-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.settings-points-preview > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(196, 208, 232, 0.88);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(124, 90, 255, 0.1), transparent 42%),
    #ffffff;
  box-shadow: 0 12px 26px rgba(40, 55, 95, 0.06);
}

.settings-points-preview span {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-points-preview strong {
  color: #111b36;
  font-size: 1.12rem;
  line-height: 1;
}

.settings-points-preview small {
  min-width: 0;
  overflow: hidden;
  color: #53627d;
  font-size: 0.74rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-service-factors {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(196, 208, 232, 0.78);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(248, 250, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.settings-service-factors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-service-factors-head h4 {
  margin: 0;
  color: #111b36;
  font-size: 0.98rem;
}

.settings-service-factors-head > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(91, 77, 255, 0.09);
  color: #4f37c7;
  font-size: 0.68rem;
  font-weight: 900;
}

.settings-service-factor-list {
  display: grid;
  gap: 7px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}

.settings-service-factor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(217, 225, 238, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.settings-service-factor-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-service-factor-copy strong,
.settings-service-factor-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-service-factor-copy strong {
  color: #13213f;
  font-size: 0.8rem;
}

.settings-service-factor-copy small,
.settings-service-factor-suffix {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 780;
}

.settings-service-factor-row input {
  width: 86px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(196, 208, 232, 0.95);
  border-radius: 10px;
  text-align: right;
}

.settings-service-factor-empty {
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.7);
  border-radius: 14px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 760;
  text-align: center;
}

.settings-job-ai-panel {
  border-color: rgba(111, 86, 255, 0.22);
  background:
    radial-gradient(circle at 8% 0%, rgba(111, 86, 255, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
}

.settings-work-equipment-ai-panel {
  border-color: rgba(14, 165, 233, 0.24);
  background:
    radial-gradient(circle at 4% 0%, rgba(59, 130, 246, 0.10), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(34, 197, 94, 0.09), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.97));
}

.settings-work-equipment-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.settings-work-equipment-ai-actions .ghost-button {
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.settings-work-equipment-ai-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.settings-work-equipment-ai-overview article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(40, 55, 95, 0.05);
}

.settings-work-equipment-ai-overview span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.settings-work-equipment-ai-overview strong {
  color: #10203d;
  font-size: 1.18rem;
  font-weight: 980;
  line-height: 1.1;
}

.settings-work-equipment-ai-overview small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.settings-work-equipment-ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.settings-work-equipment-ai-block {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(190, 204, 226, 0.82);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(40, 55, 95, 0.055);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.settings-work-equipment-ai-block:hover {
  border-color: rgba(96, 165, 250, 0.68);
  box-shadow: 0 16px 34px rgba(40, 55, 95, 0.075);
}

.settings-work-equipment-ai-block.is-collapsed {
  box-shadow: 0 8px 18px rgba(40, 55, 95, 0.035);
}

.settings-work-equipment-ai-block.settings-work-equipment-ai-profiles-block {
  background:
    radial-gradient(circle at 100% 0%, rgba(147, 197, 253, 0.14), transparent 30%),
    rgba(255, 255, 255, 0.82);
}

.settings-work-equipment-ai-block.settings-work-equipment-ai-registers-block {
  background:
    radial-gradient(circle at 0% 0%, rgba(187, 247, 208, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.82);
}

.settings-work-equipment-ai-block-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(239, 246, 255, 0.66));
}

.settings-work-equipment-ai-block-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.settings-work-equipment-ai-block-toggle:hover,
.settings-work-equipment-ai-block-toggle:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.68);
}

.settings-work-equipment-ai-block-toggle > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-work-equipment-ai-block-toggle strong {
  color: #10203d;
  font-size: 0.92rem;
  font-weight: 960;
  line-height: 1.25;
}

.settings-work-equipment-ai-block-toggle small {
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 760;
  line-height: 1.35;
}

.settings-work-equipment-ai-block-toggle em {
  flex: 0 0 auto;
  max-width: min(38vw, 240px);
  overflow: hidden;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-work-equipment-ai-block-toggle b {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #1d4ed8;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.settings-work-equipment-ai-block-head > span,
.settings-work-equipment-ai-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 850;
}

.settings-work-equipment-ai-head-action {
  align-self: center;
  flex: 0 0 auto;
  height: 36px;
  margin-right: 4px;
}

.settings-work-equipment-ai-block-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.settings-work-equipment-ai-block-body[hidden] {
  display: none;
}

.settings-work-equipment-ai-fields,
.settings-work-equipment-ai-profiles,
.settings-work-equipment-ai-registers {
  display: grid;
  gap: 12px;
}

.settings-work-equipment-ai-field-card,
.settings-work-equipment-ai-profile-card,
.settings-work-equipment-ai-register-card,
.settings-work-equipment-ai-list-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(40, 55, 95, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.settings-work-equipment-ai-field-card,
.settings-work-equipment-ai-register-card {
  padding: 12px;
}

.settings-work-equipment-ai-field-card.is-configured,
.settings-work-equipment-ai-profile-card.is-configured,
.settings-work-equipment-ai-register-card.is-configured,
.settings-work-equipment-ai-list-card.is-configured {
  border-color: rgba(34, 197, 94, 0.52);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.92));
  box-shadow: 0 14px 30px rgba(21, 128, 61, 0.1);
}

.settings-work-equipment-ai-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.settings-work-equipment-ai-card-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-work-equipment-ai-card-head strong {
  color: #111b36;
  font-size: 0.83rem;
  font-weight: 920;
  line-height: 1.32;
  white-space: normal;
}

.settings-work-equipment-ai-card-head small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.35;
  white-space: normal;
}

.settings-work-equipment-ai-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(196, 208, 232, 0.76);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.settings-work-equipment-ai-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.settings-work-equipment-ai-group-head strong {
  min-width: 0;
  color: #111b36;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1.3;
}

.settings-work-equipment-ai-group-head span,
.settings-work-equipment-ai-card-open small {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
}

.settings-work-equipment-ai-group-head span.has-progress,
.settings-work-equipment-ai-list-card.is-configured .settings-work-equipment-ai-card-status,
.settings-work-equipment-ai-profile-card.is-configured .settings-work-equipment-ai-card-status {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.settings-work-equipment-ai-group-head span.is-complete {
  background: rgba(22, 163, 74, 0.16);
  color: #166534;
}

.settings-work-equipment-ai-card-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.settings-work-equipment-ai-card-open {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.settings-work-equipment-ai-card-open:hover,
.settings-work-equipment-ai-card-open:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.settings-work-equipment-ai-card-open span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-work-equipment-ai-card-open strong {
  color: #13213f;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.32;
  white-space: normal;
}

.settings-work-equipment-ai-card-open em {
  color: #64748b;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
  white-space: normal;
}

.settings-work-equipment-ai-profile-card {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.settings-work-equipment-ai-profile-card .settings-work-equipment-ai-card-open {
  min-height: 62px;
}

.settings-work-equipment-ai-profile-card > .icon-button {
  align-self: center;
  margin-right: 8px;
}

.settings-work-equipment-ai-profile-card > .icon-button.danger {
  color: #dc2626;
  background: rgba(254, 226, 226, 0.84);
}

.settings-work-equipment-ai-register-group .settings-work-equipment-ai-card-open {
  min-height: 52px;
}

.settings-work-equipment-ai-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.settings-work-equipment-ai-card-grid .field-span-full,
.settings-work-equipment-ai-block .field-span-full {
  grid-column: 1 / -1;
}

.settings-work-equipment-ai-card-grid textarea,
.settings-work-equipment-ai-block textarea {
  min-height: 74px;
  resize: vertical;
}

.settings-work-equipment-ai-profile-card textarea {
  min-height: 82px;
}

.settings-work-equipment-ai-registers-block {
  grid-column: 1 / -1;
}

.settings-work-equipment-ai-registers {
  grid-template-columns: minmax(0, 1fr);
}

.settings-work-equipment-ai-register-card textarea {
  min-height: 62px;
}

.settings-work-equipment-ai-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.72);
  border-radius: 14px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
  text-align: center;
}

.settings-work-equipment-ai-modal-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(8px);
}

.settings-work-equipment-ai-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(980px, 100%);
  max-height: min(88vh, 840px);
  overflow: hidden;
  border: 1px solid rgba(190, 204, 226, 0.92);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 30%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.09), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.97));
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.26);
}

.settings-work-equipment-ai-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(191, 219, 254, 0.84);
}

.settings-work-equipment-ai-modal-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-work-equipment-ai-modal-head strong {
  color: #0f172a;
  font-size: 1.06rem;
  font-weight: 950;
  line-height: 1.25;
}

.settings-work-equipment-ai-modal-head small {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 760;
  line-height: 1.35;
  white-space: normal;
}

.settings-work-equipment-ai-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 18px;
}

.settings-work-equipment-ai-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(191, 219, 254, 0.84);
  background: rgba(255, 255, 255, 0.84);
}

.settings-work-equipment-ai-profile-editor,
.settings-work-equipment-ai-modal-section {
  display: grid;
  gap: 12px;
}

.settings-work-equipment-ai-modal-section {
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.settings-work-equipment-ai-register-picker {
  display: grid;
  gap: 8px;
}

.settings-work-equipment-ai-register-choice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.settings-work-equipment-ai-register-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(211, 220, 237, 0.9);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.88);
}

.settings-work-equipment-ai-register-choice span {
  color: #1e293b;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.settings-work-equipment-ai-section-copy {
  margin: -2px 0 0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 740;
  line-height: 1.45;
}

.settings-work-equipment-ai-question-list,
.settings-work-equipment-ai-variant-list {
  display: grid;
  gap: 10px;
}

.settings-work-equipment-ai-question-card,
.settings-work-equipment-ai-variant-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.88));
  box-shadow: 0 10px 24px rgba(40, 55, 95, 0.045);
}

.settings-work-equipment-ai-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-work-equipment-ai-question-head strong {
  color: #13213f;
  font-size: 0.82rem;
  font-weight: 920;
}

.settings-work-equipment-ai-add-question {
  justify-self: start;
  min-height: 34px;
}

.settings-work-equipment-ai-checkbox-field {
  align-self: end;
}

.settings-work-equipment-ai-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(196, 208, 232, 0.95);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
  color: #334155;
  font-size: 0.74rem;
  font-weight: 780;
}

.settings-work-equipment-ai-inline-check input {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

body.is-settings-work-equipment-ai-modal-open {
  overflow: hidden;
}

.settings-job-ai-fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.settings-job-ai-rulebook {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.settings-job-ai-rulebook article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(199, 210, 254, 0.82);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 24px rgba(40, 55, 95, 0.045);
}

.settings-job-ai-rulebook strong {
  color: #111b36;
  font-size: 0.82rem;
  font-weight: 950;
}

.settings-job-ai-rulebook span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.4;
}

.settings-job-ai-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(196, 208, 232, 0.76);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.settings-job-ai-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.settings-job-ai-group-head strong {
  color: #111b36;
  font-size: 0.86rem;
}

.settings-job-ai-group-head span,
.settings-job-ai-card-open small {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(91, 77, 255, 0.08);
  color: #513bd6;
  font-size: 0.68rem;
  font-weight: 850;
}

.settings-job-ai-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-job-ai-card {
  min-width: 0;
  border: 1px solid rgba(211, 220, 237, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(40, 55, 95, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.settings-job-ai-card.is-configured {
  border-color: rgba(34, 197, 94, 0.6);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.94));
  box-shadow: 0 14px 30px rgba(21, 128, 61, 0.12);
}

.settings-job-ai-card.is-risk-row {
  border-color: rgba(180, 199, 228, 0.94);
}

.settings-job-ai-card.is-pur-point {
  border-color: rgba(250, 204, 21, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.92));
}

.settings-job-ai-card-open {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.settings-job-ai-card-open:hover,
.settings-job-ai-card-open:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.settings-job-ai-card-open span {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: visible;
  color: #13213f;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.32;
  text-overflow: clip;
  white-space: normal;
}

.settings-job-ai-card-open span em {
  overflow: visible;
  color: #64748b;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.settings-job-ai-card.is-configured .settings-job-ai-card-status,
.settings-job-ai-group-head span.has-progress {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.settings-job-ai-group-head span.is-complete {
  background: rgba(22, 163, 74, 0.16);
  color: #166534;
}

.settings-job-ai-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 0 12px 12px;
}

.settings-job-ai-card-body textarea {
  min-height: 86px;
  resize: vertical;
}

.settings-job-ai-card-body .field-span-full {
  grid-column: 1 / -1;
}

.settings-job-ai-card-body-risk textarea {
  min-height: 68px;
}

.settings-job-ai-card-body-pur textarea {
  min-height: 70px;
}

.settings-job-ai-row-defaults {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
}

.settings-job-ai-row-defaults span {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 820;
}

#settings-job-ai-save {
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.settings-job-ai-modal-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(8px);
}

.settings-job-ai-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, 100%);
  max-height: min(88vh, 820px);
  overflow: hidden;
  border: 1px solid rgba(190, 204, 226, 0.92);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.97));
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.26);
}

.settings-job-ai-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(199, 210, 254, 0.72);
}

.settings-job-ai-modal-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-job-ai-modal-head strong {
  color: #0f172a;
  font-size: 1.06rem;
  font-weight: 950;
}

.settings-job-ai-modal-head small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-job-ai-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 18px;
}

.settings-job-ai-modal-body .settings-job-ai-card-body {
  padding: 0;
}

.settings-job-ai-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(199, 210, 254, 0.72);
  background: rgba(255, 255, 255, 0.82);
}

body.is-settings-job-ai-modal-open {
  overflow: hidden;
}

.settings-module-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 2px 2px;
}

#settings-save-all {
  height: 36px;
  padding: 0 14px;
  min-width: 132px;
  width: auto;
  font-size: 0.86rem;
  white-space: nowrap;
}

.settings-notifications-panel .section-heading {
  margin-bottom: 0;
}

#settings-notifications-feedback {
  margin: 0;
  min-height: 1.1rem;
}

@media (max-width: 900px) {
  .settings-notification-inline {
    grid-template-columns: 1fr;
  }

  .settings-points-layout,
  .settings-points-grid,
  .settings-points-preview {
    grid-template-columns: 1fr;
  }

  .settings-work-equipment-ai-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-work-equipment-ai-layout,
  .settings-work-equipment-ai-card-grid,
  .settings-work-equipment-ai-registers,
  .settings-service-factors-head,
  .settings-service-factor-row,
  .settings-job-ai-rulebook,
  .settings-job-ai-card-list,
  .settings-job-ai-card-body {
    grid-template-columns: 1fr;
  }

  .settings-job-ai-modal-backdrop:not([hidden]),
  .settings-work-equipment-ai-modal-backdrop:not([hidden]) {
    padding: 10px;
  }

  .settings-job-ai-modal,
  .settings-work-equipment-ai-modal {
    max-height: 94vh;
    border-radius: 18px;
  }

  .settings-job-ai-modal-head,
  .settings-job-ai-modal-body,
  .settings-job-ai-modal-actions,
  .settings-work-equipment-ai-modal-head,
  .settings-work-equipment-ai-modal-body,
  .settings-work-equipment-ai-modal-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .settings-job-ai-modal-actions,
  .settings-work-equipment-ai-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .settings-service-factors-head {
    display: grid;
  }

  .settings-brand-layout {
    grid-template-columns: 1fr;
  }

  .settings-stamp-layout,
  .settings-stamp-controls {
    grid-template-columns: 1fr;
  }

  .settings-brand-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .settings-work-equipment-ai-overview {
    grid-template-columns: 1fr;
  }

  .settings-work-equipment-ai-block-head {
    flex-wrap: wrap;
  }

  .settings-work-equipment-ai-block-toggle {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .settings-work-equipment-ai-block-toggle em {
    max-width: 100%;
  }

  .settings-work-equipment-ai-head-action {
    width: 100%;
    margin-right: 0;
  }
}

.offers-module {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

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

.offers-stat-card {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(198, 205, 188, 0.7);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(247, 248, 243, 0.9));
  box-shadow: 0 16px 32px rgba(41, 59, 46, 0.08);
}

.offers-stat-card.is-total {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 242, 0.92));
}

.offers-stat-card.is-draft {
  background:
    linear-gradient(145deg, rgba(243, 246, 255, 0.96), rgba(232, 237, 251, 0.92));
  border-color: rgba(143, 158, 198, 0.45);
}

.offers-stat-card.is-sent {
  background:
    linear-gradient(145deg, rgba(237, 246, 255, 0.96), rgba(225, 240, 255, 0.92));
  border-color: rgba(117, 167, 221, 0.42);
}

.offers-stat-card.is-accepted {
  background:
    linear-gradient(145deg, rgba(239, 250, 242, 0.96), rgba(226, 243, 232, 0.92));
  border-color: rgba(91, 161, 112, 0.36);
}

.offers-stat-label {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.offers-stat-card.is-accepted .offers-stat-label {
  font-size: 0;
  letter-spacing: 0;
}

.offers-stat-card.is-accepted .offers-stat-label::after {
  content: "Prihvaceno";
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.offers-stat-value {
  font-size: 1.34rem;
  color: var(--text);
}

.offers-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.offers-launch-panel,
.offers-list-panel,
.offers-editor-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

.offers-list-panel {
  gap: 14px;
  padding: 18px;
}

.offer-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 68;
  background: rgba(17, 21, 31, 0.28);
  backdrop-filter: blur(6px);
}

body.is-offer-editor-open {
  overflow: hidden;
}

.offers-editor-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
}

.offers-editor-panel.is-modal-open {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 69;
  width: min(1180px, calc(100vw - 24px));
  height: calc(100vh - 28px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

.offers-editor-fixed-head {
  display: grid;
  gap: 10px;
  padding: 18px 20px 12px;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(247, 249, 253, 0.96));
  border-bottom: 1px solid rgba(232, 236, 245, 0.9);
}

.offers-editor-body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 12px 20px 20px;
  display: grid;
  align-content: start;
  gap: 14px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.offers-editor-body:focus {
  outline: none;
}

.offers-editor-body > .entity-form {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.offers-editor-body > .entity-form.is-commercial-quick-upload {
  gap: 16px;
}

.offers-section-heading {
  align-items: flex-start;
}

.offers-launch-panel {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
}

.offers-launch-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.42), transparent 54%),
    linear-gradient(145deg, #2c7351, #1f5d42);
  box-shadow: 0 18px 36px rgba(28, 85, 58, 0.18);
  color: #f7fbf9;
  font-size: 1.55rem;
  font-weight: 700;
}

.offers-launch-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.offers-launch-copy h3,
.offers-launch-copy p {
  margin: 0;
}

.offers-launch-copy .helper-copy {
  max-width: 48ch;
  text-align: left;
  font-size: 0.9rem;
}

.offers-launch-button {
  white-space: nowrap;
  min-height: 40px;
  padding-inline: 16px;
}

.offers-status-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.offers-list-panel .helper-copy,
.offers-editor-panel .helper-copy {
  max-width: none;
  text-align: left;
}

.offers-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
}

.commercial-direction-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(198, 205, 188, 0.72);
  border-radius: 999px;
  background: rgba(247, 250, 246, 0.78);
}

.commercial-direction-tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.commercial-direction-tab:hover,
.commercial-direction-tab:focus-visible {
  color: var(--text);
  background: rgba(225, 235, 224, 0.86);
}

.commercial-direction-tab.is-active {
  color: #f7fbf9;
  background: linear-gradient(135deg, #236646, #2f7f59);
  box-shadow: 0 10px 22px rgba(35, 102, 70, 0.18);
}

.offers-list {
  display: grid;
  gap: 10px;
}

.offer-list-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(198, 205, 188, 0.72);
  border-left: 5px solid transparent;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.offer-list-card:hover {
  border-color: rgba(40, 108, 77, 0.34);
  box-shadow: 0 18px 34px rgba(49, 70, 56, 0.1);
  transform: translateY(-1px);
}

.offer-list-card.is-active {
  border-color: rgba(34, 96, 68, 0.48);
  box-shadow: 0 18px 34px rgba(39, 74, 54, 0.14);
}

.offer-list-card.is-draft {
  border-left-color: #7d8fb7;
  background:
    linear-gradient(145deg, rgba(247, 249, 255, 0.94), rgba(239, 243, 253, 0.9));
}

.offer-list-card.is-sent {
  border-left-color: #4d97d4;
  background:
    linear-gradient(145deg, rgba(243, 249, 255, 0.94), rgba(232, 244, 255, 0.9));
}

.offer-list-card.is-accepted {
  border-left-color: #3b9a64;
  background:
    linear-gradient(145deg, rgba(244, 252, 246, 0.94), rgba(233, 247, 237, 0.9));
}

.offer-list-card.is-rejected {
  border-left-color: #d36a6a;
  background:
    linear-gradient(145deg, rgba(255, 248, 248, 0.94), rgba(250, 236, 236, 0.9));
}

.offer-list-card-head,
.offer-list-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.offer-list-card-number {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.offer-list-card-title {
  margin: 0;
  font-size: 0.96rem;
  color: var(--text);
}

.offer-list-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.offer-list-card-title,
.offer-list-card-meta,
.offer-list-card-services,
.offers-editor-meta-value {
  overflow-wrap: anywhere;
}

.offer-list-card-meta,
.offer-list-card-services {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.offer-list-card-total {
  font-size: 0.95rem;
  color: #1d6b4d;
}

.offer-list-financial-summary {
  display: grid;
  gap: 4px;
  min-width: 250px;
  padding: 12px 14px;
  border: 1px solid rgba(196, 210, 232, 0.78);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 248, 255, 0.95));
  box-shadow: 0 12px 24px rgba(30, 64, 120, 0.08);
}

.offer-list-financial-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.25;
}

.offer-list-financial-row strong {
  color: var(--text);
  font-size: 1rem;
  white-space: nowrap;
}

.offer-list-financial-row.is-discount strong {
  color: #b45309;
}

.offer-list-financial-row.is-grand {
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid rgba(170, 199, 184, 0.72);
  color: #047857;
  font-weight: 800;
}

.offer-list-financial-row.is-grand strong {
  color: #047857;
  font-size: 1.04rem;
}

.offer-list-financial-row.is-fixed-base {
  color: #1e3a8a;
  font-weight: 800;
}

.offer-list-financial-row.is-fixed-base strong {
  color: #1d4ed8;
  font-size: 1.12rem;
}

.offer-list-card .work-item-status-dropdown {
  flex: 0 0 auto;
}

.offer-list-card .work-item-status-trigger {
  min-width: 110px;
}

.offer-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.offer-status-badge.is-draft {
  background: rgba(208, 215, 230, 0.62);
  color: #4f5d78;
}

.offer-status-badge.is-sent {
  background: rgba(198, 225, 255, 0.72);
  color: #235e92;
}

.offer-status-badge.is-accepted {
  background: rgba(201, 239, 216, 0.78);
  color: #236846;
}

.offer-status-badge.is-rejected {
  background: rgba(255, 222, 222, 0.82);
  color: #9e3d3d;
}

.offers-editor-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.offers-editor-topline {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(180px, 220px);
  gap: 12px;
  align-items: end;
}

.offer-status-field {
  max-width: 280px;
}

.offer-status-field .work-item-status-select {
  min-height: 40px;
}

.offers-editor-meta-block {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(198, 205, 188, 0.7);
  background: rgba(255, 255, 255, 0.74);
}

.offers-editor-meta-label {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.offers-editor-meta-value {
  font-size: 0.94rem;
  color: var(--text);
}

.offers-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.offers-items-head strong {
  display: block;
  margin-bottom: 4px;
}

.offer-items {
  display: grid;
  gap: 8px;
}

.offer-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(198, 205, 188, 0.72);
  background: rgba(255, 255, 255, 0.66);
  min-width: 0;
}

.offer-item-row .field {
  min-width: 0;
}

.commercial-date-control {
  position: relative;
  display: block;
  min-width: 0;
}

.commercial-date-control input[type="text"] {
  min-width: 0;
  width: 100%;
  padding-right: 48px;
}

.commercial-date-picker-button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 1px solid rgba(181, 198, 231, 0.95);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.94));
  color: transparent;
  font-size: 0;
  box-shadow: none;
  cursor: pointer;
  pointer-events: none;
}

.commercial-date-picker-button::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid #315fc5;
  border-top-width: 4px;
  border-radius: 4px;
  box-shadow: inset 0 5px 0 rgba(49, 95, 197, 0.08);
}

.commercial-date-picker-button:hover {
  border-color: rgba(49, 95, 197, 0.55);
  background: #ffffff;
}

.commercial-date-native {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 2;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  opacity: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}

.field.is-currency-field {
  position: relative;
}

.field.is-currency-field input {
  padding-right: 54px;
}

.field.is-currency-field::after {
  content: "EUR";
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(181, 198, 231, 0.82);
  background: rgba(245, 248, 255, 0.96);
  color: #315375;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
  text-align: center;
}

.offer-item-head,
.offer-item-breakdowns-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.offer-item-head-title {
  color: var(--text);
}

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

.offer-item-mini-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding-inline: 12px;
}

.offer-summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding-inline: 12px;
}

.offer-item-mini-action.is-icon-only,
.offer-summary-toggle.is-icon-only {
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.offer-item-mini-action::before,
.offer-summary-toggle::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(50, 94, 76, 0.1);
  color: #2e6752;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.offer-item-mini-action.is-discount::before,
.offer-summary-toggle.is-discount::before {
  content: "%";
}

.offer-item-mini-action.is-breakdown::before {
  content: "=";
}

.offer-summary-toggle.is-total::before {
  content: "T";
}

.offer-item-field.is-description {
  min-width: 0;
}

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

.offer-item-optionals {
  display: grid;
  gap: 10px;
}

.offer-item-breakdowns {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(203, 211, 193, 0.72);
  background: rgba(245, 248, 243, 0.76);
}

.offer-item-breakdown-list {
  display: grid;
  gap: 8px;
}

.offer-item-breakdown-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(92px, 0.55fr) minmax(92px, 0.55fr) minmax(120px, 0.65fr) auto;
  gap: 8px;
  align-items: end;
}

.offer-item-breakdown-remove {
  min-width: 82px;
  min-height: 38px;
}

.offer-item-actions {
  display: flex;
  justify-content: flex-end;
}

.offer-item-total {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: end;
  min-width: 88px;
}

.offer-item-total-label {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.offer-item-total-value {
  font-weight: 700;
  color: var(--text);
  font-size: 0.9rem;
}

.offer-item-remove {
  min-width: 82px;
  min-height: 38px;
}

.offers-totals-card {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(198, 205, 188, 0.72);
  background: rgba(243, 247, 241, 0.92);
}

.offers-discount-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.offers-discount-field {
  min-width: min(100%, 220px);
}

.offers-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
}

.offers-total-line strong {
  color: var(--text);
}

.offers-total-line.is-grand {
  padding-top: 10px;
  border-top: 1px solid rgba(180, 189, 169, 0.56);
  font-size: 1rem;
  color: var(--text);
}

.offers-total-line.is-grand strong {
  color: #1d6b4d;
  font-size: 1rem;
}

.offers-empty-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(169, 178, 157, 0.72);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.56);
}

body.is-company-editor-open,
body.is-location-editor-open {
  overflow: hidden;
}

.masterdata-launch-panel {
  display: grid;
  gap: 12px;
}

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

.masterdata-editor-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
}

.masterdata-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 128;
  background: rgba(17, 21, 31, 0.28);
  backdrop-filter: blur(6px);
}

.masterdata-editor-panel.is-modal-open {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 69;
  width: min(1040px, calc(100vw - 24px));
  height: calc(100vh - 28px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

.company-editor-panel.is-modal-open {
  width: min(1920px, calc(100vw - 2px));
  height: min(1120px, calc(100dvh - 2px));
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 129;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.user-editor-panel.is-modal-open {
  width: min(1120px, calc(100vw - 28px));
  top: 24px !important;
  bottom: 24px !important;
  height: auto !important;
  max-height: calc(100dvh - 48px) !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  z-index: 129;
}

.user-editor-panel {
  position: relative;
}

.user-editor-backdrop {
  backdrop-filter: none;
}

.user-editor-panel .masterdata-editor-body {
  height: auto;
  min-height: 0;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 36px;
  padding-top: 12px;
  will-change: scroll-position;
}

.user-editor-panel .masterdata-editor-body > .entity-form {
  padding-bottom: 22px;
}

.user-editor-panel.is-drop-target::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  border: 2px dashed rgba(214, 76, 185, 0.78);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  pointer-events: none;
  z-index: 2;
}

.user-editor-panel.is-drop-target::after {
  content: "Pusti dokumente korisnika ovdje";
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d54dc0, #6a5df3);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 18px 32px rgba(111, 77, 213, 0.28);
}

.company-editor-backdrop {
  z-index: 128;
}

.user-editor-backdrop {
  z-index: 128;
}

.location-editor-panel.is-modal-open {
  width: min(1220px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 32px));
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 131;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.location-editor-backdrop {
  z-index: 130;
}

.masterdata-editor-fixed-head {
  display: grid;
  gap: 10px;
  padding: 18px 20px 12px;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(247, 249, 253, 0.96));
  border-bottom: 1px solid rgba(232, 236, 245, 0.9);
}

.masterdata-editor-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.masterdata-editor-body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 12px 20px 20px;
  display: grid;
  align-content: start;
  gap: 14px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.masterdata-editor-body:focus {
  outline: none;
}

.masterdata-editor-body > .entity-form {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.company-editor-body {
  padding: 12px 20px 20px;
  overflow: hidden;
}

.company-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 16px;
  min-height: 0;
  height: 100%;
}

.company-editor-form-shell {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.company-editor-form-shell > .entity-form {
  gap: 10px;
  padding-bottom: 20px;
}

.company-workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 14px 16px;
  border: 1px solid rgba(178, 195, 232, 0.86);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(124, 90, 255, 0.14), transparent 34%),
    radial-gradient(circle at top right, rgba(37, 194, 160, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96));
  box-shadow: 0 20px 44px rgba(51, 70, 119, 0.1);
}

.company-workspace-actions {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.company-workspace-more-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 14px;
  color: #3d4b68;
  font-size: 1.25rem;
  line-height: 1;
}

.company-workspace-hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.company-workspace-logo {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  flex: 0 0 68px;
  overflow: hidden;
  background: linear-gradient(135deg, #1f2d49, #6d4af0);
  color: #ffffff;
  font-weight: 900;
  font-size: 1rem;
}

.company-workspace-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-workspace-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.company-workspace-title h4 {
  margin: 0;
  color: #172033;
  font-size: 1.22rem;
  line-height: 1.18;
}

.company-workspace-title span {
  color: #667085;
  font-size: 0.84rem;
  line-height: 1.45;
}

.company-workspace-stats[hidden] {
  display: none !important;
}

.company-workspace-stats,
.company-list-expansion-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.company-workspace-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(203, 213, 225, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.company-workspace-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  color: #315169;
  background: linear-gradient(135deg, rgba(229, 245, 241, 0.98), rgba(239, 244, 255, 0.98));
}

.company-workspace-stat-icon svg {
  width: 17px;
  height: 17px;
}

.company-workspace-stat-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.company-workspace-stat-copy span {
  color: #697386;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.company-workspace-stat-copy strong {
  color: #172033;
  font-size: 1.18rem;
  line-height: 1;
}

.company-workspace-stat-copy small {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 0.74rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-workspace-stat.is-success .company-workspace-stat-icon {
  color: #11784b;
  background: rgba(220, 252, 231, 0.92);
}

.company-workspace-stat.is-info .company-workspace-stat-icon {
  color: #285ab8;
  background: rgba(226, 238, 255, 0.95);
}

.company-workspace-stat.is-accent .company-workspace-stat-icon {
  color: #7e2cf0;
  background: rgba(126, 44, 240, 0.12);
}

.company-workspace-stat.is-muted {
  opacity: 0.78;
}

.company-editor-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 12px;
  border: 1px solid rgba(187, 198, 224, 0.98);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(124, 90, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 246, 255, 0.96));
  box-shadow: 0 22px 42px rgba(45, 56, 94, 0.13);
  scrollbar-width: none;
}

.company-editor-tab {
  --company-tab-accent: #5b6ff1;
  --company-tab-soft: rgba(91, 111, 241, 0.18);
  --company-tab-strong: rgba(91, 111, 241, 0.28);
  --company-tab-border: rgba(91, 111, 241, 0.45);
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 98px;
  padding: 15px;
  overflow: hidden;
  border: 1.5px solid var(--company-tab-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, var(--company-tab-strong), transparent 48%),
    radial-gradient(circle at bottom left, var(--company-tab-soft), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 255, 0.96));
  color: #59657a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 28px rgba(44, 53, 91, 0.08);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.company-editor-tab::after {
  content: "";
  position: absolute;
  inset: auto 14px 10px 14px;
  height: 5px;
  border-radius: 999px;
  background: var(--company-tab-accent);
  opacity: 0.22;
  transform: scaleX(0.52);
  transform-origin: left center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.company-editor-tab[data-company-tab-tone="overview"] {
  --company-tab-accent: #2457e8;
  --company-tab-soft: rgba(36, 87, 232, 0.2);
  --company-tab-strong: rgba(36, 87, 232, 0.32);
  --company-tab-border: rgba(36, 87, 232, 0.5);
}

.company-editor-tab[data-company-tab-tone="locations"] {
  --company-tab-accent: #07815f;
  --company-tab-soft: rgba(7, 129, 95, 0.2);
  --company-tab-strong: rgba(7, 129, 95, 0.32);
  --company-tab-border: rgba(7, 129, 95, 0.5);
}

.company-editor-tab[data-company-tab-tone="work-orders"] {
  --company-tab-accent: #5046e5;
  --company-tab-soft: rgba(80, 70, 229, 0.2);
  --company-tab-strong: rgba(80, 70, 229, 0.32);
  --company-tab-border: rgba(80, 70, 229, 0.52);
}

.company-editor-tab[data-company-tab-tone="periodics"] {
  --company-tab-accent: #d51f6f;
  --company-tab-soft: rgba(213, 31, 111, 0.2);
  --company-tab-strong: rgba(213, 31, 111, 0.32);
  --company-tab-border: rgba(213, 31, 111, 0.52);
}

.company-editor-tab[data-company-tab-tone="contracts"] {
  --company-tab-accent: #a45400;
  --company-tab-soft: rgba(164, 84, 0, 0.2);
  --company-tab-strong: rgba(245, 158, 11, 0.34);
  --company-tab-border: rgba(164, 84, 0, 0.52);
}

.company-editor-tab[data-company-tab-tone="portal"] {
  --company-tab-accent: #06758f;
  --company-tab-soft: rgba(6, 117, 143, 0.2);
  --company-tab-strong: rgba(6, 117, 143, 0.32);
  --company-tab-border: rgba(6, 117, 143, 0.5);
}

.company-editor-tab[data-company-tab-tone="documents"] {
  --company-tab-accent: #6f2de2;
  --company-tab-soft: rgba(111, 45, 226, 0.2);
  --company-tab-strong: rgba(111, 45, 226, 0.32);
  --company-tab-border: rgba(111, 45, 226, 0.52);
}

.company-editor-tab[data-company-tab-tone="settings"] {
  --company-tab-accent: #475569;
  --company-tab-soft: rgba(71, 85, 105, 0.18);
  --company-tab-strong: rgba(71, 85, 105, 0.28);
  --company-tab-border: rgba(71, 85, 105, 0.45);
}

.company-editor-tab-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 19px;
  color: var(--company-tab-accent);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), var(--company-tab-soft));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.86),
    0 12px 22px rgba(48, 59, 98, 0.12);
}

.company-editor-tab-icon svg {
  width: 23px;
  height: 23px;
}

.company-editor-tab-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-editor-tab-label {
  color: #364153;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.16;
  text-transform: uppercase;
  white-space: normal;
}

.company-editor-tab strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 1.24rem;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-editor-tab small {
  color: #40506a;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.company-editor-tab:hover,
.company-editor-tab.is-active {
  border-color: var(--company-tab-border);
  background:
    radial-gradient(circle at top right, var(--company-tab-strong), transparent 44%),
    radial-gradient(circle at bottom left, var(--company-tab-soft), transparent 56%),
    linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(242, 247, 255, 0.98));
  color: #172033;
  box-shadow:
    0 18px 36px rgba(50, 62, 105, 0.18),
    0 0 0 3px var(--company-tab-soft);
  transform: translateY(-1px);
}

.company-editor-tab:hover::after,
.company-editor-tab.is-active::after {
  opacity: 0.94;
  transform: scaleX(1);
}

.company-editor-tab.is-active .company-editor-tab-icon {
  color: #ffffff;
  background:
    linear-gradient(135deg, var(--company-tab-accent), color-mix(in srgb, var(--company-tab-accent) 74%, #111827));
  box-shadow:
    0 16px 28px var(--company-tab-soft),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

[data-company-tab-panel].is-company-tab-hidden {
  display: none !important;
}

.company-dashboard-panel {
  overflow: hidden;
}

.company-dashboard-preview-head,
.company-module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.company-dashboard-preview-head .section-kicker,
.company-dashboard-preview-head .subsection-title {
  margin: 0;
}

.company-overview-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.company-preview-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(195, 208, 235, 0.88);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(124, 90, 255, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 28px rgba(45, 61, 105, 0.07);
}

.company-preview-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.company-preview-section-head > div,
.company-preview-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-preview-section-head strong {
  color: #16213a;
  font-size: 0.96rem;
  font-weight: 950;
}

.company-preview-section-head span {
  color: #697891;
  font-size: 0.78rem;
  line-height: 1.4;
}

.company-preview-action {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 12px;
  color: #4d3bd7;
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.company-preview-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.company-preview-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(211, 220, 239, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(45, 61, 105, 0.045);
}

.company-preview-row-badge {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  max-width: 58px;
  min-height: 27px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 999px;
  color: #334155;
  background: rgba(239, 244, 255, 0.95);
  font-size: 0.68rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-preview-row.is-success .company-preview-row-badge {
  color: #0f7a4d;
  background: rgba(220, 252, 231, 0.9);
}

.company-preview-row.is-warning .company-preview-row-badge {
  color: #9a5300;
  background: rgba(255, 247, 237, 0.95);
}

.company-preview-row.is-info .company-preview-row-badge {
  color: #285ab8;
  background: rgba(226, 238, 255, 0.95);
}

.company-preview-row-copy strong,
.company-preview-row-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-preview-row-copy strong {
  color: #172033;
  font-size: 0.84rem;
  font-weight: 900;
}

.company-preview-row-copy small {
  color: #70809a;
  font-size: 0.74rem;
  line-height: 1.35;
}

.company-document-overview {
  display: grid;
  gap: 12px;
  min-width: 0;
}

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

.company-document-category-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(192, 207, 235, 0.9);
  border-radius: 17px;
  background:
    radial-gradient(circle at top right, rgba(111, 45, 226, 0.11), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
}

.company-document-category-card strong {
  color: #0f172a;
  font-size: 1.16rem;
  line-height: 1;
}

.company-document-category-card span {
  overflow: hidden;
  color: #253348;
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-document-category-card small {
  overflow: hidden;
  color: #73819a;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-document-recent-list {
  display: grid;
  gap: 8px;
}

.company-module-toolbar {
  align-items: end;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid rgba(202, 214, 236, 0.9);
  border-radius: 18px;
  background: rgba(248, 251, 255, 0.82);
}

.company-module-search,
.company-module-filter {
  display: grid;
  gap: 5px;
  min-width: 180px;
  margin: 0;
}

.company-module-search {
  flex: 1 1 320px;
}

.company-module-filter {
  flex: 0 1 190px;
}

.company-module-search span,
.company-module-filter span {
  color: #687894;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.company-module-search input,
.company-module-filter select {
  width: 100%;
  min-height: 40px;
  border-radius: 14px;
}

.company-module-primary-button {
  min-height: 38px;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(80, 70, 229, 0.18);
}

.company-linked-workorders-list {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.company-workorders-table {
  display: grid;
  min-width: 980px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.company-workorders-table-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.62fr) minmax(180px, 1.35fr) minmax(160px, 1.1fr) minmax(80px, 0.55fr) minmax(96px, 0.7fr) minmax(108px, 0.76fr) minmax(92px, 0.6fr) minmax(108px, 0.7fr) minmax(74px, auto);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  color: #263247;
}

.company-workorders-table-row:first-child {
  border-top: 0;
}

.company-workorders-table-row.is-head {
  min-height: 42px;
  padding-block: 11px;
  border-top: 0;
  color: #67748d;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(243, 247, 255, 0.94));
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.company-workorders-table-row:not(.is-head) {
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.company-workorders-table-row:not(.is-head):hover {
  background:
    radial-gradient(circle at 12% 0, rgba(124, 90, 255, 0.08), transparent 32%),
    rgba(250, 252, 255, 0.98);
  box-shadow: inset 4px 0 0 rgba(124, 90, 255, 0.62);
}

.company-workorders-table-row > * {
  min-width: 0;
}

.company-workorders-table-row > span,
.company-workorders-title,
.company-workorders-rn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-workorders-rn {
  color: #111a35;
  font-size: 0.9rem;
  font-weight: 950;
}

.company-workorders-title {
  color: #172033;
  font-size: 0.84rem;
  font-weight: 850;
}

.company-workorders-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
}

@media (max-width: 1100px) {
  .company-workspace-actions {
    justify-content: flex-start;
  }

  .company-overview-preview-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 920px) {
  .company-editor-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .company-editor-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-radius: 20px;
  }

  .company-editor-tab {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    min-height: 118px;
    padding: 12px;
  }

  .company-editor-tab-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .company-document-category-grid,
  .company-overview-preview-grid {
    grid-template-columns: 1fr;
  }
}

.company-activity-panel {
  padding-left: 18px;
  border-left: 1px solid #edf0f6;
  background:
    radial-gradient(circle at top right, rgba(92, 160, 235, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(250, 252, 255, 0.97), rgba(245, 248, 253, 0.95));
}

.company-activity-head {
  align-items: center;
}

.company-activity-copy {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #74829d;
  font-size: 0.8rem;
  line-height: 1.5;
}

.company-activity-list {
  position: relative;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.company-activity-list::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 18px;
  width: 1px;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.28), rgba(37, 194, 160, 0.1));
}

.company-activity-item {
  position: relative;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.company-activity-avatar {
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 3px solid rgba(249, 251, 255, 0.98);
  box-shadow: 0 8px 18px rgba(74, 91, 145, 0.12);
}

.company-activity-item-body {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(207, 216, 235, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(74, 91, 145, 0.06);
  text-align: left;
}

.company-activity-item-button {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.company-activity-item-button:hover {
  border-color: rgba(125, 142, 210, 0.36);
  box-shadow: 0 12px 22px rgba(104, 116, 167, 0.08);
}

.company-activity-item-title {
  color: #263247;
}

.masterdata-company-contract-card,
.masterdata-company-contact-card {
  gap: 12px;
}

.masterdata-company-contract-card > .masterdata-company-contract-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.company-contract-price-list-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(196, 207, 233, 0.94);
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 250, 255, 0.95));
  box-shadow: 0 14px 34px rgba(61, 78, 118, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.company-contract-price-list {
  display: grid;
  gap: 8px;
}

.company-contract-price-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 0.7fr) minmax(120px, 0.8fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(209, 219, 238, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.company-contract-price-row .field {
  min-width: 0;
}

.company-contract-price-row-remove {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
}

.company-contract-price-list-empty {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(161, 179, 215, 0.78);
  color: #64708a;
  background: rgba(248, 251, 255, 0.72);
  font-size: 0.84rem;
  text-align: center;
}

.company-contract-price-list:not(:empty) + .company-contract-price-list-empty {
  display: none;
}

.company-related-contracts {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214, 221, 236, 0.94);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(245, 249, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.company-related-contracts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.company-related-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.company-related-actions .card-button {
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 850;
}

.company-related-contracts-head > div {
  display: grid;
  gap: 4px;
}

.company-related-contracts-head span,
.company-related-contracts-head p {
  margin: 0;
  color: #74829d;
  font-size: 0.8rem;
  line-height: 1.5;
}

.company-periodics-card {
  gap: 14px;
}

.company-periodics-head {
  align-items: flex-start;
}

.company-periodics-head .card-button {
  min-height: 36px;
  border-color: rgba(220, 63, 125, 0.22);
  color: #8d2853;
  background: linear-gradient(135deg, rgba(255, 246, 251, 0.98), rgba(248, 250, 255, 0.98));
}

.company-periodics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.company-periodics-summary-card {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 96px;
  overflow: hidden;
  padding: 16px 18px;
  border: 1.5px solid rgba(185, 198, 226, 0.98);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(124, 90, 255, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(243, 247, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 28px rgba(47, 58, 89, 0.08);
}

.company-periodics-summary-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #64748b;
}

.company-periodics-summary-card.is-overdue::before {
  background: #dc2626;
}

.company-periodics-summary-card.is-warning::before {
  background: #f59e0b;
}

.company-periodics-summary-card.is-total::before {
  background: #7e3af2;
}

.company-periodics-summary-card.is-next::before {
  background: #2563eb;
}

.company-periodics-summary-card span {
  color: #344054;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.company-periodics-summary-card strong {
  color: #0f172a;
  font-size: 1.45rem;
  line-height: 1;
}

.company-periodics-list-shell {
  display: grid;
  gap: 10px;
}

.company-periodics-list {
  display: grid;
  gap: 8px;
}

.company-periodics-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(96px, 0.16fr) minmax(0, 1fr) minmax(150px, auto);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(207, 216, 235, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 26px rgba(47, 58, 89, 0.06);
}

.company-periodics-row::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 3px;
  border-radius: 999px;
  background: #64748b;
}

.company-periodics-row.is-overdue::before {
  background: #dc2626;
}

.company-periodics-row.is-critical::before,
.company-periodics-row.is-today::before {
  background: #f97316;
}

.company-periodics-row.is-warning::before {
  background: #f59e0b;
}

.company-periodics-row.is-future::before {
  background: #16a34a;
}

.company-periodics-type {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #334155;
  background: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 900;
}

.company-periodics-type.is-inspection {
  color: #8d2853;
  background: rgba(220, 63, 125, 0.12);
}

.company-periodics-type.is-contract {
  color: #8a4b05;
  background: rgba(245, 158, 11, 0.14);
}

.company-periodics-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-periodics-copy strong,
.company-periodics-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-periodics-copy strong {
  color: #172033;
  font-size: 0.9rem;
}

.company-periodics-copy span {
  color: #667085;
  font-size: 0.78rem;
}

.company-periodics-due {
  justify-self: end;
  min-width: 144px;
  padding: 0;
}

.work-order-activity-count.is-compact {
  min-width: 32px;
  min-height: 32px;
  padding-inline: 10px;
  font-size: 0.74rem;
  line-height: 1;
  align-self: center;
}

.work-order-activity-empty.is-compact {
  font-size: 0.8rem;
}

.company-linked-contracts-list,
.company-linked-records-list {
  display: grid;
  gap: 8px;
}

.company-location-tree {
  display: grid;
  gap: 10px;
}

.company-location-tree-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.58);
  border-radius: 16px;
  color: #64748b;
  background: rgba(248, 250, 252, 0.82);
}

.company-location-tree-card {
  position: relative;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(141, 113, 244, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(124, 90, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow: 0 16px 34px rgba(47, 58, 89, 0.08);
}

.company-location-tree-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #7c5aff, #25c2a0);
}

.company-location-tree-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.company-location-tree-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #285ab8;
  background: linear-gradient(135deg, rgba(226, 238, 255, 0.98), rgba(235, 228, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(124, 90, 255, 0.12);
}

.company-location-tree-icon svg {
  width: 18px;
  height: 18px;
}

.company-location-tree-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-location-tree-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  font-size: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-location-tree-copy span,
.company-location-tree-muted {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}

.company-location-tree-badges,
.company-location-object-list,
.company-location-rn-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.company-location-tree-details {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(180px, 0.8fr);
  gap: 10px;
  padding: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
}

.company-location-tree-objects,
.company-location-tree-workorders,
.company-location-tree-contact {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.company-location-tree-label {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.company-location-object-chip,
.company-location-rn-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(124, 90, 255, 0.18);
  background: rgba(247, 250, 255, 0.96);
  color: #263247;
  font-size: 0.76rem;
  font-weight: 800;
}

.company-location-object-chip {
  padding: 5px 9px;
}

.company-location-rn-chip {
  appearance: none;
  gap: 6px;
  padding: 4px 8px;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.company-location-rn-chip strong {
  color: #172033;
  font-size: 0.76rem;
}

.company-location-rn-chip span {
  max-width: 180px;
  overflow: hidden;
  color: #64748b;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-location-rn-chip:hover {
  border-color: rgba(124, 90, 255, 0.36);
  box-shadow: 0 10px 18px rgba(74, 91, 145, 0.1);
  transform: translateY(-1px);
}

.company-location-tree.is-compact .company-location-tree-details {
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr);
}

.company-location-tree.is-compact .company-location-tree-contact {
  display: none;
}

.company-location-tree.is-simple {
  gap: 12px;
}

.company-location-tree.is-simple .company-location-tree-card {
  gap: 12px;
  padding: 16px 16px 16px 18px;
  border-color: rgba(84, 120, 220, 0.26);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 16px 34px rgba(47, 65, 105, 0.07);
}

.company-location-tree.is-simple .company-location-tree-card::before {
  width: 5px;
  background: linear-gradient(180deg, #3772ff, #25c2a0);
}

.company-location-tree.is-simple .company-location-tree-head {
  grid-template-columns: auto minmax(240px, 0.9fr) minmax(260px, 1.1fr) auto;
}

.company-location-tree.is-simple .company-location-tree-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #2563eb;
  background: linear-gradient(145deg, rgba(219, 234, 254, 0.98), rgba(240, 253, 250, 0.94));
}

.company-location-tree.is-simple .company-location-tree-copy strong {
  font-size: 0.98rem;
  font-weight: 900;
}

.company-location-tree.is-simple .company-location-tree-details {
  display: none;
}

.company-location-tree.is-simple .company-location-tree-objects {
  gap: 8px;
}

.company-location-tree.is-simple .company-location-tree-objects.is-inline {
  align-content: center;
  justify-self: stretch;
  padding: 8px 10px;
  border: 1px solid rgba(205, 216, 235, 0.74);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.company-location-tree.is-simple .company-location-tree-objects.is-inline .company-location-tree-label {
  display: none;
}

.company-location-tree.is-simple .company-location-object-list {
  gap: 8px;
  justify-content: flex-start;
}

.company-location-tree.is-simple .company-location-object-chip {
  min-height: 32px;
  padding: 6px 11px;
  border-color: rgba(14, 165, 233, 0.22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.86));
  color: #123055;
}

.company-client-portal-card {
  gap: 12px;
  border-color: rgba(68, 112, 221, 0.34);
  background:
    radial-gradient(circle at top left, rgba(219, 234, 254, 0.78), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow: 0 18px 42px rgba(43, 76, 151, 0.09);
}

.location-client-portal-card {
  gap: 10px;
  border-color: rgba(68, 112, 221, 0.26);
  background:
    radial-gradient(circle at top left, rgba(219, 234, 254, 0.58), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
}

.company-client-portal-card-top {
  margin-top: 14px;
}

.company-template-map-card {
  margin-top: 14px;
  border-color: rgba(84, 123, 204, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.95)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%);
}

.company-template-map-list {
  display: grid;
  gap: 8px;
  max-height: min(460px, 48vh);
  overflow: auto;
  padding-right: 2px;
}

.company-template-map-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.46fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid rgba(188, 204, 232, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.company-template-map-service {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-template-map-service strong {
  color: #12213f;
  font-size: 0.9rem;
}

.company-template-map-service span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-template-map-select-field {
  margin: 0;
}

.company-internal-training-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(188, 204, 232, 0.72);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.9)),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 36%);
}

.company-internal-training-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-internal-training-copy strong {
  color: #12213f;
  font-size: 0.92rem;
}

.company-internal-training-copy span {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 720;
}

.company-internal-training-placeholders {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.company-internal-training-placeholder-group {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.company-internal-training-placeholder-group strong {
  color: #12213f;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.company-internal-training-token-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.company-internal-training-token {
  max-width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.62);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #1d4ed8;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 6px 9px;
}

.company-internal-training-token:hover,
.company-internal-training-token:focus-visible {
  border-color: rgba(37, 99, 235, 0.76);
  background: rgba(219, 234, 254, 0.78);
}

.company-training-import-profile {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(147, 197, 253, 0.72);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.92));
}

.company-training-import-profile textarea {
  min-height: 220px;
  font-family: var(--mono-font, "SFMono-Regular", Consolas, monospace);
  line-height: 1.45;
}

.company-training-import-profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.company-training-import-profile-actions .inline-help {
  flex: 1 1 420px;
  margin: 0;
}

@media (max-width: 860px) {
  .company-internal-training-panel {
    grid-template-columns: 1fr;
  }
}

.company-client-portal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.company-client-portal-card.is-attention {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.16), 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.company-client-copy {
  margin: 0;
}

.company-client-portal-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.company-client-form-card,
.company-client-existing-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.company-client-portal-summary article {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.company-client-portal-summary strong,
.company-client-section-title strong {
  color: #1d2b4f;
}

.company-client-portal-summary span,
.company-client-section-title span {
  color: #66728c;
  font-size: 0.82rem;
  line-height: 1.45;
}

.company-client-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.company-client-section-title {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
}

.company-client-access-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.company-client-person-panel,
.company-client-location-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(204, 216, 239, 0.78);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 252, 255, 0.78));
}

.company-client-mini-title,
.company-client-location-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}

.company-client-mini-title span,
.company-client-location-toolbar > span {
  color: #476080;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.company-client-form-card .field {
  gap: 5px;
}

.company-client-form-card .field > span {
  font-size: 0.76rem;
}

.company-client-form-card .field input {
  min-height: 40px;
}

.company-client-location-field {
  min-width: 0;
}

.company-client-all-locations-toggle {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin: 0;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(197, 212, 238, 0.86);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #1f2d49;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.company-client-all-locations-toggle input {
  width: 16px;
  height: 16px;
}

.company-client-action-panel {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  padding-top: 10px;
  border-top: 1px solid rgba(204, 216, 239, 0.7);
}

.company-client-user-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.company-client-user-actions .primary-button,
.company-client-user-actions .ghost-button {
  min-height: 38px;
  padding: 9px 13px;
  white-space: nowrap;
}

.company-client-action-panel .form-error {
  flex: 1 1 auto;
  min-width: 0;
}

.company-client-location-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  min-height: 78px;
  max-height: 116px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(220, 156, 212, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.company-client-location-list.is-disabled {
  overflow: hidden;
  border-color: rgba(197, 212, 238, 0.82);
  background:
    linear-gradient(135deg, rgba(232, 240, 255, 0.86), rgba(255, 255, 255, 0.92));
}

.company-client-location-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 7px 9px;
  border: 1px solid rgba(180, 195, 224, 0.9);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.98);
  color: #1f2d49;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.company-client-location-option[aria-selected="true"] {
  border-color: rgba(37, 99, 235, 0.58);
  background: rgba(219, 234, 254, 0.9);
  color: #153b8a;
}

.company-client-location-option:disabled {
  cursor: default;
}

.company-client-location-check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 800;
}

.company-client-location-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.company-client-location-copy strong,
.company-client-location-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-client-location-copy small,
.company-client-location-empty {
  color: #66728c;
  font-size: 0.74rem;
}

.company-client-location-empty {
  margin: 0;
  padding: 6px 2px;
}

.company-client-location-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  border: 1px dashed rgba(73, 106, 214, 0.38);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #304466;
  font-size: 0.82rem;
  font-weight: 700;
}

.company-client-existing-card {
  align-content: start;
  min-height: 100%;
}

.company-client-existing-card .company-linked-records-list {
  max-height: 242px;
  overflow: auto;
  padding-right: 2px;
}

.company-client-existing-card .company-linked-record-item {
  padding: 9px 10px;
}

.company-linked-record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(202, 214, 236, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.company-linked-record-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-linked-record-copy strong,
.company-linked-record-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-linked-record-copy span {
  color: #66728c;
  font-size: 0.8rem;
}

.company-linked-record-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.client-portal-module {
  display: grid;
  gap: 16px;
}

.client-portal-hero {
  order: 0;
}

.client-portal-register-panel {
  order: 1;
}

.client-portal-layout {
  order: 2;
}

.client-portal-preview-panel {
  order: 3;
}

.client-portal-modal-backdrop,
.client-portal-modal {
  order: 4;
}

.client-portal-hero,
.client-portal-access-panel,
.client-portal-users-panel,
.client-portal-preview-panel {
  background:
    radial-gradient(circle at top left, rgba(219, 234, 254, 0.62), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  border-color: rgba(68, 112, 221, 0.24);
}

.client-portal-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

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

.client-portal-summary-grid article {
  display: grid;
  gap: 6px;
  padding: 13px 15px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.client-portal-summary-grid span {
  color: #66728c;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-portal-summary-grid strong {
  color: #18325f;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
}

.client-portal-layout {
  display: grid;
  gap: 16px;
  align-items: start;
}

.client-portal-access-panel,
.client-portal-users-panel {
  display: grid;
  gap: 14px;
}

.client-portal-company-field {
  max-width: 540px;
}

.client-portal-toolbar-panel {
  gap: 12px;
}

.client-portal-toolbar-grid {
  display: grid;
  grid-template-columns: minmax(280px, 540px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

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

.client-portal-toolbar-actions .primary-button,
.client-portal-toolbar-actions .ghost-button {
  min-height: 42px;
}

.client-portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background:
    radial-gradient(circle at 18% 18%, rgba(37, 99, 235, 0.16), transparent 34%),
    rgba(13, 24, 46, 0.34);
  backdrop-filter: blur(8px);
}

.client-portal-modal {
  position: fixed;
  inset: 0;
  z-index: 1410;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}

.client-portal-modal[hidden],
.client-portal-modal-backdrop[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.client-portal-access-dialog {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  gap: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at top left, rgba(219, 234, 254, 0.72), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  border-color: rgba(68, 112, 221, 0.28);
  box-shadow: 0 28px 70px rgba(31, 54, 102, 0.22);
}

.client-portal-form-card {
  padding: 14px;
}

.client-portal-users-list {
  display: grid;
  gap: 10px;
  max-height: 500px;
  overflow: auto;
  padding-right: 4px;
}

.client-portal-user-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(190, 204, 232, 0.8);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.9));
  box-shadow: 0 12px 28px rgba(31, 54, 102, 0.08);
}

.client-portal-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(216, 230, 255, 0.95), rgba(248, 226, 255, 0.95));
  color: #1f3c78;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.client-portal-user-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.client-portal-user-copy strong,
.client-portal-user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-portal-user-copy span {
  color: #64728c;
  font-size: 0.82rem;
}

.client-portal-user-scope {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid rgba(154, 178, 220, 0.72);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.92);
  color: #244a8f;
  font-size: 0.74rem;
  font-weight: 800;
}

.client-portal-user-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.client-portal-scope-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(74, 118, 223, 0.24);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.9);
  color: #1f4a99;
  font-size: 0.78rem;
  font-weight: 800;
}

.client-portal-preview-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
}

.client-portal-preview-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.client-portal-preview-logo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e7f0ff, #f8e7ff);
  color: #2755b8;
}

.client-portal-preview-brand div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-preview-brand strong,
.client-portal-preview-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-portal-preview-brand span {
  color: #64728c;
  font-size: 0.86rem;
}

.client-portal-preview-list {
  display: grid;
  gap: 14px;
}

.client-portal-preview-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.client-portal-preview-item {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 12px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.client-portal-preview-item span {
  color: #64728c;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.client-portal-preview-item strong {
  color: #1d2b4f;
  font-size: 1.4rem;
}

.client-portal-preview-item small {
  color: #6b7690;
  line-height: 1.35;
}

.client-portal-preview-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.client-portal-preview-section.is-collapsed {
  gap: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 255, 0.86));
}

.client-portal-preview-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  cursor: pointer;
  user-select: none;
}

.client-portal-preview-section-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.client-portal-preview-section-head strong {
  color: #1d2b4f;
  font-size: 0.98rem;
}

.client-portal-preview-section-head span {
  color: #64728c;
  font-size: 0.82rem;
}

.client-portal-preview-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(74, 118, 223, 0.24);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.94);
  color: #1f4a99;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.client-portal-preview-toggle:hover {
  border-color: rgba(74, 118, 223, 0.42);
  background: rgba(226, 237, 255, 0.98);
}

.client-portal-preview-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(74, 118, 223, 0.2);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.92);
  color: #1f4a99;
  font-size: 0.78rem;
  font-weight: 900;
}

.client-portal-preview-records {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.client-portal-preview-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(203, 214, 234, 0.76);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.84));
}

.client-portal-preview-row.is-document {
  border-color: rgba(129, 192, 158, 0.38);
  background:
    linear-gradient(135deg, rgba(247, 253, 249, 0.96), rgba(255, 255, 255, 0.86));
}

.client-portal-preview-row.is-foundation-document {
  border-color: rgba(99, 102, 241, 0.32);
  background:
    linear-gradient(135deg, rgba(246, 247, 255, 0.96), rgba(255, 255, 255, 0.88));
}

.client-portal-preview-row-main,
.client-portal-preview-row-copy,
.client-portal-preview-row-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-preview-row-main strong,
.client-portal-preview-row-copy strong {
  color: #1d2b4f;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-portal-preview-row-main span,
.client-portal-preview-row-copy span,
.client-portal-preview-row-meta span {
  color: #66728c;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-portal-preview-row-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(154, 178, 220, 0.72);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.9);
  color: #244a8f;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.client-portal-preview-row-badge.is-document {
  border-color: rgba(129, 192, 158, 0.54);
  background: rgba(237, 250, 241, 0.94);
  color: #20623e;
}

.client-portal-preview-row-badge.is-foundation-document {
  border-color: rgba(99, 102, 241, 0.42);
  background: rgba(238, 242, 255, 0.94);
  color: #3730a3;
}

.client-portal-preview-empty {
  padding: 14px;
  border: 1px dashed rgba(154, 178, 220, 0.7);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.72);
  color: #66728c;
  font-size: 0.86rem;
}

.client-portal-foundation-panel {
  display: grid;
  gap: 14px;
}

.client-portal-foundation-panel[hidden] {
  display: none;
}

.client-portal-foundation-root {
  display: grid;
  gap: 12px;
}

.client-portal-foundation-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
}

.client-portal-foundation-lead div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-foundation-lead strong {
  color: #1d2b4f;
  font-size: 0.98rem;
}

.client-portal-foundation-lead span {
  color: #64728c;
  font-size: 0.84rem;
  line-height: 1.35;
}

.client-portal-foundation-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(99, 102, 241, 0.26);
  border-radius: 999px;
  background: rgba(238, 242, 255, 0.9);
  color: #3730a3 !important;
  font-size: 0.78rem !important;
  font-weight: 900;
}

.client-portal-foundation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.client-portal-foundation-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-height: 156px;
  padding: 14px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.client-portal-foundation-card.is-placeholder {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 252, 0.82));
}

.client-portal-foundation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(147, 197, 253, 0.54);
  border-radius: 15px;
  background: rgba(239, 246, 255, 0.92);
  color: #2563eb;
}

.client-portal-foundation-icon .icon-svg {
  width: 22px;
  height: 22px;
}

.client-portal-foundation-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.client-portal-foundation-copy strong {
  display: -webkit-box;
  max-height: 2.45rem;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.client-portal-foundation-copy span {
  display: -webkit-box;
  max-height: 3.25rem;
  overflow: hidden;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.client-portal-foundation-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.7rem;
  font-weight: 950;
  white-space: nowrap;
}

.client-portal-foundation-status.is-active {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(240, 253, 244, 0.92);
  color: #166534;
}

.client-portal-foundation-status.is-review {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.94);
  color: #92400e;
}

.client-portal-foundation-meta,
.client-portal-foundation-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.client-portal-foundation-meta span,
.client-portal-foundation-empty,
.client-portal-foundation-more {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.client-portal-foundation-document-button {
  min-width: 0;
  max-width: 210px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.92);
  color: #1d4ed8;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.client-portal-foundation-document-button:hover,
.client-portal-foundation-document-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(219, 234, 254, 0.96);
  outline: none;
}

.client-portal-register-panel {
  display: grid;
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96)),
    linear-gradient(135deg, rgba(232, 241, 255, 0.7), rgba(239, 251, 246, 0.64));
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 18px 42px rgba(31, 41, 55, 0.08);
}

.client-portal-records-root {
  display: grid;
  gap: 16px;
}

.client-portal-record-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.client-portal-record-summary-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 84px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.84);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(15, 23, 42, 0.06);
}

.client-portal-record-summary-card.is-company { --record-accent: #2563eb; --record-accent-soft: #eff6ff; }
.client-portal-record-summary-card.is-open { --record-accent: #0f766e; --record-accent-soft: #ecfdf5; }
.client-portal-record-summary-card.is-attention { --record-accent: #b45309; --record-accent-soft: #fffbeb; }
.client-portal-record-summary-card.is-danger { --record-accent: #dc2626; --record-accent-soft: #fef2f2; }
.client-portal-record-summary-card.is-ok { --record-accent: #16a34a; --record-accent-soft: #f0fdf4; }
.client-portal-record-summary-card.is-worker { --record-accent: #059669; --record-accent-soft: #ecfdf5; }
.client-portal-record-summary-card.is-deadline { --record-accent: #7c3aed; --record-accent-soft: #f5f3ff; }
.client-portal-record-summary-card.is-fire { --record-accent: #2563eb; --record-accent-soft: #eff6ff; }
.client-portal-record-summary-card.is-defect { --record-accent: #7c3aed; --record-accent-soft: #f5f3ff; }
.client-portal-record-summary-card.is-inspection { --record-accent: #4f46e5; --record-accent-soft: #eef2ff; }
.client-portal-record-summary-card.is-training { --record-accent: #0e7490; --record-accent-soft: #ecfeff; }

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

.client-portal-training-import-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 14px;
  background: rgba(236, 254, 255, 0.6);
}

.client-portal-training-import-preview-list {
  display: grid;
  gap: 6px;
}

.client-portal-training-import-preview-list span {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  font-size: 0.86rem;
  font-weight: 700;
}

.client-portal-training-import-confirm {
  justify-self: start;
}

.client-portal-record-summary-icon,
.client-portal-record-tab-icon,
.client-portal-record-form-icon,
.client-portal-record-card-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--record-accent, #2563eb);
  background: var(--record-accent-soft, #eff6ff);
  border: 1px solid color-mix(in srgb, var(--record-accent, #2563eb) 22%, transparent);
}

.client-portal-record-summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.client-portal-record-summary-icon .icon-svg,
.client-portal-record-tab-icon .icon-svg,
.client-portal-record-form-icon .icon-svg,
.client-portal-record-card-icon .icon-svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.client-portal-record-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-record-summary-copy span,
.client-portal-record-summary-copy small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-portal-record-summary-copy strong {
  color: #0f172a;
  font-size: 1.28rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.client-portal-record-summary-copy small {
  color: #7b8798;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

.client-portal-record-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.client-portal-record-tab {
  --record-accent: #2563eb;
  --record-accent-soft: #eff6ff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 11px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #1f2937;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.client-portal-record-tab.is-emerald,
.client-portal-record-card.is-emerald { --record-accent: #059669; --record-accent-soft: #ecfdf5; }
.client-portal-record-tab.is-blue,
.client-portal-record-card.is-blue { --record-accent: #2563eb; --record-accent-soft: #eff6ff; }
.client-portal-record-tab.is-rose,
.client-portal-record-card.is-rose { --record-accent: #e11d48; --record-accent-soft: #fff1f2; }
.client-portal-record-tab.is-amber,
.client-portal-record-card.is-amber { --record-accent: #d97706; --record-accent-soft: #fffbeb; }
.client-portal-record-tab.is-violet,
.client-portal-record-card.is-violet { --record-accent: #7c3aed; --record-accent-soft: #f5f3ff; }
.client-portal-record-tab.is-indigo,
.client-portal-record-card.is-indigo { --record-accent: #4f46e5; --record-accent-soft: #eef2ff; }
.client-portal-record-tab.is-cyan,
.client-portal-record-card.is-cyan { --record-accent: #0891b2; --record-accent-soft: #ecfeff; }
.client-portal-record-tab.is-green,
.client-portal-record-card.is-green { --record-accent: #16a34a; --record-accent-soft: #f0fdf4; }

.client-portal-record-tab:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--record-accent) 42%, #cbd5e1);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.client-portal-record-tab.is-active {
  border-color: color-mix(in srgb, var(--record-accent) 62%, #cbd5e1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    var(--record-accent-soft);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--record-accent) 14%, transparent),
    0 14px 32px color-mix(in srgb, var(--record-accent) 13%, transparent);
}

.client-portal-record-tab-icon,
.client-portal-record-form-icon,
.client-portal-record-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.client-portal-record-tab-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.client-portal-record-tab-copy strong,
.client-portal-record-tab-copy small {
  overflow-wrap: anywhere;
}

.client-portal-record-tab-copy strong {
  color: #111827;
  font-size: 0.88rem;
  line-height: 1.15;
}

.client-portal-record-tab-copy small {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.client-portal-dashboard {
  display: grid;
  gap: 14px;
}

.client-portal-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.client-portal-quick-actions,
.client-portal-dashboard-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.client-portal-dashboard-panel.is-wide {
  grid-column: 1 / -1;
}

.client-portal-dashboard-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.client-portal-dashboard-panel-head strong {
  color: #101828;
  font-size: 0.98rem;
}

.client-portal-dashboard-link {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

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

.client-portal-action-card {
  --record-accent: #2563eb;
  --record-accent-soft: #eff6ff;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 112px;
  padding: 13px 10px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #172033;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.client-portal-action-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--record-accent) 36%, #cbd5e1);
  box-shadow: 0 13px 28px rgba(15, 23, 42, 0.08);
}

.client-portal-action-card.is-emerald { --record-accent: #059669; --record-accent-soft: #ecfdf5; }
.client-portal-action-card.is-blue { --record-accent: #2563eb; --record-accent-soft: #eff6ff; }
.client-portal-action-card.is-rose { --record-accent: #e11d48; --record-accent-soft: #fff1f2; }
.client-portal-action-card.is-amber { --record-accent: #d97706; --record-accent-soft: #fffbeb; }
.client-portal-action-card.is-violet { --record-accent: #7c3aed; --record-accent-soft: #f5f3ff; }
.client-portal-action-card.is-indigo { --record-accent: #4f46e5; --record-accent-soft: #eef2ff; }
.client-portal-action-card.is-cyan { --record-accent: #0891b2; --record-accent-soft: #ecfeff; }
.client-portal-action-card.is-green { --record-accent: #16a34a; --record-accent-soft: #f0fdf4; }

.client-portal-action-icon,
.client-portal-dashboard-row-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--record-accent, #2563eb) 20%, transparent);
  border-radius: 8px;
  background: var(--record-accent-soft, #eff6ff);
  color: var(--record-accent, #2563eb);
}

.client-portal-action-icon .icon-svg,
.client-portal-dashboard-row-icon .icon-svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}

.client-portal-action-card strong {
  color: #111827;
  font-size: 0.84rem;
  line-height: 1.2;
}

.client-portal-action-card small {
  color: #667085;
  font-size: 0.7rem;
  font-weight: 800;
}

.client-portal-dashboard-list {
  display: grid;
  gap: 8px;
}

.client-portal-dashboard-row {
  --record-accent: #2563eb;
  --record-accent-soft: #eff6ff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
  cursor: pointer;
}

.client-portal-dashboard-row.is-emerald { --record-accent: #059669; --record-accent-soft: #ecfdf5; }
.client-portal-dashboard-row.is-blue { --record-accent: #2563eb; --record-accent-soft: #eff6ff; }
.client-portal-dashboard-row.is-rose { --record-accent: #e11d48; --record-accent-soft: #fff1f2; }
.client-portal-dashboard-row.is-amber { --record-accent: #d97706; --record-accent-soft: #fffbeb; }
.client-portal-dashboard-row.is-violet { --record-accent: #7c3aed; --record-accent-soft: #f5f3ff; }
.client-portal-dashboard-row.is-indigo { --record-accent: #4f46e5; --record-accent-soft: #eef2ff; }
.client-portal-dashboard-row.is-cyan { --record-accent: #0891b2; --record-accent-soft: #ecfeff; }
.client-portal-dashboard-row.is-green { --record-accent: #16a34a; --record-accent-soft: #f0fdf4; }

.client-portal-dashboard-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-dashboard-row-copy strong,
.client-portal-dashboard-row-copy small {
  overflow-wrap: anywhere;
}

.client-portal-dashboard-row-copy strong {
  color: #172033;
  font-size: 0.82rem;
}

.client-portal-dashboard-row-copy small,
.client-portal-dashboard-row-date {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
}

.client-portal-dashboard-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.62);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.74);
  color: #667085;
  font-size: 0.84rem;
}

.client-portal-worker-training-dashboard {
  display: grid;
  gap: 8px;
}

.client-portal-worker-training-dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.92fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(207, 235, 244, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 254, 255, 0.9));
  color: #172033;
  text-align: left;
  cursor: pointer;
}

.client-portal-worker-training-dashboard-copy,
.client-portal-worker-training-dashboard-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-worker-training-dashboard-copy strong {
  color: #123347;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.client-portal-worker-training-dashboard-copy small,
.client-portal-worker-training-dashboard-summary {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.client-portal-ppe-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
}

.client-portal-ppe-row {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.55fr 0.8fr 0.8fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.9);
  color: #344054;
  text-align: left;
  font-size: 0.78rem;
  cursor: pointer;
}

.client-portal-ppe-row:last-child {
  border-bottom: 0;
}

.client-portal-ppe-row.is-head {
  background: rgba(248, 250, 252, 0.96);
  color: #667085;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: default;
}

.client-portal-fire-register {
  display: grid;
  overflow-x: auto;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
}

.client-portal-fire-register-row {
  display: grid;
  grid-template-columns: 0.72fr 1.1fr 0.78fr 0.82fr 0.82fr 0.86fr 0.86fr 0.82fr 0.82fr 0.62fr;
  gap: 8px;
  align-items: center;
  min-width: 1220px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
  background: rgba(255, 255, 255, 0.92);
  color: #344054;
  text-align: left;
  font-size: 0.76rem;
  cursor: pointer;
}

.client-portal-fire-register-row:last-child {
  border-bottom: 0;
}

.client-portal-fire-register-row.is-head {
  background: rgba(239, 246, 255, 0.96);
  color: #1e3a8a;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: default;
}

.client-portal-fire-register-row span {
  overflow-wrap: anywhere;
}

.client-portal-document-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.client-portal-document-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  cursor: pointer;
}

.client-portal-document-tile strong,
.client-portal-document-tile small {
  display: block;
  overflow-wrap: anywhere;
}

.client-portal-document-tile strong {
  color: #172033;
  font-size: 0.78rem;
}

.client-portal-document-tile small {
  color: #667085;
  font-size: 0.7rem;
  font-weight: 800;
}

.client-portal-document-type {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 1000;
}

.client-portal-document-type.is-pdf {
  background: #fef2f2;
  color: #dc2626;
}

.client-portal-document-type.is-xls {
  background: #ecfdf5;
  color: #16a34a;
}

.client-portal-record-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.client-portal-record-form {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 32px rgba(15, 23, 42, 0.07);
}

.client-portal-record-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1180;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.48), rgba(15, 23, 42, 0.62));
  backdrop-filter: blur(8px);
}

.client-portal-record-modal {
  position: fixed;
  inset: 0;
  z-index: 1181;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.client-portal-record-dialog {
  width: min(980px, 100%);
  max-height: min(86vh, 820px);
  display: grid;
  gap: 14px;
  overflow: auto;
  pointer-events: auto;
  border-color: rgba(203, 213, 225, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.client-portal-record-modal-head {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.client-portal-record-modal .client-portal-record-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.client-portal-record-modal-feedback:empty {
  display: none;
}

.client-portal-record-form-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.client-portal-record-form-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.client-portal-record-form-copy strong {
  color: #18233a;
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.client-portal-record-form-copy span {
  color: #64728c;
  font-size: 0.78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.client-portal-record-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.client-portal-record-form .field input,
.client-portal-record-form .field select,
.client-portal-record-form .field textarea {
  border-color: rgba(203, 213, 225, 0.92) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.client-portal-record-form .field input:focus,
.client-portal-record-form .field select:focus,
.client-portal-record-form .field textarea:focus {
  border-color: rgba(37, 99, 235, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    inset 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.client-portal-record-field.is-wide {
  grid-column: 1 / -1;
}

.client-portal-record-section-break {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(248, 250, 252, 0.92));
}

.client-portal-record-section-break span {
  color: #172033;
  font-size: 0.82rem;
  font-weight: 900;
}

.client-portal-record-section-break small {
  color: #667085;
  font-size: 0.74rem;
  font-weight: 700;
}

.client-portal-record-attachment-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.82);
}

.client-portal-record-attachment-head {
  display: grid;
  gap: 3px;
}

.client-portal-record-attachment-head span {
  color: #172033;
  font-size: 0.82rem;
  font-weight: 900;
}

.client-portal-record-attachment-head small,
.client-portal-record-attachment-empty {
  color: #667085;
  font-size: 0.74rem;
  font-weight: 700;
}

.client-portal-record-attachment-existing {
  display: grid;
  gap: 7px;
}

.client-portal-record-attachment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.client-portal-record-attachment-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.client-portal-record-attachment-copy strong,
.client-portal-record-attachment-copy small {
  overflow-wrap: anywhere;
}

.client-portal-record-attachment-copy strong {
  color: #172033;
  font-size: 0.78rem;
}

.client-portal-record-attachment-copy small {
  color: #667085;
  font-size: 0.7rem;
  font-weight: 700;
}

.client-portal-record-attachment-open,
.client-portal-record-attachment-remove,
.client-portal-record-attachment-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  background: rgba(239, 246, 255, 0.92);
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 900;
  text-decoration: none;
}

.client-portal-record-attachment-remove {
  border-color: rgba(254, 202, 202, 0.86);
  background: rgba(254, 242, 242, 0.92);
  color: #b91c1c;
}

.client-portal-record-attachment-empty {
  margin: 0;
  padding: 9px;
  border: 1px dashed rgba(148, 163, 184, 0.58);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.client-portal-record-attachment-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.client-portal-record-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-portal-record-attachment-chip {
  border-color: rgba(203, 213, 225, 0.86);
  background: rgba(255, 255, 255, 0.86);
  color: #475569;
}

.client-portal-record-form-actions,
.client-portal-record-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.client-portal-record-form-actions {
  padding-top: 2px;
}

.client-portal-record-list-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.client-portal-record-list-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.client-portal-record-list-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.client-portal-record-add-button {
  min-height: 32px;
  padding-inline: 12px;
  white-space: nowrap;
}

.client-portal-record-list-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.client-portal-record-list-head strong {
  color: #101828;
  font-size: 1rem;
}

.client-portal-record-list-head span {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 700;
}

.client-portal-record-list-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(191, 219, 254, 0.84);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.9);
  color: #1d4ed8;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.client-portal-record-list {
  display: grid;
  gap: 10px;
}

.client-portal-record-card {
  --record-accent: #2563eb;
  --record-accent-soft: #eff6ff;
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--record-accent-soft) 62%, white), rgba(255, 255, 255, 0.96) 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--record-accent) 74%, transparent),
    0 10px 24px rgba(31, 54, 102, 0.06);
}

.client-portal-record-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.client-portal-record-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.client-portal-record-card-copy strong,
.client-portal-record-card-copy span {
  overflow-wrap: anywhere;
}

.client-portal-record-card-copy strong {
  color: #14213d;
  font-size: 0.95rem;
}

.client-portal-record-card-copy span,
.client-portal-record-lines span {
  color: #62708a;
  font-size: 0.82rem;
  line-height: 1.35;
}

.client-portal-record-card-status {
  display: grid;
  gap: 5px;
  justify-items: end;
  white-space: nowrap;
}

.client-portal-record-due-pill,
.client-portal-record-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.7rem;
  font-weight: 900;
}

.client-portal-record-due-pill.is-ok {
  border-color: rgba(187, 247, 208, 0.9);
  background: rgba(240, 253, 244, 0.92);
  color: #15803d;
}

.client-portal-record-due-pill.is-attention {
  border-color: rgba(253, 230, 138, 0.92);
  background: rgba(255, 251, 235, 0.94);
  color: #b45309;
}

.client-portal-record-due-pill.is-overdue {
  border-color: rgba(254, 202, 202, 0.92);
  background: rgba(254, 242, 242, 0.94);
  color: #b91c1c;
}

.client-portal-record-due-pill.is-done {
  border-color: rgba(187, 247, 208, 0.9);
  background: rgba(240, 253, 244, 0.92);
  color: #166534;
}

.client-portal-record-due-pill.is-muted {
  color: #64748b;
}

.client-portal-record-lines {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.client-portal-record-lines span {
  padding: 5px 8px;
  border: 1px solid rgba(196, 209, 232, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.client-portal-worker-training-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(207, 235, 244, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(240, 253, 250, 0.82), rgba(255, 255, 255, 0.9));
}

.client-portal-worker-training-block.has-attention {
  border-color: rgba(253, 230, 138, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.86), rgba(255, 255, 255, 0.92));
}

.client-portal-worker-training-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.client-portal-worker-training-head strong {
  color: #164e63;
  font-size: 0.78rem;
}

.client-portal-worker-training-head span,
.client-portal-worker-training-empty,
.client-portal-worker-training-more {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.client-portal-worker-training-empty {
  margin: 0;
}

.client-portal-worker-training-list {
  display: grid;
  gap: 7px;
}

.client-portal-worker-training-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  gap: 8px;
  align-items: center;
  padding-top: 7px;
  border-top: 1px solid rgba(226, 232, 240, 0.78);
}

.client-portal-worker-training-copy,
.client-portal-worker-training-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.client-portal-worker-training-copy {
  display: grid;
  gap: 2px;
}

.client-portal-worker-training-copy strong,
.client-portal-worker-training-copy small {
  overflow-wrap: anywhere;
}

.client-portal-worker-training-copy strong {
  color: #123347;
  font-size: 0.78rem;
}

.client-portal-worker-training-copy small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 800;
}

.client-portal-training-mini-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.66rem;
  font-weight: 900;
  white-space: nowrap;
}

.client-portal-training-mini-pill.is-valid {
  border-color: rgba(187, 247, 208, 0.9);
  background: rgba(240, 253, 244, 0.92);
  color: #15803d;
}

.client-portal-training-mini-pill.is-expiring {
  border-color: rgba(253, 230, 138, 0.92);
  background: rgba(255, 251, 235, 0.94);
  color: #b45309;
}

.client-portal-training-mini-pill.is-expired,
.client-portal-training-mini-pill.is-missing {
  border-color: rgba(254, 202, 202, 0.92);
  background: rgba(254, 242, 242, 0.94);
  color: #b91c1c;
}

.client-portal-record-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.62);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.74);
  color: #66728c;
  font-size: 0.86rem;
}

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

.entity-link-actions .ghost-button {
  min-height: 38px;
  padding-inline: 14px;
}

.company-contract-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(206, 214, 231, 0.94);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.96));
  box-shadow: 0 12px 26px rgba(61, 78, 118, 0.05);
}

.company-contract-card[role="button"] {
  cursor: pointer;
}

.company-contract-card:hover {
  border-color: rgba(129, 147, 224, 0.36);
  box-shadow: 0 18px 30px rgba(76, 90, 146, 0.08);
}

.company-contract-card:focus-visible,
.company-activity-item-button:focus-visible {
  outline: 2px solid rgba(102, 134, 241, 0.4);
  outline-offset: 2px;
}

.company-contract-card-copy,
.company-contract-card-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.company-contract-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.company-contract-card-head > strong {
  min-width: 0;
  line-height: 1.35;
}

.company-contract-card-head .list-meta-pill {
  justify-self: end;
  white-space: nowrap;
}

.company-contract-card-title {
  color: #253348;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.company-contract-card-meta {
  color: #70809a;
  font-size: 0.79rem;
  line-height: 1.5;
}

.company-contract-card-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  align-self: center;
  gap: 8px;
  flex-wrap: wrap;
}

.masterdata-group-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(217, 224, 214, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(47, 58, 79, 0.05);
}

.company-editor-panel .masterdata-group-card {
  position: relative;
  gap: 10px;
  padding: 14px 16px;
  border-color: rgba(175, 194, 235, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 34px rgba(74, 91, 145, 0.08);
}

.company-editor-panel .masterdata-group-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(82, 136, 239, 0.92), rgba(219, 108, 188, 0.78));
  opacity: 0.95;
}

.company-editor-panel .masterdata-group-card:hover {
  border-color: rgba(130, 154, 224, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 22px 42px rgba(74, 91, 145, 0.12);
}

.company-editor-panel .masterdata-group-card .masterdata-group-head {
  padding-top: 4px;
}

.masterdata-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.company-contract-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.company-contract-head-actions .primary-button,
.company-contract-head-actions .ghost-button {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.masterdata-group-head .section-kicker,
.masterdata-group-head .subsection-title {
  margin: 0;
}

.masterdata-company-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.masterdata-company-grid.is-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.masterdata-company-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.masterdata-company-identity-card {
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 10px;
  min-width: 0;
  align-items: start;
}

.masterdata-company-identity-card > .masterdata-group-head {
  grid-column: 1 / -1;
}

.masterdata-company-identity-card > .company-logo-upload-row {
  grid-column: 1;
  min-width: 0;
  align-self: start;
}

.masterdata-company-identity-card > .masterdata-company-grid {
  grid-column: 2;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 0;
  align-self: start;
}

.company-overview-edit-button {
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 900;
}

.company-overview-summary {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.company-overview-summary-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid rgba(180, 196, 233, 0.92);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(124, 90, 255, 0.12), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 255, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(48, 58, 99, 0.07);
}

.company-overview-summary-card span {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.company-overview-summary-card strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-overview-summary-card small {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-overview-summary-card.is-primary {
  border-color: rgba(80, 70, 229, 0.38);
  background:
    radial-gradient(circle at top right, rgba(80, 70, 229, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(243, 246, 255, 0.98));
}

.company-overview-summary-card.is-success {
  border-color: rgba(22, 163, 74, 0.32);
  background:
    radial-gradient(circle at top right, rgba(22, 163, 74, 0.14), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(241, 253, 248, 0.98));
}

.company-overview-summary-card.is-warning {
  border-color: rgba(245, 158, 11, 0.34);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 249, 237, 0.98));
}

.company-editor-panel.is-company-overview-editing .company-overview-summary {
  display: none;
}

.company-editor-panel.is-company-overview-readonly .masterdata-company-identity-card > .masterdata-company-grid,
.company-editor-panel.is-company-overview-readonly .masterdata-company-contact-card .masterdata-company-contact-grid {
  display: none;
}

.company-editor-panel.is-company-overview-readonly .masterdata-company-contact-card {
  display: none;
}

.company-editor-panel.is-company-overview-readonly .company-logo-upload-actions {
  display: none;
}

.company-editor-panel[data-company-active-tab="overview"].is-company-overview-readonly .form-actions {
  display: none;
}

.company-editor-panel[data-company-active-tab="overview"] .form-actions,
.company-editor-panel[data-company-active-tab="locations"] .form-actions,
.company-editor-panel[data-company-active-tab="work-orders"] .form-actions,
.company-editor-panel[data-company-active-tab="periodics"] .form-actions,
.company-editor-panel[data-company-active-tab="portal"] .form-actions {
  display: none;
}

.masterdata-company-contact-grid {
  grid-template-columns:
    minmax(220px, 1.55fr)
    minmax(140px, 0.9fr)
    minmax(150px, 0.95fr)
    minmax(140px, 0.9fr)
    minmax(200px, 1.2fr);
  min-width: 0;
}

.field-company-name {
  grid-column: span 4;
}

.field-company-headquarters {
  grid-column: span 5;
}

.field-company-oib {
  grid-column: span 3;
}

.field-company-contract-name {
  grid-column: span 5;
}

.field-company-contract-type {
  grid-column: span 3;
}

.field-company-contract-number {
  grid-column: span 4;
}

.field-company-contract-valid-from {
  grid-column: span 3;
}

.field-company-contract-valid-to {
  grid-column: span 3;
}

.field-company-contract-valid-to[hidden] {
  display: none;
}

.field-company-contract-monthly-price {
  grid-column: span 3;
}

.field-company-contract-valid-forever {
  grid-column: span 3;
}

.company-contract-valid-forever-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(202, 213, 234, 0.92);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #1f2a44;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.company-contract-valid-forever-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #6d4cff;
}

.field-company-employee-size {
  grid-column: span 6;
}

.field-company-manager-users {
  grid-column: span 6;
}

.field-company-period {
  grid-column: span 3;
}

.field-company-status {
  grid-column: span 3;
}

.field-company-representative {
  grid-column: span 4;
}

.field-company-representative-role {
  grid-column: span 2;
}

.field-company-representative-oib {
  grid-column: span 2;
}

.field-company-contact-phone {
  grid-column: span 2;
}

.field-company-contact-email {
  grid-column: span 2;
}

.masterdata-company-contact-grid > .field-company-representative,
.masterdata-company-contact-grid > .field-company-representative-role,
.masterdata-company-contact-grid > .field-company-representative-oib,
.masterdata-company-contact-grid > .field-company-contact-phone,
.masterdata-company-contact-grid > .field-company-contact-email {
  grid-column: auto;
}

.company-editor-panel .field,
.masterdata-company-grid,
.masterdata-company-contact-grid {
  min-width: 0;
}

.company-manager-picker-slot {
  width: 100%;
  min-width: 0;
}

#company-manager-user-ids {
  display: none;
}

.field-company-manager-users .inline-help {
  margin: 6px 0 0;
  font-size: 0.76rem;
}

.company-manager-picker {
  width: 100%;
}

.company-manager-picker-trigger {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 16px;
  border-color: rgba(220, 156, 212, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 8px 16px rgba(117, 81, 173, 0.08);
  color: #1f2b47;
}

.company-manager-picker-trigger:hover {
  border-color: rgba(214, 89, 173, 0.46);
}

.company-manager-picker-trigger:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.company-manager-picker-trigger .work-order-bulk-action-label {
  color: #1f2b47;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.company-manager-picker-trigger .work-order-bulk-executor-avatar {
  border: 2px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(117, 81, 173, 0.18),
    0 10px 22px rgba(59, 47, 110, 0.1);
  background: #ffffff;
}

.company-manager-picker-menu-portal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(220, 156, 212, 0.28);
  box-shadow: 0 22px 56px rgba(59, 47, 110, 0.2);
}

.company-manager-picker-menu-portal .work-order-calendar-executor-options {
  max-height: min(48vh, 360px);
}

.company-manager-picker-menu-portal .work-order-calendar-executor-selection {
  min-height: 0;
}

.company-manager-picker-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.company-manager-picker-option-meta {
  color: #6f7d98;
  font-size: 0.72rem;
  line-height: 1.35;
}

#company-note {
  min-height: 56px;
  max-width: 100%;
}

.company-logo-upload-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.company-logo-upload-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}

.company-logo-upload-copy strong,
.company-logo-upload-copy .inline-help {
  margin: 0;
}

.company-logo-upload-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.company-logo-upload-row-compact {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.company-logo-upload-actions-icons {
  justify-content: center;
  gap: 8px;
}

.company-logo-icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.masterdata-company-note-card {
  gap: 8px;
}

.company-logo-avatar,
.company-selection-preview-logo,
.company-list-logo {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(35, 112, 79, 0.15), rgba(102, 150, 123, 0.2));
  color: #1f5d42;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(42, 108, 77, 0.1);
}

.company-logo-avatar img,
.company-selection-preview-logo img,
.company-list-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 6px;
  box-sizing: border-box;
}

.company-selection-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(204, 214, 206, 0.9);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(250, 252, 251, 0.98), rgba(245, 248, 246, 0.98));
}

.company-selection-preview-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.company-selection-preview-copy strong,
.company-selection-preview-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-selection-preview-copy span {
  color: #66786f;
  font-size: 0.84rem;
}

.company-selection-preview-logo {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  flex-basis: 52px;
  font-size: 0.86rem;
}

.people-list-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.people-list-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(35, 112, 79, 0.14), rgba(108, 151, 126, 0.22));
  color: #1f5d42;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(42, 108, 77, 0.1);
}

.people-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.people-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.people-management-copy {
  margin: -4px 0 14px;
  color: #72809b;
}

.people-user-sheets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  padding: 5px;
  border: 1px solid rgba(190, 211, 255, 0.74);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.92);
}

.people-user-sheets[hidden] {
  display: none !important;
}

.people-user-sheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #58708f;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.people-user-sheet strong {
  font-size: 0.86rem;
  font-weight: 800;
}

.people-user-sheet span {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.82);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 800;
}

.people-user-sheet:hover,
.people-user-sheet:focus-visible {
  background: rgba(226, 239, 255, 0.78);
  color: #1d4ed8;
}

.people-user-sheet.is-active {
  background: #ffffff;
  color: #163a7a;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
}

.people-user-sheet.is-active span {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.people-user-activity-cell {
  gap: 7px;
}

.people-user-activity-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.people-user-sheet-action {
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 9px;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.people-user-sheet-action:hover,
.people-user-sheet-action:focus-visible {
  border-color: rgba(37, 99, 235, 0.35);
  color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.people-user-sheet-action.is-archive {
  border-color: rgba(239, 68, 68, 0.22);
  color: #b91c1c;
}

.people-user-sheet-action.is-restore {
  border-color: rgba(16, 185, 129, 0.24);
  color: #047857;
}

.people-user-sheet-action:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  box-shadow: none;
}

.people-workspace-panel {
  display: grid;
  gap: 20px;
  padding: 24px;
  border-radius: 28px;
  border-color: rgba(173, 197, 236, 0.62);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 42px rgba(80, 92, 142, 0.09);
}

.people-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.people-workspace-tab {
  --people-tab-accent: #2563eb;
  --people-tab-ink: #14213d;
  --people-tab-soft: rgba(37, 99, 235, 0.1);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 18px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(196, 211, 232, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--people-tab-soft), rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0.98)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 28px rgba(42, 64, 110, 0.08);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.people-workspace-tab::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 58px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--people-tab-accent), rgba(255, 255, 255, 0));
  opacity: 0.34;
  pointer-events: none;
}

.people-workspace-tab.is-users {
  --people-tab-accent: #2f6fe4;
  --people-tab-soft: rgba(47, 111, 228, 0.12);
}

.people-workspace-tab.is-annual-leave {
  --people-tab-accent: #1f9f83;
  --people-tab-soft: rgba(31, 159, 131, 0.13);
}

.people-workspace-tab.is-sick-leave {
  --people-tab-accent: #df7b29;
  --people-tab-soft: rgba(223, 123, 41, 0.13);
}

.people-workspace-tab.is-absence-report {
  --people-tab-accent: #9b5bd9;
  --people-tab-soft: rgba(155, 91, 217, 0.13);
}

.people-workspace-tab:hover,
.people-workspace-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(90, 129, 202, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 34px rgba(42, 64, 110, 0.12);
}

.people-workspace-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--people-tab-accent);
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(151, 173, 210, 0.32),
    0 10px 18px rgba(51, 78, 120, 0.08);
}

.people-workspace-tab-icon .icon-svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.people-workspace-tab-content {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.people-workspace-tab strong {
  font-size: 1rem;
  color: var(--people-tab-ink);
}

.people-workspace-tab-copy {
  color: #6a7d9d;
  font-size: 0.84rem;
  line-height: 1.45;
}

.people-workspace-tab.is-active {
  border-color: color-mix(in srgb, var(--people-tab-accent) 46%, white);
  background:
    linear-gradient(135deg, var(--people-tab-soft), rgba(255, 255, 255, 0.92) 52%, #fff),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 36px rgba(84, 114, 190, 0.16);
}

.people-workspace-tab.is-active .people-workspace-tab-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--people-tab-accent), color-mix(in srgb, var(--people-tab-accent) 76%, #111827));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 22px color-mix(in srgb, var(--people-tab-accent) 22%, transparent);
}

.people-workspace-copy {
  margin: 0;
  max-width: 760px;
  color: #687791;
}

.people-management-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98));
}

.people-management-panel .section-heading {
  margin-bottom: 16px;
}

.people-isznr-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(170, 197, 230, 0.72);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(239, 247, 255, 0.98), rgba(249, 255, 252, 0.96)),
    #fff;
  box-shadow: 0 14px 30px rgba(73, 93, 126, 0.08);
}

.people-isznr-head {
  margin-bottom: 0 !important;
}

.people-isznr-head h3 {
  margin: 0;
  color: #14243c;
  font-size: 1.04rem;
}

.people-isznr-copy,
.people-isznr-feedback {
  margin: 0;
}

.people-isznr-feedback.is-error {
  color: #a33b4a;
  font-weight: 800;
}

.people-isznr-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.people-isznr-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(120, 152, 202, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.people-isznr-stat.is-linked {
  border-color: rgba(45, 143, 83, 0.24);
  background: rgba(239, 250, 244, 0.96);
}

.people-isznr-stat.is-unlinked {
  border-color: rgba(196, 79, 91, 0.22);
  background: rgba(255, 246, 248, 0.96);
}

.people-isznr-stat span {
  color: #61728a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.people-isznr-stat strong {
  color: #14243c;
  font-size: 1.35rem;
  line-height: 1.1;
}

.people-isznr-list {
  display: grid;
  gap: 10px;
}

.people-isznr-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(120, 152, 202, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.people-isznr-card.is-linked {
  border-color: rgba(45, 143, 83, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 244, 0.98));
}

.people-isznr-card.is-unlinked,
.people-isznr-card.is-error {
  border-color: rgba(196, 79, 91, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 248, 0.98));
}

.people-isznr-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.people-isznr-card-copy strong,
.people-isznr-card-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-isznr-card-copy strong {
  color: #14243c;
  font-weight: 900;
}

.people-isznr-card-copy span {
  color: #60718a;
}

.people-isznr-card .list-meta-pill {
  justify-content: center;
}

.people-isznr-status {
  align-self: start;
  padding: 7px 10px;
  border: 1px solid rgba(120, 152, 202, 0.22);
  border-radius: 999px;
  background: rgba(244, 248, 253, 0.96);
  color: #4f6381;
  font-size: 0.72rem;
  font-weight: 900;
}

.people-isznr-status.is-linked {
  border-color: rgba(45, 143, 83, 0.24);
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
}

.people-isznr-status.is-unlinked,
.people-isznr-status.is-error {
  border-color: rgba(196, 79, 91, 0.24);
  background: rgba(255, 238, 242, 0.98);
  color: #a33b4a;
}

.people-isznr-table-status {
  font-weight: 800;
}

.people-isznr-table-status.is-linked {
  color: #2b7a52;
}

.people-isznr-table-status.is-unlinked,
.people-isznr-table-status.is-error {
  color: #a33b4a;
}

.people-isznr-table-status.is-pending {
  color: #61728a;
}

.people-isznr-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.people-isznr-tag {
  width: auto !important;
  padding: 4px 8px !important;
  border-color: rgba(45, 143, 83, 0.2) !important;
  background: rgba(232, 247, 238, 0.92) !important;
  color: #2b7a52 !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
}

@media (max-width: 720px) {
  .people-isznr-summary,
  .people-isznr-card {
    grid-template-columns: 1fr;
  }

  .people-isznr-status {
    justify-self: start;
  }
}

.people-directory-wrap {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.people-directory-table {
  min-width: 0 !important;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.people-directory-table thead th {
  position: static;
  padding: 0 16px 6px;
  border: 0;
  background: transparent;
  color: #7a7894;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

.people-directory-table tbody td {
  padding: 16px 14px;
  border-top: 1px solid rgba(194, 211, 232, 0.78);
  border-bottom: 1px solid rgba(194, 211, 232, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96));
  box-shadow: 0 10px 24px rgba(69, 90, 122, 0.05);
}

.people-directory-table tbody td:first-child {
  border-left: 1px solid rgba(194, 211, 232, 0.78);
  border-radius: 18px 0 0 18px;
}

.people-directory-table tbody td:last-child {
  border-right: 1px solid rgba(194, 211, 232, 0.78);
  border-radius: 0 18px 18px 0;
}

.people-directory-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(194, 211, 232, 0.78);
}

.people-directory-table tbody tr:hover td,
.people-directory-table tbody tr:focus-visible td {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 251, 255, 0.99));
  border-color: rgba(111, 151, 220, 0.58);
  box-shadow: 0 14px 30px rgba(69, 90, 122, 0.09);
}

.people-directory-table .people-list-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(48, 112, 230, 0.12), rgba(31, 159, 131, 0.14));
  color: #245da8;
}

.people-directory-table .people-list-copy {
  gap: 3px;
}

.people-directory-table .list-primary {
  font-size: 0.98rem;
}

.people-directory-table .list-secondary,
.people-directory-table .list-tertiary {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-directory-table td:nth-child(4) .list-meta-pill {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  padding-inline: 12px;
  background: linear-gradient(90deg, rgba(217, 234, 255, 0.98), rgba(233, 243, 255, 0.76));
  color: #245da8;
}

.people-directory-table td:nth-child(5) .list-primary {
  justify-content: flex-end;
  color: #10213d;
  font-weight: 800;
}

.people-management-panel .data-table:not(.people-directory-table) td:nth-child(1) {
  min-width: 320px;
}

.people-directory-table th:nth-child(1),
.people-directory-table td:nth-child(1) {
  width: 38%;
  min-width: 0 !important;
}

.people-management-panel .data-table:not(.people-directory-table) td:nth-child(2) {
  min-width: 220px;
}

.people-directory-table th:nth-child(2),
.people-directory-table td:nth-child(2) {
  width: 22%;
  min-width: 0 !important;
}

.people-management-panel .data-table:not(.people-directory-table) td:nth-child(3) {
  min-width: 180px;
}

.people-directory-table th:nth-child(3),
.people-directory-table td:nth-child(3) {
  width: 13%;
  min-width: 0 !important;
}

.people-management-panel .data-table:not(.people-directory-table) td:nth-child(4) {
  min-width: 180px;
}

.people-directory-table th:nth-child(4),
.people-directory-table td:nth-child(4) {
  width: 15%;
  min-width: 0 !important;
}

.people-management-panel .data-table:not(.people-directory-table) td:nth-child(5) {
  min-width: 170px;
}

.people-directory-table th:nth-child(5),
.people-directory-table td:nth-child(5) {
  width: 12%;
  min-width: 0 !important;
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(220, 156, 212, 0.34);
  background: rgba(255, 255, 255, 0.96);
  color: #4f5d78;
  font-size: 0.86rem;
  font-weight: 600;
}

.checkbox-field input {
  width: 15px;
  height: 15px;
  accent-color: #d54dc0;
}

.qualification-validity-field {
  min-width: 0;
}

.company-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.company-state-pill.is-active {
  background: rgba(75, 183, 121, 0.18);
  color: #1f7448;
}

.company-state-pill.is-inactive {
  background: rgba(167, 176, 172, 0.22);
  color: #5a675f;
}

@media (max-width: 1100px) {
  .offers-editor-panel,
  .offers-list-panel,
  .offers-launch-panel,
  .masterdata-editor-panel {
    min-width: 0;
  }

  .masterdata-company-identity-card {
    grid-template-columns: 1fr;
  }

  .masterdata-company-identity-card > .company-logo-upload-row,
  .masterdata-company-identity-card > .masterdata-company-grid,
  .company-overview-summary {
    grid-column: 1;
  }

  .masterdata-company-identity-card > .company-logo-upload-row {
    justify-items: start;
    grid-template-columns: auto auto;
    align-items: center;
  }

  .masterdata-company-identity-card > .masterdata-company-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .company-editor-layout {
    grid-template-columns: 1fr;
  }

  .company-workspace-hero {
    grid-template-columns: 1fr;
  }

  .company-workspace-stats,
  .company-overview-summary,
  .company-list-expansion-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .company-periodics-row {
    grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  }

  .company-periodics-type {
    justify-self: start;
  }

  .company-location-tree-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .company-location-tree-badges,
  .company-location-tree-head > .card-button {
    grid-column: 2;
    justify-self: start;
  }

  .company-location-tree.is-simple .company-location-tree-objects.is-inline,
  .company-location-tree.is-simple .company-location-tree-badges {
    grid-column: auto;
  }

  .company-location-tree.is-simple .company-location-tree-badges {
    justify-self: end;
  }

  .company-location-tree-details,
  .company-location-tree.is-compact .company-location-tree-details {
    grid-template-columns: 1fr;
  }

  .company-location-tree.is-compact .company-location-tree-contact {
    display: grid;
  }

  .masterdata-company-contact-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .masterdata-company-contact-grid > .field-company-representative,
  .masterdata-company-contact-grid > .field-company-contact-email {
    grid-column: span 2;
  }

  .company-activity-panel {
    max-height: 320px;
    border-left: 0;
    border-top: 1px solid #edf0f6;
    padding-left: 20px;
  }

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

@media (max-width: 920px) {
  .offers-summary-grid,
  .offers-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offers-editor-topline,
  .masterdata-company-grid,
  .masterdata-company-grid.is-compact,
  .masterdata-company-contact-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

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

  .offers-editor-panel.is-modal-open,
  .masterdata-editor-panel.is-modal-open {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    top: 10px;
  }

  .company-editor-panel.is-modal-open {
    top: 4px;
    transform: translateX(-50%);
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
  }

  .offer-item-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .offer-item-breakdown-row {
    grid-template-columns: 1fr;
  }

  .offer-email-form {
    grid-template-columns: 1fr;
  }

  .offer-item-actions {
    justify-content: flex-start;
  }

  .company-client-layout,
  .company-template-map-row,
  .client-portal-layout,
  .client-portal-toolbar-grid,
  .company-client-portal-summary,
  .client-portal-summary-grid,
  .company-workspace-stats,
  .company-overview-summary,
  .company-list-expansion-summary,
  .company-client-access-shell {
    grid-template-columns: 1fr;
  }

  .client-portal-preview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-periodics-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .company-periodics-due {
    justify-self: stretch;
    min-width: 0;
  }

  .field-company-name,
  .field-company-headquarters,
  .field-company-oib,
  .field-company-contract-name,
  .field-company-employee-size,
  .field-company-manager-users,
  .field-company-representative,
  .field-company-contact-email {
    grid-column: span 6;
  }

.field-company-contract-type,
.field-company-contract-number,
.field-company-contract-valid-from,
.field-company-contract-valid-to,
.field-company-contract-monthly-price,
.field-company-contract-valid-forever,
.field-company-period,
.field-company-status,
.field-company-representative-role,
.field-company-representative-oib,
.field-company-contact-phone {
    grid-column: span 3;
  }
}

@media (max-width: 760px) {
  .offers-summary-grid,
  .offers-editor-topline,
  .offers-editor-meta,
  .offers-filters,
  .offers-form-grid {
    grid-template-columns: 1fr;
  }

  .masterdata-company-grid,
  .masterdata-company-grid.is-compact,
  .masterdata-company-contact-grid,
  .company-client-layout,
  .client-portal-layout,
  .company-client-portal-summary,
  .client-portal-summary-grid,
  .company-workspace-stats,
  .company-overview-summary,
  .companies-kpi-row,
  .company-contract-price-row,
  .company-list-expansion-summary,
  .company-client-access-shell,
  .company-client-person-grid,
  .client-portal-preview-stats {
    grid-template-columns: 1fr;
  }

  .company-workspace-hero {
    padding: 12px;
    border-radius: 20px;
  }

  .company-workspace-hero-main {
    align-items: flex-start;
  }

  .company-workspace-logo {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    border-radius: 18px;
  }

  .company-editor-tabs {
    padding: 6px;
  }

  .company-location-tree-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-location-tree.is-simple .company-location-tree-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-location-tree-icon {
    display: none;
  }

  .company-location-tree-badges,
  .company-location-tree-head > .card-button {
    grid-column: auto;
  }

  .company-location-tree.is-simple .company-location-tree-objects.is-inline,
  .company-location-tree.is-simple .company-location-tree-badges {
    grid-column: auto;
  }

  .company-contract-head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .company-list-cell {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .company-list-logo {
    display: none;
  }

  .client-portal-preview-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-foundation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-foundation-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .client-portal-foundation-status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .client-portal-foundation-lead {
    align-items: flex-start;
    flex-direction: column;
  }

  .company-client-portal-head,
  .client-portal-hero .section-heading,
  .client-portal-preview-panel .section-heading {
    grid-template-columns: 1fr;
  }

  .client-portal-user-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-user-actions,
  .client-portal-head-actions,
  .client-portal-toolbar-actions {
    justify-content: flex-start;
  }

  .client-portal-access-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .client-portal-modal {
    padding: 10px;
  }

  .company-client-action-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .company-client-user-actions {
    width: 100%;
    margin-left: 0;
  }

  .company-client-user-actions .primary-button,
  .company-client-user-actions .ghost-button {
    flex: 1 1 0;
  }

  .people-workspace-tabs {
    grid-template-columns: 1fr;
  }

  .masterdata-company-identity-card > .company-logo-upload-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .field-company-name,
  .field-company-headquarters,
  .field-company-oib,
.field-company-manager-users,
.field-company-contract-name,
.field-company-contract-type,
.field-company-contract-number,
.field-company-contract-valid-from,
.field-company-contract-valid-to,
.field-company-contract-monthly-price,
.field-company-contract-valid-forever,
.field-company-employee-size,
.field-company-period,
.field-company-status,
.field-company-representative,
.field-company-representative-role,
.field-company-representative-oib,
  .field-company-contact-phone,
  .field-company-contact-email {
    grid-column: auto;
  }

  .offer-item-metrics,
  .offer-item-breakdown-row {
    grid-template-columns: 1fr;
  }

  .offer-item-total {
    justify-items: start;
    min-width: 0;
  }

  .offer-item-head-actions,
  .offers-discount-controls {
    width: 100%;
  }

  .offer-item-head-actions > button,
  .offers-discount-controls > button,
  .offer-item-breakdown-remove {
    width: 100%;
  }

  .offer-item-actions {
    justify-content: flex-start;
  }

  .offers-list-panel {
    padding: 16px;
  }

  .offers-editor-panel.is-modal-open {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
    border-radius: 22px;
  }

  .offers-editor-fixed-head,
  .masterdata-editor-fixed-head {
    padding: 16px 16px 10px;
  }

  .offers-editor-body,
  .masterdata-editor-body {
    padding: 10px 16px 16px;
  }

  .company-editor-body {
    padding: 10px 16px 16px;
  }

  .offers-launch-panel {
    grid-template-columns: 1fr;
  }

  .offers-launch-button {
    width: 100%;
  }

  .masterdata-editor-panel.is-modal-open {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
    border-radius: 22px;
  }

  .company-editor-panel.is-modal-open {
    top: 4px;
    transform: translateX(-50%);
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
  }

  .masterdata-panel-actions {
    width: 100%;
  }

  .masterdata-panel-actions > button {
    width: 100%;
  }

  .company-logo-upload-row,
  .company-logo-upload-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .masterdata-company-identity-card > .masterdata-company-grid {
    grid-template-columns: 1fr;
  }

.field-company-representative,
.field-company-representative-role,
.field-company-representative-oib,
.field-company-contact-email,
.field-company-contract-type,
.field-company-contract-valid-from,
.field-company-contract-valid-to,
.field-company-employee-size,
.field-company-manager-users {
  grid-column: auto;
}

  .company-logo-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    flex-basis: 64px;
  }

  .company-selection-preview {
    grid-template-columns: 1fr;
  }

  .company-contract-card {
    grid-template-columns: 1fr;
  }

  .company-contract-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.workspace-dashboard {
  grid-template-columns: 1fr;
  align-items: start;
}

.dashboard-overview-panel {
  display: grid;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 250, 255, 0.96));
}

.dashboard-control-panel {
  display: grid;
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(220, 198, 238, 0.82);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(109, 162, 231, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(236, 126, 195, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 22px 48px rgba(96, 78, 139, 0.08);
}

.dashboard-control-panel > .section-heading {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(219, 206, 235, 0.76);
}

.dashboard-control-copy {
  max-width: 620px;
  margin: 0;
  color: #66728f;
}

.dashboard-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
}

.dashboard-control-grid > .panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid rgba(217, 223, 237, 0.9);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 16px 34px rgba(81, 67, 123, 0.08);
}

.dashboard-control-grid > .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.94), rgba(122, 97, 255, 0.84));
}

.dashboard-control-grid > .panel .section-heading {
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(229, 221, 239, 0.84);
}

.dashboard-control-grid > .panel .section-heading h2,
.dashboard-control-grid > .panel .section-heading h3 {
  margin: 0;
}

.dashboard-control-grid > .panel .helper-copy {
  max-width: 780px;
}

.dashboard-control-grid > .panel .table-wrap,
.dashboard-control-grid > .panel form {
  min-width: 0;
}

.dashboard-control-grid > #login-content-panel {
  grid-column: 1 / -1;
}

.dashboard-control-card {
  display: grid;
  gap: 16px;
}

.dashboard-control-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(229, 221, 239, 0.84);
}

.dashboard-control-card-head-toggle {
  cursor: pointer;
  border-radius: 18px;
  margin: -4px -6px 0;
  padding: 10px 12px 16px;
  transition: background 160ms ease, border-color 160ms ease;
}

.dashboard-control-card-head-toggle:hover,
.dashboard-control-card-head-toggle:focus-visible {
  background: rgba(240, 245, 255, 0.62);
  outline: none;
}

.dashboard-control-card-head h3 {
  margin: 0;
}

.dashboard-control-card-head .section-kicker {
  margin-bottom: 6px;
}

.dashboard-control-card-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-control-card-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 224, 241, 0.96);
  background: rgba(255, 255, 255, 0.95);
  color: #566275;
  font-size: 0.74rem;
  font-weight: 800;
}

.dashboard-company-permissions-content {
  display: grid;
  gap: 16px;
}

.dashboard-control-card.is-collapsed {
  gap: 0;
}

.dashboard-control-card.is-collapsed .dashboard-control-card-head {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom-color: transparent;
}

.dashboard-control-card.is-collapsed .dashboard-company-permissions-content {
  display: none;
}

.dashboard-control-badge,
.dashboard-control-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(215, 223, 237, 0.96);
  background: rgba(247, 250, 255, 0.96);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.dashboard-control-badge {
  border-color: rgba(207, 149, 220, 0.44);
  background: linear-gradient(180deg, rgba(255, 245, 252, 0.98), rgba(250, 245, 255, 0.98));
  color: #6e3e86;
}

.dashboard-control-card-meta,
.dashboard-control-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-control-card-actions {
  padding-top: 4px;
}

.dashboard-company-permissions-body {
  display: grid;
  gap: 10px;
}

.dashboard-company-permission-block-list {
  display: grid;
  gap: 12px;
}

.dashboard-company-permission-block {
  border: 1px solid rgba(214, 223, 239, 0.92);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  box-shadow: 0 14px 28px rgba(39, 70, 120, 0.07);
  overflow: hidden;
}

.dashboard-company-permission-block[open] {
  box-shadow: 0 18px 34px rgba(39, 70, 120, 0.09);
}

.dashboard-company-permission-block-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid rgba(220, 227, 242, 0.65);
  background: rgba(244, 248, 255, 0.88);
}

.dashboard-company-permission-block-summary::-webkit-details-marker {
  display: none;
}

.dashboard-company-permission-block-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard-company-permission-block-copy strong {
  font-size: 0.98rem;
  color: #223052;
}

.dashboard-company-permission-block-copy span {
  font-size: 0.78rem;
  color: #6a7896;
}

.dashboard-company-permission-block-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-company-permission-block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(214, 224, 241, 0.96);
  color: #38507f;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-company-permission-block-hint {
  color: #6f7a97;
  font-size: 0.75rem;
}

.dashboard-company-permission-block-body {
  padding: 0 0 6px;
}

.dashboard-company-permission-grid {
  display: grid;
  gap: 0;
  overflow-x: auto;
}

.dashboard-company-permission-grid-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) repeat(var(--company-role-columns, 6), minmax(100px, 1fr));
  align-items: stretch;
  min-width: 760px;
}

.dashboard-company-permission-grid-row + .dashboard-company-permission-grid-row {
  border-top: 1px solid rgba(223, 230, 243, 0.9);
}

.dashboard-company-permission-grid-row.is-head {
  background: rgba(240, 245, 255, 0.88);
}

.dashboard-company-permission-grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 58px;
  padding: 10px 8px;
  text-align: center;
  color: #5f6d8f;
  font-size: 0.77rem;
}

.dashboard-company-permission-grid-cell.is-permission-on {
  background: linear-gradient(180deg, rgba(235, 252, 244, 0.82), rgba(246, 255, 250, 0.96));
}

.dashboard-company-permission-grid-cell.is-permission-off {
  background: rgba(248, 250, 254, 0.76);
}

.dashboard-company-permission-grid-cell.is-permission-admin {
  background: linear-gradient(180deg, rgba(237, 246, 255, 0.94), rgba(246, 251, 255, 0.98));
}

.dashboard-company-permission-grid-cell.is-action {
  justify-content: flex-start;
  padding-left: 16px;
  text-align: left;
}

.dashboard-company-permission-grid-cell.is-action strong {
  color: #223052;
  font-size: 0.88rem;
}

.dashboard-company-permission-grid-cell.is-role-head {
  flex-direction: column;
  gap: 2px;
}

.dashboard-company-permission-grid-cell.is-role-head strong {
  color: #223052;
  font-size: 0.84rem;
}

.dashboard-company-permission-grid-cell.is-role-head span {
  color: #6f7a97;
  font-size: 0.72rem;
}

.dashboard-company-permission-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 78px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(218, 226, 241, 0.95);
  cursor: pointer;
  color: #495575;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(31, 48, 86, 0.07);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-company-permission-checkbox.is-checked {
  color: #17613e;
  border-color: rgba(60, 176, 116, 0.58);
  background: linear-gradient(180deg, #f6fff9, #e8fbf0);
  box-shadow: 0 8px 18px rgba(44, 147, 91, 0.16);
}

.dashboard-company-permission-checkbox.is-unchecked {
  color: #73809c;
  border-color: rgba(211, 221, 237, 0.96);
  background: #ffffff;
}

.dashboard-company-permission-checkbox.is-locked {
  color: #1f5f96;
  border-color: rgba(92, 157, 220, 0.54);
  background: linear-gradient(180deg, #f7fbff, #e9f4ff);
  cursor: default;
}

.dashboard-company-permission-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid rgba(174, 187, 210, 0.96);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(36, 50, 80, 0.08);
}

.dashboard-company-permission-checkbox input[type="checkbox"]::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -1px;
  border-left: 2.4px solid #ffffff;
  border-bottom: 2.4px solid #ffffff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.14s ease;
}

.dashboard-company-permission-checkbox input[type="checkbox"]:checked {
  border-color: rgba(45, 166, 96, 0.94);
  background: linear-gradient(135deg, #4ac784, #198b59);
}

.dashboard-company-permission-checkbox input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

.dashboard-company-permission-checkbox input[type="checkbox"]:disabled:checked {
  border-color: rgba(60, 137, 205, 0.86);
  background: linear-gradient(135deg, #65b6f0, #287cc1);
}

.dashboard-company-permissions-actions {
  align-items: center;
}

@media (max-width: 760px) {
  .dashboard-control-panel {
    padding: 18px;
  }

  .dashboard-control-panel > .section-heading,
  .dashboard-control-grid > .panel .section-heading,
  .dashboard-control-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-control-grid > .panel {
    padding: 18px;
  }

  .dashboard-company-permission-block-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-company-permission-grid-row {
    min-width: 700px;
  }
}

.dashboard-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.dashboard-overview-head h2 {
  margin: 0;
}

.dashboard-overview-copy {
  display: none;
}

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

.dashboard-signal-card {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(214, 220, 234, 0.92);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.dashboard-signal-card span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dashboard-signal-card strong {
  font-size: clamp(1.4rem, 2vw, 2.2rem);
  line-height: 1;
}

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

.dashboard-block {
  grid-column: span 4;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(214, 220, 234, 0.92);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.dashboard-block-wide {
  grid-column: span 8;
}

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

.dashboard-block-head h3 {
  margin: 0;
  font-size: 1rem;
}

.dashboard-breakdown-list,
.dashboard-upcoming-list {
  display: grid;
  gap: 10px;
}

.dashboard-breakdown-row {
  display: grid;
  gap: 7px;
}

.reminders-workspace-panel {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.reminders-head-compact {
  padding: 0;
  margin-bottom: -2px;
}

.reminders-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: start;
}

.reminders-composer-card,
.reminders-list-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(212, 188, 232, 0.68);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.06), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 16px rgba(89, 63, 129, 0.06);
}

.reminders-composer-head {
  padding-bottom: 0;
  margin-bottom: -2px;
}

.reminders-composer-head .workspace-list-copy {
  gap: 2px;
}

.reminders-composer-head .section-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
}

.reminders-composer-head h3 {
  margin: 0;
  font-size: 1.12rem;
}

.reminders-composer-card .module-copy {
  margin: 0;
  max-width: 72ch;
}

.reminder-form-compact {
  display: grid;
  gap: 6px;
}

.reminder-form-compact .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 8px;
}

.reminder-form-compact .field-span-full {
  grid-column: 1 / -1;
}

.reminder-form-compact textarea {
  min-height: 72px;
}

.reminder-form-compact .field.reminder-field-compact {
  justify-self: start;
  width: min(100%, 190px);
}

.reminder-form-compact .field.reminder-field-compact > input,
.reminder-form-compact .field.reminder-field-compact > select {
  min-height: 36px;
  padding: 8px 10px;
}

.reminder-form-compact .field.reminder-field-compact > span {
  font-size: 0.72rem;
  margin-bottom: -1px;
}

.reminders-filter-row {
  align-items: end;
}

.reminders-filter-row .field span {
  font-size: 0.75rem;
}

.reminders-list-card {
  min-height: 0;
}

.reminder-editor-backdrop {
  z-index: 118;
}

.reminder-editor-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
}

.reminder-editor-panel.is-modal-open {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 119;
  width: min(1040px, calc(100vw - 24px));
  height: calc(100vh - 28px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

.reminder-editor-body {
  min-height: 0;
  overflow: auto;
  padding: 0 16px 16px;
}

.reminder-editor-body .reminder-form-compact {
  padding: 2px 2px 10px;
}

body.is-reminder-editor-open {
  overflow: hidden;
}

.reminder-link-preview {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(217, 183, 227, 0.42);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 240, 252, 0.96));
  color: #6c4f7d;
  font-size: 0.88rem;
  font-weight: 600;
}

.reminders-list {
  display: grid;
  gap: 10px;
  max-height: min(56vh, 640px);
  overflow: auto;
  padding-right: 2px;
}

.reminder-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(212, 188, 232, 0.72);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 4px 12px rgba(89, 63, 129, 0.08);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.reminder-card:hover,
.reminder-card:focus-visible {
  border-color: rgba(179, 124, 226, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(89, 63, 129, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.reminder-card-top,
.reminder-card-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.reminder-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reminder-card-title {
  font-size: 0.98rem;
  color: #1f2940;
}

.reminder-card-subtitle,
.reminder-card-footer-meta {
  color: #6f7a92;
  font-size: 0.8rem;
}

.reminder-card-note {
  margin: 0;
  color: #3e4a67;
  line-height: 1.4;
  font-size: 0.84rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reminder-card-meta,
.reminder-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.reminder-due-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(212, 220, 237, 0.88);
  background: rgba(245, 247, 252, 0.96);
  color: #50607f;
  font-size: 0.78rem;
  font-weight: 700;
}

.reminder-due-pill.is-overdue {
  background: rgba(255, 232, 235, 0.96);
  border-color: rgba(235, 132, 147, 0.42);
  color: #b03046;
}

.reminder-repeat-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(184, 194, 218, 0.75);
  background: rgba(235, 240, 249, 0.9);
  color: #49597a;
  font-size: 0.78rem;
  font-weight: 700;
}

.reminder-status-select {
  min-height: 30px;
  padding: 0 28px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(179, 190, 213, 0.75);
  background-color: rgba(255, 255, 255, 0.95);
  font-size: 0.78rem;
  font-weight: 700;
  color: #2e3a55;
}

.reminder-status-select.is-active {
  background-color: rgba(224, 246, 235, 0.95);
  border-color: rgba(148, 210, 171, 0.62);
  color: #19714a;
}

.reminder-status-select.is-snoozed {
  background-color: rgba(246, 239, 220, 0.95);
  border-color: rgba(223, 198, 136, 0.62);
  color: #8a5a08;
}

.reminder-status-select.is-done {
  background-color: rgba(231, 236, 245, 0.96);
  border-color: rgba(179, 190, 213, 0.62);
  color: #4c576f;
}

.reminder-inline-action {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.reminder-inline-action.is-danger {
  color: #b03046;
}

.notifications-overview-panel,
.notifications-list-panel {
  display: grid;
  gap: 18px;
}

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

.notifications-filter-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr);
}

.notifications-list {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 352px);
  overflow: auto;
  padding-right: 4px;
}

.notification-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214, 220, 234, 0.92);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.04), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.notification-row.is-compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.04), transparent 20%),
    rgba(247, 250, 255, 0.95);
  transition: border-color 140ms ease;
}

.notification-row.is-compact:hover {
  border-color: rgba(189, 157, 229, 0.72);
}

.notification-row-marker {
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: rgba(117, 136, 173, 0.72);
  box-shadow: 0 0 0 4px rgba(117, 136, 173, 0.12);
}

.notification-row-marker.is-critical {
  background: #d94357;
  box-shadow: 0 0 0 4px rgba(217, 67, 87, 0.14);
}

.notification-row-marker.is-warning {
  background: #d38c1e;
  box-shadow: 0 0 0 4px rgba(211, 140, 30, 0.14);
}

.notification-row-marker.is-info {
  background: #4b74cb;
  box-shadow: 0 0 0 4px rgba(75, 116, 203, 0.14);
}

.notification-row-marker.is-resolved {
  background: #8d98af;
  box-shadow: 0 0 0 4px rgba(141, 152, 175, 0.14);
}

.notification-row.is-resolved {
  opacity: 0.78;
  background:
    radial-gradient(circle at top right, rgba(151, 164, 192, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(247, 249, 252, 0.96), rgba(242, 245, 250, 0.96));
}

.notification-row-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.notification-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notification-row-top strong {
  color: #1f2940;
  font-size: 0.94rem;
}

.notification-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.notification-level-badge {
  border-radius: 999px;
  border: 1px solid rgba(180, 193, 214, 0.58);
  background: rgba(235, 241, 252, 0.94);
  color: #4d5f7f;
  font-size: 0.72rem;
  padding: 3px 8px;
}

.notification-level-badge.is-critical {
  border-color: rgba(219, 102, 118, 0.55);
  background: rgba(255, 235, 238, 0.95);
  color: #ae2d40;
}

.notification-level-badge.is-warning {
  border-color: rgba(221, 169, 99, 0.6);
  background: rgba(255, 246, 231, 0.96);
  color: #8c5a0c;
}

.notification-level-badge.is-info {
  border-color: rgba(143, 170, 219, 0.56);
  background: rgba(234, 243, 255, 0.95);
  color: #365eaa;
}

.notification-row-status-badge {
  border-radius: 999px;
  border: 1px solid rgba(188, 201, 223, 0.55);
  font-size: 0.72rem;
  padding: 3px 8px;
}

.notification-row-status-badge.is-active {
  border-color: rgba(124, 182, 143, 0.58);
  background: rgba(230, 248, 236, 0.96);
  color: #1f7241;
}

.notification-row-status-badge.is-resolved {
  border-color: rgba(178, 186, 201, 0.58);
  background: rgba(236, 240, 246, 0.96);
  color: #50607e;
}

.notification-row-message,
.notification-row-meta {
  margin: 0;
}

.notification-row-message {
  color: #293656;
  font-size: 0.89rem;
  font-weight: 600;
}

.notification-row-meta {
  color: #6b7995;
  font-size: 0.81rem;
}

.notification-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.notification-inline-action {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.notification-row.is-compact .notification-inline-action {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.todo-overview-panel,
.todo-workspace-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.todo-overview-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.todo-open-composer-button {
  min-height: 34px;
  padding-inline: 14px;
  border-radius: 12px;
  white-space: nowrap;
}

.todo-summary-grid {
  display: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.todo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.todo-composer-card,
.todo-list-card,
.todo-detail-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  width: 100%;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(214, 220, 234, 0.92);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.05), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  overflow: hidden;
  box-sizing: border-box;
}

.todo-list-card,
.todo-detail-card {
  align-self: stretch;
  min-height: 0;
}

.todo-list {
  display: grid;
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

#todo-inline-error {
  margin: 0;
  min-height: 1.1rem;
}

.todo-task-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(198, 208, 230, 0.84);
  border-left: 4px solid rgba(149, 110, 230, 0.28);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.04), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.todo-task-card:hover,
.todo-task-card.is-active {
  border-color: rgba(172, 130, 235, 0.76);
  border-left-color: rgba(149, 110, 230, 0.82);
  box-shadow: 0 14px 28px rgba(125, 93, 187, 0.16);
  transform: translateY(-1px);
}

.todo-task-card:focus-visible {
  outline: 2px solid rgba(154, 109, 226, 0.42);
  outline-offset: 2px;
}

.todo-task-card-head,
.todo-detail-head,
.todo-comment-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.todo-task-card-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.todo-task-card-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #4a2d8d;
  background: linear-gradient(135deg, rgba(115, 149, 255, 0.2), rgba(231, 104, 187, 0.2));
  border: 1px solid rgba(160, 122, 230, 0.35);
}

.todo-task-card-copy,
.todo-detail-heading,
.todo-comment-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.todo-task-status-control {
  display: grid;
  gap: 4px;
  min-width: 168px;
  flex-shrink: 0;
}

.todo-task-status-control-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6f608e;
}

.todo-task-status-select {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(189, 201, 226, 0.86);
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #33415f;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.todo-task-status-select:focus-visible {
  outline: 2px solid rgba(154, 109, 226, 0.35);
  outline-offset: 2px;
}

.todo-task-status-select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.todo-task-status-select[data-status="open"] {
  border-color: rgba(186, 197, 219, 0.72);
  background: rgba(236, 240, 247, 0.98);
  color: #566074;
}

.todo-task-status-select[data-status="next-week-job"] {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(219, 234, 254, 0.98);
  color: #1d4ed8;
}

.todo-task-status-select[data-status="in-progress"] {
  border-color: rgba(156, 189, 240, 0.72);
  background: rgba(231, 241, 255, 0.98);
  color: #345eaa;
}

.todo-task-status-select[data-status="waiting"] {
  border-color: rgba(223, 198, 136, 0.72);
  background: rgba(246, 239, 220, 0.98);
  color: #8a5a08;
}

.todo-task-status-select[data-status="done"] {
  border-color: rgba(148, 210, 171, 0.7);
  background: rgba(224, 246, 235, 0.98);
  color: #19714a;
}

.todo-task-card-title,
.todo-detail-heading h3 {
  margin: 0;
  color: #1f2940;
}

.todo-task-card-title {
  font-size: 1rem;
  line-height: 1.25;
}

.todo-task-card-subtitle,
.todo-detail-meta {
  color: #6f7a92;
  font-size: 0.77rem;
}

.todo-task-card-preview {
  color: #2f3e5c;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.todo-task-card-badges,
.todo-task-card-meta,
.todo-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.todo-task-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.todo-task-card-footer-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.todo-task-card-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.todo-task-card-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.todo-task-card-participant {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(194, 206, 229, 0.65);
  background: rgba(243, 247, 255, 0.92);
  color: #4c5d7a;
  font-size: 0.72rem;
  font-weight: 700;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-open-topic-button {
  min-height: 27px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 0.7rem;
  color: #563387;
  border-color: rgba(163, 126, 230, 0.55);
  background: rgba(248, 242, 255, 0.96);
  white-space: nowrap;
}

.todo-task-card-expand {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(200, 211, 233, 0.82);
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.96), rgba(243, 248, 255, 0.94));
}

.todo-task-card-expand-details {
  gap: 12px;
}

.todo-task-detail-message {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 178, 238, 0.72);
  background: linear-gradient(180deg, rgba(250, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
  color: #34425f;
  line-height: 1.55;
}

.todo-task-detail-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.todo-task-detail-list {
  display: grid;
  gap: 8px;
}

.todo-task-detail-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(203, 214, 236, 0.82);
  background: rgba(255, 255, 255, 0.94);
}

.todo-task-detail-row-label {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6f608e;
}

.todo-task-detail-row-value {
  min-width: 0;
  color: #2f3b58;
  font-size: 0.84rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.todo-task-detail-note {
  margin: 0;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid rgba(223, 198, 136, 0.74);
  background: rgba(247, 238, 218, 0.96);
  color: #8b5c09;
  font-size: 0.79rem;
  font-weight: 700;
}

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

.todo-task-card-expand-empty {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7995;
}

.todo-task-card-expand-more {
  margin: 0;
  font-size: 0.74rem;
  color: #6a5a8f;
  font-weight: 700;
}

.todo-task-inline-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(205, 217, 238, 0.72);
  background: rgba(255, 255, 255, 0.94);
}

.todo-task-inline-comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: #4a2d8d;
  border: 1px solid rgba(160, 122, 230, 0.35);
  background: linear-gradient(135deg, rgba(115, 149, 255, 0.2), rgba(231, 104, 187, 0.2));
}

.todo-task-inline-comment-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.todo-task-inline-comment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.todo-task-inline-comment-top strong {
  font-size: 0.75rem;
  color: #2f3b58;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-task-inline-comment-top span {
  font-size: 0.72rem;
  color: #6f7a92;
  white-space: nowrap;
}

.todo-task-inline-comment-content p {
  margin: 0;
  font-size: 0.8rem;
  color: #3e4c69;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.todo-task-card-subtitle,
.todo-task-card-message {
  overflow-wrap: anywhere;
}

.todo-form-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.todo-form-grid .field.field-span-full {
  grid-column: 1 / -1;
}

.todo-filter-row {
  grid-template-columns: minmax(0, 1.5fr) minmax(160px, 0.9fr) minmax(160px, 0.9fr);
}

.todo-editor-backdrop {
  z-index: 118;
}

.todo-editor-panel.is-modal-open {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 119;
  width: min(1280px, calc(100vw - 20px));
  height: calc(100vh - 20px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

.todo-editor-body {
  min-height: 0;
  overflow: auto;
  padding: 0 16px 16px;
}

.todo-editor-body .todo-form-compact {
  padding: 2px 2px 10px;
}

body.is-todo-editor-open {
  overflow: hidden;
}

.todo-multi-select {
  min-height: 118px;
  padding: 8px;
}

#todo-invited-user-ids {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.todo-editor-core-field > input,
.todo-editor-core-field > select,
.todo-editor-core-field .todo-invited-trigger {
  min-height: 48px;
}

.todo-invite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.todo-invite-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ghost-button-tiny {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.todo-invited-dropdown {
  position: relative;
  min-width: 0;
}

.todo-invited-trigger {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(153, 116, 230, 0.42);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  color: #24304a;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.todo-invited-trigger:hover,
.todo-invited-trigger:focus-visible,
.todo-invited-dropdown.is-open .todo-invited-trigger {
  border-color: rgba(153, 116, 230, 0.7);
  box-shadow: 0 10px 18px rgba(122, 82, 190, 0.16);
  outline: none;
}

.todo-invited-caret {
  color: #7f68ad;
  transition: transform 140ms ease;
}

.todo-invited-dropdown.is-open .todo-invited-caret {
  transform: rotate(180deg);
}

.todo-invited-preview {
  min-width: 0;
  width: 100%;
}

.todo-invited-preview-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.todo-invited-preview-stack {
  display: inline-flex;
  align-items: center;
}

.todo-invited-preview-stack .todo-invited-avatar {
  margin-left: -6px;
}

.todo-invited-preview-stack .todo-invited-avatar:first-child {
  margin-left: 0;
}

.todo-invited-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
}

.todo-invited-preview-text {
  font-size: 0.86rem;
  color: #4b5673;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-invited-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 9;
  display: grid;
  gap: 8px;
  max-height: 270px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(153, 116, 230, 0.38);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 22px 40px rgba(47, 27, 90, 0.2);
}

.todo-invited-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(210, 198, 236, 0.9);
  border-radius: 14px;
  background: rgba(252, 249, 255, 0.95);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.todo-invited-option:hover,
.todo-invited-option.is-selected {
  border-color: rgba(153, 116, 230, 0.5);
  background: rgba(244, 236, 255, 0.98);
  box-shadow: 0 9px 16px rgba(98, 64, 156, 0.14);
}

.todo-invited-option input {
  margin: 0;
}

.todo-invited-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.todo-invited-option-copy strong,
.todo-invited-option-copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-invited-option-copy span,
.todo-invited-empty {
  color: #657090;
  font-size: 0.79rem;
}

.todo-task-card-message,
.todo-detail-message,
.todo-comment-body {
  margin: 0;
  color: #34425f;
  line-height: 1.5;
}

.todo-task-status-badge,
.todo-task-priority-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 700;
}

.todo-task-card-meta .list-meta-pill {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 0.7rem;
}

.todo-task-status-badge.is-open {
  background: rgba(236, 240, 247, 0.96);
  border-color: rgba(186, 197, 219, 0.56);
  color: #566074;
}

.todo-task-status-badge.is-next_week_job {
  background: rgba(219, 234, 254, 0.96);
  border-color: rgba(96, 165, 250, 0.52);
  color: #1d4ed8;
}

.todo-task-status-badge.is-in_progress {
  background: rgba(231, 241, 255, 0.96);
  border-color: rgba(156, 189, 240, 0.56);
  color: #345eaa;
}

.todo-task-status-badge.is-waiting {
  background: rgba(246, 239, 220, 0.95);
  border-color: rgba(223, 198, 136, 0.56);
  color: #8a5a08;
}

.todo-task-status-badge.is-done {
  background: rgba(224, 246, 235, 0.95);
  border-color: rgba(148, 210, 171, 0.5);
  color: #19714a;
}

.todo-detail-card {
  min-height: 100%;
  border-left: 4px solid rgba(149, 110, 230, 0.38);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.05), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
}

.todo-detail-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.todo-detail-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.todo-detail-message {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(196, 178, 238, 0.72);
  background: linear-gradient(180deg, rgba(250, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
  font-size: 0.96rem;
}

.todo-detail-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.todo-detail-fact-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(191, 202, 226, 0.8);
  background: rgba(244, 248, 255, 0.95);
  color: #4d5b79;
  font-size: 0.78rem;
  font-weight: 700;
}

.todo-detail-fact-chip.is-status-open {
  background: rgba(237, 241, 248, 0.96);
  border-color: rgba(184, 196, 221, 0.82);
  color: #566279;
}

.todo-detail-fact-chip.is-status-in_progress {
  background: rgba(231, 241, 255, 0.98);
  border-color: rgba(151, 184, 239, 0.74);
  color: #325da9;
}

.todo-detail-fact-chip.is-status-waiting {
  background: rgba(247, 238, 218, 0.96);
  border-color: rgba(225, 195, 127, 0.76);
  color: #8b5c09;
}

.todo-detail-fact-chip.is-status-done {
  background: rgba(226, 246, 234, 0.98);
  border-color: rgba(143, 208, 170, 0.72);
  color: #1a6f49;
}

.todo-detail-fact-chip.is-priority-high,
.todo-detail-fact-chip.is-priority-urgent {
  background: rgba(255, 231, 231, 0.98);
  border-color: rgba(227, 145, 145, 0.8);
  color: #9e3030;
}

.todo-detail-fact-chip.is-date {
  background: rgba(239, 246, 255, 0.98);
  border-color: rgba(163, 190, 229, 0.75);
  color: #34598f;
}

.todo-detail-fact-chip.is-overdue {
  background: rgba(255, 232, 232, 0.98);
  border-color: rgba(236, 141, 141, 0.82);
  color: #9c2a2a;
}

.todo-detail-fact-chip.is-soft {
  background: rgba(246, 248, 252, 0.98);
  border-color: rgba(200, 210, 229, 0.76);
  color: #63708d;
}

.todo-detail-people-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0 2px;
}

.todo-detail-people-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f608e;
}

.todo-detail-people-stack {
  display: inline-flex;
  align-items: center;
}

.todo-detail-person-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  margin-left: -6px;
}

.todo-detail-person-avatar:first-child {
  margin-left: 0;
}

.todo-detail-people-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.todo-detail-person-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(191, 202, 226, 0.82);
  background: rgba(247, 250, 255, 0.98);
  color: #4e5d7f;
  font-size: 0.76rem;
  font-weight: 700;
}

.todo-detail-person-chip.is-soft {
  color: #667495;
  background: rgba(240, 244, 251, 0.95);
}

.todo-detail-fields .field > span {
  font-size: 0.68rem;
}

.todo-detail-fields .field > select,
.todo-detail-fields .field > input {
  min-height: 36px;
  border-radius: 999px;
  font-size: 0.82rem;
  padding: 0 12px;
}

.todo-comments-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.todo-task-comments {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding-top: 4px;
}

.todo-task-comments-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.todo-task-comments-title {
  display: grid;
  gap: 3px;
}

.todo-task-comments-title strong {
  color: #25324d;
}

.todo-task-comments-title span {
  color: #6c7893;
  font-size: 0.78rem;
}

.todo-comments-list {
  display: grid;
  gap: 12px;
  max-height: min(44vh, 340px);
  overflow: auto;
  padding-right: 4px;
}

.todo-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid rgba(205, 216, 236, 0.84);
  background: rgba(248, 251, 255, 0.95);
}

.todo-comment.is-own {
  border-color: rgba(169, 132, 235, 0.62);
  background: linear-gradient(180deg, rgba(247, 238, 255, 0.92), rgba(251, 246, 255, 0.98));
}

.todo-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(103, 135, 255, 0.18), rgba(227, 94, 183, 0.2));
  color: #4b4a96;
  font-size: 0.78rem;
  font-weight: 700;
}

.todo-comment-top span {
  color: #7b869d;
  font-size: 0.8rem;
}

.todo-comment-body {
  white-space: pre-wrap;
}

.todo-detail-empty {
  display: grid;
  gap: 8px;
  align-content: start;
}

.todo-comment-form {
  display: grid;
  gap: 12px;
}

.todo-task-comment-form {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(202, 213, 236, 0.82);
  background: rgba(255, 255, 255, 0.96);
}

.todo-task-comment-field {
  display: grid;
  gap: 6px;
}

.todo-task-comment-textarea-wrap {
  position: relative;
}

.todo-task-comment-textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border-radius: 16px;
  border: 1px solid rgba(184, 197, 225, 0.84);
  padding: 12px 14px;
  font: inherit;
  color: #2d3956;
  background: rgba(250, 252, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.todo-task-comment-textarea:focus-visible {
  outline: 2px solid rgba(154, 109, 226, 0.32);
  outline-offset: 2px;
}

.todo-task-comment-textarea:disabled {
  opacity: 0.72;
}

.todo-task-comment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.todo-task-comment-hint {
  margin: 0;
  color: #6a7690;
  font-size: 0.77rem;
}

.todo-comment-mention-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(166, 132, 229, 0.35);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 18px 38px rgba(59, 40, 109, 0.18);
}

.todo-comment-mention-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(210, 219, 239, 0.84);
  border-radius: 13px;
  background: rgba(248, 251, 255, 0.96);
  text-align: left;
  cursor: pointer;
}

.todo-comment-mention-option:hover,
.todo-comment-mention-option.is-active {
  border-color: rgba(162, 126, 229, 0.58);
  background: rgba(246, 239, 255, 0.98);
}

.todo-comment-mention-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #4a2d8d;
  background: linear-gradient(135deg, rgba(115, 149, 255, 0.2), rgba(231, 104, 187, 0.2));
  border: 1px solid rgba(160, 122, 230, 0.35);
}

.todo-comment-mention-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.todo-comment-mention-copy strong,
.todo-comment-mention-copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-comment-mention-copy span {
  color: #6d7893;
  font-size: 0.75rem;
}

@media (max-width: 1480px) {
  .notifications-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.8fr) minmax(170px, 0.8fr);
  }

  .todo-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 0.8fr) minmax(170px, 0.8fr);
  }
}

@media (max-width: 980px) {
  .todo-form-grid,
  .todo-filter-row,
  .todo-detail-fields {
    grid-template-columns: 1fr !important;
  }

  .todo-task-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .todo-task-card-footer,
  .todo-task-detail-row {
    grid-template-columns: 1fr;
  }

  .todo-task-comments-head,
  .todo-task-comment-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .todo-task-status-control {
    min-width: 0;
    width: 100%;
  }
}

.dashboard-breakdown-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-breakdown-top strong {
  font-size: 0.9rem;
}

.dashboard-breakdown-top span {
  color: var(--muted);
  font-size: 0.82rem;
}

.dashboard-breakdown-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(218, 224, 236, 0.82);
  overflow: hidden;
}

.dashboard-breakdown-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(95, 138, 255, 0.92), rgba(227, 94, 183, 0.92));
}

.dashboard-executor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(246, 248, 253, 0.86);
}

.dashboard-executor-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}

.dashboard-executor-copy {
  display: grid;
  gap: 2px;
}

.dashboard-executor-copy strong {
  font-size: 0.88rem;
}

.dashboard-executor-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.dashboard-upcoming-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(246, 248, 253, 0.86);
}

.dashboard-upcoming-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dashboard-upcoming-identity strong,
.dashboard-upcoming-identity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-upcoming-identity strong {
  font-size: 0.9rem;
}

.dashboard-upcoming-identity span,
.dashboard-upcoming-date {
  color: var(--muted);
  font-size: 0.8rem;
}

.dashboard-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.dashboard-overview-panel {
  gap: 20px;
}

.dashboard-builder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.dashboard-builder-canvas {
  min-width: 0;
}

.dashboard-builder-modal {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow: auto;
  padding: 16px 24px;
}

.dashboard-builder-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(18, 24, 36, 0.32);
  backdrop-filter: blur(7px);
}

.dashboard-builder-dialog {
  position: relative;
  z-index: 1;
  width: min(1760px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  max-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(214, 220, 234, 0.94);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 253, 0.98));
  box-shadow: 0 32px 88px rgba(38, 48, 78, 0.22);
}

.dashboard-builder-dialog-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
}

.dashboard-builder-sidebar {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

.dashboard-builder-search-field {
  margin: 0;
}

.dashboard-widget-category-list {
  display: grid;
  gap: 10px;
}

.dashboard-category-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(216, 222, 236, 0.88);
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.dashboard-category-button strong {
  color: #24304a;
  font-size: 0.92rem;
}

.dashboard-category-button span {
  color: #6f7a92;
  font-size: 0.78rem;
  line-height: 1.4;
}

.dashboard-category-button:hover,
.dashboard-category-button.is-active {
  border-color: rgba(205, 136, 213, 0.6);
  box-shadow: 0 14px 26px rgba(118, 95, 176, 0.12);
  transform: translateY(-1px);
}

.dashboard-builder-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(620px, 1.28fr);
  gap: 18px;
  overflow: hidden;
}

.dashboard-template-library,
.dashboard-widget-form {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(214, 220, 234, 0.92);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.dashboard-template-library {
  align-content: start;
  max-height: 100%;
  overflow: auto;
}

.dashboard-builder-panel-head,
.dashboard-widget-preview-head,
.dashboard-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#dashboard-builder-copy {
  display: none;
}

.dashboard-widget-form,
.dashboard-widget-preview-wrap {
  align-content: start;
}

.dashboard-widget-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-widget-form {
  max-height: 100%;
  overflow: auto;
  padding-bottom: 22px;
}

.dashboard-widget-template-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dashboard-template-card {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(214, 220, 234, 0.92);
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.dashboard-template-card:hover,
.dashboard-template-card.is-active {
  border-color: rgba(205, 136, 213, 0.64);
  box-shadow: 0 18px 32px rgba(123, 92, 255, 0.12);
  transform: translateY(-1px);
}

.dashboard-template-card-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dashboard-template-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(123, 92, 255, 0.16), rgba(240, 79, 151, 0.16));
  color: #6a46a4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-template-card-type {
  color: #7a86a3;
  font-size: 0.74rem;
  font-weight: 700;
}

.dashboard-template-card-title {
  color: #212b43;
  font-size: 1rem;
}

.dashboard-template-card-copy {
  margin: 0;
  color: #66738c;
  font-size: 0.84rem;
  line-height: 1.5;
}

.dashboard-template-card-footer {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-widget-preview-wrap {
  padding-top: 8px;
  border-top: 1px solid rgba(219, 225, 238, 0.82);
}

.dashboard-widget-preview-head {
  align-items: center;
}

.dashboard-widget-preview-head strong {
  font-size: 0.96rem;
}

.dashboard-widget-preview-head span {
  color: #6f7a92;
  font-size: 0.82rem;
}

.dashboard-widget-preview {
  min-height: 220px;
}

.dashboard-status-color-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(190, 207, 237, 0.88);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.92)),
    radial-gradient(circle at 100% 0, rgba(128, 99, 242, 0.11), transparent 35%);
}

.dashboard-status-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.dashboard-status-color-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(199, 213, 238, 0.92);
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

.dashboard-status-color-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dashboard-status-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid rgba(17, 34, 64, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px rgba(58, 76, 115, 0.14);
}

.dashboard-status-color-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dashboard-status-color-copy strong {
  color: #17233d;
  font-size: 0.82rem;
  font-weight: 900;
}

.dashboard-status-color-copy small {
  color: #748099;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.dashboard-widget-form-actions {
  position: sticky;
  bottom: 0;
  justify-content: flex-end;
  padding-top: 12px;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(249, 251, 255, 0.98) 42%);
}

.dashboard-widget-empty {
  display: grid;
}

.dashboard-empty-state {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px dashed rgba(206, 214, 231, 0.98);
  background: rgba(249, 250, 255, 0.9);
}

.dashboard-empty-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-widget-grid {
  --dashboard-grid-columns: 12;
  --dashboard-grid-row-height: 116px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dashboard-grid-columns), minmax(0, 1fr));
  grid-auto-rows: var(--dashboard-grid-row-height);
  gap: 18px;
  align-items: start;
  min-height: 260px;
}

.dashboard-widget-drop-preview {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px dashed rgba(153, 100, 224, 0.76);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(232, 198, 255, 0.24), rgba(164, 208, 255, 0.22));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 14px 28px rgba(112, 79, 169, 0.18);
  pointer-events: none;
  z-index: 2;
}

.dashboard-widget-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(177, 141, 238, 0.42);
  background:
    radial-gradient(circle at top right, rgba(235, 103, 181, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 20px rgba(86, 63, 128, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.62);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.dashboard-widget-card:hover {
  border-color: rgba(162, 110, 239, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 26px rgba(86, 63, 128, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.72);
  transform: translateY(-1px);
}

.dashboard-widget-card.is-preview {
  min-height: 100%;
}

.dashboard-widget-card.is-dragging,
.dashboard-widget-card.is-resizing {
  z-index: 3;
  transition: none;
  box-shadow: 0 22px 48px rgba(64, 74, 110, 0.22);
}

.dashboard-widget-card[data-layout-preview]::after {
  content: attr(data-layout-preview);
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(31, 40, 60, 0.84);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  pointer-events: none;
}

.dashboard-widget-head-copy,
.dashboard-widget-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dashboard-widget-kicker {
  color: #7a86a3;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-widget-head-copy h3 {
  margin: 0;
  font-size: 1.02rem;
}

.dashboard-widget-actions,
.dashboard-widget-footer,
.dashboard-widget-list-meta,
.dashboard-widget-legend-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-widget-action {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.dashboard-widget-drag-handle {
  letter-spacing: -1px;
  cursor: grab;
}

.dashboard-widget-drag-handle:active {
  cursor: grabbing;
}

body.is-dragging-dashboard-widget,
body.is-dragging-dashboard-widget * {
  user-select: none !important;
}

.dashboard-widget-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 166, 196, 0.72) transparent;
}

.dashboard-widget-body::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.dashboard-widget-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(154, 166, 196, 0.72);
  background-clip: padding-box;
}

.dashboard-widget-body::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-widget-metric-value {
  display: block;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1;
  color: #1f2940;
}

.dashboard-widget-metric-subtitle {
  display: block;
  margin-top: 8px;
  color: #6f7a92;
  font-size: 0.86rem;
}

.dashboard-widget-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-widget-chip.is-soft {
  background: rgba(237, 241, 248, 0.96);
  border-color: rgba(188, 198, 219, 0.6);
  color: #5a657d;
}

.dashboard-widget-chip.is-filter {
  background: rgba(242, 236, 255, 0.96);
  border-color: rgba(191, 171, 233, 0.58);
  color: #674a95;
}

.dashboard-widget-chip.is-tag {
  background: rgba(255, 236, 240, 0.96);
  border-color: rgba(236, 178, 192, 0.64);
  color: #b54d71;
}

.dashboard-chart-shell {
  display: grid;
  gap: 16px;
}

.dashboard-donut-wrap {
  display: flex;
  justify-content: center;
}

.dashboard-donut-chart {
  position: relative;
  width: 184px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.dashboard-donut-chart::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dashboard-donut-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 4px;
}

.dashboard-donut-center strong {
  font-size: 1.55rem;
}

.dashboard-donut-center span {
  color: #74819a;
  font-size: 0.8rem;
}

.dashboard-widget-legend {
  display: grid;
  gap: 8px;
}

.dashboard-widget-legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(246, 248, 253, 0.82);
}

.dashboard-widget-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.dashboard-bar-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px;
  align-items: end;
}

.dashboard-bar-column {
  display: grid;
  gap: 8px;
  align-items: end;
}

.dashboard-bar-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: #5a657d;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dashboard-bar-track {
  height: 160px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(241, 244, 251, 0.96);
  display: flex;
  align-items: flex-end;
}

.dashboard-bar-fill {
  display: block;
  width: 100%;
  border-radius: 14px;
}

.dashboard-bar-label {
  color: #55627d;
  font-size: 0.8rem;
  line-height: 1.35;
  word-break: break-word;
}

.dashboard-stacked-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-stacked-bar-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(207, 216, 234, 0.82);
  background: rgba(255, 255, 255, 0.82);
  color: #5a657d;
  font-size: 0.74rem;
  font-weight: 800;
}

.dashboard-stacked-bar-legend-chip span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.dashboard-stacked-bar-chart {
  display: grid;
  gap: 10px;
}

.dashboard-stacked-bar-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.dashboard-stacked-bar-label {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-stacked-bar-label strong,
.dashboard-stacked-bar-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-stacked-bar-label strong {
  color: #25314c;
  font-size: 0.84rem;
}

.dashboard-stacked-bar-label span {
  color: #74819a;
  font-size: 0.75rem;
  font-weight: 800;
}

.dashboard-stacked-bar-track {
  display: flex;
  align-items: stretch;
  height: 28px;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(210, 218, 234, 0.9);
  background: rgba(240, 244, 251, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.dashboard-stacked-bar-fill {
  display: block;
  min-width: 4px;
  height: 100%;
}

.dashboard-stacked-column-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 14px;
  align-items: end;
  min-height: 250px;
}

.dashboard-stacked-column {
  display: grid;
  grid-template-rows: auto minmax(148px, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.dashboard-stacked-column-total {
  justify-self: center;
  color: #26334f;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

.dashboard-stacked-column-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 188px;
  min-width: 0;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(203, 214, 235, 0.86);
  background:
    linear-gradient(to top, rgba(138, 160, 194, 0.14) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(180deg, rgba(247, 250, 255, 0.94), rgba(239, 245, 253, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(43, 63, 105, 0.08);
}

.dashboard-stacked-column-stack {
  display: flex;
  flex-direction: column-reverse;
  width: min(100%, 46px);
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 10px 22px rgba(49, 83, 143, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.dashboard-stacked-column-segment {
  display: block;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.dashboard-stacked-column-label {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.dashboard-stacked-column-label strong,
.dashboard-stacked-column-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-stacked-column-label strong {
  color: #27334f;
  font-size: 0.78rem;
  font-weight: 900;
}

.dashboard-stacked-column-label span {
  color: #78859f;
  font-size: 0.72rem;
  font-weight: 800;
}

.dashboard-widget-list {
  display: grid;
  gap: 10px;
}

.dashboard-widget-list-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 2px 2px;
  color: #51607c;
  border-bottom: 1px solid rgba(214, 220, 234, 0.86);
}

.dashboard-widget-list-group:first-child {
  margin-top: 0;
}

.dashboard-widget-list-group strong {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-widget-list-group span {
  color: #7a86a3;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-widget-status-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(190, 207, 237, 0.88);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.9));
}

.dashboard-widget-status-value {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  justify-content: flex-end;
  min-width: 72px;
  color: #13244a;
}

.dashboard-widget-status-value strong {
  font-size: 1.35rem;
  line-height: 1;
}

.dashboard-widget-status-value span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-widget-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214, 220, 234, 0.9);
  background: rgba(247, 249, 254, 0.92);
  text-align: left;
}

button.dashboard-widget-list-row {
  cursor: pointer;
}

.dashboard-widget-list-copy strong,
.dashboard-widget-list-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-widget-list-copy span,
.dashboard-widget-list-date {
  color: #6f7a92;
  font-size: 0.82rem;
}

.dashboard-widget-resize-handle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 249, 254, 0.96);
  box-shadow: 0 8px 18px rgba(83, 95, 125, 0.12);
  cursor: nwse-resize;
}

.dashboard-widget-resize-handle::before {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #7683a3;
  border-bottom: 2px solid #7683a3;
  border-radius: 0 0 4px 0;
}

@media (max-width: 1320px) {
  .dashboard-builder-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .work-order-map-toolbar-side {
    justify-items: stretch;
    min-width: 100%;
  }

  .work-order-map-filters {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .dashboard-builder-dialog-body {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 760px) {
  .dashboard-widget-grid {
    --dashboard-grid-columns: 1;
  }

  .dashboard-builder-modal {
    padding: 12px 14px;
  }

  .dashboard-builder-dialog {
    width: calc(100vw - 28px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    padding: 16px;
  }

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

  .dashboard-builder-actions,
  .dashboard-overview-head {
    align-items: flex-start;
  }
}

.panel {
  border-radius: 24px;
  padding: 20px;
  min-width: 0;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
}

.entity-form {
  display: grid;
  gap: 16px;
}

.entity-form.is-editing {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(204, 71, 230, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(252, 246, 255, 0.96));
  box-shadow: 0 18px 40px rgba(204, 71, 230, 0.08);
}

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

.form-grid > * {
  min-width: 0;
}

.membership-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.membership-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
}

.membership-pill input {
  width: 16px;
  height: 16px;
}

.avatar-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar-upload-copy {
  display: grid;
  gap: 8px;
}

.inline-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.signup-approval-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup-inline-select {
  min-width: 170px;
  min-height: 38px;
  border-radius: 12px;
}

.signup-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.dashboard-organizations-body,
.dashboard-signup-requests-body {
  display: grid;
  gap: 12px;
}

.dashboard-organization-list,
.dashboard-signup-request-list {
  display: grid;
  gap: 10px;
}

.dashboard-organization-card,
.dashboard-signup-request-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(203, 216, 237, 0.88);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.9)),
    radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.12), transparent 34%);
  box-shadow: 0 16px 34px rgba(43, 63, 105, 0.08);
}

.dashboard-signup-request-card {
  grid-template-columns: auto minmax(220px, 1fr) minmax(300px, 1.35fr) auto auto;
  border-radius: 16px;
}

.dashboard-signup-request-card.is-pending {
  border-color: rgba(245, 189, 75, 0.5);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 234, 0.92)),
    radial-gradient(circle at 0 0, rgba(245, 189, 75, 0.16), transparent 38%);
}

.dashboard-organization-card.is-active {
  border-color: rgba(43, 125, 233, 0.46);
  background:
    linear-gradient(135deg, rgba(240, 247, 255, 0.98), rgba(255, 255, 255, 0.94)),
    radial-gradient(circle at 0 0, rgba(43, 125, 233, 0.18), transparent 42%);
}

.dashboard-organization-logo {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(197, 210, 232, 0.9);
  background: #ffffff;
  display: grid;
  place-items: center;
}

.dashboard-signup-request-marker {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #f1b33d;
  box-shadow: 0 0 0 5px rgba(241, 179, 61, 0.13);
}

.dashboard-signup-request-marker.is-approved {
  background: #34b979;
  box-shadow: 0 0 0 5px rgba(52, 185, 121, 0.13);
}

.dashboard-signup-request-marker.is-rejected {
  background: #ef5c6c;
  box-shadow: 0 0 0 5px rgba(239, 92, 108, 0.13);
}

.dashboard-organization-copy,
.dashboard-signup-request-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-organization-copy strong,
.dashboard-signup-request-copy strong {
  min-width: 0;
  color: #16243d;
  font-size: 0.94rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-organization-copy span,
.dashboard-signup-request-copy span,
.dashboard-signup-request-copy small {
  min-width: 0;
  color: #667492;
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signup-request-info-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.signup-request-info-item {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(244, 247, 252, 0.86);
  border: 1px solid rgba(214, 224, 242, 0.66);
}

.signup-request-info-item span {
  min-width: 0;
  color: #77839d;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signup-request-info-item strong {
  min-width: 0;
  color: #1a2942;
  font-size: 0.76rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-organization-status,
.dashboard-signup-request-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-organization-status.is-active,
.dashboard-signup-request-status.is-approved {
  color: #0b6b42;
  border: 1px solid rgba(60, 194, 128, 0.36);
  background: rgba(225, 248, 235, 0.92);
}

.dashboard-organization-status.is-inactive,
.dashboard-signup-request-status.is-rejected {
  color: #9b2c2c;
  border: 1px solid rgba(245, 129, 129, 0.36);
  background: rgba(255, 236, 236, 0.92);
}

.dashboard-signup-request-status.is-pending {
  color: #8a5b05;
  border: 1px solid rgba(245, 189, 75, 0.42);
  background: rgba(255, 246, 219, 0.94);
}

.dashboard-organization-actions,
.signup-request-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.signup-request-card-actions .signup-approval-controls {
  width: 100%;
  justify-content: flex-end;
}

@media (max-width: 1180px) {
  .dashboard-signup-request-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .signup-request-info-grid,
  .signup-request-card-actions {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .dashboard-organization-card,
  .dashboard-signup-request-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .dashboard-signup-request-status,
  .dashboard-organization-status,
  .dashboard-organization-actions,
  .signup-request-card-actions,
  .signup-request-info-grid {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .signup-request-info-grid {
    grid-template-columns: 1fr;
  }

  .signup-request-card-actions {
    justify-content: stretch;
  }

  .signup-request-card-actions .card-button,
  .signup-request-card-actions .signup-inline-select {
    width: 100%;
  }
}

.form-grid-wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

.field {
  display: grid;
  gap: 8px;
}

.field span,
.contact-card legend {
  color: var(--muted);
  font-size: 0.82rem;
}

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

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

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: end;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(220, 156, 212, 0.44);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.field-checkbox input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin: 0;
}

.field-checkbox span {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(220, 156, 212, 0.68);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 0 0 1px rgba(123, 92, 255, 0.03);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

input[readonly] {
  background: #f4ecf8;
  color: var(--muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(240, 79, 151, 0.14);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(177, 92, 221, 0.1);
}

button {
  border: 1px solid transparent;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.primary-button {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #fff8fd;
  box-shadow: 0 14px 28px rgba(145, 73, 192, 0.22);
}

.ghost-button,
.card-button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 237, 252, 0.92));
  color: var(--text);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.card-button {
  padding: 9px 12px;
}

.card-button.card-danger {
  color: var(--danger);
  background: #f7eceb;
  border-color: rgba(180, 80, 80, 0.18);
}

.form-actions,
.table-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.risk-assessment-autosave-status {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 850;
}

.risk-assessment-editor-panel .vehicles-panel-head-actions .risk-assessment-autosave-status {
  min-height: 30px;
  padding: 5px 9px;
  border-color: rgba(203, 213, 225, 0.72);
  background: rgba(248, 250, 252, 0.86);
  box-shadow: none;
  color: #64748b;
  font-size: 0.68rem;
}

.risk-assessment-save-button {
  min-height: 30px;
  padding: 6px 10px;
  border-color: rgba(147, 197, 253, 0.58);
  background: rgba(239, 246, 255, 0.76);
  box-shadow: none;
  color: #1d4ed8;
  font-size: 0.74rem;
  font-weight: 900;
}

.risk-assessment-save-button:disabled {
  cursor: wait;
  opacity: 0.64;
}

.risk-assessment-autosave-status[data-tone="saving"] {
  border-color: rgba(37, 99, 235, 0.32);
  background: #eff6ff;
  color: #1d4ed8;
}

.risk-assessment-autosave-status[data-tone="saved"] {
  border-color: rgba(34, 197, 94, 0.3);
  background: #f0fdf4;
  color: #15803d;
}

.risk-assessment-autosave-status[data-tone="warning"] {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffbeb;
  color: #92400e;
}

.risk-assessment-autosave-status[data-tone="error"] {
  border-color: rgba(239, 68, 68, 0.28);
  background: #fef2f2;
  color: #b91c1c;
}

.form-error {
  min-height: 1.2rem;
  margin: 0;
  color: var(--danger);
}

#work-order-document-wizard-error {
  pointer-events: none;
}

#work-order-document-wizard-error:empty {
  display: none;
}

.form-error.is-success {
  color: #8a3ad8;
}

.filter-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(220, 156, 212, 0.62);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    inset 0 0 0 1px rgba(240, 79, 151, 0.04),
    0 12px 26px rgba(108, 83, 153, 0.05);
}

.table-wrap-work-orders {
  max-height: calc(100vh - 290px);
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
}

.data-table th,
.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #e7ece3;
  text-align: left;
  vertical-align: middle;
}

.data-table thead th {
  background: #f4f6f1;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.data-table tbody tr:hover {
  background: #fbfcf8;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  border: 1px solid transparent;
}

.status-otvoreni-rn {
  color: #5a6373;
  background: #eef1f4;
}

.status-gotov-rn {
  color: #2b7848;
  background: #dff5e6;
}

.status-ovjeren-rn {
  color: #6d4d00;
  background: #e7c760;
}

.status-fakturiran-rn {
  color: #245b37;
  background: #bfe1ca;
}

.status-storno-rn {
  color: #48515d;
  background: #d8dde4;
}

.priority-urgent {
  color: var(--status-invoice);
  background: var(--status-invoice-bg);
}

.priority-high {
  color: var(--status-open);
  background: var(--status-open-bg);
}

.priority-normal {
  color: var(--status-progress);
  background: var(--status-progress-bg);
}

.priority-niski-prioritet,
.priority-bez-prioriteta {
  color: var(--status-done);
  background: var(--status-done-bg);
}

.subsection-title {
  margin: 4px 0 0;
  font-size: 1.05rem;
  color: var(--text);
}

.contact-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

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

.contact-card {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
}

.contact-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.contact-card-heading {
  display: grid;
  gap: 2px;
}

.contact-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.contact-card-index {
  font-size: 0.8rem;
  color: var(--muted);
}

.contact-card-remove {
  border: 1px solid rgba(150, 160, 173, 0.32);
  background: #f7f8fb;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.82rem;
}

.contact-card-remove:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.contact-card .field + .field {
  margin-top: 10px;
}

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

.locations-list-footer {
  display: flex;
  justify-content: center;
  padding-top: 14px;
}

.load-state {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.panel-work-orders {
  display: grid;
  gap: 16px;
  min-height: 0;
  background: linear-gradient(180deg, #fffaff, #faf6ff);
}

body.measurement-sheet-open {
  overflow: hidden;
}

body.is-dashboard-builder-open {
  overflow: hidden;
}

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

body.is-filling-measurement-cells {
  cursor: crosshair;
  user-select: none;
}

body.is-selecting-measurement-cells {
  cursor: cell;
  user-select: none;
}

body.is-selecting-measurement-cells .measurement-cell-input {
  pointer-events: none;
}

.measurement-sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 6px;
}

.measurement-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(20, 24, 34, 0.28);
  backdrop-filter: blur(6px);
}

.measurement-sheet-panel {
  position: relative;
  z-index: 1;
  width: min(1920px, calc(100vw - 12px));
  height: calc(100dvh - 12px);
  max-height: calc(100dvh - 12px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(219, 206, 236, 0.92);
  background: linear-gradient(180deg, #fffaff, #f7f1fc);
  box-shadow: 0 28px 88px rgba(88, 67, 136, 0.24);
}

.measurement-sheet-panel > * {
  min-width: 0;
}

.work-order-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 36;
  background: rgba(17, 21, 31, 0.32);
  backdrop-filter: blur(6px);
}

body.is-work-order-editor-open {
  overflow: hidden;
}

.work-order-editor-panel {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaff, #f5effb);
}

.work-order-editor-panel.is-modal-open {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 37;
  width: min(1840px, calc(100vw - 12px));
  height: calc(100vh - 20px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

.work-order-editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 420px);
  gap: 0;
  height: 100%;
  min-height: 0;
}

.work-order-editor-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  background: linear-gradient(180deg, #fffaff, #f6f0fb);
  overflow: hidden;
}

.work-order-editor-main.is-document-panel-active {
  background:
    linear-gradient(180deg, rgba(250, 236, 245, 0.94), rgba(247, 241, 253, 0.98)),
    linear-gradient(180deg, #fffaff, #f6f0fb);
  box-shadow: inset 0 0 0 2px rgba(192, 108, 214, 0.24);
}

.work-order-editor-fixed-head {
  display: grid;
  gap: 0;
  padding: 18px 20px 0;
  background: linear-gradient(180deg, rgba(255, 251, 255, 0.99), rgba(247, 239, 252, 0.96));
  border-bottom: 1px solid rgba(232, 236, 245, 0.9);
}

.work-order-editor-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 20px;
  display: grid;
  align-content: start;
  gap: 14px;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}

.work-order-editor-body:focus {
  outline: none;
}

.work-order-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

.work-order-editor-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #667089;
  font-size: 0.84rem;
  font-weight: 600;
}

.work-order-editor-type-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f04f97, #7b5cff);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.work-order-editor-hero {
  display: none;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 24px;
  border: 1px solid #e3e8f3;
  background:
    radial-gradient(circle at top right, rgba(245, 231, 237, 0.78), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fafd);
  box-shadow: 0 14px 34px rgba(46, 55, 84, 0.07);
}

.work-order-editor-hero-copy {
  display: grid;
  align-content: start;
  gap: 6px;
}

.work-order-editor-hero-copy h2 {
  margin: 0;
  color: #1d2434;
  font-size: 1.18rem;
  line-height: 1.12;
}

.work-order-editor-company-summary {
  display: grid;
  gap: 3px;
}

.work-order-editor-company-primary {
  color: #223047;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
}

.work-order-editor-company-line {
  color: #67738a;
  font-size: 0.78rem;
  line-height: 1.4;
}

.work-order-editor-company-line.is-placeholder {
  color: #8a93a7;
}

.work-order-editor-subtitle {
  margin: 0;
  color: #6d7589;
  font-size: 0.78rem;
  line-height: 1.4;
}

.work-order-editor-meta {
  display: grid;
  gap: 10px;
  align-content: start;
}

.work-order-editor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.work-order-editor-chip {
  min-height: 26px;
  padding: 0 11px;
  font-size: 0.7rem;
  font-weight: 800;
}

.work-order-editor-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f6fb;
  border: 1px solid #dce4f0;
  color: #596780;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.work-order-editor-tag-chip.is-neutral {
  background: #f3f6fb;
  border-color: #dce4f0;
  color: #53627c;
}

.work-order-editor-tag-chip.is-soft {
  background: #f7f0e3;
  border-color: #ebddc2;
  color: #7b6432;
}

.work-order-editor-tag-chip.is-accent {
  background: #f7d7db;
  border-color: #efc3c9;
  color: #7c4050;
}

.work-order-editor-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.work-order-editor-meta-item {
  display: grid;
  grid-template-columns: 24px minmax(0, auto);
  gap: 8px;
  align-items: start;
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #e2e8f3;
  background: rgba(248, 250, 253, 0.98);
}

.work-order-editor-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #f3f6fd;
  color: #65749a;
}

.work-order-editor-meta-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.work-order-editor-meta-body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.work-order-editor-meta-label {
  color: #8a92a6;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-editor-meta-value {
  color: #273042;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.work-order-editor-assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-order-editor-assignees-empty {
  color: #8d95a9;
  font-size: 0.74rem;
  font-weight: 600;
}

.work-order-editor-meta-item.is-assignee-group {
  align-items: center;
}

.work-order-editor-form {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 14px;
}

.work-order-editor-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #dde4f0;
  background: rgba(255, 255, 255, 0.98);
}

.work-order-editor-section.is-overview,
.work-order-editor-section.is-client,
.work-order-editor-section.is-documents {
  grid-column: 1 / -1;
}

.work-order-editor-section.is-service,
.work-order-editor-section.is-notes {
  align-self: start;
}

.work-order-editor-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.work-order-editor-section-head h3 {
  margin: 2px 0 0;
  color: #232b3d;
  font-size: 0.98rem;
}

.work-order-editor-section-kicker {
  margin: 0;
  color: #8b93a8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-editor-subgrid {
  display: grid;
  gap: 10px;
}

.work-order-editor-subsection {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e5ebf5;
  background: linear-gradient(180deg, #fafcff, #f5f8fd);
}

.work-order-editor-subsection-head {
  color: #5d6882;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-grid-work-order-essentials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}

.form-grid-client-identity {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid-client-location,
.form-grid-client-contact,
.form-grid-service-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.form-grid-service-training {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.form-grid-notes .field-span-full {
  grid-column: auto;
}

.work-order-executors-field {
  grid-column: span 2;
  min-width: 0;
}

.work-order-editor-form .field {
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #e1e6f0;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.work-order-editor-form .field:focus-within {
  border-color: #cfd6e8;
  box-shadow: 0 0 0 4px rgba(102, 118, 169, 0.08);
}

.work-order-editor-form .field.is-primary-field {
  border-color: #d8dfed;
  background: linear-gradient(180deg, #fdfefe, #f7f9fd);
}

.work-order-editor-form .field > span,
.work-order-field-heading {
  color: #8991a6;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.work-order-field-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.work-order-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid #dde4f0;
  background: #f6f8fc;
  color: #647695;
}

.work-order-field-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.work-order-field-label {
  display: inline-flex;
  align-items: center;
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea {
  border-radius: 12px;
  border: 1px solid #dce3ef;
  background: #f5f8fc;
}

.work-order-editor-section.is-overview {
  gap: 14px;
  padding-bottom: 16px;
}

.work-order-editor-section.is-overview .work-order-editor-section-head {
  padding-bottom: 2px;
}

.work-order-editor-section.is-overview .field {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.work-order-editor-section.is-overview .field:focus-within {
  box-shadow: none;
  border-color: transparent;
}

.work-order-editor-section.is-overview .field > input,
.work-order-editor-section.is-overview .field > select {
  background: #ffffff;
}

.work-order-inline-executor-picker,
.work-order-editor-executor-picker {
  width: 100%;
  min-width: 0;
}

.work-order-editor-executor-trigger {
  width: 100%;
  min-height: 46px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 14px;
  background: #f5f8fc;
  box-shadow: none;
}

.work-order-editor-executor-trigger-stack {
  flex-wrap: wrap;
  gap: 6px;
}

.work-order-editor-executor-trigger .work-order-mini-executor {
  width: 30px;
  height: 30px;
}

.work-order-editor-executor-trigger-label {
  min-width: 0;
  color: #31405f;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
  padding-top: 3px;
}

.work-order-editor-executor-trigger-label.is-placeholder {
  color: #7d879d;
}

.work-order-editor-executor-trigger > .executor-avatar-icon.is-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #edf2fb;
  color: #6a7897;
  flex-shrink: 0;
}

.work-order-editor-executor-trigger > .executor-avatar-icon.is-placeholder svg {
  width: 16px;
  height: 16px;
  display: block;
}

.form-grid-work-order-essentials > #work-order-company-preview {
  grid-column: 1 / -1;
  display: none;
}

.work-order-inline-note {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid #edf1f7;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 8px;
}

.work-order-inline-note textarea {
  min-height: 88px;
  background: #ffffff;
}

.form-grid-client-contact > .field:first-child {
  grid-column: span 2;
}

.form-grid-service-meta > .field:first-child,
.form-grid-service-meta > .field:nth-child(2) {
  grid-column: span 2;
}

.work-order-editor-form textarea {
  min-height: 164px;
}

.work-order-editor-panel.is-modal-open {
  top: 12px;
  width: min(1580px, calc(100vw - 20px));
  height: calc(100vh - 24px);
  border-radius: 24px;
}

.work-order-editor-shell {
  grid-template-columns: minmax(0, 1fr) 405px;
}

.work-order-editor-fixed-head {
  padding: 12px 16px 0;
}

.work-order-editor-body {
  padding: 10px 16px 16px;
  gap: 10px;
}

.work-order-editor-topbar {
  gap: 10px;
}

.work-order-editor-type-mark {
  min-width: 30px;
  height: 30px;
  border-radius: 10px;
}

.work-order-editor-form {
  gap: 10px;
}

.work-order-editor-section {
  gap: 9px;
  padding: 10px 12px;
  border-radius: 16px;
}

.work-order-editor-section-head h3 {
  font-size: 0.92rem;
}

.work-order-editor-section.is-overview {
  gap: 10px;
  padding-bottom: 12px;
}

.form-grid-work-order-essentials {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}

.work-order-editor-section.is-overview .field {
  grid-template-columns: minmax(104px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
}

.work-order-editor-section.is-overview .field > input,
.work-order-editor-section.is-overview .field > select,
.work-order-editor-form input,
.work-order-editor-form select {
  min-height: 40px;
}

.work-order-field-icon {
  width: 20px;
  height: 20px;
  border-radius: 7px;
}

.work-order-field-icon svg {
  width: 12px;
  height: 12px;
}

.work-order-client-bundle {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(130, 153, 196, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(230, 247, 239, 0.76), rgba(255, 255, 255, 0.94)),
    #ffffff;
  box-shadow: inset 4px 0 0 rgba(70, 164, 116, 0.42);
}

.work-order-client-bundle-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #2f4f43;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.work-order-client-bundle-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #2f7a54;
  background: rgba(236, 249, 241, 0.98);
  border: 1px solid rgba(75, 153, 103, 0.22);
}

.work-order-client-bundle-icon svg {
  width: 14px;
  height: 14px;
}

.work-order-client-bundle-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(240px, 1.35fr) minmax(150px, 0.7fr);
  gap: 8px 10px;
}

.work-order-client-bundle-grid .field {
  grid-template-columns: 94px minmax(0, 1fr);
}

.work-order-executors-field {
  grid-column: span 3;
}

.work-order-editor-executor-trigger {
  min-height: 40px;
  padding: 5px 9px;
  align-items: center;
}

.work-order-editor-executor-trigger .work-order-mini-executor {
  width: 26px;
  height: 26px;
}

.work-order-inline-note {
  padding-top: 8px;
}

.work-order-inline-note textarea,
.work-order-editor-form textarea {
  min-height: 86px;
}

.work-order-editor-subsection {
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
}

.work-order-document-dropzone {
  padding: 12px 14px;
  grid-template-columns: 36px minmax(0, 1fr);
}

.work-order-document-dropzone-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.work-order-document-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2fb;
  border: 1px solid #dbe3f2;
  color: #51617f;
  font-size: 0.75rem;
  font-weight: 800;
}

.work-order-document-count.is-compact {
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.7rem;
}

.work-order-editor-form {
  grid-template-columns: 1fr;
  gap: 12px;
}

.work-order-editor-section {
  gap: 10px;
  padding: 12px;
  border-color: rgba(190, 205, 228, 0.95);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96)),
    #ffffff;
}

.work-order-editor-section[data-work-order-section] {
  grid-column: 1 / -1;
}

.work-order-editor-section-head {
  width: 100%;
}

button.work-order-editor-section-head {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.work-order-editor-section-head:focus-visible {
  outline: 3px solid rgba(84, 125, 214, 0.22);
  outline-offset: 4px;
  border-radius: 14px;
}

.work-order-section-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 12px;
  border: 1px solid rgba(199, 211, 234, 0.94);
  background: linear-gradient(180deg, #ffffff, #f1f5fb);
  color: #42526f;
  font-size: 1.05rem;
  font-weight: 800;
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}

.work-order-editor-section.is-collapsed .work-order-section-toggle-icon {
  transform: rotate(-90deg);
  color: #6d7891;
}

.work-order-editor-section.is-collapsed .work-order-editor-section-body {
  display: none;
}

.work-order-editor-section-body {
  display: grid;
  gap: 10px;
}

.work-order-company-card-wrap {
  gap: 8px;
}

.work-order-company-picker {
  position: relative;
  min-height: 78px;
  padding: 12px 108px 12px 14px;
  border-color: rgba(174, 194, 180, 0.95);
  background:
    linear-gradient(90deg, rgba(237, 249, 242, 0.84), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: inset 4px 0 0 rgba(65, 158, 107, 0.38);
  cursor: pointer;
}

.work-order-company-picker::after {
  content: "Odaberi";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(191, 207, 235, 0.92);
  background: linear-gradient(180deg, #ffffff, #f3f7fd);
  color: #283653;
  font-size: 0.78rem;
  font-weight: 800;
}

.work-order-company-picker.has-selection::after {
  content: "Promijeni";
}

.work-order-company-picker select {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.01;
  cursor: pointer;
}

.work-order-company-picker .company-selection-preview-logo {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-radius: 16px;
  background: #ffffff;
}

.work-order-company-picker .company-selection-preview-copy strong {
  color: #17233b;
  font-size: 0.98rem;
}

.work-order-company-picker .company-selection-preview-copy span {
  color: #5f6f84;
  font-size: 0.82rem;
}

.form-grid-work-order-rn,
.form-grid-location-contact,
.form-grid-executors,
.form-grid-service-main,
.form-grid-billing {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.work-order-editor-form .field-span-2 {
  grid-column: span 2;
}

.work-order-editor-form .field-span-3 {
  grid-column: span 3;
}

.work-order-editor-form .field-span-full {
  grid-column: 1 / -1;
}

.work-order-editor-form .field {
  padding: 8px;
  border-color: rgba(214, 224, 239, 0.96);
  background: rgba(255, 255, 255, 0.98);
}

.work-order-editor-form input,
.work-order-editor-form select {
  min-height: 38px;
}

.work-order-editor-form textarea,
.work-order-inline-note textarea {
  min-height: 74px;
}

.work-order-inline-note {
  padding-top: 0;
  border-top: 0;
}

.work-order-editor-form .field:focus-within {
  border-color: rgba(110, 142, 194, 0.55);
  box-shadow: 0 0 0 4px rgba(111, 142, 194, 0.08);
}

.work-order-editor-subsection {
  padding: 10px;
  border-color: rgba(214, 224, 239, 0.95);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.work-order-services-field .work-order-service-picker-trigger {
  min-height: 42px;
  border-color: rgba(110, 146, 125, 0.24);
  background:
    linear-gradient(90deg, rgba(239, 249, 244, 0.84), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: none;
}

.work-order-services-field .work-order-service-picker-stack {
  max-width: none;
  flex: 1 1 auto;
}

.work-order-service-selection-field {
  background: rgba(249, 252, 250, 0.98);
  border-color: rgba(174, 206, 186, 0.64);
}

.form-grid-billing .field-span-full textarea {
  min-height: 70px;
}

.work-order-editor-section[data-work-order-section] {
  --section-accent: #6271ff;
  --section-accent-soft: rgba(98, 113, 255, 0.12);
  --section-accent-line: rgba(98, 113, 255, 0.42);
  position: relative;
  overflow: hidden;
  gap: 0;
  padding: 0;
  border: 1.5px solid var(--section-accent-line);
  background:
    linear-gradient(135deg, var(--section-accent-soft), rgba(255, 255, 255, 0.94) 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
  box-shadow:
    0 16px 34px rgba(32, 45, 75, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.work-order-editor-section[data-work-order-section]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--section-accent), rgba(255, 255, 255, 0));
}

.work-order-editor-section.is-client-identity {
  --section-accent: #2fb06f;
  --section-accent-soft: rgba(47, 176, 111, 0.13);
  --section-accent-line: rgba(47, 176, 111, 0.42);
}

.work-order-editor-section.is-work-order-route {
  --section-accent: #3478f6;
  --section-accent-soft: rgba(52, 120, 246, 0.13);
  --section-accent-line: rgba(52, 120, 246, 0.42);
}

.work-order-editor-section.is-executors {
  --section-accent: #7b61ff;
  --section-accent-soft: rgba(123, 97, 255, 0.13);
  --section-accent-line: rgba(123, 97, 255, 0.42);
}

.work-order-editor-section.is-service {
  --section-accent: #18a77b;
  --section-accent-soft: rgba(24, 167, 123, 0.13);
  --section-accent-line: rgba(24, 167, 123, 0.42);
}

.work-order-editor-section.is-billing {
  --section-accent: #d77a20;
  --section-accent-soft: rgba(215, 122, 32, 0.13);
  --section-accent-line: rgba(215, 122, 32, 0.42);
}

.work-order-editor-section.is-documents {
  --section-accent: #5d6f86;
  --section-accent-soft: rgba(93, 111, 134, 0.12);
  --section-accent-line: rgba(93, 111, 134, 0.38);
}

button.work-order-editor-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 11px 12px 11px 16px;
  border-bottom: 1px solid rgba(207, 218, 235, 0.82);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.76)),
    var(--section-accent-soft);
}

.work-order-editor-section.is-collapsed button.work-order-editor-section-head {
  border-bottom-color: transparent;
}

.work-order-editor-section-head h3 {
  color: #14213d;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.work-order-editor-section-kicker {
  color: var(--section-accent);
  font-size: 0.66rem;
}

.work-order-section-mark,
.work-order-section-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid var(--section-accent-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96)),
    var(--section-accent-soft);
  color: var(--section-accent);
  box-shadow: 0 8px 18px rgba(32, 45, 75, 0.08);
}

.work-order-section-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}

.work-order-section-toggle-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.work-order-section-mark svg,
.work-order-section-toggle-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.work-order-editor-section.is-collapsed .work-order-section-toggle-icon {
  transform: none;
  background: #ffffff;
}

.work-order-editor-section-body {
  padding: 12px 14px 14px 18px;
}

.work-order-editor-section.is-collapsed {
  box-shadow: 0 8px 20px rgba(32, 45, 75, 0.05);
}

.work-order-editor-form .field {
  position: relative;
  border: 1.5px solid rgba(189, 204, 229, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98)),
    #ffffff;
  box-shadow:
    0 10px 22px rgba(38, 52, 86, 0.055),
    inset 3px 0 0 var(--section-accent-soft);
}

.work-order-editor-form .field > span,
.work-order-field-heading {
  color: #50617d;
}

.work-order-editor-form .field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.work-order-editor-form .work-order-field-heading {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

.work-order-editor-form .work-order-field-label {
  display: none;
}

.work-order-editor-form .work-order-field-icon {
  width: 24px;
  height: 24px;
  border-color: var(--section-accent-line);
  background: var(--section-accent-soft);
  color: var(--section-accent);
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea {
  border: 1.5px solid rgba(176, 192, 221, 0.92);
  background: #ffffff;
  color: #15213b;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.work-order-editor-form input:focus,
.work-order-editor-form select:focus,
.work-order-editor-form textarea:focus {
  border-color: var(--section-accent);
  box-shadow:
    0 0 0 4px var(--section-accent-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.work-order-company-picker {
  border-width: 1.5px;
  border-color: var(--section-accent-line);
  box-shadow:
    0 12px 28px rgba(32, 72, 52, 0.08),
    inset 5px 0 0 var(--section-accent);
}

.form-grid-location-contact {
  grid-template-columns: minmax(210px, 0.85fr) minmax(360px, 1.85fr) minmax(150px, 0.7fr) minmax(190px, 0.9fr);
}

.form-grid-location-contact #work-order-location-id {
  font-size: 0.96rem;
}

.work-order-service-selection-field {
  padding: 10px;
}

.work-order-service-template-hint[hidden] {
  display: none;
}

.work-order-document-stack {
  display: grid;
  gap: 12px;
}

.work-order-document-create-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.08);
}

.work-order-document-create-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-order-document-create-copy strong {
  color: #12213f;
  font-size: 0.94rem;
  font-weight: 900;
}

.work-order-document-create-copy span {
  color: #59677f;
  font-size: 0.8rem;
  line-height: 1.4;
}

.work-order-create-documentation {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.work-order-create-documentation:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

@media (max-width: 720px) {
  .work-order-document-create-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-create-documentation {
    width: 100%;
  }
}

.work-order-document-dropzone {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px dashed #c6d3ea;
  background: linear-gradient(180deg, #fbfdff, #f4f8ff);
  color: #31425d;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.work-order-document-dropzone:hover,
.work-order-document-dropzone.is-drag-over {
  border-color: #9db3df;
  background: linear-gradient(180deg, #f7fbff, #ebf2ff);
  box-shadow: 0 10px 24px rgba(80, 102, 154, 0.12);
}

.work-order-document-dropzone:disabled {
  cursor: wait;
  opacity: 0.76;
}

.work-order-document-dropzone.is-compact {
  padding: 12px 14px;
  grid-template-columns: 34px minmax(0, 1fr);
}

.work-order-document-dropzone-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #d8e0ef;
  color: #44678f;
  font-size: 1.2rem;
  font-weight: 700;
}

.work-order-document-dropzone.is-compact .work-order-document-dropzone-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 1rem;
}

.work-order-document-dropzone-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.work-order-document-dropzone-copy strong {
  color: #223049;
  font-size: 0.88rem;
}

.work-order-document-dropzone-copy span {
  color: #71809d;
  font-size: 0.78rem;
  line-height: 1.45;
}

.work-order-document-loading,
.work-order-activity-loading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid rgba(157, 189, 232, 0.48);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 16px 28px rgba(15, 53, 121, 0.08);
}

.work-order-document-loading::before,
.work-order-activity-loading::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(222, 236, 255, 0.96)),
    url("/assets/safenexus-mark.png") center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 18px rgba(21, 74, 162, 0.18);
  animation: safenexus-loader-pulse 1.55s ease-in-out infinite;
}

.work-order-document-empty {
  margin: 0;
  color: #75829c;
  font-size: 0.82rem;
  line-height: 1.55;
}

.work-order-document-loading.is-compact,
.work-order-activity-loading.is-compact,
.work-order-document-empty.is-compact {
  font-size: 0.76rem;
}

.work-order-document-loading.is-compact::before,
.work-order-activity-loading.is-compact::before {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border-radius: 7px;
}

.work-order-document-error {
  margin: 0;
}

.work-order-document-list,
.work-order-activity-document-list {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.work-order-document-list {
  max-height: 280px;
  overflow: auto;
  padding-right: 6px;
}

.work-order-activity-document-list {
  max-height: 180px;
  overflow: auto;
  padding-right: 6px;
}

.work-order-document-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(184, 198, 224, 0.78);
  background: linear-gradient(135deg, rgba(246, 249, 254, 0.98), rgba(255, 255, 255, 0.94));
}

.work-order-document-group.is-work-order {
  border-color: rgba(37, 99, 235, 0.22);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.work-order-document-group.is-reports {
  border-color: rgba(220, 38, 38, 0.18);
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.8), rgba(255, 255, 255, 0.96));
}

.work-order-document-group.is-worksheets {
  border-color: rgba(234, 179, 8, 0.24);
  background: linear-gradient(135deg, rgba(254, 252, 232, 0.92), rgba(255, 255, 255, 0.96));
}

.work-order-document-group.is-photos {
  border-color: rgba(15, 118, 110, 0.18);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.88), rgba(255, 255, 255, 0.96));
}

.work-order-document-group.is-projects {
  border-color: rgba(124, 58, 237, 0.18);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.88), rgba(255, 255, 255, 0.96));
}

.work-order-document-group-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.work-order-document-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #2257c8;
  background: rgba(37, 99, 235, 0.1);
}

.work-order-document-group.is-reports .work-order-document-group-icon {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

.work-order-document-group.is-worksheets .work-order-document-group-icon {
  color: #a16207;
  background: rgba(234, 179, 8, 0.14);
}

.work-order-document-group.is-photos .work-order-document-group-icon {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
}

.work-order-document-group.is-projects .work-order-document-group-icon {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
}

.work-order-document-group-icon svg {
  width: 20px;
  height: 20px;
}

.work-order-document-group-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.work-order-document-group-copy strong {
  color: #1a2840;
  font-size: 0.84rem;
}

.work-order-document-group-copy span {
  color: #71809a;
  font-size: 0.72rem;
  line-height: 1.35;
}

.work-order-document-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #2257c8;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(184, 198, 224, 0.64);
  font-size: 0.72rem;
  font-weight: 900;
}

.work-order-document-group-list {
  display: grid;
  gap: 8px;
}

.work-order-document-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(220, 156, 212, 0.56);
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(240, 79, 151, 0.03),
    0 10px 22px rgba(94, 73, 145, 0.06);
}

.work-order-document-card.is-compact {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
}

.work-order-document-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 14px;
  background: #eef3ff;
  border: 1px solid #d7e1f8;
  color: #47618a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.work-order-document-card.is-compact .work-order-document-badge {
  min-width: 44px;
  min-height: 34px;
  border-radius: 12px;
  font-size: 0.65rem;
}

.work-order-document-card-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.work-order-document-name-input,
.work-order-document-description-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #dbe3f0;
  background: #f6f9fe;
  color: #243147;
}

.work-order-document-name-input {
  min-height: 40px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
}

.work-order-document-description-input {
  min-height: 74px;
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.45;
  resize: vertical;
}

.work-order-document-card.is-compact .work-order-document-description-input {
  min-height: 60px;
}

.work-order-document-name {
  color: #243147;
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.work-order-document-meta {
  color: #7d8ba6;
  font-size: 0.72rem;
  line-height: 1.45;
}

.work-order-document-actions {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-document-link,
.work-order-document-button {
  min-height: 34px;
  padding: 0 12px;
}

.work-order-document-link[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
}

.work-order-document-button.is-danger {
  color: #8b4150;
  border-color: #e8c9d0;
  background: #fff6f8;
}

.work-order-document-category-backdrop {
  position: fixed;
  inset: 0;
  z-index: 232;
  border: 0;
  background: rgba(21, 32, 54, 0.28);
  backdrop-filter: blur(4px);
}

.work-order-document-category-panel {
  position: fixed;
  z-index: 233;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(78vh, 680px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(190, 207, 236, 0.95);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.98)),
    #ffffff;
  box-shadow: 0 28px 70px rgba(42, 68, 110, 0.24);
}

.work-order-document-category-head,
.work-order-document-category-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.work-order-document-category-head h2 {
  margin: 0;
  color: #1e2b45;
  font-size: 1.1rem;
}

.work-order-document-category-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.work-order-document-category-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(220px, 0.72fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(204, 217, 238, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.work-order-document-category-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #2452a7;
  background: linear-gradient(180deg, #edf5ff, #f9fbff);
}

.work-order-document-category-row-icon svg {
  width: 18px;
  height: 18px;
}

.work-order-document-category-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.work-order-document-category-row-copy strong {
  color: #243147;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.work-order-document-category-row-copy span {
  color: #74829b;
  font-size: 0.74rem;
}

.work-order-document-category-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(220, 156, 212, 0.78);
  border-radius: 14px;
  background: #ffffff;
  color: #1e2b45;
  padding: 0 12px;
  font-weight: 700;
}

.work-order-document-category-project-name {
  grid-column: 2 / -1;
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  color: #1e2b45;
  padding: 0 12px;
  font-weight: 700;
}

.work-order-document-category-project-name::placeholder {
  color: #7d8aa2;
  font-weight: 600;
}

.work-order-document-category-error {
  margin: 0;
}

.work-order-document-category-actions {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(203, 217, 239, 0.7);
  padding-top: 12px;
}

body.is-work-order-document-category-open .chat-dock {
  opacity: 0;
  pointer-events: none;
}

body.is-work-order-document-category-open {
  overflow: hidden;
}

.work-order-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 10px;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(247, 249, 253, 0), rgba(247, 249, 253, 0.96) 40%);
}

.work-order-editor-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.work-order-editor-heading-actions .helper-copy {
  margin: 0;
  color: #6a7388;
  font-size: 0.77rem;
}

#work-order-number-preview {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #dce3ef;
  background: #ffffff;
  color: #53627c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#work-order-number-preview[data-mode="pending"] {
  background: #f5f7fb;
  border-color: #dde3ee;
  color: #748098;
}

#work-order-number-preview[data-mode="assigned"] {
  background: #edf4ee;
  border-color: #d5e7d8;
  color: #2f6a46;
}

.work-order-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #dfe4ef;
  background: #f8faff;
  color: #60708d;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.work-order-save-state[data-state="pending"],
.work-order-save-state[data-state="saving"] {
  color: #5a6690;
  background: #eef3ff;
  border-color: #d9e4ff;
}

.work-order-save-state[data-state="saved"] {
  color: #2f7452;
  background: #e8f6ee;
  border-color: #cfe7d8;
}

.work-order-save-state[data-state="blocked"] {
  color: #8a6b21;
  background: #fff5db;
  border-color: #f0dfab;
}

.work-order-save-state[data-state="error"] {
  color: #8a3f48;
  background: #fdecef;
  border-color: #f2cfd6;
}

.work-order-editor-close {
  min-height: 36px;
}

.work-order-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: currentColor;
}

.work-order-action-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.work-order-action-label {
  display: inline-flex;
  align-items: center;
}

#work-order-status {
  font-weight: 700;
}

#work-order-status[data-status="otvoreni-rn"] {
  color: #5a6373;
  background-color: #eef1f4;
  border-color: #dde2e8;
}

#work-order-status[data-status="gotov-rn"] {
  color: #2b7848;
  background-color: #dff5e6;
  border-color: #cbe6d5;
}

#work-order-status[data-status="ovjeren-rn"] {
  color: #6d4d00;
  background-color: #e7c760;
  border-color: #d7b54a;
}

#work-order-status[data-status="fakturiran-rn"] {
  color: #245b37;
  background-color: #bfe1ca;
  border-color: #aaccb6;
}

#work-order-status[data-status="storno-rn"] {
  color: #48515d;
  background-color: #d8dde4;
  border-color: #c8ced7;
}

.work-order-activity-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 16px 16px 16px 18px;
  border-left: 1px solid rgba(191, 200, 218, 0.88);
  background:
    radial-gradient(circle at 100% 0%, rgba(201, 213, 237, 0.52), transparent 34%),
    linear-gradient(180deg, rgba(238, 242, 249, 0.98), rgba(226, 232, 244, 0.96));
  overflow: hidden;
}

.work-order-activity-panel.is-document-panel-active {
  background:
    linear-gradient(180deg, rgba(249, 239, 246, 0.95), rgba(245, 240, 250, 0.98)),
    linear-gradient(180deg, rgba(251, 247, 253, 0.95), rgba(245, 240, 250, 0.95));
  box-shadow: inset 0 0 0 2px rgba(192, 108, 214, 0.22);
}

.work-order-activity-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 2px 0 8px;
  background: linear-gradient(180deg, rgba(238, 242, 249, 0.98), rgba(229, 235, 246, 0.92));
}

.work-order-activity-head h3 {
  margin: 2px 0 0;
  color: #232a3a;
  font-size: 0.96rem;
}

.work-order-activity-documents-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #e6ebf4;
  background: rgba(255, 255, 255, 0.74);
}

.work-order-activity-documents-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-order-activity-documents-head strong {
  color: #233045;
  font-size: 0.8rem;
}

.work-order-activity-comment-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #e6ebf4;
  background:
    radial-gradient(circle at top right, rgba(214, 235, 255, 0.52), transparent 42%),
    rgba(255, 255, 255, 0.88);
}

.work-order-activity-comment-head {
  display: grid;
  gap: 2px;
}

.work-order-activity-comment-head strong {
  color: #233045;
  font-size: 0.82rem;
}

.work-order-activity-comment-head span {
  color: #71809d;
  font-size: 0.72rem;
  line-height: 1.35;
}

.work-order-activity-comment-panel textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #ffffff;
  color: #263148;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
}

.work-order-activity-comment-panel textarea:focus,
.work-order-activity-comment-actions select:focus {
  outline: none;
  border-color: rgba(75, 112, 180, 0.44);
  box-shadow: 0 0 0 3px rgba(75, 112, 180, 0.1);
}

.work-order-activity-comment-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.work-order-activity-comment-actions select {
  min-width: 0;
  min-height: 36px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8faff;
  color: #31405f;
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.work-order-activity-comment-actions .ghost-button {
  min-height: 36px;
}

.work-order-activity-comment-panel :disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.work-order-activity-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e4e9f2;
  color: #4b566e;
  font-size: 0.78rem;
  font-weight: 700;
}

.work-order-activity-empty {
  margin: 0;
  color: #7d8498;
  font-size: 0.83rem;
  line-height: 1.55;
}

.work-order-activity-error {
  margin: 0;
}

.work-order-activity-list {
  min-height: 0;
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 6px;
}

.work-order-activity-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.work-order-activity-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4a57b8;
  font-size: 0.66rem;
  font-weight: 800;
}

.work-order-activity-item-body {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid #e7ebf4;
  background: rgba(255, 255, 255, 0.92);
}

.work-order-activity-item:not(.is-expanded) .work-order-activity-description,
.work-order-activity-item:not(.is-expanded) .work-order-activity-comment-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.work-order-activity-item:not(.is-expanded) .work-order-activity-diff {
  max-height: 48px;
  overflow: hidden;
}

.work-order-activity-expand {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(183, 193, 214, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #55627a;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.work-order-activity-item.is-expanded .work-order-activity-expand {
  background: #243147;
  border-color: #243147;
  color: #ffffff;
}

.work-order-activity-item.is-comment .work-order-activity-item-body {
  border-color: rgba(89, 129, 186, 0.24);
  background:
    linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.work-order-activity-comment-text {
  margin: 2px 0 0;
  color: #273247;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.work-order-activity-item-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.work-order-activity-description {
  color: #222938;
  font-size: 0.82rem;
  line-height: 1.45;
}

.work-order-activity-time {
  color: #8a92a6;
  font-size: 0.68rem;
  white-space: nowrap;
}

.work-order-activity-meta,
.work-order-activity-diff {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-order-activity-actor,
.work-order-activity-field,
.work-order-activity-old,
.work-order-activity-new,
.work-order-activity-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
}

.work-order-activity-actor,
.work-order-activity-field {
  background: #f3f5fa;
  color: #59627b;
}

.work-order-activity-old {
  background: #f7ecee;
  color: #8b5360;
}

.work-order-activity-new {
  background: #eaf5ef;
  color: #2f7b55;
}

.work-order-activity-arrow {
  padding: 0;
  background: transparent;
  color: #97a0b5;
}

.work-order-editor-body::-webkit-scrollbar,
.work-order-activity-list::-webkit-scrollbar,
.work-order-document-list::-webkit-scrollbar,
.work-order-activity-document-list::-webkit-scrollbar {
  width: 10px;
}

.work-order-editor-body::-webkit-scrollbar-thumb,
.work-order-activity-list::-webkit-scrollbar-thumb,
.work-order-document-list::-webkit-scrollbar-thumb,
.work-order-activity-document-list::-webkit-scrollbar-thumb {
  background: #d5dae7;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.work-order-editor-body::-webkit-scrollbar-track,
.work-order-activity-list::-webkit-scrollbar-track,
.work-order-document-list::-webkit-scrollbar-track,
.work-order-activity-document-list::-webkit-scrollbar-track {
  background: transparent;
}

.measurement-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
}

.measurement-sheet-head > div:first-child {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.measurement-sheet-head h2 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.measurement-sheet-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.measurement-sheet-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 0 0;
}

.measurement-meta-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.measurement-sheet-meta .field {
  margin: 0;
}

.measurement-sheet-meta .field input,
.measurement-sheet-meta .field select {
  min-height: 40px;
  border-radius: 12px;
  padding-inline: 12px;
}

.measurement-sheet-preset-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  padding: 2px 0 0;
}

.measurement-sheet-preset-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.measurement-sheet-preset-field select {
  min-height: 40px;
  border-radius: 12px;
  padding-inline: 12px;
  border: 1px solid #d9deea;
  background: #ffffff;
}

.measurement-sheet-preset-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.measurement-sheet-preset-actions .ghost-button {
  min-height: 40px;
  padding-inline: 14px;
  white-space: nowrap;
}

.measurement-sheet-preset-status {
  grid-column: 1 / -1;
  min-height: 18px;
  color: #67718b;
  font-size: 0.78rem;
}

.measurement-sheet-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, 0.95fr);
  gap: 8px;
  align-items: stretch;
}

.measurement-toolbar-primary,
.measurement-toolbar-secondary {
  display: flex;
  gap: 10px;
  align-items: center;
}

.measurement-toolbar-primary {
  flex-wrap: nowrap;
}

.measurement-toolbar-tertiary {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.measurement-toolbar-namebox,
.measurement-toolbar-formula,
.measurement-toolbar-format {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.measurement-toolbar-namebox {
  width: 92px;
  flex: 0 0 92px;
}

.measurement-toolbar-namebox-compact .measurement-toolbar-label,
.measurement-toolbar-hidden-controls .measurement-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.measurement-toolbar-label {
  color: #67718b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.measurement-toolbar-namebox input,
.measurement-toolbar-format select,
.measurement-toolbar-format input {
  min-height: 44px;
  border: 1px solid #d9deea;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

.measurement-toolbar-namebox input {
  padding: 0 10px;
  font-weight: 700;
  text-align: center;
  color: #3b4764;
}

.measurement-toolbar-formula {
  flex: 1 1 auto;
}

.measurement-toolbar-formula {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.measurement-toolbar-formula input {
  min-height: 44px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid #d9deea;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2433;
  box-shadow: none;
}

.measurement-toolbar-formula input:focus,
.measurement-toolbar-namebox input:focus,
.measurement-toolbar-format select:focus,
.measurement-toolbar-format input:focus {
  outline: none;
  border-color: rgba(83, 104, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(83, 104, 255, 0.12);
}

.measurement-toolbar-fx {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(83, 104, 255, 0.1);
  color: #5368ff;
  font-size: 0.78rem;
  font-weight: 800;
  pointer-events: none;
}

.measurement-toolbar-secondary {
  justify-content: flex-start;
  flex-wrap: wrap;
  position: relative;
}

.measurement-toolbar-tertiary {
  justify-content: space-between;
  align-items: center;
}

.measurement-toolbar-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.measurement-toolbar-icon-cluster,
.measurement-toolbar-decimal-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.measurement-toolbar-validation,
.measurement-toolbar-conditional,
.measurement-toolbar-ai,
.measurement-toolbar-quick {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.measurement-validation-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(430px, calc(100vw - 28px));
  min-width: min(430px, calc(100vw - 28px));
  max-width: min(430px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(214, 89, 173, 0.22);
  background: rgba(255, 252, 255, 0.98);
  box-shadow: 0 20px 40px rgba(56, 35, 91, 0.16);
}

.measurement-conditional-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 42;
  width: min(360px, calc(100vw - 28px));
  min-width: min(360px, calc(100vw - 28px));
  max-width: min(360px, calc(100vw - 28px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(53, 104, 235, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.99)),
    #ffffff;
  box-shadow: 0 20px 40px rgba(35, 58, 105, 0.16);
}

.measurement-conditional-popover[hidden] {
  display: none !important;
}

.measurement-conditional-full,
.measurement-conditional-clear {
  grid-column: 1 / -1;
}

.measurement-validation-popover .measurement-toolbar-format,
.measurement-conditional-popover .measurement-toolbar-format {
  min-width: 0;
}

.measurement-conditional-popover .measurement-toolbar-format select,
.measurement-conditional-popover .measurement-toolbar-format input,
.measurement-validation-popover .measurement-toolbar-format select,
.measurement-validation-popover .measurement-toolbar-format input {
  min-height: 36px;
  border-radius: 12px;
}

.measurement-conditional-popover input[type="color"] {
  height: 36px;
  padding: 4px;
}

.measurement-ai-popover {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 42px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 36%),
    rgba(18, 25, 39, 0.34);
  backdrop-filter: blur(5px);
}

.measurement-ai-popover[hidden] {
  display: none !important;
}

.measurement-ai-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(214, 89, 173, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(255, 248, 253, 0.99)),
    rgba(255, 255, 255, 0.98);
  box-shadow:
    0 34px 72px rgba(34, 26, 57, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.measurement-ai-popover-head,
.measurement-ai-description-field,
.measurement-ai-full,
.measurement-ai-helper {
  grid-column: 1 / -1;
}

.measurement-ai-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.measurement-ai-popover-head strong {
  display: block;
  color: #2d1c3d;
  font-size: 0.95rem;
}

.measurement-ai-popover-head span,
.measurement-ai-helper {
  color: #6d6280;
  font-size: 0.78rem;
  line-height: 1.45;
}

.measurement-ai-connection-status,
.document-template-ai-connection-status {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(157, 178, 214, 0.28);
  background: rgba(245, 248, 255, 0.96);
  color: #405477 !important;
  font-size: 0.72rem !important;
  font-weight: 800;
}

.measurement-ai-connection-status.is-ready,
.document-template-ai-connection-status.is-ready {
  border-color: rgba(47, 104, 84, 0.24);
  background: rgba(236, 253, 245, 0.98);
  color: #267052 !important;
}

.measurement-ai-connection-status.is-dry-run,
.document-template-ai-connection-status.is-dry-run {
  border-color: rgba(217, 155, 28, 0.28);
  background: rgba(255, 251, 235, 0.98);
  color: #9a6512 !important;
}

.measurement-ai-connection-status.is-error,
.document-template-ai-connection-status.is-error {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(254, 242, 242, 0.98);
  color: #b4232c !important;
}

.measurement-ai-popover textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #d9deea;
  border-radius: 14px;
  background: #ffffff;
  color: #1f2433;
}

.measurement-ai-popover textarea:focus {
  outline: none;
  border-color: rgba(83, 104, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(83, 104, 255, 0.12);
}

.measurement-ai-helper {
  margin: 0;
}

.measurement-quick-dialog {
  width: min(1480px, calc(100vw - 24px));
  grid-template-columns: minmax(0, 1fr);
}

.measurement-quick-toolbar-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.measurement-quick-start-field {
  width: 100%;
}

.measurement-quick-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.measurement-quick-small-button {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 800;
}

.measurement-quick-structure {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  max-height: min(64vh, 720px);
  min-height: 160px;
  overflow: auto;
  padding: 2px 4px 6px 2px;
}

.measurement-quick-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed rgba(157, 178, 214, 0.5);
  border-radius: 18px;
  background: rgba(248, 251, 255, 0.86);
  color: #61708a;
  font-size: 0.9rem;
}

.measurement-quick-floor-card,
.measurement-quick-room-card,
.measurement-quick-item-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(157, 178, 214, 0.48);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(31, 46, 78, 0.08);
}

.measurement-quick-floor-card {
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(246, 250, 255, 0.97), rgba(255, 255, 255, 0.94));
}

.measurement-quick-room-card {
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(248, 252, 249, 0.97), rgba(255, 255, 255, 0.95));
}

.measurement-quick-item-card {
  padding: 10px;
  border-color: rgba(238, 176, 216, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 249, 253, 0.98), rgba(255, 255, 255, 0.96));
}

.measurement-quick-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.measurement-quick-card-head[data-measurement-quick-toggle-header] {
  cursor: pointer;
}

.measurement-quick-field-line {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  gap: 6px;
  min-width: 0;
}

.measurement-quick-item-fields {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(100px, 140px);
  gap: 10px;
  min-width: 0;
}

.measurement-quick-field-line span,
.measurement-quick-item-fields span {
  color: #5f6f83;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.measurement-quick-field-line input,
.measurement-quick-item-fields input {
  min-height: 38px;
  width: 100%;
  border: 1px solid #d9deea;
  border-radius: 13px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.96);
  color: #1f2433;
}

.measurement-quick-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.measurement-quick-card-actions .ghost-button {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 0.78rem;
  font-weight: 800;
}

.measurement-quick-card-actions .measurement-quick-danger {
  border-color: rgba(231, 116, 116, 0.36);
  background: rgba(255, 246, 246, 0.92);
  color: #a93d3d;
}

.measurement-quick-card-actions .measurement-quick-collapse {
  border-color: rgba(76, 105, 170, 0.24);
  background: rgba(247, 250, 255, 0.94);
  color: #39527f;
}

.measurement-quick-room-list,
.measurement-quick-item-list {
  display: grid;
  gap: 10px;
}

.measurement-quick-floor-card.is-collapsed > .measurement-quick-room-list,
.measurement-quick-room-card.is-collapsed > .measurement-quick-item-list {
  display: none;
}

.measurement-quick-floor-card.is-collapsed,
.measurement-quick-room-card.is-collapsed {
  background: linear-gradient(135deg, rgba(247, 250, 255, 0.95), rgba(255, 255, 255, 0.96));
  box-shadow: 0 10px 22px rgba(31, 46, 78, 0.06);
}

.measurement-quick-item-card .measurement-quick-column-map {
  max-height: 360px;
}

.measurement-quick-column-map {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(157, 178, 214, 0.34);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.96));
  max-height: min(44vh, 430px);
  overflow: auto;
}

.measurement-quick-column-map-title {
  color: #2d3e68;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.measurement-quick-column-map-copy {
  margin: -2px 0 4px;
  color: #66748e;
  font-size: 0.78rem;
  line-height: 1.35;
}

.measurement-quick-column-grid-head {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, 0.65fr) minmax(220px, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(157, 178, 214, 0.28);
  border-radius: 14px;
  background: rgba(238, 245, 255, 0.98);
  color: #52617d;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.measurement-quick-column-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, 0.65fr) minmax(220px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(207, 218, 237, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.measurement-quick-column-row.uses-custom {
  border-color: rgba(47, 117, 255, 0.34);
  background: linear-gradient(135deg, rgba(246, 251, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: inset 4px 0 0 rgba(47, 117, 255, 0.42);
}

.measurement-quick-column-row.uses-formula {
  border-color: rgba(195, 113, 35, 0.34);
  background: linear-gradient(135deg, rgba(255, 249, 235, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: inset 4px 0 0 rgba(236, 161, 56, 0.5);
}

.measurement-quick-column-label {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #1f2d45;
}

.measurement-quick-column-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 800;
}

.measurement-quick-column-label small {
  overflow: hidden;
  color: #78849a;
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.measurement-quick-column-row select,
.measurement-quick-column-row input {
  min-height: 38px;
  border: 1px solid #d9deea;
  border-radius: 12px;
  padding: 8px 10px;
  background: #ffffff;
  color: #1f2433;
}

.measurement-quick-column-row input:disabled {
  background: #f5f7fb;
  color: #7b879d;
  -webkit-text-fill-color: #7b879d;
}

.measurement-quick-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.measurement-toolbar-icon-button.is-active {
  border-color: rgba(47, 104, 84, 0.34);
  background: linear-gradient(135deg, rgba(239, 253, 244, 0.98), rgba(236, 253, 245, 0.94));
  color: #246348;
}

@media (max-width: 680px) {
  .measurement-ai-dialog {
    grid-template-columns: minmax(0, 1fr);
  }

  .measurement-quick-toolbar-row,
  .measurement-quick-card-head,
  .measurement-quick-item-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .measurement-quick-toolbar-actions,
  .measurement-quick-card-actions {
    justify-content: flex-start;
  }

  .measurement-quick-column-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.measurement-validation-options {
  grid-column: 1 / -1;
}

.measurement-validation-checkbox {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  font-size: 0.84rem;
  color: #4e5978;
}

.measurement-validation-checkbox input[type="checkbox"],
.measurement-ai-popover input[type="checkbox"],
.measurement-conditional-popover input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  accent-color: #2d7ddc;
}

.measurement-validation-checkbox span {
  min-width: 0;
  line-height: 1.3;
}

.measurement-conditional-popover .measurement-validation-checkbox,
.measurement-ai-dialog .measurement-validation-checkbox {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(188, 205, 226, 0.58);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.measurement-ai-dialog .measurement-validation-checkbox {
  align-self: stretch;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.measurement-toolbar-decimal-stepper {
  gap: 6px;
}

.measurement-toolbar-decimals-indicator {
  min-width: 62px;
  padding-inline: 8px;
}

.measurement-toolbar-hidden-controls {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.measurement-toolbar-actions .ghost-button {
  min-height: 44px;
  padding-inline: 14px;
  white-space: nowrap;
}

.measurement-toolbar-format {
  min-width: 0;
  flex: 1 1 0;
}

.measurement-toolbar-font-family {
  flex: 0 1 220px;
}

.measurement-toolbar-font-size {
  flex: 0 0 110px;
}

.measurement-toolbar-color {
  flex: 0 0 140px;
}

.measurement-toolbar-format select,
.measurement-toolbar-format input {
  padding: 0 14px;
}

.measurement-toolbar-color input[type="color"] {
  padding: 6px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
}

.measurement-toolbar-decimals {
  flex: 0 0 110px;
}

.measurement-toolbar-style-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.measurement-toolbar-style-buttons .ghost-button {
  min-height: 38px;
  min-width: 38px;
  padding: 0 10px;
  white-space: nowrap;
}

.measurement-toolbar-toggle-button {
  font-size: 0.92rem;
  font-weight: 800;
}

.measurement-toolbar-toggle-button.is-italic {
  font-style: italic;
}

.measurement-toolbar-toggle-button.is-underlined {
  text-decoration: underline;
}

.measurement-toolbar-style-buttons .ghost-button.is-active {
  border-color: rgba(17, 17, 17, 0.9);
  background: rgba(17, 17, 17, 0.92);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.18);
}

.measurement-toolbar-preset-buttons .ghost-button {
  min-width: 108px;
}

.measurement-toolbar-icon-button {
  min-height: 38px;
  min-width: 38px;
  padding: 0 10px;
  letter-spacing: 0.04em;
}

.measurement-toolbar-icon-button.is-active {
  border-color: rgba(198, 64, 172, 0.44);
  background: linear-gradient(135deg, rgba(255, 242, 252, 0.98), rgba(243, 250, 246, 0.98));
  color: #74315f;
  box-shadow: 0 10px 22px rgba(108, 83, 153, 0.1);
}

.measurement-toolbar-format.is-compact {
  flex: 0 0 auto;
}

.measurement-toolbar-format.is-compact .measurement-toolbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.measurement-toolbar-format.is-compact select,
.measurement-toolbar-format.is-compact input {
  min-height: 38px;
  border-radius: 12px;
}

.measurement-toolbar-font-family.is-compact {
  flex-basis: 88px;
}

.measurement-toolbar-font-size.is-compact {
  flex-basis: 72px;
}

.measurement-toolbar-color-palette {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.measurement-color-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  background: var(--swatch-color, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.measurement-color-swatch[data-fill-color=""] {
  background:
    linear-gradient(135deg, transparent 45%, rgba(220, 53, 69, 0.88) 45%, rgba(220, 53, 69, 0.88) 55%, transparent 55%),
    #ffffff;
}

.measurement-color-swatch.is-active {
  border-color: rgba(17, 17, 17, 0.88);
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.measurement-sheet-grid-wrap {
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border: 1px solid rgba(224, 228, 237, 0.95);
  border-radius: 14px;
  background: #ffffff;
}

.measurement-sheet-grid {
  width: max(1480px, 100%);
  min-height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.88rem;
}

.measurement-sheet-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  border-right: 1px solid rgba(17, 17, 17, 0.12);
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  background: #f8f9fc;
  vertical-align: top;
}

.measurement-sheet-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 54px;
  text-align: center;
  color: #7b8499;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: cell;
}

.measurement-column-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 8px;
  min-height: 58px;
  padding: 8px 8px 8px 10px;
}

.measurement-column-letter {
  grid-column: 1;
  grid-row: 1;
  width: fit-content;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  background: rgba(234, 237, 245, 0.92);
  color: #77819a;
  font-size: 0.72rem;
  font-weight: 700;
}

.measurement-column-title {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 2px 6px 4px;
  background: transparent;
  color: #4c556e;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: none;
}

.measurement-column-validation-badge,
.measurement-column-ai-badge {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(214, 89, 173, 0.12);
  color: #93407b;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.measurement-column-ai-badge {
  transform: translateX(-42px);
  background: rgba(47, 104, 84, 0.12);
  color: #2f6854;
}

.measurement-column-ai-badge.is-medium {
  background: rgba(255, 251, 235, 0.98);
  color: #9a6512;
}

.measurement-column-ai-badge.is-low {
  background: rgba(254, 242, 242, 0.98);
  color: #b4232c;
}

.measurement-sheet-grid thead th.has-ai-mapping:not(.has-validation-list) .measurement-column-ai-badge {
  transform: none;
}

.measurement-sheet-grid thead th[data-column-id] {
  cursor: cell;
}

.measurement-column-title:focus {
  outline: none;
  background: rgba(83, 104, 255, 0.08);
  border-radius: 8px;
}

.measurement-column-title.is-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  white-space: nowrap;
}

.measurement-column-resize {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 10px;
  min-height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(119, 130, 162, 0.22), transparent);
  cursor: col-resize;
}

.measurement-column-resize:hover {
  background: linear-gradient(180deg, transparent, rgba(83, 104, 255, 0.36), transparent);
}

.measurement-sheet-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0 8px;
  border-right: 1px solid rgba(17, 17, 17, 0.12);
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  background: #fafbfe;
  color: #7b8499;
  font-weight: 700;
  text-align: center;
  cursor: cell;
}

.measurement-sheet-grid tbody td {
  padding: 0;
  border-right: 1px solid rgba(17, 17, 17, 0.12);
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  background: #ffffff;
  position: relative;
  cursor: cell;
}

.measurement-sheet-grid td.is-merged-cell {
  vertical-align: top;
}

.measurement-sheet-grid td.is-merged-cell .measurement-cell-shell {
  display: flex;
  min-height: 100%;
  height: 100%;
}

.measurement-sheet-grid tbody tr:hover td,
.measurement-sheet-grid tbody tr:hover th {
  background-color: #fcfdff;
}

.measurement-sheet-grid tbody tr.is-measurement-empty-row th {
  color: #a9b0c2;
  font-weight: 600;
}

.measurement-sheet-grid tbody tr.is-measurement-empty-row td:not(.is-selected-cell):not(.is-active-cell) {
  background: #ffffff;
}

.measurement-sheet-grid td.is-selected-cell {
  background: linear-gradient(180deg, rgba(83, 104, 255, 0.12), rgba(83, 104, 255, 0.08));
  box-shadow: inset 0 0 0 1px rgba(83, 104, 255, 0.28);
}

.measurement-sheet-grid tbody th.is-selected-row,
.measurement-sheet-grid thead th.is-selected-column,
.measurement-sheet-corner:hover {
  background: linear-gradient(180deg, #f1f4ff, #e9edff);
  color: #4051af;
}

.measurement-sheet-grid tbody th.is-selected-row,
.measurement-sheet-grid thead th.is-selected-column {
  box-shadow: inset 0 0 0 1px rgba(83, 104, 255, 0.28);
}

.measurement-sheet-grid tr:last-child td,
.measurement-sheet-grid tr:last-child th {
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.measurement-sheet-grid th:last-child,
.measurement-sheet-grid td:last-child {
  border-right: 1px solid rgba(17, 17, 17, 0.12);
}

.measurement-cell-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1f2433;
  font-size: 0.88rem;
  box-shadow: none;
  cursor: cell;
}

.measurement-cell-shell {
  position: relative;
}

.measurement-cell-input.is-merged-input {
  min-height: 100%;
  height: 100%;
}

.measurement-cell-input:focus {
  outline: none;
  background: rgba(83, 104, 255, 0.08);
  box-shadow: inset 0 0 0 2px rgba(83, 104, 255, 0.18);
  cursor: text;
}

.measurement-sheet-grid td.is-active-cell {
  box-shadow: inset 0 0 0 2px rgba(83, 104, 255, 0.52);
}

.measurement-sheet-grid td.is-fill-target {
  background: linear-gradient(180deg, rgba(83, 104, 255, 0.08), rgba(83, 104, 255, 0.12));
}

.measurement-sheet-grid td.is-fill-preview-selected {
  background: linear-gradient(180deg, rgba(83, 104, 255, 0.16), rgba(83, 104, 255, 0.1));
  box-shadow: inset 0 0 0 2px rgba(83, 104, 255, 0.34);
}

.measurement-sheet-grid tbody th.is-fill-preview-row,
.measurement-sheet-grid thead th.is-fill-preview-column {
  background: linear-gradient(180deg, #eef2ff, #e4ebff);
  color: #4051af;
  box-shadow: inset 0 0 0 1px rgba(83, 104, 255, 0.26);
}

.measurement-cell-input.is-fill-previewing {
  color: #32449c;
  font-weight: 600;
}

.measurement-sheet-grid td.is-formula-reference-cell {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.18), rgba(250, 204, 21, 0.1));
  box-shadow: inset 0 0 0 2px rgba(234, 179, 8, 0.72);
}

.measurement-sheet-grid td.has-formula-cell:not(.is-selected-cell) {
  background: linear-gradient(180deg, rgba(98, 125, 255, 0.06), rgba(98, 125, 255, 0.03));
}

.measurement-sheet-grid td.has-formula-cell .measurement-cell-input {
  color: #32449c;
  font-weight: 600;
}

.measurement-sheet-grid td.has-formula-error {
  background: linear-gradient(180deg, rgba(255, 95, 95, 0.12), rgba(255, 95, 95, 0.06));
}

.measurement-sheet-grid td.has-formula-error .measurement-cell-input {
  color: #b12828;
}

.measurement-sheet-grid td.has-validation-list-cell .measurement-cell-input {
  padding-right: 26px;
}

.measurement-sheet-grid td.has-validation-list-cell .measurement-cell-shell::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(69, 83, 118, 0.62);
  border-bottom: 1.5px solid rgba(69, 83, 118, 0.62);
  transform: translateY(-64%) rotate(45deg);
  pointer-events: none;
  opacity: 0.78;
}

.measurement-sheet-grid td.has-validation-list-cell.is-active-cell .measurement-cell-shell::after,
.measurement-sheet-grid td.has-validation-list-cell.is-selected-cell .measurement-cell-shell::after {
  border-color: rgba(64, 81, 175, 0.88);
  opacity: 1;
}

.measurement-fill-handle {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 2px;
  background: #5368ff;
  box-shadow: 0 0 0 1px rgba(83, 104, 255, 0.3);
  opacity: 0;
  pointer-events: none;
  cursor: crosshair;
}

.measurement-sheet-grid td.is-fill-origin .measurement-fill-handle {
  opacity: 1;
  pointer-events: auto;
}

.measurement-sheet-grid tbody tr.is-measurement-header-row td,
.measurement-sheet-grid tbody tr.is-measurement-header-row th {
  background: linear-gradient(180deg, rgba(248, 228, 255, 0.68), rgba(240, 228, 255, 0.42));
}

.measurement-sheet-grid tbody tr.is-measurement-header-row th {
  color: #8d3fd1;
  font-weight: 800;
}

.measurement-fill-menu {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(207, 213, 229, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(42, 51, 79, 0.16);
}

.measurement-fill-menu .ghost-button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  white-space: nowrap;
}

.measurement-context-menu {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  padding: 8px;
  border: 1px solid rgba(207, 213, 229, 0.98);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
}

.measurement-context-menu .ghost-button {
  justify-content: flex-start;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  text-align: left;
  white-space: nowrap;
}

.measurement-cell-average {
  padding: 0 12px;
  background: #f9fbff;
  color: #2b3f7c;
  font-weight: 700;
  text-align: right;
  vertical-align: middle;
}

.workspace-list-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}

.workspace-list-copy {
  display: grid;
  gap: 6px;
}

.workspace-list-copy h2 {
  margin: 0;
}

.workspace-list-breadcrumb {
  margin: 0;
  color: #717689;
  font-size: 0.92rem;
}

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

.work-order-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.work-order-list-density-toggle {
  margin-left: auto;
}

.workspace-list-actions .helper-copy {
  max-width: none;
  text-align: left;
}

.workspace-add-button {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
}

.work-order-batch-launch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 14px;
}

.work-order-batch-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(45, 106, 84, 0.12);
  color: #2d6a54;
  font-size: 0.74rem;
  font-weight: 800;
}

.work-order-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  width: min(1240px, calc(100vw - 72px));
  transform: translateX(-50%);
  z-index: 180;
  pointer-events: none;
}

.work-order-bulk-bar-shell {
  --work-order-bulk-control-height: 36px;
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(142px, 180px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 8px 12px;
  border-radius: 18px;
  background: rgba(18, 20, 25, 0.96);
  color: #f7f8fb;
  box-shadow: 0 24px 60px rgba(10, 12, 18, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.work-order-bulk-count-group {
  min-width: 0;
  display: flex;
  min-height: var(--work-order-bulk-control-height);
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.work-order-bulk-count-label {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.work-order-bulk-feedback {
  color: rgba(236, 239, 247, 0.82);
  font-size: 0.76rem;
  line-height: 1.35;
}

.work-order-bulk-feedback[data-tone="success"] {
  color: #8de2b7;
}

.work-order-bulk-feedback[data-tone="error"] {
  color: #ff9fa3;
}

.work-order-bulk-feedback[data-tone="pending"] {
  color: #ffd98f;
}

.work-order-bulk-actions-row {
  display: grid;
  grid-template-columns:
    minmax(138px, 154px)
    minmax(126px, 144px)
    minmax(156px, 170px)
    minmax(210px, 1fr)
    minmax(176px, 190px)
    minmax(98px, 112px);
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.work-order-bulk-field,
.work-order-bulk-picker-slot {
  min-width: 0;
}

.work-order-bulk-field {
  display: grid;
  gap: 2px;
}

.work-order-bulk-field > span {
  color: rgba(229, 233, 244, 0.72);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-item-status-trigger.work-order-bulk-choice-trigger,
.work-order-bulk-field input,
.work-order-bulk-executor-trigger {
  min-height: var(--work-order-bulk-control-height);
  height: var(--work-order-bulk-control-height);
  border-radius: 12px;
  border: 1px solid rgba(219, 227, 242, 0.92);
  background: rgba(255, 255, 255, 0.96);
  color: #172033;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 18px rgba(4, 8, 20, 0.16);
  color-scheme: dark;
}

.work-item-status-trigger.work-order-bulk-choice-trigger,
.work-order-bulk-field input {
  padding: 6px 10px;
}

.work-item-status-trigger.work-order-bulk-choice-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 32px;
  justify-content: flex-start;
  border-radius: 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(42, 53, 76, 0.72) 50%),
    linear-gradient(135deg, rgba(42, 53, 76, 0.72) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #172033;
}

.work-item-status-trigger.work-order-bulk-choice-trigger[data-bulk-type="status"][data-option-value="otvoreni-rn"] {
  background-color: #edf3fb;
  border-color: #c8d9ef;
  color: #284768;
}

.work-item-status-trigger.work-order-bulk-choice-trigger[data-bulk-type="status"][data-option-value="gotov-rn"],
.work-item-status-trigger.work-order-bulk-choice-trigger[data-bulk-type="status"][data-option-value="fakturiran-rn"] {
  background-color: #e4f7ea;
  border-color: #addbbc;
  color: #1f6a42;
}

.work-item-status-trigger.work-order-bulk-choice-trigger[data-bulk-type="status"][data-option-value="ovjeren-rn"] {
  background-color: #fff2c2;
  border-color: #dfc76b;
  color: #6d4d00;
}

.work-item-status-trigger.work-order-bulk-choice-trigger[data-bulk-type="status"][data-option-value="storno-rn"] {
  background-color: #eef1f5;
  border-color: #cbd3de;
  color: #3e4857;
}

.work-item-status-trigger.work-order-bulk-choice-trigger[data-bulk-type="priority"] {
  background-color: #f2f6ff;
  border-color: #c7d6fb;
  color: #304d9b;
}

.work-order-bulk-choice-dropdown {
  width: 100%;
}

.work-item-status-trigger.work-order-bulk-choice-trigger .work-order-bulk-action-label {
  min-width: 0;
  color: currentColor;
  opacity: 1;
}

.work-item-status-trigger.work-order-bulk-choice-trigger.is-mixed .work-order-bulk-action-label,
.work-item-status-trigger.work-order-bulk-choice-trigger[data-option-value="empty"] .work-order-bulk-action-label {
  color: #4c5870;
}

.work-order-bulk-choice-trigger:disabled,
.work-order-bulk-field input:disabled,
.work-order-bulk-action-button:disabled,
.work-order-bulk-executor-trigger:disabled {
  opacity: 0.56;
  cursor: wait;
}

.work-order-bulk-field input {
  width: 100%;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #172033;
}

.work-order-bulk-field input::placeholder {
  color: rgba(71, 83, 106, 0.72);
}

.work-order-bulk-action-button {
  min-height: var(--work-order-bulk-control-height);
  height: var(--work-order-bulk-control-height);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #f7f8fb;
  font-weight: 700;
  white-space: nowrap;
}

.work-order-bulk-action-button.is-primary {
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.97), rgba(123, 92, 255, 0.97));
  border-color: transparent;
  color: #fff;
}

.work-order-bulk-executor-picker {
  min-width: 0;
  width: 100%;
}

.work-order-bulk-executor-trigger {
  width: 100%;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  overflow: hidden;
  color: #172033;
}

.work-order-bulk-action-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.82;
}

.work-order-bulk-executor-stack {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0;
  max-width: 74px;
  overflow: hidden;
  margin-right: 2px;
}

.work-order-bulk-executor-avatar {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 1px rgba(111, 127, 158, 0.18);
}

.work-order-bulk-executor-avatar + .work-order-bulk-executor-avatar {
  margin-left: -4px;
}

.work-order-bulk-executor-avatar .executor-avatar-badge {
  right: -1px;
  bottom: 0;
  font-size: 0.46rem;
}

.work-order-bulk-action-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-bulk-executor-menu-portal {
  z-index: 10020;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(188, 205, 226, 0.72);
  box-shadow: 0 22px 56px rgba(31, 42, 64, 0.18);
  color: #16213a;
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-search-input {
  border-color: rgba(188, 205, 226, 0.86);
  background: rgba(255, 255, 255, 0.98);
  color: #16213a;
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-search-input::placeholder {
  color: rgba(88, 104, 130, 0.66);
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-search-input:focus {
  border-color: rgba(45, 129, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(45, 129, 235, 0.14);
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-helper,
.work-order-bulk-executor-menu-portal .work-order-calendar-executor-empty,
.work-order-bulk-executor-menu-portal .work-order-calendar-executor-selection-empty {
  color: rgba(88, 104, 130, 0.86);
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-chip-label,
.work-order-bulk-executor-menu-portal .work-order-calendar-executor-option-label {
  color: #16213a;
  opacity: 1;
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-chip {
  background: rgba(239, 244, 251, 0.94);
  border-color: rgba(202, 214, 232, 0.84);
  color: #16213a;
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-option {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(216, 225, 238, 0.9);
  color: #16213a;
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-option:hover {
  background: rgba(235, 242, 252, 0.96);
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-option.is-selected {
  border-color: rgba(219, 120, 205, 0.42);
  background: rgba(254, 241, 251, 0.98);
}

.work-order-bulk-executor-menu-portal .work-order-calendar-executor-option-marker {
  color: #1f3765;
}

.work-order-bulk-executor-menu-portal .ghost-button.work-order-calendar-executor-clear {
  border-color: rgba(188, 205, 226, 0.78);
  background: rgba(247, 250, 255, 0.95);
  color: #16213a;
}

.work-order-bulk-choice-menu-portal {
  background: rgba(18, 20, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 56px rgba(5, 8, 14, 0.42);
  gap: 8px;
}

.work-order-bulk-choice-option {
  min-height: 38px;
  padding: 0 12px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.05);
  color: #f7f8fb;
  border-radius: 12px;
}

.work-order-bulk-choice-option:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.12);
}

.work-order-bulk-choice-option.is-selected {
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.18), rgba(123, 92, 255, 0.18));
  border-color: rgba(179, 124, 231, 0.36);
  color: #ffffff;
}

.work-orders-scroll-shell.has-bulk-bar {
  padding-bottom: 88px;
}

@media (max-width: 1180px) {
  .work-order-bulk-bar {
    width: min(1040px, calc(100vw - 36px));
  }

  .work-order-bulk-bar-shell {
    grid-template-columns: minmax(132px, 160px) minmax(0, 1fr);
    gap: 12px;
  }

  .work-order-bulk-actions-row {
    grid-template-columns:
      minmax(120px, 1fr)
      minmax(120px, 1fr)
      minmax(138px, 1fr)
      minmax(180px, 1.4fr)
      minmax(160px, 1fr)
      minmax(92px, auto);
  }
}

@media (max-width: 860px) {
  .work-order-bulk-bar {
    width: calc(100vw - 24px);
    bottom: 12px;
  }

  .work-order-bulk-bar-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-bulk-actions-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.workspace-view-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 2px;
}

.workspace-view-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e8e7ee;
  background: #ffffff;
  color: #5f6478;
  font-size: 0.86rem;
  font-weight: 600;
}

.workspace-view-chip.is-active {
  border-color: #d7d9e7;
  color: #202538;
  box-shadow: 0 8px 18px rgba(45, 48, 76, 0.08);
}

.workspace-view-chip.is-passive {
  background: #f7f7fb;
  color: #8d91a2;
}

.filter-row-clickup {
  grid-template-columns: minmax(260px, 2fr) minmax(160px, 0.8fr) minmax(190px, 1fr);
  margin-bottom: 0;
  padding: 14px;
  border-radius: 18px;
  background: #fafafd;
  border: 1px solid #ececf2;
}

.work-order-filter-shell {
  position: relative;
  display: grid;
  gap: 10px;
}

.work-order-quick-create-card {
  overflow: visible;
  border: 1px solid rgba(185, 204, 231, 0.82);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1), transparent 30%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 14px 28px rgba(47, 68, 108, 0.08);
}

.work-order-quick-create-row {
  align-items: center;
  padding: 10px 14px;
  background: transparent;
}

.work-order-quick-cell {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.work-order-quick-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.22);
}

.work-order-quick-cell label {
  color: #74809a;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-quick-cell input,
.work-order-quick-cell select,
.work-order-quick-picker-trigger {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(190, 207, 231, 0.95);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.98)),
    rgba(255, 255, 255, 0.96);
  color: #20283a;
  padding: 0 10px;
  font: inherit;
  font-size: 0.82rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(61, 91, 145, 0.06);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.work-order-quick-cell select,
.work-order-quick-picker-trigger {
  cursor: pointer;
}

.work-order-quick-cell select:hover,
.work-order-quick-picker-trigger:hover {
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(61, 91, 145, 0.1);
}

.work-order-quick-cell input:focus,
.work-order-quick-cell select:focus,
.work-order-quick-picker-trigger:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.58);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.work-order-quick-date-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

.work-order-quick-date-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(190, 207, 231, 0.95);
  border-radius: 12px;
  color: #1d5ea8;
  background: linear-gradient(180deg, #ffffff, #eef6ff);
}

.work-order-quick-date-button svg {
  width: 16px;
  height: 16px;
}

.work-order-quick-native-date {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.work-order-quick-picker {
  position: relative;
  min-width: 0;
}

.work-order-quick-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-quick-picker-trigger.is-empty {
  color: #64748b;
}

.work-order-quick-picker-menu-portal {
  width: min(420px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 48px));
  z-index: 10090;
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow: auto;
}

.work-order-quick-picker-search {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(185, 205, 236, 0.95);
  border-radius: 14px;
  padding: 0 12px;
  background: #ffffff;
}

.work-order-quick-picker-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-order-quick-picker-selection-empty,
.work-order-quick-picker-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.work-order-quick-picker-chip {
  max-width: 100%;
  min-height: 28px;
  border: 1px solid rgba(173, 196, 229, 0.92);
  border-radius: 999px;
  padding: 0 10px;
  overflow: hidden;
  color: #1f3761;
  font-size: 0.75rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff, #eff6ff);
}

.work-order-quick-picker-options {
  display: grid;
  gap: 6px;
}

.work-order-quick-picker-option {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.work-order-quick-picker-option.has-leading {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.work-order-quick-picker-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.work-order-quick-picker-option-copy strong,
.work-order-quick-picker-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-quick-picker-option-copy small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
}

.work-order-quick-picker-marker {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #2563eb;
  font-weight: 900;
}

.work-order-quick-picker-option.is-selected .work-order-quick-picker-marker {
  background: #2563eb;
  color: #ffffff;
}

.work-order-quick-picker-clear {
  justify-content: center;
}

.work-order-quick-deferred span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 800;
}

.work-order-quick-action {
  min-height: 36px;
  justify-content: center;
  border-radius: 12px;
}

.work-order-quick-error {
  margin: 0;
  color: #be123c;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-order-filter-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.work-order-search-field {
  min-width: 0;
}

.work-order-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.work-order-filter-toggle {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 16px;
  white-space: nowrap;
}

.work-order-filter-toggle.is-active {
  border-color: rgba(217, 72, 149, 0.24);
  background: linear-gradient(180deg, #fff2fb, #fff8fc);
  color: #a33670;
}

.work-order-filter-toggle-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.work-order-filter-toggle-icon svg {
  width: 18px;
  height: 18px;
}

.work-order-filter-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(217, 72, 149, 0.12);
  color: #b03272;
  font-size: 0.74rem;
  font-weight: 800;
}

.work-order-filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-filter-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #ebeaf3;
  background: rgba(255, 255, 255, 0.96);
  color: #5a6075;
  font-size: 0.8rem;
  font-weight: 700;
}

.work-order-filter-summary-chip.is-preset {
  border-color: rgba(217, 72, 149, 0.24);
  background: rgba(255, 241, 249, 0.96);
  color: #a33670;
}

.work-order-filter-builder {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 16;
  width: min(880px, calc(100vw - 72px));
  display: grid;
  gap: 14px;
  max-height: min(74vh, 760px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 54px rgba(43, 54, 86, 0.18);
}

.work-order-filter-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.work-order-filter-builder-copy {
  display: grid;
  gap: 4px;
}

.work-order-filter-builder-copy h3 {
  margin: 0;
  color: #20263a;
  font-size: 1rem;
}

.work-order-filter-builder-copy p {
  margin: 0;
  color: #788199;
  font-size: 0.82rem;
}

.work-order-filter-builder-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.work-order-filter-builder-icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.work-order-filter-builder-icon svg {
  width: 18px;
  height: 18px;
}

.work-order-filter-builder-icon.is-active {
  border-color: rgba(217, 72, 149, 0.24);
  background: linear-gradient(180deg, #fff2fb, #fff8fc);
  color: #a33670;
}

.work-order-filter-builder-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid #ececf4;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfbff);
}

.work-order-filter-builder-actions select {
  min-width: 180px;
  min-height: 40px;
}

.work-order-filter-group-list {
  display: grid;
  gap: 12px;
}

.work-order-filter-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #ececf4;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fbfbff);
}

.work-order-filter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.work-order-filter-group-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.work-order-filter-group-join,
.work-order-filter-group-match {
  min-height: 38px;
  padding-inline: 12px;
  border-radius: 12px;
}

.work-order-filter-group-title {
  color: #252c42;
  font-size: 0.84rem;
  font-weight: 700;
}

.work-order-filter-group-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-filter-rule-list {
  display: grid;
  gap: 10px;
}

.work-order-filter-rule {
  display: grid;
  grid-template-columns: minmax(150px, 1.05fr) minmax(130px, 0.8fr) minmax(0, 1.5fr) auto;
  gap: 10px;
  align-items: start;
}

.work-order-filter-rule > * {
  min-width: 0;
}

.work-order-filter-rule select,
.work-order-filter-rule input[type="text"],
.work-order-filter-rule input[type="search"],
.work-order-filter-rule input[type="date"] {
  min-height: 42px;
}

.work-order-filter-value-input {
  width: 100%;
}

.work-order-filter-value-placeholder {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px dashed #d9deea;
  border-radius: 14px;
  background: #fafbff;
  color: #8590a8;
  font-size: 0.84rem;
  font-weight: 600;
}

.work-order-filter-value-picker {
  position: relative;
  display: grid;
  align-content: start;
}

.work-order-filter-value-picker summary {
  list-style: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #dfe4ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #313a54;
  cursor: pointer;
}

.work-order-filter-value-picker summary::-webkit-details-marker {
  display: none;
}

.work-order-filter-value-picker[open] summary {
  border-color: rgba(217, 72, 149, 0.24);
  box-shadow: 0 12px 24px rgba(72, 83, 120, 0.1);
}

.work-order-filter-value-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-filter-value-picker-caret {
  flex: 0 0 auto;
  color: #6d7690;
}

.work-order-filter-value-panel {
  position: static;
  z-index: 4;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-height: 280px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dfe4ef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(43, 54, 86, 0.16);
}

.work-order-filter-value-search {
  width: 100%;
}

.work-order-filter-value-options {
  display: grid;
  gap: 8px;
}

.work-order-filter-value-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e7eaf3;
  border-radius: 14px;
  background: #ffffff;
}

.work-order-filter-value-option input {
  margin: 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.work-order-filter-value-option span {
  flex: 1;
  min-width: 0;
  color: #31405f;
  font-size: 0.84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-filter-empty {
  margin: 0;
  color: #7d869d;
  font-size: 0.84rem;
}

.work-order-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.work-order-filter-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-orders-scroll-shell {
  overflow: auto;
  max-height: calc(100vh - 360px);
  border: 1px solid #ececf2;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fcfcfe);
}

.work-order-mode-view {
  min-width: 0;
}

.field-inquiries-view {
  min-width: 0;
}

.field-inquiries-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.25fr);
  gap: 18px;
  align-items: start;
}

.field-inquiry-form,
.field-inquiries-list-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(222, 226, 238, 0.92);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 16px 36px rgba(34, 45, 72, 0.08);
}

.field-inquiry-form-head,
.field-inquiries-list-head,
.field-inquiry-card-head,
.field-inquiry-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.field-inquiry-form-head h3,
.field-inquiries-list-head h3 {
  margin: 2px 0;
  color: #141b31;
}

.field-inquiry-form-head span {
  color: #71809b;
  font-size: 0.88rem;
}

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

.field-inquiry-title-field,
.field-inquiry-wide-field {
  grid-column: 1 / -1;
}

.field-inquiry-grid select[multiple] {
  min-height: 112px;
  padding: 10px;
}

.field-inquiry-sync-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #526078;
  font-size: 0.88rem;
  line-height: 1.35;
}

.field-inquiry-sync-row input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.field-inquiry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.field-inquiry-list {
  display: grid;
  gap: 12px;
}

.field-inquiry-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(225, 230, 240, 0.96);
  border-left: 4px solid #94a3b8;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(42, 53, 82, 0.06);
  cursor: pointer;
}

.field-inquiry-card:hover,
.field-inquiry-card.is-active {
  border-color: rgba(37, 99, 235, 0.32);
  border-left-color: #2563eb;
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.11);
}

.field-inquiry-card.is-tentative {
  border-left-color: #d97706;
}

.field-inquiry-card.is-confirmed {
  border-left-color: #059669;
}

.field-inquiry-card.is-rejected {
  border-left-color: #64748b;
}

.field-inquiry-card.is-converted {
  border-left-color: #166534;
}

.field-inquiry-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.field-inquiry-card-copy strong {
  color: #111827;
  font-size: 1rem;
}

.field-inquiry-card-copy span,
.field-inquiry-card-note {
  color: #6b7280;
  font-size: 0.86rem;
  line-height: 1.42;
}

.field-inquiry-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
}

.field-inquiry-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.field-inquiry-card-details span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #253047;
  font-size: 0.88rem;
  font-weight: 700;
}

.field-inquiry-card-details small {
  color: #8290a7;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-inquiry-card-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f8fc;
}

.field-inquiry-card-actions {
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .field-inquiries-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .field-inquiry-grid,
  .field-inquiry-card-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-inquiry-form,
  .field-inquiries-list-panel {
    padding: 14px;
  }
}

.work-order-document-wizard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 58;
  border: 0;
  background: rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(6px);
}

.work-order-document-wizard-panel {
  position: fixed;
  z-index: 230;
  top: 14px;
  left: 50%;
  width: min(1680px, calc(100vw - 40px));
  max-height: calc(100dvh - 28px);
  height: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(215, 221, 233, 0.94);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.98));
  box-shadow: 0 24px 64px rgba(31, 42, 71, 0.22);
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  min-width: 0;
}

.work-order-document-wizard-panel.is-open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

body.is-work-order-document-wizard-open {
  overflow: hidden;
}

body.is-work-order-document-wizard-open .chat-dock,
body.is-document-template-editor-open .chat-dock {
  opacity: 0;
  pointer-events: none;
}

.work-order-document-wizard-head,
.work-order-document-wizard-block-head,
.work-order-document-selection-head,
.work-order-document-template-card-head,
.work-order-document-selection-footer,
.work-order-document-template-card-footer,
.work-order-document-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.work-order-document-wizard-head-copy {
  display: grid;
  gap: 4px;
}

.work-order-document-wizard-head-copy h2,
.work-order-document-wizard-block-head strong {
  margin: 0;
}

.work-order-document-wizard-steps {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.work-order-document-wizard-steps[hidden] {
  display: none !important;
}

.work-order-document-wizard-step {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e8f1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: #5d657c;
  font-weight: 700;
}

.work-order-document-wizard-step strong {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(89, 104, 156, 0.08);
  color: #2b3657;
  font-size: 0.82rem;
}

.work-order-document-wizard-step.is-active {
  border-color: rgba(45, 106, 84, 0.24);
  background: linear-gradient(180deg, #f4fbf7, #fbfefc);
  color: #1f5946;
}

.work-order-document-wizard-step.is-active strong {
  background: rgba(45, 106, 84, 0.14);
  color: #21644d;
}

.work-order-document-wizard-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 6px;
}

.work-order-document-wizard-block,
.work-order-document-selection-card,
.work-order-document-template-card,
.work-order-document-template-summary-card {
  border: 1px solid rgba(220, 156, 212, 0.56);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(240, 79, 151, 0.03),
    0 10px 26px rgba(57, 61, 91, 0.06);
}

.work-order-document-wizard-block {
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.work-order-document-wizard-block-head {
  align-items: center;
}

.work-order-document-wizard-block-head,
.work-order-document-wizard-subblock-head,
.work-order-document-selection-section-head,
.document-template-runtime-block-head {
  cursor: pointer;
}

.work-order-document-wizard-block-head button,
.work-order-document-wizard-subblock-head button,
.work-order-document-selection-section-head button,
.document-template-runtime-block-head button {
  cursor: pointer;
}

.work-order-document-wizard-block-head span,
.work-order-document-selection-copy span,
.work-order-document-selection-footer span,
.work-order-document-template-card-copy span,
.work-order-document-template-card-footer span,
.work-order-document-template-summary-card span {
  color: #71809b;
  font-size: 0.84rem;
  line-height: 1.4;
}

.work-order-document-wizard-common-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.work-order-document-wizard-subblock-head,
.work-order-document-selection-person-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
}

.work-order-document-wizard-subblock-copy {
  display: grid;
  gap: 4px;
}

.work-order-document-wizard-subblock-copy strong,
.work-order-document-selection-person-head strong {
  color: #283454;
  font-size: 0.92rem;
  font-weight: 800;
}

.work-order-document-wizard-common-summary {
  color: #71809b;
  font-size: 0.84rem;
  line-height: 1.4;
}

.work-order-document-wizard-common-toggle {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.work-order-document-wizard-block.is-collapsed {
  gap: 0;
}

.work-order-document-wizard-common-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.work-order-document-wizard-control-slot {
  min-height: 44px;
  display: flex;
  align-items: stretch;
}

.work-order-document-wizard-control-slot > * {
  width: 100%;
}

.work-order-document-wizard-control-slot .work-order-bulk-choice-dropdown,
.work-order-document-wizard-control-slot .work-order-calendar-executor-picker {
  width: 100%;
}

.work-order-document-wizard-control-slot .work-item-status-trigger,
.work-order-document-wizard-control-slot .work-order-calendar-executor-trigger {
  min-height: 44px;
  width: 100%;
  border-radius: 14px;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(220, 156, 212, 0.46);
  box-shadow: none;
}

.work-order-document-wizard-control-slot .work-order-bulk-action-label,
.work-order-document-wizard-control-slot .work-order-calendar-executor-trigger-label,
.work-order-document-wizard-control-slot .work-order-calendar-executor-selection-empty {
  color: #31405f;
}

.work-order-document-wizard-common-person-block,
.work-order-document-selection-person-block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(210, 113, 192, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 246, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 26px rgba(97, 70, 153, 0.08);
}

.work-order-document-wizard-common-person-block.is-collapsed {
  gap: 0;
}

.work-order-document-wizard-common-env-block.is-collapsed {
  gap: 0;
}

.work-order-document-wizard-common-env-body {
  display: grid;
  gap: 12px;
}

.work-order-document-wizard-common-people-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.work-order-document-selection-person-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.work-order-document-selection-person-area {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(220, 156, 212, 0.24);
  background: rgba(255, 255, 255, 0.9);
}

.work-order-document-selection-person-area-title {
  color: #31405f;
  font-size: 0.82rem;
  font-weight: 800;
}

.work-order-document-selection-person-area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-document-wizard-common-people-grid .field,
.work-order-document-selection-person-grid .field {
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(220, 156, 212, 0.28);
  background: rgba(255, 255, 255, 0.94);
}

.work-order-document-wizard-common-people-grid .field > span,
.work-order-document-selection-person-grid .field > span {
  color: #697793;
  font-size: 0.78rem;
  font-weight: 600;
}

.work-order-document-selection-person-head span {
  color: #71809b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.work-order-document-wizard-common-grid .field textarea {
  min-height: 44px;
  resize: vertical;
}

.work-order-document-wizard-selection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-document-wizard-selection-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-document-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.94);
  color: #355648;
  font-size: 0.82rem;
  font-weight: 700;
}

.work-order-document-template-summary {
  display: grid;
  gap: 10px;
}

.work-order-document-template-summary-card.is-warning {
  border-color: rgba(230, 160, 82, 0.28);
  background: linear-gradient(180deg, #fffaf2, #fffdf8);
}

.work-order-document-wizard-work-orders,
.work-order-document-wizard-template-list {
  display: grid;
  gap: 12px;
}

.work-order-document-wizard-template-dock {
  position: sticky;
  bottom: -10px;
  z-index: 3;
  padding-top: 4px;
  padding-bottom: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.work-order-document-template-dock-shell {
  display: grid;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 7px 8px;
  border-radius: 18px;
  background: rgba(20, 19, 28, 0.88);
  border: 1px solid rgba(231, 88, 201, 0.28);
  box-shadow: 0 18px 42px rgba(15, 12, 27, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.work-order-document-template-dock-shell::-webkit-scrollbar {
  height: 8px;
}

.work-order-document-template-dock-shell::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.work-order-document-template-dock-item {
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0;
  display: grid;
  gap: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.work-order-document-template-dock-type,
.work-order-document-template-dock-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 28px;
  border-radius: 10px;
  padding: 0 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.92), rgba(123, 92, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px rgba(113, 67, 196, 0.24);
  color: #ffffff;
}

.work-order-document-template-dock-type {
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.work-order-document-template-dock-number {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, rgba(110, 154, 255, 0.88), rgba(123, 92, 255, 0.9));
}

.work-order-document-template-dock-item:hover .work-order-document-template-dock-type,
.work-order-document-template-dock-item:hover .work-order-document-template-dock-number,
.work-order-document-template-dock-item:focus-visible .work-order-document-template-dock-type,
.work-order-document-template-dock-item:focus-visible .work-order-document-template-dock-number {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 28px rgba(113, 67, 196, 0.34);
}

.work-order-document-wizard-work-orders[data-layout="single"] {
  grid-template-columns: minmax(0, 1fr);
}

.work-order-document-wizard-work-orders[data-layout="double"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-document-wizard-work-orders[data-layout="triple"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-order-document-wizard-work-orders[data-layout="triple"] .work-order-document-selection-grid {
  grid-template-columns: minmax(0, 1fr);
}

.work-order-document-wizard-work-orders.is-carousel {
  display: block;
}

.work-order-document-carousel-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.work-order-document-carousel-nav {
  align-self: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
}

.work-order-document-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

.work-order-document-carousel-track::-webkit-scrollbar {
  height: 8px;
}

.work-order-document-carousel-track::-webkit-scrollbar-thumb {
  background: rgba(121, 130, 156, 0.32);
  border-radius: 999px;
}

.work-order-document-carousel-track .work-order-document-selection-card {
  flex: 0 0 calc((100% - 32px) / 3);
  min-width: 380px;
  scroll-snap-align: start;
}

.work-order-document-carousel-track .work-order-document-selection-grid {
  grid-template-columns: minmax(0, 1fr);
}

.work-order-document-selection-card,
.work-order-document-template-card {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.work-order-document-selection-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  height: 100%;
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)) padding-box,
    linear-gradient(135deg, rgba(240, 79, 151, 0.42), rgba(123, 92, 255, 0.42)) border-box;
  box-shadow:
    0 0 0 1px rgba(168, 101, 216, 0.1),
    0 14px 30px rgba(121, 92, 189, 0.1);
  overflow: hidden;
}

.work-order-document-selection-grid {
  align-content: start;
  gap: 12px;
}

.work-order-document-selection-rail {
  margin: 0 -14px -14px;
  min-height: 38px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.97), rgba(123, 92, 255, 0.97));
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(136, 93, 224, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 28px rgba(138, 71, 214, 0.2);
  border-radius: 0 0 22px 22px;
}

.work-order-document-selection-rail span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.work-order-document-selection-rail strong {
  font-size: 0.94rem;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.work-order-document-selection-head,
.work-order-document-template-card-head {
  align-items: start;
}

.work-order-document-selection-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(220, 156, 212, 0.24);
}

.work-order-document-selection-copy,
.work-order-document-template-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.work-order-document-selection-copy strong,
.work-order-document-template-card-copy strong {
  color: #1f2740;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.work-order-document-selection-company {
  color: #2f3d5d;
  font-size: 0.94rem;
  font-weight: 700;
}

.work-order-document-selection-subline {
  color: #667694;
  font-size: 0.82rem;
  line-height: 1.45;
}

.work-order-document-selection-executors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.work-order-document-selection-executor {
  width: 30px;
  height: 30px;
}

.work-order-document-selection-chips,
.work-order-document-template-card-badges,
.work-order-document-template-card-tags,
.work-order-document-template-card-work-orders {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-document-selection-chips {
  justify-content: flex-end;
}

.work-order-document-selection-grid .field {
  padding: 9px 11px;
  border-radius: 18px;
  border: 1px solid rgba(220, 156, 212, 0.34);
  background: rgba(255, 255, 255, 0.9);
}

.work-order-document-selection-grid .field > span {
  color: #697793;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.work-order-document-selection-date-field {
  padding: 7px 10px !important;
}

.work-order-document-selection-date-field input {
  min-height: 34px;
  padding-block: 6px;
}

.work-order-document-selection-grid input,
.work-order-document-selection-grid textarea {
  border-radius: 14px;
  border-color: rgba(220, 156, 212, 0.46);
}

.work-order-document-selection-grid textarea {
  min-height: 88px;
}

.work-order-document-selection-grid select,
.work-order-document-wizard-common-people-grid select,
.work-order-document-selection-person-grid select {
  border-radius: 14px;
  border-color: rgba(220, 156, 212, 0.46);
}

.work-order-document-wizard-common-people-grid select[multiple],
.work-order-document-selection-person-grid select[multiple] {
  min-height: 96px;
}

.work-order-document-selection-person-block {
  gap: 10px;
  padding: 12px 13px;
}

.work-order-document-selection-person-area-grid .field {
  padding: 9px 10px;
}

.work-order-document-selection-footer {
  align-items: flex-start;
  gap: 10px 14px;
}

.work-order-document-selection-helper {
  color: #7683a0;
  font-size: 0.79rem;
  line-height: 1.45;
  max-width: 36rem;
}

.work-order-document-selection-reset {
  min-height: 40px;
  border-radius: 16px;
}

.work-order-document-work-equipment-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.work-order-document-work-equipment-message {
  margin: 0;
}

.work-order-document-work-equipment-message.is-success {
  color: #047857;
  font-weight: 800;
}

.work-order-document-ro-ai-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(147, 197, 253, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%),
    linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
}

.work-order-document-ro-ai-head,
.work-order-document-ro-ai-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-order-document-ro-ai-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-order-document-ro-ai-head strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 950;
}

.work-order-document-ro-ai-head span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
}

.work-order-document-ro-ai-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.work-order-document-ro-ai-batch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.work-order-document-ro-ai-batch-option {
  display: grid;
  gap: 4px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(196, 208, 232, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: #10203d;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.work-order-document-ro-ai-batch-option:hover:not(:disabled),
.work-order-document-ro-ai-batch-option.is-active {
  border-color: rgba(37, 99, 235, 0.48);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

.work-order-document-ro-ai-batch-option:hover:not(:disabled) {
  transform: translateY(-1px);
}

.work-order-document-ro-ai-batch-option:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.work-order-document-ro-ai-batch-option strong {
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 920;
}

.work-order-document-ro-ai-batch-option span,
.work-order-document-ro-ai-batch-hint {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.work-order-document-ro-ai-batch-hint {
  margin: 0;
}

.work-order-document-ro-ai-model {
  width: auto;
  min-width: 132px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(196, 208, 232, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #13213f;
  font-size: 0.78rem;
  font-weight: 820;
}

.work-order-document-ro-ai-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-document-ro-ai-files .ghost-button {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-ro-manual-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-document-ro-manual-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(134, 239, 172, 0.8);
  border-radius: 16px;
  background: rgba(240, 253, 244, 0.82);
}

.work-order-document-ro-manual-card strong,
.work-order-document-ro-manual-card span,
.work-order-document-ro-manual-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-order-document-ro-manual-card strong {
  color: #10203d;
  font-size: 0.82rem;
  font-weight: 920;
}

.work-order-document-ro-manual-card span,
.work-order-document-ro-manual-card small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.work-order-document-ro-manual-card .ghost-button {
  justify-self: start;
  height: 30px;
  padding: 0 10px;
}

.work-order-document-isznr-post-draft {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
}

.work-order-document-isznr-post-draft.is-ready {
  border-color: rgba(22, 163, 74, 0.28);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.98));
}

.work-order-document-isznr-post-draft.is-missing {
  border-color: rgba(245, 158, 11, 0.26);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.98));
}

.work-order-document-isznr-post-draft-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.work-order-document-isznr-post-draft-header > div {
  display: grid;
  gap: 3px;
}

.work-order-document-isznr-post-draft-header strong {
  color: var(--text);
  font-size: 0.92rem;
}

.work-order-document-isznr-post-draft-header span {
  color: var(--muted);
  font-size: 0.78rem;
}

.work-order-document-isznr-post-draft-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.work-order-document-isznr-post-draft-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.work-order-document-isznr-post-draft-row span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  background: #f59e0b;
}

.work-order-document-isznr-post-draft-row.is-ok span {
  background: #16a34a;
}

.work-order-document-isznr-post-draft-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-isznr-post-draft-row small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-isznr-post-draft-preview {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 8px;
}

.work-order-document-isznr-post-draft-preview summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.work-order-document-isznr-post-draft-preview pre {
  max-height: 260px;
  margin: 8px 0 0;
  overflow: auto;
  padding: 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.96);
  color: #dbeafe;
  font-size: 0.72rem;
  line-height: 1.45;
}

.work-order-document-work-equipment-scope,
.work-order-document-work-equipment-locations,
.work-order-document-work-equipment-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.work-order-document-work-equipment-scope {
  padding: 8px;
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: 16px;
  background: rgba(239, 246, 255, 0.66);
}

.work-order-document-work-equipment-locations {
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.work-order-document-work-equipment-scope-button,
.work-order-document-work-equipment-location,
.work-order-document-work-equipment-filter {
  min-height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.work-order-document-work-equipment-scope-button {
  min-height: 34px;
  padding: 0 12px;
}

.work-order-document-work-equipment-location {
  background: rgba(248, 250, 252, 0.96);
}

.work-order-document-work-equipment-scope-button.is-active,
.work-order-document-work-equipment-location.is-active,
.work-order-document-work-equipment-filter.is-active {
  border-color: rgba(37, 99, 235, 0.36);
  background: #eaf2ff;
  color: #1d4ed8;
}

.work-order-document-work-equipment-location.is-rn-location {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(236, 253, 245, 0.94);
  color: #047857;
}

.work-order-document-work-equipment-location.is-rn-location.is-active {
  border-color: rgba(37, 99, 235, 0.36);
  background: linear-gradient(135deg, #eaf2ff, #ecfdf5);
  color: #1d4ed8;
}

.work-order-document-work-equipment-scope-button:disabled,
.work-order-document-work-equipment-filter:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.work-order-document-work-equipment-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.72);
}

.work-order-document-work-equipment-selection > span {
  flex: 1 1 180px;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 850;
}

.work-order-document-work-equipment-column-head {
  display: grid;
  gap: 3px;
  padding: 2px 2px 0;
}

.work-order-document-work-equipment-column-head strong {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 950;
}

.work-order-document-work-equipment-column-head span {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 760;
}

.work-order-document-work-equipment-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.work-order-document-work-equipment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.9);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.work-order-document-work-equipment-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.work-order-document-work-equipment-card.is-selected {
  border-color: rgba(37, 99, 235, 0.48);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24), 0 10px 24px rgba(37, 99, 235, 0.1);
}

.work-order-document-work-equipment-card input[type="checkbox"] {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.work-order-document-work-equipment-card.is-alert {
  border-color: rgba(220, 38, 38, 0.24);
  background: #fff1f2;
}

.work-order-document-work-equipment-card.is-upcoming {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fff7ed;
}

.work-order-document-work-equipment-card.is-ok {
  border-color: rgba(16, 185, 129, 0.24);
  background: #ecfdf5;
}

.work-order-document-work-equipment-card strong {
  grid-column: 2;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.28;
}

.work-order-document-work-equipment-card span:not(.document-template-meta-badge) {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.work-order-document-work-equipment-card .document-template-meta-badge {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
}

@media (max-width: 1180px) {
  .work-order-document-work-equipment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .work-order-document-work-equipment-list,
  .work-order-document-ro-manual-list {
    grid-template-columns: 1fr;
  }

  .work-order-document-ro-ai-head,
  .work-order-document-ro-ai-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .work-order-document-ro-ai-batch {
    grid-template-columns: 1fr;
  }
}

.work-order-document-ro-template-card {
  border-color: rgba(16, 185, 129, 0.24);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(248, 251, 255, 0.96));
}

.work-order-document-ro-template-body {
  display: grid;
  gap: 10px;
}

.work-order-document-wizard-common-ro-block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: inset 4px 0 0 rgba(16, 185, 129, 0.36), 0 12px 26px rgba(15, 118, 110, 0.08);
}

.work-order-document-wizard-common-ro-body {
  display: grid;
  gap: 10px;
}

.work-order-document-wizard-common-ro-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(187, 247, 208, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
}

.work-order-document-wizard-common-ro-card-head,
.work-order-document-wizard-common-ro-person {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.work-order-document-wizard-common-ro-card-head > div,
.work-order-document-wizard-common-ro-person > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.work-order-document-wizard-common-ro-card-head strong,
.work-order-document-wizard-common-ro-person strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-wizard-common-ro-card-head span,
.work-order-document-wizard-common-ro-person small {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-wizard-common-ro-info-grid,
.work-order-document-wizard-common-ro-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.work-order-document-wizard-common-ro-info-grid > div,
.work-order-document-wizard-common-ro-person {
  padding: 9px 10px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.86);
}

.work-order-document-wizard-common-ro-info-grid span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.work-order-document-wizard-common-ro-info-grid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-wizard-common-ro-person > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.work-order-document-wizard-common-ro-person.is-ok > span {
  background: #16a34a;
}

.work-order-document-wizard-common-ro-person em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  color: #475569;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 850;
}

.work-order-document-wizard-common-layout {
  display: grid;
  gap: 14px;
}

.work-order-document-wizard-sheet-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-document-wizard-sheet-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
}

.work-order-document-wizard-sheet-tab.is-active {
  border-color: rgba(214, 101, 190, 0.34);
  background: linear-gradient(135deg, rgba(255, 240, 248, 0.98), rgba(244, 239, 255, 0.98));
  color: #8f2e75;
  box-shadow: 0 10px 22px rgba(140, 75, 198, 0.12);
}

.work-order-document-wizard-sheet-panel {
  display: grid;
  gap: 14px;
}

.work-order-document-wizard-company-block,
.work-order-document-wizard-common-core,
.work-order-document-wizard-common-env-block,
.work-order-document-wizard-common-periods-block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(210, 113, 192, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 246, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 26px rgba(97, 70, 153, 0.08);
}

.work-order-document-wizard-company-block::before,
.work-order-document-wizard-common-core::before,
.work-order-document-wizard-common-env-block::before,
.work-order-document-wizard-common-periods-block::before,
.work-order-document-wizard-common-person-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.96), rgba(122, 97, 255, 0.9));
  opacity: 0.92;
}

.work-order-document-wizard-company-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.work-order-document-company-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(220, 156, 212, 0.26);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(125, 87, 190, 0.08);
}

.work-order-document-company-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(220, 156, 212, 0.26);
  background: linear-gradient(180deg, #ffffff, #f9f5ff);
}

.work-order-document-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
  box-sizing: border-box;
}

.work-order-document-company-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}

.work-order-document-company-copy strong {
  color: #283454;
  font-size: 0.92rem;
  font-weight: 800;
}

.work-order-document-company-copy span {
  color: #6f7d98;
  font-size: 0.78rem;
  line-height: 1.45;
}

.work-order-document-company-count {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(247, 238, 255, 0.96);
  border: 1px solid rgba(220, 156, 212, 0.32);
  color: #8a4aa8;
  font-size: 0.76rem;
  font-weight: 800;
}

.work-order-document-wizard-common-core-grid,
.work-order-document-wizard-common-env-grid,
.work-order-document-wizard-common-periods-grid,
.work-order-document-wizard-common-person-area-grid {
  display: grid;
  gap: 12px;
}

.work-order-document-wizard-common-core-grid {
  grid-template-columns: minmax(142px, 0.82fr) minmax(142px, 0.82fr) minmax(170px, 0.95fr) minmax(240px, 1.28fr);
  align-items: end;
  gap: 10px;
}

.work-order-document-wizard-common-env-grid {
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px;
}

.work-order-document-randomize-field {
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(210, 113, 192, 0.42);
  background: linear-gradient(180deg, rgba(255, 247, 252, 0.92), rgba(255, 255, 255, 0.94));
}

.work-order-document-randomize-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #24304d;
}

.work-order-document-randomize-row input {
  width: 18px;
  height: 18px;
  accent-color: #d659ad;
}

.work-order-document-randomize-field small {
  color: #6b7893;
  line-height: 1.45;
}

.work-order-document-wizard-common-periods-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-document-wizard-common-person-area {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(122, 194, 145, 0.32);
  background:
    linear-gradient(90deg, rgba(239, 250, 244, 0.96), rgba(255, 255, 255, 0.98)),
    rgba(255, 255, 255, 0.94);
  box-shadow: inset 4px 0 0 rgba(75, 170, 108, 0.58);
}

.work-order-document-wizard-common-person-area-title {
  color: #223a31;
  font-size: 0.84rem;
  font-weight: 800;
}

.work-order-document-wizard-common-person-area-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-document-wizard-control-slot .work-item-status-trigger,
.work-order-document-wizard-control-slot .work-order-calendar-executor-trigger,
.work-order-document-selection-picker-slot .work-order-calendar-executor-trigger,
.work-order-document-selection-services-toolbar .work-order-service-picker-trigger {
  min-height: 38px;
  width: 100%;
  border-radius: 12px;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(220, 156, 212, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 16px rgba(117, 81, 173, 0.08);
}

.work-order-document-wizard-common-core-grid .field,
.work-order-document-wizard-common-env-grid .field,
.work-order-document-selection-basic-grid .field,
.work-order-document-selection-env-grid .field {
  padding: 7px 10px;
  border-radius: 14px;
  border-color: rgba(122, 194, 145, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 253, 250, 0.98)),
    rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 3px 0 0 rgba(84, 177, 119, 0.58),
    0 8px 18px rgba(47, 104, 84, 0.07);
}

.work-order-document-wizard-common-core-grid .field > span,
.work-order-document-wizard-common-env-grid .field > span,
.work-order-document-selection-basic-grid .field > span,
.work-order-document-selection-env-grid .field > span {
  color: #53637f;
  font-size: 0.72rem;
  font-weight: 800;
}

.work-order-document-wizard-common-core-grid input,
.work-order-document-wizard-common-env-grid input,
.work-order-document-selection-basic-grid input,
.work-order-document-selection-env-grid input {
  min-height: 36px;
  padding-block: 6px;
  font-weight: 800;
  color: #1f2b47;
}

#work-order-document-service-validity-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 420px));
  max-width: 980px;
  align-items: start;
}

#work-order-document-service-validity-grid .field {
  max-width: 420px;
}

#work-order-document-service-validity-grid input {
  max-width: 220px;
}

.work-order-document-wizard-panel {
  top: 18px;
  width: min(1760px, calc(100vw - 28px));
  max-height: calc(100dvh - 36px);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 18px 22px 16px;
  border-radius: 22px;
  border-color: rgba(198, 209, 228, 0.86);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.99));
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.26);
}

.work-order-document-wizard-head {
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(212, 219, 233, 0.9);
}

.work-order-document-wizard-head-copy {
  gap: 2px;
}

.work-order-document-wizard-head-copy .section-kicker {
  margin: 0;
  color: #2f7eff;
  letter-spacing: 0.14em;
}

.work-order-document-wizard-head-copy h2 {
  color: #182133;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  letter-spacing: 0;
}

.work-order-document-wizard-head-actions .ghost-button {
  min-width: 44px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 12px;
}

.work-order-document-wizard-body {
  gap: 10px;
  padding: 0 6px 2px 0;
}

.work-order-document-wizard-block,
.work-order-document-selection-card,
.work-order-document-template-card,
.work-order-document-template-summary-card {
  border-color: rgba(209, 218, 233, 0.76);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 34px rgba(31, 42, 71, 0.07);
}

.work-order-document-wizard-block {
  padding: 14px 16px;
}

.work-order-document-wizard-common-core,
.work-order-document-wizard-common-env-block,
.work-order-document-wizard-common-periods-block,
.work-order-document-wizard-common-person-block,
.work-order-document-selection-person-block,
.work-order-document-selection-section-block {
  border-color: rgba(213, 220, 235, 0.82);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.work-order-document-wizard-common-core::before,
.work-order-document-wizard-common-env-block::before,
.work-order-document-wizard-common-periods-block::before,
.work-order-document-wizard-common-person-block::before,
.work-order-document-selection-section-block::before {
  display: none;
}

.work-order-document-wizard-common-core-grid {
  grid-template-columns: minmax(128px, 0.72fr) minmax(128px, 0.72fr) minmax(170px, 0.95fr) minmax(260px, 1.35fr);
}

.work-order-document-wizard-common-core-grid .field,
.work-order-document-wizard-common-env-grid .field,
.work-order-document-selection-basic-grid .field,
.work-order-document-selection-env-grid .field {
  min-width: 0;
  border-color: rgba(218, 224, 236, 0.94);
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: none;
}

.work-order-document-wizard-common-core-grid input,
.work-order-document-wizard-common-env-grid input,
.work-order-document-selection-basic-grid input,
.work-order-document-selection-env-grid input {
  min-height: 34px;
  padding-block: 5px;
  border-color: rgba(219, 226, 238, 0.98);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
}

.work-order-document-wizard-control-slot .work-item-status-trigger,
.work-order-document-wizard-control-slot .work-order-calendar-executor-trigger,
.work-order-document-selection-picker-slot .work-order-document-person-trigger,
.work-order-document-selection-services-toolbar .work-order-service-picker-trigger {
  min-height: 36px;
  border-color: rgba(218, 224, 236, 0.98);
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: none;
}

#work-order-document-service-validity-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  max-width: 760px;
  gap: 8px;
}

#work-order-document-service-validity-grid .field {
  max-width: 220px;
}

#work-order-document-service-validity-grid input {
  max-width: 150px;
  min-height: 34px;
}

.work-order-document-wizard-panel .field.has-required-attention {
  border-color: rgba(213, 71, 113, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.98)),
    linear-gradient(135deg, rgba(247, 68, 143, 0.16), rgba(79, 135, 255, 0.06)) !important;
  box-shadow:
    inset 3px 0 0 rgba(213, 71, 113, 0.78),
    0 0 0 1px rgba(213, 71, 113, 0.18),
    0 12px 26px rgba(213, 71, 113, 0.12) !important;
}

.work-order-document-wizard-panel .field.has-required-attention > span {
  color: #b92862 !important;
}

.work-order-document-wizard-panel .field.has-required-attention > span::after {
  content: " *";
  color: #d12c5e;
}

.work-order-document-wizard-control-slot .work-order-bulk-executor-trigger,
.work-order-document-wizard-control-slot .work-order-document-person-trigger,
.work-order-document-selection-picker-slot .work-order-document-person-trigger {
  color: #1f2b47 !important;
}

.work-order-document-wizard-control-slot .work-order-document-person-trigger,
.work-order-document-selection-picker-slot .work-order-document-person-trigger {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  padding: 5px 9px;
}

.work-order-document-person-trigger .work-order-bulk-action-icon {
  width: 17px;
  height: 17px;
}

.work-order-document-person-stack {
  max-width: 92px;
  min-width: 0;
  margin-right: 0;
}

.work-order-document-person-trigger-label,
.work-order-document-wizard-control-slot .work-order-bulk-executor-trigger .work-order-bulk-action-label,
.work-order-document-wizard-control-slot .work-order-document-person-trigger .work-order-bulk-action-label,
.work-order-document-selection-picker-slot .work-order-bulk-action-label,
.work-order-document-selection-picker-slot .work-order-calendar-executor-trigger-label {
  color: #1f2b47 !important;
  white-space: nowrap;
  line-height: 1.35;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-order-document-wizard-control-slot .work-order-bulk-executor-avatar,
.work-order-document-selection-executor,
.work-order-document-person-trigger .work-order-document-person-avatar {
  border: 2px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 1px rgba(117, 81, 173, 0.28),
    0 10px 22px rgba(59, 47, 110, 0.14);
  background: #ffffff;
}

.work-order-document-person-trigger .work-order-document-person-avatar,
.work-order-document-selection-executor {
  width: 25px;
  height: 25px;
}

.work-order-document-wizard-control-slot .work-order-bulk-executor-avatar .executor-avatar-badge,
.work-order-document-selection-executor .executor-avatar-badge,
.work-order-document-person-trigger .work-order-document-person-avatar .executor-avatar-badge {
  color: #050914;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98),
    0 0 10px rgba(255, 255, 255, 0.98),
    0 2px 5px rgba(16, 22, 37, 0.36);
}

.work-order-document-person-menu-portal {
  width: min(520px, calc(100vw - 24px));
  max-width: min(520px, calc(100vw - 24px));
  min-width: min(420px, calc(100vw - 24px)) !important;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(185, 202, 226, 0.72);
  box-shadow: 0 24px 56px rgba(31, 43, 71, 0.22);
}

.work-order-document-person-menu-portal .work-order-calendar-executor-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-search-input {
  border-color: rgba(178, 193, 218, 0.76);
  background: #ffffff;
  color: #111827;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-search-input::placeholder {
  color: #7b879c;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-search-input:focus {
  border-color: rgba(122, 199, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(108, 178, 255, 0.16);
}

.work-order-document-person-menu-portal .work-order-calendar-executor-helper,
.work-order-document-person-menu-portal .work-order-calendar-executor-empty,
.work-order-document-person-menu-portal .work-order-calendar-executor-selection-empty {
  color: #52627c;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-chip {
  background: rgba(239, 246, 255, 0.96);
  border-color: rgba(147, 172, 210, 0.42);
  color: #1f2b47;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(216, 225, 239, 0.92);
  color: #1f2b47;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-option:hover {
  background: rgba(242, 247, 255, 0.98);
}

.work-order-document-person-menu-portal .work-order-calendar-executor-option.is-selected,
.work-order-document-service-picker .work-order-service-picker-option.is-selected {
  border-color: rgba(219, 120, 205, 0.35);
  background: rgba(240, 79, 151, 0.14);
}

.work-order-document-person-option-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-order-document-person-option-meta {
  color: #5d6a84;
  font-size: 0.72rem;
  line-height: 1.35;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-option-label,
.work-order-document-person-menu-portal .work-order-calendar-executor-chip-label {
  color: #111827 !important;
  font-weight: 800;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-option-marker {
  color: #315a9f;
}

.work-order-document-person-menu-portal .ghost-button.work-order-calendar-executor-clear {
  border-color: rgba(178, 193, 218, 0.76);
  background: rgba(247, 250, 255, 0.98);
  color: #1f2b47;
}

.work-order-document-person-menu-portal .work-order-calendar-executor-footer {
  justify-content: flex-start;
}

.work-order-document-selection-copy {
  gap: 5px;
}

.work-order-document-selection-copy strong {
  font-size: 1.25rem;
}

.work-order-document-selection-company {
  color: #2c3652;
}

.work-order-document-selection-meta {
  color: #6f7d98;
  font-size: 0.78rem;
  line-height: 1.42;
}

.work-order-document-selection-service-summary {
  color: #495674;
  font-size: 0.8rem;
  line-height: 1.45;
}

.work-order-document-selection-subline {
  color: #667694;
  font-size: 0.8rem;
}

.work-order-document-selection-executors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: 16px;
  border: 1px solid rgba(164, 120, 224, 0.28);
  background: linear-gradient(180deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.work-order-document-selection-executor-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.work-order-document-selection-executor-label {
  min-width: 0;
  color: #1f2b47;
  font-size: 0.79rem;
  font-weight: 800;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-document-selection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.work-order-document-selection-basic-block,
.work-order-document-selection-env-block,
.work-order-document-selection-services,
.work-order-document-selection-person-block,
.work-order-document-selection-learning-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(210, 113, 192, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 246, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.work-order-document-selection-section-block {
  position: relative;
  overflow: hidden;
}

.work-order-document-selection-section-block::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.95), rgba(123, 92, 255, 0.92));
}

.work-order-document-selection-section-block.is-collapsed {
  gap: 0;
}

.work-order-document-selection-section-body {
  display: grid;
  gap: 10px;
}

.work-order-document-selection-company-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(220, 156, 212, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 255, 0.94));
}

.work-order-document-selection-company-logo {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(220, 156, 212, 0.26);
  background: linear-gradient(180deg, #ffffff, #faf6ff);
}

.work-order-document-selection-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
  box-sizing: border-box;
}

.work-order-document-selection-company-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.work-order-document-selection-company-copy strong {
  color: #26324d;
  font-size: 0.92rem;
  font-weight: 800;
}

.work-order-document-selection-company-copy span {
  color: #6f7d98;
  font-size: 0.78rem;
  line-height: 1.42;
}

.work-order-document-selection-grid .field {
  min-width: 0;
}

.work-order-document-selection-date-field {
  padding: 7px 10px !important;
}

.work-order-document-selection-date-field input {
  min-height: 34px;
  padding-block: 6px;
}

.work-order-document-selection-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.work-order-document-selection-section-copy {
  display: grid;
  gap: 4px;
}

.work-order-document-selection-section-head strong {
  color: #31405f;
  font-size: 0.88rem;
  font-weight: 800;
}

.work-order-document-selection-section-head span {
  color: #70809b;
  font-size: 0.78rem;
  line-height: 1.45;
}

.work-order-document-selection-section-toggle {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.work-order-document-selection-basic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.work-order-document-selection-env-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(96px, 1fr));
  gap: 8px;
}

.work-order-document-selection-services-toolbar {
  display: grid;
  gap: 8px;
}

.work-order-document-selection-picker-slot .work-order-document-person-picker,
.work-order-document-selection-services-toolbar .work-order-service-picker {
  width: 100%;
}

.work-order-document-selection-service-list {
  display: grid;
  gap: 8px;
}

.work-order-document-selection-service-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid rgba(220, 156, 212, 0.28);
  background: rgba(247, 241, 252, 0.98);
  color: #3b4562;
  font-size: 0.83rem;
  font-weight: 700;
  text-align: left;
}

.work-order-document-selection-service-chip.is-completed {
  background: rgba(222, 246, 228, 0.96);
  border-color: rgba(122, 194, 145, 0.34);
  color: #26643d;
}

.work-order-document-selection-service-chip small {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #7b5ea6;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.work-order-document-selection-service-remove {
  color: #8d688f;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.work-order-document-selection-service-empty {
  color: #7b87a0;
  font-size: 0.78rem;
}

.work-order-document-selection-person-area-grid .field,
.work-order-document-selection-picker-field {
  padding: 9px 10px;
}

.work-order-document-selection-person-area-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-document-learning-admin-card,
.work-order-document-learning-test-card {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: linear-gradient(180deg, rgba(240, 249, 244, 0.96), rgba(255, 255, 255, 0.98));
}

.work-order-document-learning-admin-card strong,
.work-order-document-learning-test-copy strong {
  color: #234438;
  font-size: 0.9rem;
  font-weight: 800;
}

.work-order-document-learning-admin-card span,
.work-order-document-learning-test-copy span,
.work-order-document-learning-test-note {
  color: #61786d;
  font-size: 0.78rem;
  line-height: 1.5;
}

.work-order-document-learning-test-list {
  display: grid;
  gap: 10px;
}

.work-order-document-learning-test-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.work-order-document-learning-test-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.work-order-document-learning-test-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.work-order-document-learning-test-note {
  margin: 0;
}

.work-order-document-template-work-order-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f6f8fc;
  color: #4b566f;
  font-size: 0.78rem;
  font-weight: 700;
}

.work-order-document-wizard-footer {
  justify-content: flex-end;
}

.work-order-calendar-view,
.work-order-map-view {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.work-order-calendar-view {
  grid-template-rows: auto minmax(0, 1fr);
}

.work-order-calendar-toolbar,
.work-order-map-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.work-order-calendar-toolbar-side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.work-order-calendar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-calendar-display-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid #e6eaf2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.work-order-calendar-tool-button {
  min-height: 38px;
  border-radius: 999px;
  border-color: #e5e8f1;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #5b657d;
  font-size: 0.82rem;
  font-weight: 700;
}

.work-order-calendar-tool-button.is-active {
  border-color: rgba(217, 72, 149, 0.28);
  background: linear-gradient(180deg, #fff2fb, #fff7fc);
  color: #a33670;
}

.work-order-calendar-tool-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.work-order-calendar-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: stretch;
  min-height: 0;
}

.work-order-calendar-sidepanels {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.work-order-calendar-content.is-unscheduled-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.work-order-calendar-grid-shell {
  min-width: 0;
  min-height: 320px;
  height: var(--work-order-calendar-shell-height, min(72vh, calc(100dvh - 332px)));
  max-height: var(--work-order-calendar-shell-height, calc(100dvh - 332px));
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 22px;
  -webkit-overflow-scrolling: touch;
}

.work-order-map-toolbar-side {
  min-width: min(100%, 620px);
  display: grid;
  justify-items: start;
  gap: 10px;
}

.work-order-map-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  width: min(100%, 620px);
}

.work-order-map-filter-field {
  gap: 5px;
}

.work-order-map-filter-field span {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-map-filter-field select {
  min-height: 38px;
  border-radius: 12px;
}

.work-order-calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-nav-button {
  min-width: 44px;
  padding-inline: 0;
}

.work-order-calendar-range {
  font-size: 1rem;
  color: #1d2238;
}

.work-order-calendar-meta,
.work-order-map-summary {
  font-size: 0.88rem;
  color: #66708a;
}

.work-order-calendar-unscheduled {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #eceaf5;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f9f7ff);
  position: sticky;
  top: 0;
  max-height: calc(100vh - 330px);
  overflow: auto;
}

.work-order-calendar-unscheduled-head {
  display: grid;
  gap: 4px;
}

.work-order-calendar-unscheduled-head span {
  color: #7a8299;
  font-size: 0.86rem;
}

.work-order-calendar-unscheduled-list {
  display: grid;
  gap: 10px;
}

.work-order-calendar-unscheduled-list .work-order-calendar-card {
  width: 100%;
}

.work-order-calendar-grid {
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: none;
  scroll-behavior: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  border: 1px solid #e8e9f2;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.work-order-calendar-month-week {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e8e9f2;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #fcfcff);
  box-shadow: 0 10px 28px rgba(67, 74, 107, 0.06);
}

.work-order-calendar-month-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
  color: #79829a;
  font-size: 0.8rem;
}

.work-order-calendar-month-week-head strong {
  color: #20263a;
  font-size: 0.9rem;
}

.work-order-calendar-month-week-head span {
  color: #7a849a;
  font-size: 0.78rem;
  font-weight: 700;
}

.work-order-calendar-month-grid {
  display: grid;
  align-items: start;
  gap: clamp(6px, 0.7vw, 10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.work-order-calendar-month-day {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  max-width: 100%;
  min-height: clamp(132px, 16vw, 180px);
  border: 1px solid #ebeef6;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.98));
  overflow: hidden;
  transition: background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.work-order-calendar-month-day.is-outside-month {
  opacity: 0.56;
}

.work-order-calendar-month-day.is-today {
  border-color: rgba(176, 137, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(186, 154, 255, 0.12);
}

.work-order-calendar-month-day.is-drop-target {
  background: linear-gradient(180deg, #f7f4ff, #f1ebff);
  box-shadow: inset 0 0 0 1px rgba(170, 136, 255, 0.28);
}

.work-order-calendar-month-day-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: clamp(7px, 0.8vw, 10px) clamp(7px, 0.8vw, 10px) clamp(6px, 0.7vw, 8px);
  border-bottom: 1px solid #eef1f7;
  background: linear-gradient(180deg, rgba(247, 249, 255, 0.98), rgba(252, 253, 255, 0.98));
}

.work-order-calendar-month-day-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-order-calendar-month-day-body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: clamp(6px, 0.7vw, 8px);
  min-height: clamp(94px, 12vw, 118px);
}

.work-order-calendar-periodics-strip {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border-radius: 13px;
  border: 1px solid rgba(124, 58, 237, 0.13);
  background:
    linear-gradient(180deg, rgba(250, 247, 255, 0.98), rgba(244, 240, 255, 0.92)),
    radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.12), transparent 38%);
}

.work-order-calendar-periodics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.work-order-calendar-periodics-head strong {
  min-width: 0;
  color: #4c1d95;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-calendar-periodics-head span,
.work-order-calendar-periodics-more {
  color: #6d5a9c;
  font-size: 0.68rem;
  font-weight: 800;
}

.work-order-calendar-periodics-list {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.work-order-calendar-periodic-block {
  width: 100%;
  min-height: 26px;
  padding: 4px 8px;
  text-align: left;
  cursor: default;
}

.work-order-calendar-periodic-block:focus-visible {
  outline: 2px solid rgba(124, 58, 237, 0.28);
  outline-offset: 2px;
}

.work-order-calendar-day-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(198, 207, 222, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #2d6a54;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.work-order-calendar-day-add:hover {
  border-color: rgba(45, 106, 84, 0.34);
  background: #f3fbf7;
  box-shadow: 0 8px 18px rgba(45, 106, 84, 0.12);
  transform: translateY(-1px);
}

.work-order-calendar-day-add:focus-visible {
  outline: 2px solid rgba(45, 106, 84, 0.24);
  outline-offset: 2px;
}

.work-order-calendar-month-day .work-order-calendar-card,
.work-order-calendar-month-day .work-order-calendar-cell-group {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.work-order-calendar-month-day .work-order-calendar-card {
  padding: clamp(6px, 0.7vw, 8px) clamp(7px, 0.8vw, 10px) clamp(7px, 0.75vw, 9px) clamp(9px, 0.9vw, 12px);
  gap: 5px;
}

.work-order-calendar-month-day .work-order-calendar-card-title {
  font-size: 0.8rem;
}

.work-order-calendar-month-day .work-order-calendar-card-meta,
.work-order-calendar-month-day .work-order-calendar-card-due {
  font-size: 0.72rem;
}

.work-order-calendar-grid-row {
  display: grid;
  grid-template-columns: 132px repeat(7, minmax(76px, 1fr));
  min-width: 0;
  width: 100%;
}

.work-order-calendar-grid-row.is-head {
  position: sticky;
  top: 0;
  z-index: 4;
}

.work-order-calendar-lane-head,
.work-order-calendar-day-head {
  padding: 10px 12px;
  border-bottom: 1px solid #ececf4;
  background: rgba(248, 250, 255, 0.98);
  backdrop-filter: blur(8px);
}

.work-order-calendar-lane-head {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f879e;
}

.work-order-calendar-day-head {
  display: grid;
  gap: 4px;
  border-left: 1px solid #f0f1f6;
}

.work-order-calendar-day-head.is-today {
  background: linear-gradient(180deg, rgba(244, 238, 255, 0.98), rgba(252, 249, 255, 0.98));
  box-shadow: inset 0 -1px 0 rgba(184, 146, 255, 0.22);
}

.work-order-calendar-day-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8790a6;
}

.work-order-calendar-day-date {
  font-size: 0.98rem;
  color: #22283a;
}

.work-order-calendar-day-meta {
  color: #7a8398;
  font-size: 0.76rem;
  font-weight: 600;
}

.work-order-calendar-lane {
  position: sticky;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f6;
  background: linear-gradient(180deg, #f9fbff, #f4f7fd);
}

.work-order-calendar-lane-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.work-order-calendar-lane-top strong {
  font-size: 0.94rem;
  color: #20263a;
}

.work-order-calendar-lane-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-calendar-lane-empty {
  font-size: 0.82rem;
  color: #8991a6;
}

.work-order-mini-executor,
.work-order-editor-assignee,
.work-executor-avatar,
.dashboard-executor-avatar,
.work-order-calendar-executor-option-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--executor-bg, #eef1f5);
  color: var(--executor-fg, #4f5d73);
  border: 1px solid rgba(96, 106, 128, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.work-order-mini-executor.has-image,
.work-order-editor-assignee.has-image,
.work-executor-avatar.has-image,
.dashboard-executor-avatar.has-image,
.work-order-calendar-executor-option-avatar.has-image {
  background: #ffffff;
}

.work-order-mini-executor.is-fallback,
.work-order-editor-assignee.is-fallback,
.work-executor-avatar.is-fallback,
.dashboard-executor-avatar.is-fallback,
.work-order-calendar-executor-option-avatar.is-fallback {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--executor-bg, #eef1f5) 88%, #ffffff 12%), color-mix(in srgb, var(--executor-bg, #eef1f5) 68%, #d7dfef 32%));
}

.work-order-mini-executor img,
.work-order-editor-assignee img,
.work-executor-avatar img,
.dashboard-executor-avatar img,
.work-order-calendar-executor-option-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.work-order-mini-executor .executor-avatar-icon,
.work-order-editor-assignee .executor-avatar-icon,
.work-executor-avatar .executor-avatar-icon,
.dashboard-executor-avatar .executor-avatar-icon,
.work-order-calendar-executor-option-avatar .executor-avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68%;
  height: 68%;
  color: currentColor;
}

.work-order-mini-executor .executor-avatar-icon svg,
.work-order-editor-assignee .executor-avatar-icon svg,
.work-executor-avatar .executor-avatar-icon svg,
.dashboard-executor-avatar .executor-avatar-icon svg,
.work-order-calendar-executor-option-avatar .executor-avatar-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.work-order-mini-executor .executor-avatar-badge,
.work-order-editor-assignee .executor-avatar-badge,
.work-executor-avatar .executor-avatar-badge,
.dashboard-executor-avatar .executor-avatar-badge,
.work-order-calendar-executor-option-avatar .executor-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  color: #141b29;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 6px rgba(255, 255, 255, 0.85),
    0 1px 3px rgba(41, 50, 74, 0.28);
  z-index: 2;
}

.work-order-mini-executor.is-overflow,
.work-order-editor-assignee.is-overflow,
.work-executor-avatar.is-overflow,
.dashboard-executor-avatar.is-overflow,
.work-order-calendar-executor-option-avatar.is-overflow {
  background: #eef2fb;
  color: #627393;
  font-size: 0.62rem;
}

.work-order-mini-executor {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

.work-order-editor-assignee {
  width: 24px;
  height: 24px;
  font-size: 0.6rem;
}

.work-order-editor-assignee .executor-avatar-badge {
  right: -1px;
  bottom: -1px;
  font-size: 0.52rem;
}

.work-order-calendar-cell {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 124px;
  padding: 10px;
  border-bottom: 1px solid #eef0f6;
  border-left: 1px solid #f0f1f6;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 252, 255, 0.98)),
    repeating-linear-gradient(180deg, rgba(226, 230, 240, 0.22) 0, rgba(226, 230, 240, 0.22) 1px, transparent 1px, transparent 42px);
  transition: background 120ms ease, box-shadow 120ms ease;
}

.work-order-calendar-cell:hover {
  background: linear-gradient(180deg, #ffffff, #faf8ff);
}

.work-order-calendar-cell.is-drop-target {
  background: linear-gradient(180deg, #f6f3ff, #f0ebff);
  box-shadow: inset 0 0 0 1px rgba(170, 136, 255, 0.28);
}

.work-order-calendar-cell-placeholder {
  color: #b0b6c9;
  font-size: 0.8rem;
}

.work-order-calendar-card {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--calendar-card-border, #e9e7f6);
  border-left: 4px solid var(--calendar-card-accent, #97a1af);
  background: linear-gradient(180deg, var(--calendar-card-soft, #ffffff), #ffffff);
  text-align: left;
  box-shadow: 0 8px 18px rgba(69, 76, 108, 0.08);
  cursor: pointer;
  overflow: hidden;
  transition: transform 90ms ease, box-shadow 90ms ease, opacity 90ms ease, background 90ms ease, filter 90ms ease;
  will-change: transform;
}

.work-order-calendar-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(69, 76, 108, 0.12);
}

.todo-calendar-card {
  --calendar-card-accent: #8b5cf6;
  --calendar-card-soft: #f6f1ff;
  --calendar-card-border: #eadcff;
}

.todo-calendar-card.is-compact {
  padding: 9px 10px 10px 12px;
}

.todo-calendar-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.todo-calendar-card-action {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
}

.work-order-calendar-card.is-dragging {
  opacity: 0.56;
  transform: rotate(1.5deg) scale(0.985);
}

.work-order-calendar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.work-order-calendar-card-number {
  font-size: 0.88rem;
  color: #20253a;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.work-order-calendar-card-status,
.work-order-calendar-card-priority {
  padding: 4px 8px;
  font-size: 0.72rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-order-calendar-card-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #2a3044;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.work-order-calendar-card-meta {
  font-size: 0.78rem;
  color: #788199;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.work-order-calendar-card-status-dropdown {
  flex: 0 0 auto;
}

.work-order-calendar-card-status-dropdown .work-item-status-trigger {
  width: auto;
  min-width: 106px;
  min-height: 28px;
  padding: 0 26px 0 10px;
  font-size: 0.72rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.work-order-calendar-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.work-order-calendar-card-due {
  font-size: 0.74rem;
  font-weight: 700;
  color: #62708f;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.work-order-calendar-card-executors {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

.work-order-calendar-executor-picker {
  position: relative;
}

.work-order-calendar-executor-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 2px 5px;
  border: 1px solid #dbe2ee;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 14px rgba(66, 74, 98, 0.08);
  cursor: pointer;
  transition: transform 90ms ease, box-shadow 90ms ease, border-color 90ms ease;
}

.work-order-calendar-executor-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(66, 74, 98, 0.12);
  border-color: rgba(120, 133, 163, 0.48);
}

.work-order-calendar-executor-trigger .work-order-mini-executor {
  pointer-events: none;
}

.work-order-calendar-executor-trigger-stack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.work-order-calendar-executor-trigger-stack .work-order-mini-executor {
  width: 24px;
  height: 24px;
  font-size: 0.66rem;
}

.work-order-calendar-executor-trigger-empty {
  color: #7e889e;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.work-order-calendar-executor-menu-portal {
  gap: 10px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, calc(100vh - 24px));
  padding: 10px;
  overflow: hidden;
}

.work-order-calendar-executor-search {
  display: grid;
  gap: 6px;
}

.work-order-calendar-executor-search-input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8faff;
  color: #31405f;
  font-size: 0.77rem;
  font-weight: 600;
}

.work-order-calendar-executor-search-input:focus {
  outline: none;
  border-color: rgba(85, 111, 178, 0.42);
  box-shadow: 0 0 0 3px rgba(108, 130, 190, 0.12);
}

.work-order-calendar-executor-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.work-order-calendar-executor-selection-empty {
  color: #7f899e;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-order-calendar-executor-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 30px;
  padding: 0 8px 0 4px;
  border: 1px solid #dde5f1;
  border-radius: 999px;
  background: #f6f8fd;
  color: #405072;
  cursor: pointer;
}

.work-order-calendar-executor-chip-label {
  min-width: 0;
  max-width: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-order-calendar-executor-chip-remove {
  color: #7b86a0;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.work-order-calendar-executor-helper {
  margin: 0;
  color: #7a849b;
  font-size: 0.7rem;
  font-weight: 700;
}

.work-order-calendar-executor-options {
  display: grid;
  gap: 6px;
  max-height: min(38vh, 252px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.work-order-calendar-executor-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
}

.work-order-calendar-executor-option.is-selected {
  border-color: rgba(190, 136, 228, 0.34);
  background: rgba(250, 240, 252, 0.96);
}

.work-order-calendar-executor-option:disabled:not(.is-selected) {
  opacity: 0.46;
}

.work-order-calendar-executor-option-avatar {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

.work-order-calendar-executor-option-avatar.is-empty {
  background: #f4f6fa;
  color: #7e889e;
}

.work-order-calendar-executor-option-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.work-order-calendar-executor-option-marker {
  color: #6c7ca4;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.work-order-calendar-executor-empty {
  margin: 0;
  color: #7d869d;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-order-calendar-executor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-order-calendar-executor-clear,
.work-order-calendar-executor-save {
  min-height: 34px;
}

.work-order-inline-service-picker {
  min-width: 0;
}

.work-order-service-picker {
  position: relative;
}

.work-order-service-picker-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  color: #294439;
  box-shadow: 0 10px 22px rgba(34, 53, 45, 0.06);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.work-order-service-picker-trigger:hover,
.work-order-service-picker-trigger:focus-visible {
  border-color: rgba(32, 102, 79, 0.28);
  box-shadow: 0 16px 30px rgba(34, 53, 45, 0.1);
  transform: translateY(-1px);
}

.work-order-service-picker-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 46%;
}

.work-order-service-picker-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.98);
  color: #335447;
  font-size: 0.75rem;
  font-weight: 700;
}

.work-order-service-picker-chip.is-completed {
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
}

.work-order-service-picker-chip.is-extra {
  background: rgba(236, 242, 248, 0.98);
  color: #4f6980;
}

.work-order-service-picker-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
}

.work-order-service-picker-empty {
  color: #6f8179;
  font-size: 0.84rem;
  font-weight: 700;
}

.work-order-service-picker-menu-portal {
  display: grid;
  gap: 10px;
  max-width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, calc(100vh - 24px));
  padding: 10px;
  overflow: hidden;
}

.work-order-service-picker-search {
  display: grid;
  gap: 6px;
}

.work-order-service-picker-search-input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8faff;
  color: #31405f;
  font-size: 0.77rem;
  font-weight: 600;
}

.work-order-service-picker-search-input:focus {
  outline: none;
  border-color: rgba(85, 111, 178, 0.42);
  box-shadow: 0 0 0 3px rgba(108, 130, 190, 0.12);
}

.work-order-service-picker-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.work-order-service-picker-selection-empty {
  color: #7f899e;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-order-service-picker-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid #dde5f1;
  border-radius: 999px;
  background: #f6f8fd;
  color: #405072;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-order-service-picker-selection-name {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.work-order-service-picker-quantity {
  width: 54px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(196, 208, 232, 0.92);
  border-radius: 999px;
  background: #ffffff;
  color: #111b36;
  font-size: 0.68rem;
  font-weight: 850;
  text-align: center;
}

.work-order-service-picker-selection-chip.is-completed {
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
}

.work-order-service-picker-helper {
  margin: 0;
  color: #7a849b;
  font-size: 0.7rem;
  font-weight: 700;
}

.work-order-service-picker-options {
  display: grid;
  gap: 6px;
  max-height: min(38vh, 252px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.work-order-service-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.work-order-service-picker-option.is-selected {
  border-color: rgba(190, 136, 228, 0.34);
  background: rgba(250, 240, 252, 0.96);
}

.work-order-service-picker-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.work-order-service-picker-option-copy strong {
  font-size: 0.86rem;
  color: #22352d;
}

.work-order-service-picker-option-copy span {
  color: #60796f;
  font-size: 0.74rem;
}

.work-order-service-picker-option-marker {
  color: #6c7ca4;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.work-order-service-picker-clear {
  min-height: 34px;
}

.work-order-service-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-order-service-picker-done {
  min-height: 34px;
}

.work-order-service-selection {
  display: grid;
  gap: 8px;
}

.work-order-service-empty,
.work-order-service-template-hint {
  margin: 0;
}

.work-order-service-empty {
  color: #6b8075;
}

.work-order-service-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px 8px 12px;
  border: 1.5px solid rgba(47, 104, 84, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(236, 249, 242, 0.9), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: 0 10px 22px rgba(32, 72, 52, 0.07);
}

.work-order-service-item.is-pending {
  border-color: rgba(220, 82, 104, 0.22);
  background: linear-gradient(90deg, rgba(255, 246, 248, 0.94), rgba(255, 255, 255, 0.98));
}

.work-order-service-item.is-progress {
  border-color: rgba(216, 156, 49, 0.28);
  background: linear-gradient(90deg, rgba(255, 248, 226, 0.95), rgba(255, 255, 255, 0.98));
}

.work-order-service-item.is-completed {
  background: rgba(242, 249, 245, 0.98);
  border-color: rgba(67, 134, 95, 0.16);
}

.work-order-service-item-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.work-order-service-item-title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.work-order-service-item-title-row strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.94rem;
  color: #22352d;
}

.work-order-service-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.work-order-service-code-badge,
.work-order-service-template-badge {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.76rem;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.96);
  color: #335447;
}

.work-order-service-template-badge.is-muted {
  opacity: 0.74;
}

.service-catalog-template-badge.is-muted {
  opacity: 0.74;
}

.work-order-service-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.work-order-service-progress-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  min-width: min(100%, 330px);
  padding: 3px;
  border-radius: 10px;
  background: #f3f6fb;
}

.work-order-service-status-toggle,
.work-order-service-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  min-width: 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.98);
  color: #315346;
  font-weight: 800;
  cursor: pointer;
}

.work-order-service-status-toggle {
  width: auto;
  min-width: 0;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 0.68rem;
  white-space: nowrap;
}

.work-order-service-status-toggle svg,
.work-order-service-remove svg {
  width: 15px;
  height: 15px;
  display: block;
}

.work-order-service-status-toggle.is-completed {
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
}

.work-order-service-status-toggle[aria-pressed="true"].is-pending {
  background: #ffe9ed;
  border-color: #f2a5b2;
  color: #a63243;
}

.work-order-service-status-toggle[aria-pressed="true"].is-progress {
  background: #fff1cf;
  border-color: #e6c27a;
  color: #865d0d;
}

.work-order-service-status-toggle[aria-pressed="true"].is-completed {
  background: #e4f7eb;
  border-color: #93d2ab;
  color: #1f7a4c;
}

.work-order-service-progress-badge.is-pending {
  background: #fff0f3;
  color: #a63243;
  border-color: rgba(220, 82, 104, 0.2);
}

.work-order-service-progress-badge.is-progress {
  background: #fff4d8;
  color: #865d0d;
  border-color: rgba(216, 156, 49, 0.24);
}

.work-order-service-progress-badge.is-completed {
  background: #eaf8ef;
  color: #1f7a4c;
  border-color: rgba(67, 134, 95, 0.18);
}

.work-order-service-remove {
  color: #8a3941;
  background: rgba(255, 246, 247, 0.98);
  border-color: rgba(207, 99, 108, 0.18);
}

.work-order-calendar-content {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: start;
}

.work-order-calendar-grid {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
}

.work-order-calendar-grid-shell {
  overscroll-behavior: contain;
  scroll-behavior: auto;
  scrollbar-gutter: stable both-edges;
  touch-action: auto;
}

.work-order-calendar-empty {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px dashed #dce2ee;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #fafbff);
  color: #7a8398;
}

.work-order-calendar-empty strong {
  color: #21283b;
  font-size: 0.96rem;
}

.work-order-calendar-week-block {
  display: grid;
  gap: 0;
  border: 1px solid #e7ebf5;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow: 0 10px 28px rgba(48, 58, 86, 0.06);
}

.work-order-calendar-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #edf1f7;
  background: linear-gradient(180deg, rgba(245, 239, 255, 0.78), rgba(252, 250, 255, 0.96));
}

.work-order-calendar-week-copy {
  display: grid;
  gap: 4px;
}

.work-order-calendar-week-copy strong {
  color: #20263a;
  font-size: 0.96rem;
}

.work-order-calendar-week-copy span {
  color: #7a849a;
  font-size: 0.78rem;
  font-weight: 600;
}

.work-order-calendar-week-row {
  display: grid;
  min-width: 0;
  width: 100%;
}

.work-order-calendar-week-row.is-head {
  background: rgba(248, 250, 255, 0.98);
}

.work-order-calendar-week-team-head,
.work-order-calendar-week-day-head {
  padding: 10px 12px;
  border-bottom: 1px solid #edf1f7;
  background: rgba(249, 251, 255, 0.98);
}

.work-order-calendar-week-team-head {
  color: #7e879d;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-order-calendar-week-day-head {
  display: grid;
  gap: 4px;
  border-left: 1px solid #eef2f8;
}

.work-order-calendar-week-day-head.is-today {
  background: linear-gradient(180deg, rgba(244, 238, 255, 0.98), rgba(252, 249, 255, 0.98));
}

.work-order-calendar-week-day-head.is-outside-month {
  opacity: 0.62;
}

.work-order-calendar-team-lead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  border-top: 1px solid #edf1f7;
  background: linear-gradient(180deg, #fbfcff, #f7f9fd);
}

.work-order-calendar-team-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.work-order-calendar-team-name {
  color: #22293d;
  font-size: 0.9rem;
}

.work-order-calendar-team-meta {
  color: #7b849a;
  font-size: 0.76rem;
  font-weight: 600;
}

.work-order-calendar-team-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.work-order-calendar-team-executors {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.work-order-calendar-week-cell {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 148px;
  padding: 10px;
  border-top: 1px solid #edf1f7;
  border-left: 1px solid #eef2f8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 252, 255, 0.98)),
    repeating-linear-gradient(180deg, rgba(226, 230, 240, 0.18) 0, rgba(226, 230, 240, 0.18) 1px, transparent 1px, transparent 42px);
  transition: background 120ms ease, box-shadow 120ms ease;
}

.work-order-calendar-week-cell:hover {
  background: linear-gradient(180deg, #ffffff, #faf8ff);
}

.work-order-calendar-week-cell.is-drop-target {
  background: linear-gradient(180deg, #f6f3ff, #f0ebff);
  box-shadow: inset 0 0 0 1px rgba(170, 136, 255, 0.28);
}

.work-order-calendar-cell-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(198, 206, 226, 0.96);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(246, 248, 253, 0.98), rgba(237, 241, 250, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

.work-order-calendar-cell-group[open] {
  border-color: rgba(166, 157, 219, 0.92);
  background: linear-gradient(180deg, rgba(244, 241, 252, 0.98), rgba(236, 231, 247, 0.98));
}

.work-order-calendar-cell-group.is-drop-target {
  border-color: rgba(119, 90, 207, 0.52);
  background: linear-gradient(180deg, rgba(248, 244, 255, 0.98), rgba(241, 236, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(119, 90, 207, 0.14);
}

.work-order-calendar-cell-group-summary {
  list-style: none;
  cursor: pointer;
}

.work-order-calendar-cell-group-summary.is-draggable,
.work-order-calendar-unscheduled-group-head.is-draggable {
  cursor: grab;
}

.work-order-calendar-cell-group.is-dragging-group,
.work-order-calendar-unscheduled-group.is-dragging-group {
  opacity: 0.58;
  transform: rotate(1.2deg) scale(0.985);
}

.work-order-calendar-cell-group-summary::-webkit-details-marker {
  display: none;
}

.work-order-calendar-cell-group-summary,
.work-order-calendar-cell-group-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.work-order-calendar-cell-group-summary {
  min-height: 64px;
}

.work-order-calendar-cell-group-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-order-calendar-cell-group-avatars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.work-order-calendar-cell-group-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 48px;
}

.work-order-calendar-cell-group-title {
  color: #24304b;
  font-size: 0.76rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.work-order-calendar-cell-group-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.work-order-calendar-cell-group-region {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(224, 231, 246, 0.96);
  color: #5a6686;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-calendar-cell-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(223, 214, 255, 0.96);
  color: #6248c8;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.work-order-calendar-cell-group-body {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding-top: 2px;
}

.work-order-calendar-cell-group-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.work-order-calendar-unscheduled {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #eceaf5;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f9f7ff);
  position: sticky;
  top: 0;
  max-height: calc(100vh - 250px);
  overflow: auto;
}

.work-order-calendar-unscheduled-groups {
  display: grid;
  gap: 12px;
}

.work-order-calendar-unscheduled-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #edeaf6;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
}

.work-order-calendar-unscheduled-group-head {
  padding-bottom: 2px;
  border-bottom: 1px dashed #eceaf4;
}

.work-order-map-layout {
  display: block;
}

.work-order-map-canvas-card,
.work-order-map-selection-card,
.work-order-map-list-card {
  border: 1px solid #e8e9f2;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #fcfcff);
  box-shadow: 0 12px 34px rgba(66, 71, 101, 0.07);
}

.work-order-map-canvas-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  min-height: calc(100vh - 248px);
}

.work-order-map-stage {
  position: relative;
  min-height: 500px;
  height: 500px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #e8eaf4;
  background: #dfe8f4;
}

.work-order-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.work-order-map-canvas .leaflet-container {
  width: 100%;
  height: 100%;
  font: inherit;
  background: #dfe8f4;
}

.work-order-map-empty-overlay {
  position: absolute;
  inset: 0;
  z-index: 550;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(246, 249, 255, 0.88);
  color: #526078;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.leaflet-work-order-popup {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.work-order-map-popup-shell .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 44px rgba(31, 38, 56, 0.18);
}

.work-order-map-popup-shell .leaflet-popup-content {
  margin: 0;
  width: 326px !important;
}

.work-order-map-popup-shell .leaflet-popup-tip-container {
  display: none;
}

.work-order-map-popup-card {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.work-order-map-popup-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.work-order-map-popup-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #79829a;
  line-height: 1.35;
}

.work-order-map-popup-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.work-order-map-popup-icon-button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #e3e7f0;
  background: #ffffff;
  color: #495472;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(73, 84, 114, 0.08);
}

.work-order-map-popup-icon-button:hover {
  color: #1f2638;
  border-color: rgba(109, 84, 255, 0.26);
}

.work-order-map-popup-icon-button svg {
  width: 14px;
  height: 14px;
}

.work-order-map-popup-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #20263a;
  line-height: 1.15;
}

.work-order-map-popup-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-map-popup-detail {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e8edf6;
  background: linear-gradient(180deg, #ffffff, #fafcff);
}

.work-order-map-popup-detail.is-full {
  grid-column: 1 / -1;
}

.work-order-map-popup-detail-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #818aa0;
}

.work-order-map-popup-detail-value {
  min-width: 0;
  font-size: 0.86rem;
  color: #43506a;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.work-order-map-popup-meta {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.work-order-map-popup-status {
  display: grid;
  gap: 4px;
  min-width: 148px;
}

.work-order-map-popup-priority .badge {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.work-order-map-popup-status-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #818aa0;
}

.work-order-map-popup-status-select {
  min-width: 148px;
  min-height: 32px;
  padding-right: 30px;
  font-size: 0.78rem;
  box-shadow: 0 6px 14px rgba(73, 84, 114, 0.07);
}

.work-order-map-popup-executors {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.work-order-map-popup-executors-control {
  min-width: 188px;
}

.work-order-map-popup-executor-picker,
.work-order-map-popup-executor-picker .work-order-calendar-executor-trigger {
  width: 100%;
}

.leaflet-work-order-popup strong {
  color: #1f2638;
  font-size: 0.92rem;
}

.leaflet-work-order-popup span {
  color: #6e7890;
  font-size: 0.8rem;
  line-height: 1.35;
}

.work-order-map-pin-icon {
  background: transparent;
  border: 0;
}

.work-order-map-pin {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pin-fill) 88%, #ffffff), var(--pin-fill));
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--pin-stroke) 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--pin-stroke) 28%, transparent);
  transform: rotate(-45deg);
}

.work-order-map-pin.is-selected {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pin-fill) 82%, #ffffff), var(--pin-stroke));
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--pin-stroke) 40%, transparent),
    0 0 0 4px color-mix(in srgb, var(--pin-fill) 26%, transparent);
}

.work-order-map-pin-core {
  position: absolute;
  inset: 6px;
  display: block;
  border-radius: 999px;
  background: #ffffff;
}

.work-order-map-cluster-icon {
  background: transparent;
  border: 0;
}

.work-order-map-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cluster-fill) 84%, #ffffff), var(--cluster-fill));
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--cluster-stroke) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--cluster-stroke) 24%, transparent);
  color: #223044;
}

.work-order-map-cluster strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.work-order-map-grid,
.work-order-map-markers {
  position: absolute;
  inset: 0;
}

.work-order-map-grid {
  background-image:
    linear-gradient(rgba(155, 170, 205, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 170, 205, 0.12) 1px, transparent 1px);
  background-size: 62px 62px;
}

.work-order-map-surface {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.78;
}

.work-order-map-surface-a {
  inset: 20% auto auto 10%;
  width: 58%;
  height: 42%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(231, 236, 255, 0.78));
  transform: rotate(-8deg);
}

.work-order-map-surface-b {
  inset: 50% auto auto 42%;
  width: 36%;
  height: 22%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(220, 240, 232, 0.82));
  transform: rotate(9deg);
}

.work-order-map-surface-c {
  inset: 42% auto auto 14%;
  width: 16%;
  height: 12%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(223, 232, 255, 0.78));
  transform: rotate(18deg);
}

.work-order-map-city {
  position: absolute;
  z-index: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: #7180a0;
}

.work-order-map-city-zagreb {
  top: 34%;
  left: 52%;
}

.work-order-map-city-rijeka {
  top: 36%;
  left: 30%;
}

.work-order-map-city-split {
  top: 71%;
  left: 39%;
}

.work-order-map-city-osijek {
  top: 28%;
  left: 77%;
}

.work-order-map-marker {
  position: absolute;
  z-index: 3;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  padding: 0;
}

.work-order-map-marker-pulse,
.work-order-map-marker-pin {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}

.work-order-map-marker-pulse {
  width: 28px;
  height: 28px;
  background: rgba(214, 66, 136, 0.16);
  animation: map-marker-pulse 1.8s ease-out infinite;
}

.work-order-map-marker-pin {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, #f04ea8, #cb327d);
  color: #ffffff;
  font-size: 0.54rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(188, 45, 118, 0.28);
}

.work-order-map-marker.is-selected .work-order-map-marker-pin {
  width: 22px;
  height: 22px;
  background: linear-gradient(180deg, #3d72ff, #6d54ff);
  box-shadow: 0 10px 22px rgba(80, 95, 255, 0.28);
}

.work-order-map-empty {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: #626c85;
  font-size: 0.92rem;
}

.work-order-map-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.work-order-map-selection-card,
.work-order-map-list-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.work-order-map-selection-head {
  display: grid;
  gap: 2px;
}

.work-order-map-selection {
  display: grid;
  gap: 12px;
}

.work-order-map-selection-empty {
  margin: 0;
  color: #7f879c;
  font-size: 0.92rem;
}

.work-order-map-selection-top,
.work-order-map-selection-actions,
.work-order-map-selection-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.work-order-map-selection-company {
  font-size: 1rem;
  color: #1d2438;
}

.work-order-map-selection-location,
.work-order-map-selection-coordinates {
  margin: 0;
  color: #6f7892;
  font-size: 0.88rem;
}

.work-order-map-selection-stat {
  min-width: 112px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #ececf5;
  background: #fafbff;
  display: grid;
  gap: 4px;
}

.work-order-map-selection-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a92a8;
}

.work-order-map-selection-stat-value {
  color: #1f2538;
  font-size: 0.88rem;
}

.work-order-map-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}

.work-order-map-list-item {
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #ececf5;
  background: #ffffff;
  text-align: left;
}

.work-order-map-list-item.is-selected {
  border-color: rgba(102, 88, 231, 0.28);
  background: linear-gradient(180deg, #fcfaff, #f6f2ff);
}

.work-order-map-list-item strong {
  color: #20263a;
  font-size: 0.9rem;
}

.work-order-map-list-item span {
  color: #74809b;
  font-size: 0.82rem;
}

.work-order-map-list-meta {
  font-family: "Consolas", "SFMono-Regular", monospace;
}

@keyframes map-marker-pulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

.work-orders-groups {
  display: grid;
  gap: 16px;
  padding: 14px;
  min-width: 0;
}

.work-group {
  border-radius: 18px;
  border: 1px solid #eeedf5;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(57, 61, 91, 0.04);
}

.work-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}

.work-group-lead {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.work-group-fold {
  color: #8d93a8;
  font-size: 0.9rem;
}

.work-group-status-badge {
  font-size: 0.84rem;
}

.work-group-count {
  color: #70758a;
  font-size: 0.92rem;
  font-weight: 700;
}

.work-group-add-inline,
.work-group-add-row {
  border: 0;
  background: transparent;
  color: #7a8096;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 12px;
}

.work-group-add-inline {
  padding: 8px 10px;
}

.work-order-template-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(190, 208, 232, 0.8);
  background:
    radial-gradient(circle at top left, rgba(220, 235, 255, 0.72), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  box-shadow: 0 10px 24px rgba(48, 67, 110, 0.06);
}

.work-order-template-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-order-template-copy h3 {
  margin: 0;
  color: #1f293f;
  font-size: 0.98rem;
}

.work-order-template-copy span {
  color: #64718a;
  font-size: 0.78rem;
  line-height: 1.35;
}

.work-order-template-select-field {
  display: grid;
  gap: 5px;
  max-width: 420px;
  margin-top: 6px;
}

.work-order-template-select-field span {
  color: #52617a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-template-select-field select {
  min-height: 36px;
  border: 1px solid rgba(190, 208, 232, 0.9);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #17233b;
  font-weight: 700;
  padding: 0 36px 0 12px;
  box-shadow: 0 8px 18px rgba(54, 74, 112, 0.08);
}

.work-order-template-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-template-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.work-order-template-action.is-danger {
  color: #b4233d;
  border-color: rgba(244, 114, 182, 0.38);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 241, 246, 0.92));
}

.work-order-template-action.is-danger:hover,
.work-order-template-action.is-danger:focus-visible {
  border-color: rgba(225, 29, 72, 0.52);
  color: #9f1239;
  background: linear-gradient(180deg, #fff7fb, #ffe8f1);
}

.work-order-template-action svg {
  width: 15px;
  height: 15px;
  display: block;
}

.work-order-template-modal-meta {
  display: block;
  margin-top: 4px;
  color: #64718a;
  font-size: 0.82rem;
  font-weight: 650;
}

.work-order-template-modal-body {
  overflow: hidden;
}

.work-order-template-backdrop.is-modal-open {
  z-index: 12998 !important;
}

.work-order-template-panel.is-modal-open {
  z-index: 12999 !important;
}

.work-order-template-modal-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.work-order-template-admin-card {
  align-content: start;
}

.work-order-template-placeholder-card {
  grid-column: 1 / -1;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.work-order-template-kind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(103, 83, 230, 0.22);
  background: rgba(243, 240, 255, 0.88);
  color: #5b38f3;
  font-size: 0.7rem;
  font-weight: 850;
}

.work-order-template-kind-badge.is-handover {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(236, 253, 245, 0.9);
  color: #0f766e;
}

.work-order-template-card-copy {
  margin: 0;
  color: #4f5d76;
  font-size: 0.82rem;
  line-height: 1.45;
}

.work-order-template-card-actions {
  padding-top: 2px;
}

.work-order-template-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(215, 225, 244, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.work-order-template-tabs .workspace-view-chip {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  box-shadow: none;
}

.work-order-template-placeholder-list {
  max-height: min(46vh, 420px);
}

.work-order-template-download-placeholders {
  justify-self: start;
}

body.is-work-order-template-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .work-order-template-modal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-template-card-actions,
  .work-order-template-tabs {
    width: 100%;
  }

  .work-order-template-tabs .workspace-view-chip {
    flex: 1;
  }
}

.work-group-columns,
.work-item-row {
  display: grid;
  column-gap: 14px;
  grid-template-columns: var(--work-order-list-grid-template,
      48px
      minmax(132px, 0.62fr)
      minmax(220px, 1.06fr)
      minmax(220px, 1.02fr)
      minmax(195px, 0.9fr)
      minmax(255px, 1.2fr)
      minmax(220px, 0.95fr)
      94px);
  width: 100%;
  min-width: var(--work-order-list-min-width, 100%);
}

.work-group-columns.is-collapsed,
.work-item-row.is-collapsed {
  grid-template-columns: var(--work-order-list-grid-template,
      48px
      minmax(156px, 0.82fr)
      minmax(240px, 1.1fr)
      minmax(250px, 1.08fr)
      minmax(220px, 0.92fr)
      94px);
  min-width: var(--work-order-list-min-width, 100%);
}

.work-group-columns.is-expanded,
.work-item-row.is-expanded {
  grid-template-columns: var(--work-order-list-grid-template,
      48px
      minmax(132px, 0.62fr)
      minmax(220px, 1.06fr)
      minmax(220px, 1.02fr)
      minmax(195px, 0.9fr)
      minmax(255px, 1.2fr)
      minmax(220px, 0.95fr)
      94px);
  min-width: var(--work-order-list-min-width, 100%);
}

.work-group-columns {
  min-height: 46px;
  align-items: center;
  padding: 6px 14px 10px;
  margin-bottom: 2px;
  color: #7f8498;
  font-size: 0.72rem;
  border-bottom: 1px solid rgba(231, 88, 201, 0.16);
}

.work-group-column {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.work-order-column-resize-handle {
  position: absolute;
  top: 50%;
  right: -11px;
  width: 16px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(111, 124, 148, 0.44);
  cursor: col-resize;
  opacity: 0;
  transform: translateY(-50%);
  transition:
    opacity 140ms ease,
    color 140ms ease,
    background 140ms ease;
  z-index: 2;
}

.work-order-column-resize-handle::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 7px;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 4px 0 0 rgba(111, 124, 148, 0.16);
}

.work-order-column-resize-handle:hover,
.work-order-column-resize-handle:focus-visible {
  opacity: 1;
  color: rgba(65, 96, 178, 0.72);
  background: rgba(233, 240, 255, 0.76);
}

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

.work-group-column-select {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  text-align: center;
}

.work-item-select-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 100%;
}

.work-group-column-select .work-group-column-title,
.work-group-column-select .work-group-column-subtitle {
  opacity: 0.45;
  transition: opacity 140ms ease;
}

.work-orders-scroll-shell:hover .work-group-column-select .work-group-column-title,
.work-orders-scroll-shell:hover .work-group-column-select .work-group-column-subtitle,
.work-orders-scroll-shell.is-selection-active .work-group-column-select .work-group-column-title,
.work-orders-scroll-shell.is-selection-active .work-group-column-select .work-group-column-subtitle {
  opacity: 1;
}

.work-group-column-title {
  color: #b346c8;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 100%;
  text-shadow: 0 0 0.01px currentColor;
}

.work-group-column-ratio {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.work-group-column-ratio span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.work-group-column-ratio span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.work-group-column-ratio .is-field {
  background: rgba(20, 184, 166, 0.11);
  color: #0f766e;
}

.work-group-column-ratio .is-paper {
  background: rgba(86, 64, 214, 0.1);
  color: #4f37c7;
}

.work-group-column-subtitle {
  color: #9096aa;
  font-size: 0.72rem;
  line-height: 1.35;
  width: 100%;
  text-align: center;
}

.work-group-body {
  display: grid;
  gap: 8px;
  padding: 6px 8px 10px;
  background: linear-gradient(180deg, rgba(247, 250, 255, 0.48), rgba(255, 255, 255, 0.2));
}

.work-item-card {
  overflow: hidden;
  border: 1px solid rgba(188, 205, 226, 0.68);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 8px 18px rgba(47, 68, 108, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-item-card.is-clickable .work-item-row {
  cursor: pointer;
}

.work-item-row {
  align-items: start;
  padding: 10px 14px;
  background:
    linear-gradient(90deg, rgba(55, 139, 232, 0.06), transparent 28%),
    rgba(255, 255, 255, 0.96);
}

.work-item-row.is-collapsed {
  align-items: center;
  padding: 8px 14px;
}

.work-item-row.is-collapsed .work-item-cell,
.work-item-row.is-collapsed .work-item-cell-group,
.work-item-row.is-collapsed .work-item-basic-stack {
  gap: 4px;
}

.work-item-row.is-collapsed .work-item-value-primary {
  font-size: 0.88rem;
  line-height: 1.24;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.work-item-row.is-collapsed .work-item-value-secondary {
  font-size: 0.74rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.work-item-row.is-collapsed .work-item-basic-value.is-work-order-number {
  font-size: 0.94rem;
}

.work-item-row.is-collapsed .work-item-executors-cell {
  align-content: center;
}

.work-item-card:hover .work-item-row,
.work-item-card.is-expanded .work-item-row {
  background:
    linear-gradient(90deg, rgba(55, 139, 232, 0.1), rgba(236, 246, 255, 0.42) 32%, rgba(255, 255, 255, 0.98));
}

.work-item-card.is-clickable:hover .work-item-row {
  box-shadow: inset 0 0 0 1px #eceeff;
}

.work-item-card.is-document-drag-over {
  border-color: rgba(37, 99, 235, 0.72);
  box-shadow:
    0 16px 36px rgba(37, 99, 235, 0.16),
    inset 0 0 0 1px rgba(37, 99, 235, 0.34);
}

.work-item-card.is-document-drag-over .work-item-row {
  position: relative;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(239, 246, 255, 0.92) 36%, rgba(255, 255, 255, 0.98));
}

.work-item-card.is-document-drag-over .work-item-row::after {
  content: "Pusti dokumente ovdje";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px dashed rgba(37, 99, 235, 0.58);
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.work-group-flat {
  overflow: hidden;
}

.work-item-cell {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.work-item-cell strong {
  color: #252a3c;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.28;
}

.work-item-cell span {
  color: #7a8095;
  font-size: 0.78rem;
  line-height: 1.35;
}

.work-item-cell-group {
  display: grid;
  gap: 7px;
}

.work-order-row-select {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe3ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  cursor: pointer;
  opacity: 0;
  transform: translateY(2px) scale(0.92);
  pointer-events: none;
  transition: opacity 140ms ease, transform 160ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.work-order-row-select.master {
  width: 34px;
  height: 34px;
}

.work-orders-scroll-shell:hover .work-group-column-select .work-order-row-select.master,
.work-orders-scroll-shell.is-selection-active .work-group-column-select .work-order-row-select.master,
.work-item-card:hover .work-order-row-select,
.work-item-card:focus-within .work-order-row-select,
.work-item-card.is-selected .work-order-row-select {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.work-order-row-select input {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.work-item-select-cell {
  padding-top: 0;
  padding-bottom: 0;
}

.work-item-card.is-selected .work-item-row {
  background: linear-gradient(180deg, rgba(250, 247, 255, 0.98), rgba(245, 248, 255, 0.96));
  box-shadow: inset 0 0 0 1px rgba(208, 196, 255, 0.7);
}

@media (hover: none) {
  .work-order-row-select,
  .work-orders-scroll-shell .work-group-column-select .work-order-row-select.master {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .work-group-column-select .work-group-column-title,
  .work-group-column-select .work-group-column-subtitle {
    opacity: 1;
  }
}

.work-item-basic-stack {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.work-item-number-line {
  min-width: 0;
  display: flex;
  align-items: center;
}

.work-item-basic-field {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.work-item-basic-label {
  color: #8f96aa;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-item-basic-value {
  color: #2b3142;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.32;
  word-break: break-word;
}

.work-item-basic-field.is-primary-number {
  gap: 2px;
}

.work-item-basic-value.is-overdue {
  color: #b34b58;
}

.work-item-basic-value.is-work-order-number {
  color: #1b2233;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.work-item-basic-field.is-date-field {
  gap: 2px;
}

.work-item-basic-value.is-subtle-date {
  color: #8e95a7;
  font-size: 0.72rem;
  font-weight: 500;
}

.work-item-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.work-item-meta-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #9ba4b8;
  flex: 0 0 auto;
}

.work-item-meta-icon.is-execution {
  color: #2f9f75;
}

.work-item-meta-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.work-item-meta-value {
  color: #8e95a7;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

.work-item-meta-value.is-overdue {
  color: #b34b58;
}

.work-item-value-stack {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.work-item-value-primary {
  color: #252a3c;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.28;
  word-break: break-word;
}

.work-item-value-secondary {
  color: #6d7489;
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-word;
}

.work-item-value-tertiary {
  color: #8a91a6;
  font-size: 0.75rem;
  line-height: 1.32;
  word-break: break-word;
}

.work-item-value-tertiary.is-department {
  color: #4d5670;
  font-weight: 600;
}

.work-item-value-tertiary.is-service-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.work-item-detail-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-item-status-badge {
  width: fit-content;
}

.work-item-number-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f2940;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.work-item-number-button:hover {
  color: #5b4bf1;
}

.work-item-number-button[aria-expanded="true"] {
  color: #5b4bf1;
}

.work-item-status-row {
  display: grid;
  gap: 0;
  max-width: 136px;
}

.work-item-status-select,
.work-item-status-trigger {
  width: 100%;
  min-height: 30px;
  padding: 0 28px 0 10px;
  border-radius: 999px;
  border: 1px solid #e1e6f0;
  appearance: none;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, transparent 50%, #7e869b 50%),
    linear-gradient(135deg, #7e869b 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #43506c;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-align: left;
  position: relative;
  z-index: 2;
}

.work-item-status-trigger {
  display: inline-flex;
  align-items: center;
  background-origin: border-box;
}

.work-item-status-dropdown {
  position: relative;
}

.work-item-status-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 6;
  min-width: 180px;
  display: none;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #e3e8f2;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(34, 42, 62, 0.14);
}

.work-item-status-menu-portal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 320;
  display: grid;
}

.work-item-status-dropdown.is-open .work-item-status-menu {
  display: grid;
}

.work-item-status-option {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f7f9fc;
  color: #44506a;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: left;
}

.work-item-status-dropdown.is-pending .work-item-status-trigger {
  opacity: 0.78;
}

.work-item-status-select[data-status="otvoreni-rn"],
.work-item-status-trigger[data-status="otvoreni-rn"],
.work-item-status-option[data-status="otvoreni-rn"] {
  color: #5a6373;
  background-color: #eef1f4;
  border-color: #dde2e8;
}

.work-item-status-select[data-status="gotov-rn"],
.work-item-status-trigger[data-status="gotov-rn"],
.work-item-status-option[data-status="gotov-rn"] {
  color: #2b7848;
  background-color: #dff5e6;
  border-color: #cbe6d5;
}

.work-item-status-select[data-status="ovjeren-rn"],
.work-item-status-trigger[data-status="ovjeren-rn"],
.work-item-status-option[data-status="ovjeren-rn"] {
  color: #6d4d00;
  background-color: #e7c760;
  border-color: #d7b54a;
}

.work-item-status-select[data-status="fakturiran-rn"],
.work-item-status-trigger[data-status="fakturiran-rn"],
.work-item-status-option[data-status="fakturiran-rn"] {
  color: #245b37;
  background-color: #bfe1ca;
  border-color: #aaccb6;
}

.work-item-status-select[data-status="storno-rn"],
.work-item-status-trigger[data-status="storno-rn"],
.work-item-status-option[data-status="storno-rn"] {
  color: #48515d;
  background-color: #d8dde4;
  border-color: #c8ced7;
}

.work-item-status-trigger[data-status="draft"],
.work-item-status-option[data-status="draft"] {
  color: #4f5d78;
  background-color: rgba(208, 215, 230, 0.62);
  border-color: rgba(160, 171, 195, 0.74);
}

.work-item-status-trigger[data-status="sent"],
.work-item-status-option[data-status="sent"] {
  color: #235e92;
  background-color: rgba(198, 225, 255, 0.72);
  border-color: rgba(127, 174, 220, 0.78);
}

.work-item-status-trigger[data-status="accepted"],
.work-item-status-option[data-status="accepted"] {
  color: #236846;
  background-color: rgba(201, 239, 216, 0.78);
  border-color: rgba(132, 199, 157, 0.8);
}

.work-item-status-trigger[data-status="rejected"],
.work-item-status-option[data-status="rejected"] {
  color: #9e3d3d;
  background-color: rgba(255, 222, 222, 0.82);
  border-color: rgba(225, 163, 163, 0.8);
}

.work-item-status-select:disabled,
.work-item-status-trigger:disabled {
  cursor: default;
  opacity: 0.78;
}

.work-item-inline-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-item-inline-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f4f6fb;
  border: 1px solid #e4e8f1;
  color: #5d667c;
  font-size: 0.73rem;
  font-weight: 600;
}

.work-item-inline-pills-compact .work-item-inline-pill {
  min-height: 20px;
  padding: 0 8px;
  font-size: 0.7rem;
}

.work-item-location-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.work-item-contract-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(77, 120, 206, 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(231, 240, 255, 0.84));
  color: #435b8e;
  font-size: 0.71rem;
  font-weight: 800;
  line-height: 1;
}

.work-item-billing-cell {
  align-content: center;
  gap: 5px;
}

.work-item-finance-cell {
  align-content: center;
  gap: 5px;
}

.work-item-finance-status {
  width: fit-content;
  max-width: 100%;
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.96);
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-item-finance-status[data-state="paid"],
.work-item-finance-status[data-state="invoiced"] {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(220, 252, 231, 0.72);
  color: #15803d;
}

.work-item-finance-status[data-state="pending-invoice"] {
  border-color: rgba(251, 146, 60, 0.24);
  background: rgba(255, 237, 213, 0.82);
  color: #c2410c;
}

.work-item-finance-status[data-state="cancelled"] {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(241, 245, 249, 0.86);
  color: #64748b;
}

.work-item-compact-info {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
}

.work-item-compact-info-label {
  color: #8b93a7;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.work-item-compact-info-value {
  color: #2d3448;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-item-compact-info.is-amount .work-item-compact-info-value {
  color: #20593f;
}

.work-order-row-context-menu {
  position: fixed;
  z-index: 520;
  width: min(440px, calc(100vw - 24px));
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(188, 205, 226, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 22px 46px rgba(31, 46, 78, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-order-row-context-head {
  display: grid;
  gap: 3px;
}

.work-order-row-context-head strong {
  color: #1f2d45;
  font-size: 0.95rem;
  font-weight: 850;
}

.work-order-row-context-head span {
  color: #65738d;
  font-size: 0.78rem;
  font-weight: 650;
}

.work-order-row-context-grid {
  display: grid;
  gap: 9px;
}

.work-order-row-context-field {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.work-order-row-context-field.has-date-picker {
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: end;
}

.work-order-row-context-field.has-date-picker > span {
  grid-column: 1 / -1;
}

.work-order-row-context-field span,
.work-order-row-context-check span {
  color: #6d7890;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-row-context-field input {
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(157, 178, 214, 0.74);
  border-radius: 13px;
  padding: 8px 11px;
  background: rgba(248, 251, 255, 0.96);
  color: #1f2433;
  font-weight: 700;
}

.work-order-row-context-field input:focus {
  outline: none;
  border-color: rgba(47, 117, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(47, 117, 255, 0.12);
}

.work-order-row-context-date-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(157, 178, 214, 0.74);
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #eef6ff);
  color: #1d5ea8;
  box-shadow: 0 8px 18px rgba(61, 91, 145, 0.08);
}

.work-order-row-context-date-button svg {
  width: 16px;
  height: 16px;
}

.work-order-row-context-native-date {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.work-order-row-context-inspectors {
  padding-top: 2px;
}

.work-order-row-inspector-picker {
  width: 100%;
}

.work-order-row-inspector-trigger {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 13px;
  border: 1px solid rgba(157, 178, 214, 0.62);
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
  color: #1f2d45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.work-order-row-inspector-trigger:hover,
.work-order-row-inspector-picker.is-open .work-order-row-inspector-trigger {
  border-color: rgba(47, 117, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(47, 117, 255, 0.1);
}

.work-order-row-inspector-stack {
  max-width: 82px;
  min-width: 0;
}

.work-order-row-inspector-avatar {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 0 0 1px rgba(69, 100, 209, 0.2);
}

.work-order-row-inspector-trigger-label {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #20314f !important;
  font-weight: 850;
}

.work-order-row-inspector-menu-portal {
  width: min(520px, calc(100vw - 24px));
  max-width: min(520px, calc(100vw - 24px));
  min-width: min(420px, calc(100vw - 24px)) !important;
  z-index: 10100;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(185, 202, 226, 0.72);
  box-shadow: 0 24px 56px rgba(31, 43, 71, 0.22);
}

.work-order-row-inspector-menu-portal .work-order-calendar-executor-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: #1f2b47;
}

.work-order-row-inspector-menu-portal .work-order-calendar-executor-option.is-selected {
  border-color: rgba(49, 116, 209, 0.32);
  background: rgba(47, 117, 255, 0.12);
}

.work-order-row-context-check {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(157, 178, 214, 0.52);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.94), rgba(255, 255, 255, 0.96));
}

.work-order-row-context-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.work-order-row-context-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.work-item-priority-tags-cell {
  position: relative;
  align-content: center;
}

.work-item-priority-tags-cell.has-inline-editor {
  cursor: default;
}

.work-order-inline-priority-editor {
  position: absolute;
  inset: auto 8px 8px 8px;
  z-index: 20;
  padding: 5px;
  border: 1px solid rgba(157, 178, 214, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 16px 36px rgba(31, 46, 78, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-order-inline-priority-editor,
.work-order-inline-priority-editor select,
.work-order-inline-field-editor,
.work-order-inline-field-editor input,
.work-order-inline-field-editor button {
  font-family: inherit;
}

.work-order-inline-priority-editor select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(185, 202, 226, 0.86);
  border-radius: 11px;
  padding: 0 10px;
  background: linear-gradient(180deg, #ffffff, #f6faff);
  color: #1f2b47;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.work-order-inline-priority-editor.is-saving {
  opacity: 0.72;
  pointer-events: none;
}

.work-item-cell.has-inline-field-editor {
  position: relative;
  cursor: text;
}

.work-item-cell.has-inline-field-editor:hover {
  box-shadow: inset 0 0 0 1px rgba(85, 126, 205, 0.16);
  border-radius: 10px;
}

.work-order-inline-field-editor {
  position: fixed;
  z-index: 680;
  width: min(360px, calc(100vw - 24px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(178, 196, 224, 0.84);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 22px 48px rgba(31, 46, 78, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-order-inline-field-head {
  display: grid;
  gap: 2px;
}

.work-order-inline-field-head strong {
  color: #17233b;
  font-size: 0.92rem;
  font-weight: 850;
}

.work-order-inline-field-head span {
  color: #6f7b92;
  font-size: 0.75rem;
  font-weight: 650;
}

.work-order-inline-field-grid {
  display: grid;
  gap: 8px;
}

.work-order-inline-field-control {
  display: grid;
  gap: 5px;
}

.work-order-inline-field-control span {
  color: #65728b;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-order-inline-field-control input {
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(157, 178, 214, 0.74);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(248, 251, 255, 0.98);
  color: #20283b;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}

.work-order-inline-field-control input:focus {
  outline: none;
  border-color: rgba(47, 117, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(47, 117, 255, 0.12);
}

.work-order-inline-field-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.work-item-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.work-item-tag-pill,
.work-item-priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}

.work-item-tag-pill {
  background: var(--work-order-tag-soft-bg, #f7d7db);
  border-color: var(--work-order-tag-soft-border, #efc3c9);
  color: var(--work-order-tag-soft-color, #7c4050);
}

.work-item-tag-pill.is-muted {
  background: #f1f4f9;
  border-color: #dfe6f0;
  color: #6f778c;
}

.work-item-priority-pill {
  background: #ffffff;
  border-color: #e1e6ef;
  color: #6a7388;
}

.work-item-priority-icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.work-item-priority-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.work-item-priority-pill[data-priority="urgent"] {
  color: #c64545;
}

.work-item-priority-pill[data-priority="high"] {
  color: #dd8b22;
}

.work-item-priority-pill[data-priority="normal"] {
  color: #4c63d5;
}

.work-item-priority-pill[data-priority="niski-prioritet"],
.work-item-priority-pill[data-priority="bez-prioriteta"] {
  color: #6c758b;
}

.work-item-department-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef1f7;
  border: 1px solid #e1e7f0;
  color: #44506a;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-item-service-line {
  color: #2b3244;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

.work-item-service-note {
  color: #7b8398;
  font-size: 0.76rem;
  line-height: 1.35;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.work-item-executors-cell {
  align-content: start;
}

.work-item-actions-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  align-self: center;
}

.work-item-action-button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(109, 133, 189, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  color: #244f9d;
  box-shadow: 0 10px 20px rgba(38, 74, 145, 0.12);
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    background 140ms ease,
    opacity 140ms ease;
}

.work-item-action-button svg {
  width: 17px;
  height: 17px;
  display: block;
}

.work-item-action-button.is-rn-pdf {
  color: #174ea6;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, #eaf3ff, #ffffff 48%, #dcecff);
}

.work-item-action-button.is-verified {
  color: #8a5c00;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, #fff6d9, #ffffff 52%, #f2f8e9);
}

.work-item-action-button.is-verified.has-document {
  color: #1f7a4c;
  border-color: rgba(58, 161, 105, 0.36);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, #e6f8ef, #ffffff 52%, #ddf6e8);
}

.work-item-action-button.is-soft {
  opacity: 0.74;
}

.work-item-action-button:hover,
.work-item-action-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(44, 92, 196, 0.52);
  color: #173f8c;
  box-shadow: 0 14px 26px rgba(38, 74, 145, 0.18);
}

.work-item-action-button.is-loading {
  opacity: 0.72;
  cursor: wait;
}

.work-item-download-button,
.work-item-document-button {
  display: inline-flex;
  position: relative;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(91, 125, 209, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  color: #2452a7;
  box-shadow: 0 8px 18px rgba(43, 92, 181, 0.12);
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease,
    background 120ms ease;
}

.work-item-document-button {
  color: #385267;
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

.work-item-document-button svg {
  width: 16px;
  height: 16px;
  display: block;
}

.work-item-download-button::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.work-item-download-button::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.work-item-download-button:hover,
.work-item-download-button:focus-visible,
.work-item-document-button:hover,
.work-item-document-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(44, 92, 196, 0.52);
  background: linear-gradient(180deg, #f8fbff, #e3efff);
  color: #173f8c;
  box-shadow: 0 12px 24px rgba(43, 92, 181, 0.18);
}

.work-item-download-button svg {
  display: none;
}

.work-executor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-executor-avatar {
  width: 36px;
  height: 36px;
  font-size: 0.74rem;
}

.work-executor-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-transform: uppercase;
}

.work-executor-empty {
  color: #98a0b3;
  font-size: 1rem;
  line-height: 36px;
}

.work-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
}

.work-item-action-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.75rem;
}

.work-item-detail-panel {
  padding: 0 14px 12px;
  background: #fcfcff;
}

.work-item-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.work-item-detail-block {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px dashed #e7ebf3;
}

.work-item-detail-label {
  color: #7b8397;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-item-detail-value {
  color: #2a3043;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.work-item-detail-value.is-log {
  font-family: "Consolas", "SFMono-Regular", "Liberation Mono", monospace;
  font-size: 0.76rem;
}

.card-button-light {
  background: #ffffff;
  border-color: #e7e7ef;
  box-shadow: none;
}

@media (max-width: 1220px) {
  .app-frame,
  .app-frame.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .app-rail {
    position: static;
    min-height: auto;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
  }

  .app-rail-nav {
    width: auto;
    grid-auto-flow: column;
  }

  .app-sidebar {
    position: static;
    min-height: auto;
  }

  .app-frame.is-sidebar-collapsed .app-sidebar {
    padding: 14px;
    border: 1px solid rgba(198, 204, 223, 0.55);
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }

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

  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    order: -1;
  }

  .auth-card {
    max-width: none;
  }

  .auth-showcase h1 {
    max-width: 12ch;
  }

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

  .hero {
    flex-direction: column;
  }

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

  .summary-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .dashboard-block,
  .dashboard-block-wide {
    grid-column: span 1;
  }

  .form-grid-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .workspace-list-head,
  .workspace-list-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-view-chips {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .work-orders-scroll-shell {
    max-height: none;
  }

  .auth-window-body,
  .auth-trust-row,
  .form-grid,
  .form-grid-wide,
  .form-grid-work-order-essentials,
  .form-grid-client-identity,
  .form-grid-client-location,
  .form-grid-client-contact,
  .form-grid-service-main,
  .form-grid-service-training,
  .form-grid-service-meta,
  .form-grid-notes,
  .filter-row,
  .contact-grid,
  .form-grid-text {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid-work-order-essentials > .field,
  .form-grid-client-identity > .field,
  .form-grid-client-location > .field,
  .form-grid-client-contact > .field,
  .form-grid-service-main > .field,
  .form-grid-service-meta > .field,
  .work-order-executors-field {
    grid-column: auto;
  }

  .work-order-editor-form,
  .work-order-editor-shell {
    grid-template-columns: 1fr;
  }

  .dashboard-overview-head {
    flex-direction: column;
  }

  .dashboard-overview-copy {
    max-width: none;
    text-align: left;
  }

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

  .work-order-editor-hero {
    grid-template-columns: 1fr;
  }

  .work-order-editor-facts {
    display: grid;
    grid-template-columns: 1fr;
  }

  .todo-layout {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .todo-list {
    max-height: none;
  }

  .todo-comments-list {
    max-height: none;
  }
}

@media (max-width: 720px) {
  .auth-screen {
    padding: 14px;
  }

  .auth-layout {
    min-height: auto;
  }

  .auth-showcase-shell,
  .auth-card {
    padding: 22px;
  }

  .auth-brand-row {
    gap: 10px;
  }

  .auth-brand-mark {
    width: 48px;
    height: 48px;
  }

  .auth-showcase h1 {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
    max-width: none;
  }

  .app-shell {
    padding: 12px;
  }

  .app-frame {
    padding: 18px;
    border-radius: 22px;
    min-height: calc(100vh - 24px);
  }

  .app-rail {
    padding: 10px;
  }

  .app-sidebar {
    padding: 18px;
  }

  .summary-grid,
  .auth-window-body,
  .auth-trust-row,
  .form-grid,
  .form-grid-wide,
  .form-grid-work-order-essentials,
  .form-grid-client-identity,
  .form-grid-client-location,
  .form-grid-client-contact,
  .form-grid-service-main,
  .form-grid-service-training,
  .form-grid-service-meta,
  .form-grid-notes,
  .filter-row,
  .contact-grid,
  .form-grid-text {
    grid-template-columns: 1fr;
  }

  .form-grid-work-order-essentials > .field,
  .form-grid-client-identity > .field,
  .form-grid-client-location > .field,
  .form-grid-client-contact > .field,
  .form-grid-service-main > .field,
  .form-grid-service-meta > .field,
  .work-order-executors-field {
    grid-column: auto;
  }

  .section-heading,
  .form-actions,
  .table-actions {
    align-items: stretch;
  }

  .workspace-view-chip {
    white-space: nowrap;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .sidebar-nav {
    grid-template-columns: 1fr;
  }

  .user-menu-panel {
    left: 0;
    right: 0;
    min-width: 0;
  }

  .notifications-panel {
    left: auto;
    right: 0;
    width: min(100%, 420px);
  }

  .topbar-shortcut-panel {
    width: min(100%, 360px);
  }

  .topbar-help-panel {
    width: min(100%, 420px);
  }

  .weather-panel {
    left: auto;
    right: 0;
    width: min(100%, 640px);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }

  .weather-hero {
    grid-template-columns: 1fr;
  }

  .weather-temp-block {
    min-width: 0;
    justify-items: start;
  }

  .weather-city-toolbar,
  .weather-city-form {
    align-items: stretch;
    flex-direction: column;
  }

  .weather-forecast-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .weather-forecast-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .avatar-upload-row,
  .signup-approval-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .work-order-editor-panel.is-modal-open {
    top: 10px;
    width: calc(100vw - 12px);
    height: calc(100vh - 20px);
  }

  .work-order-editor-fixed-head {
    padding: 18px 16px 0;
  }

  .work-order-editor-body {
    padding: 14px 16px 22px;
  }

  .work-order-editor-form {
    grid-template-columns: 1fr;
  }

  .work-order-editor-topbar {
    margin: 0;
    padding: 0;
    align-items: start;
    flex-direction: column;
  }

  .work-order-editor-hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .work-order-editor-hero-copy h2 {
    font-size: 1.2rem;
  }

  .work-order-document-card,
  .work-order-document-card.is-compact {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .work-order-document-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .dashboard-signal-grid,
  .dashboard-detail-grid,
  .todo-summary-grid,
  .reminders-summary-grid,
  .notifications-summary-grid {
    grid-template-columns: 1fr;
  }

  .notifications-filter-row {
    grid-template-columns: 1fr;
  }

  .notification-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-row-actions {
    grid-column: 2;
    justify-content: flex-end;
  }

  .todo-detail-fields {
    grid-template-columns: 1fr;
  }

  .dashboard-upcoming-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@keyframes auth-float {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(18px, 22px, 0) scale(1.08);
  }
}

.auth-screen {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, #5fc8f7 0%, #76a8ff 34%, #9c63ff 68%, #ef45d7 100%);
}

.auth-screen::before,
.auth-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.auth-screen::before {
  top: -12%;
  left: -10%;
  width: min(42vw, 520px);
  height: min(58vw, 700px);
  transform: rotate(18deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border-radius: 38px;
  opacity: 0.5;
  filter: blur(2px);
}

.auth-screen::after {
  right: -10%;
  bottom: -8%;
  width: min(34vw, 380px);
  height: min(34vw, 380px);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 72%);
  filter: blur(10px);
}

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(28px, 3vw, 40px);
}

.auth-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.auth-logo-mark {
  position: relative;
  width: 48px;
  height: 48px;
}

.auth-logo-mark span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, #86a2ff 0%, #6d65ff 48%, #6b3cff 100%);
  box-shadow: 0 10px 26px rgba(103, 77, 255, 0.28);
}

.auth-logo-mark span:first-child {
  inset: 2px 18px 18px 2px;
  transform: rotate(-28deg);
}

.auth-logo-mark span:last-child {
  inset: 18px 2px 2px 18px;
  transform: rotate(-28deg);
}

.auth-logo-word {
  color: #ffffff;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.auth-nav {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-center {
  display: grid;
  place-items: center;
  padding: clamp(32px, 9vh, 120px) 16px 140px;
}

.auth-form-shell {
  width: min(100%, 460px);
  display: grid;
  justify-items: stretch;
  gap: 18px;
  text-align: center;
}

.auth-kicker {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-form-shell h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(3.1rem, 5vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.auth-subtitle {
  margin: -4px 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form .field {
  gap: 0;
}

.auth-form .field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-form input {
  min-height: 70px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(24, 24, 30, 0.92);
  color: #ffffff;
  padding: 18px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.24);
}

.auth-form input::placeholder {
  color: rgba(255, 255, 255, 0.44);
}

.auth-form input:focus {
  outline: none;
  border-color: rgba(132, 93, 255, 0.72);
  background: rgba(28, 28, 36, 0.96);
  box-shadow:
    0 0 0 4px rgba(118, 78, 255, 0.14),
    0 18px 42px rgba(44, 20, 120, 0.22);
}

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap input {
  padding-right: 98px;
}

.auth-inline-button {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 78px;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}

.auth-submit-button {
  min-height: 72px;
  border-radius: 18px;
  background: linear-gradient(90deg, #6d3cff 0%, #8a42ff 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 22px 60px rgba(92, 51, 255, 0.32);
}

.auth-submit-button:disabled,
.auth-inline-button:disabled {
  opacity: 0.72;
  cursor: wait;
}

.auth-meta {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.98rem;
}

.auth-screen .form-error {
  min-height: 1.4rem;
  margin: 0;
  color: #ff7b8f;
  text-align: center;
}

@media (max-width: 900px) {
  .auth-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-nav {
    gap: 18px;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .auth-shell {
    padding: 20px 18px;
  }

  .auth-center {
    padding: 48px 0 120px;
  }

  .auth-logo-word {
    font-size: 1.8rem;
  }

  .auth-nav {
    gap: 14px;
    font-size: 0.76rem;
  }

  .auth-form-shell h1 {
    font-size: clamp(2.7rem, 12vw, 3.5rem);
  }

  .auth-form input,
  .auth-submit-button {
    min-height: 64px;
  }
}

.table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  background: linear-gradient(180deg, #fbfcfa, #f5f8f4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 40px rgba(28, 44, 26, 0.06);
}

.table-wrap-work-orders {
  max-height: calc(100vh - 320px);
}

.data-table {
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px;
  background: rgba(245, 248, 244, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dde5db;
  color: #6e766a;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}

.data-table tbody td {
  padding: 16px;
  border-bottom: 1px solid #e7ece5;
  background: rgba(255, 255, 255, 0.92);
}

.data-table tbody tr:hover td {
  background: #fcfdfb;
}

.list-row.is-clickable td {
  cursor: pointer;
}

.list-row.is-clickable:focus-visible td {
  background: rgba(204, 71, 230, 0.08);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table th:last-child,
.data-table td:last-child {
  text-align: right;
}

.list-row td {
  vertical-align: top;
}

.list-row td:first-child {
  min-width: 240px;
}

.list-row td:nth-child(4),
.list-row td:nth-child(5) {
  min-width: 190px;
}

.companies-table th:last-child,
.companies-table td:last-child {
  text-align: left;
}

.companies-filters-block {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(186, 199, 188, 0.58);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(251, 253, 250, 0.98), rgba(245, 249, 244, 0.98));
}

.companies-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 210px) minmax(170px, 210px);
  gap: 10px;
  align-items: end;
}

.companies-table {
  width: auto;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.companies-table tbody td {
  border-top: 1px solid rgba(190, 202, 226, 0.76);
  border-bottom: 1px solid rgba(190, 202, 226, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.98));
  box-shadow: 0 10px 28px rgba(47, 58, 89, 0.05);
}

.companies-table tbody tr + tr td {
  border-top-width: 1px;
}

.companies-table tbody td:first-child {
  border-left: 1px solid rgba(190, 202, 226, 0.76);
  border-radius: 18px 0 0 18px;
}

.companies-table tbody td:last-child {
  border-right: 1px solid rgba(190, 202, 226, 0.76);
  border-radius: 0 18px 18px 0;
}

.companies-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(190, 202, 226, 0.76);
}

.companies-column-header {
  position: sticky;
}

.companies-column-resize-handle {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  z-index: 4;
}

.companies-column-resize-handle::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(112, 137, 116, 0.24);
  transition: background 0.18s ease;
}

.companies-column-header:hover .companies-column-resize-handle::before,
.companies-column-resize-handle:hover::before {
  background: rgba(66, 102, 212, 0.5);
}

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

body.is-resizing-companies-column .companies-column-resize-handle::before {
  background: rgba(66, 102, 212, 0.68);
}

.company-list-row[role="button"] {
  cursor: pointer;
}

.company-list-row[role="button"]:hover td,
.company-list-row[role="button"]:focus-visible td {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.99));
  box-shadow: 0 14px 32px rgba(67, 78, 124, 0.08);
}

.companies-table tbody tr.company-list-row.is-expanded td {
  border-bottom-color: rgba(124, 90, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 255, 0.96));
}

.companies-table tbody tr.company-list-row.is-expanded td:first-child {
  border-radius: 14px 0 0 0;
}

.companies-table tbody tr.company-list-row.is-expanded td:last-child {
  border-radius: 0 14px 0 0;
}

.companies-table tbody tr.company-list-expand-row td {
  padding: 0 12px 14px;
  border-right: 1px solid rgba(157, 176, 217, 0.72);
  border-bottom: 1px solid rgba(157, 176, 217, 0.72);
  border-left: 1px solid rgba(157, 176, 217, 0.72);
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(180deg, rgba(250, 247, 255, 0.96), rgba(247, 250, 255, 0.98));
}

.company-list-expansion {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(124, 90, 255, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(124, 90, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 16px 38px rgba(47, 58, 89, 0.06);
}

.company-list-expansion-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.company-list-expansion-heading-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(219, 234, 254, 0.96), rgba(238, 242, 255, 0.92));
  color: #2563eb;
}

.company-list-expansion-heading-icon svg {
  width: 17px;
  height: 17px;
}

.company-list-expansion-heading-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.company-list-expansion-heading-copy strong {
  color: #111b3b;
  font-size: 0.92rem;
  font-weight: 950;
}

.company-list-expansion-heading-copy span {
  color: #66738c;
  font-size: 0.75rem;
  font-weight: 760;
}

.company-list-expansion-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.company-list-expansion-actions .card-button {
  min-height: 34px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 850;
}

.company-list-cell {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.company-list-expand-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(124, 90, 255, 0.2);
  border-radius: 12px;
  background: rgba(247, 250, 255, 0.96);
  color: #4f46e5;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.company-list-expand-toggle svg {
  width: 16px;
  height: 16px;
}

.company-list-expand-toggle:hover {
  border-color: rgba(124, 90, 255, 0.4);
  box-shadow: 0 10px 18px rgba(74, 91, 145, 0.1);
  transform: translateY(-1px);
}

.company-list-logo {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  flex-basis: 52px;
  font-size: 0.84rem;
}

.company-list-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.company-list-structure-meta {
  gap: 5px;
}

.company-contracts-cell {
  gap: 8px;
}

.company-contracts-list {
  display: grid;
  gap: 8px;
}

.company-contracts-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.company-contracts-item + .company-contracts-item {
  padding-top: 8px;
  border-top: 1px solid rgba(210, 218, 234, 0.82);
}

.company-activity-cell {
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(173, 191, 179, 0.5);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(252, 254, 252, 0.98), rgba(246, 250, 246, 0.96));
}

.company-status-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.company-status-label {
  color: #6f7a6d;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.company-status-value {
  font-size: 0.86rem;
  font-weight: 700;
}

.company-status-value.is-active {
  color: #2f9a4e;
}

.company-status-value.is-inactive {
  color: #ca4f4f;
}

.company-status-value.is-neutral {
  color: #707b6d;
}

.companies-list-panel {
  width: 100%;
  padding: clamp(14px, 1.2vw, 22px);
  border-color: rgba(196, 207, 232, 0.82);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(124, 90, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.98));
}

.companies-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 14px;
}

.companies-kpi-row .company-list-kpi-card {
  min-height: 118px;
  padding: 15px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(124, 90, 255, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9));
}

.companies-kpi-row .company-list-kpi-card.is-emphasis {
  border-color: rgba(16, 185, 129, 0.42);
  background:
    radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 42px rgba(16, 185, 129, 0.11);
}

.companies-kpi-row .company-list-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
}

.companies-kpi-row .company-list-kpi-value {
  font-size: 1.22rem;
  letter-spacing: 0;
}

.companies-kpi-row .company-list-kpi-card.is-emphasis .company-list-kpi-value {
  font-size: 1.42rem;
}

.companies-table-wrap {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(197, 208, 231, 0.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(244, 247, 253, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 46px rgba(47, 58, 89, 0.08);
}

.companies-table {
  width: 100%;
  min-width: 1240px;
  border-collapse: separate;
  border-spacing: 0 12px;
  table-layout: fixed;
}

.companies-table thead th {
  position: relative;
  padding: 10px 18px 8px;
  border-bottom: 0;
  background: transparent;
  color: #66738c;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.companies-table tbody td {
  padding: 14px 16px;
  border-top: 1px solid rgba(188, 201, 228, 0.92);
  border-bottom: 1px solid rgba(188, 201, 228, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98));
  box-shadow: 0 16px 38px rgba(50, 65, 102, 0.06);
  vertical-align: middle;
}

.companies-table tbody td:first-child {
  border-left: 1px solid rgba(188, 201, 228, 0.92);
  border-radius: 22px 0 0 22px;
}

.companies-table tbody td:last-child {
  border-right: 1px solid rgba(188, 201, 228, 0.92);
  border-radius: 0 22px 22px 0;
}

.company-list-row[role="button"]:hover td,
.company-list-row[role="button"]:focus-visible td {
  border-color: rgba(124, 90, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 249, 255, 1));
  box-shadow: 0 20px 44px rgba(74, 80, 132, 0.11);
}

.companies-table tbody tr.company-list-row.is-expanded td {
  border-color: rgba(124, 90, 255, 0.44);
  background:
    radial-gradient(circle at top left, rgba(124, 90, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 247, 255, 0.98));
}

.company-list-company-cell {
  min-width: 300px;
}

.company-list-cell {
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.company-list-expand-toggle {
  width: 38px;
  height: 38px;
  border-color: rgba(124, 90, 255, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.92), transparent 32%),
    linear-gradient(145deg, rgba(237, 233, 254, 0.98), rgba(239, 246, 255, 0.94));
  color: #6d28d9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 10px 22px rgba(76, 61, 155, 0.1);
}

.company-list-expand-toggle svg {
  transition: transform 0.18s ease;
}

.company-list-expand-toggle.is-expanded {
  border-color: rgba(124, 90, 255, 0.42);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.9), transparent 32%),
    linear-gradient(145deg, rgba(124, 90, 255, 0.18), rgba(219, 234, 254, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 26px rgba(91, 33, 182, 0.14);
}

.company-list-expand-toggle.is-expanded svg {
  transform: rotate(180deg);
}

.company-list-logo {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(224, 245, 235, 0.98), rgba(235, 242, 255, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(42, 108, 77, 0.12),
    0 12px 24px rgba(31, 93, 66, 0.08);
}

.company-list-copy {
  gap: 6px;
}

.company-list-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.company-list-title-row .list-meta-pill {
  min-height: 22px;
  padding: 4px 8px;
  font-size: 0.68rem;
}

.company-list-title {
  min-width: 0;
  overflow: hidden;
  color: #101b3f;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-list-address,
.company-list-oib {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-list-structure-meta {
  margin-top: 4px;
  gap: 6px;
}

.company-list-info-card {
  display: grid;
  gap: 9px;
  min-height: 122px;
  height: 100%;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid rgba(203, 214, 235, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 255, 0.86));
}

.company-list-contact-card {
  background:
    radial-gradient(circle at top left, rgba(29, 116, 245, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.88));
}

.company-portal-cell {
  background:
    radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(240, 249, 255, 0.88));
}

.company-portal-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.company-portal-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.company-portal-status-pill.is-enabled {
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: rgba(220, 252, 231, 0.82);
  color: #047857;
}

.company-portal-status-pill.is-disabled {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(241, 245, 249, 0.88);
  color: #64748b;
}

.company-portal-user-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.company-portal-user {
  display: grid;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(191, 219, 254, 0.76);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.company-portal-user strong,
.company-portal-user span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-portal-user strong {
  color: #12213f;
  font-size: 0.78rem;
  font-weight: 900;
}

.company-portal-user span,
.company-portal-empty {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
}

.company-portal-more {
  display: inline-flex;
  justify-self: start;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(124, 90, 255, 0.22);
  border-radius: 999px;
  background: rgba(237, 233, 254, 0.72);
  color: #5b21b6;
  font-size: 0.7rem;
  font-weight: 950;
}

.company-list-card-kicker {
  margin-bottom: -2px;
  color: #64748b;
}

.company-list-contact-stack {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.company-list-contact-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(207, 219, 241, 0.76);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.company-list-contact-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(232, 240, 255, 0.98), rgba(238, 250, 255, 0.94));
  color: #3159c8;
  box-shadow: inset 0 0 0 1px rgba(84, 120, 220, 0.12);
}

.company-list-contact-icon svg {
  width: 15px;
  height: 15px;
}

.company-list-contact-line-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.company-list-contact-line-copy small {
  color: #748095;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.company-list-contact-line-copy strong,
.company-list-contact-line-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-list-contact-line-copy strong {
  color: #121d3d;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.25;
}

.company-list-contact-line-copy span {
  color: #69758c;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.company-contracts-cell {
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 242, 0.82));
}

.company-contracts-list {
  gap: 7px;
}

.company-contracts-item {
  padding: 8px 9px;
  border: 1px solid rgba(226, 216, 196, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.company-contracts-item + .company-contracts-item {
  padding-top: 8px;
  border-top: 1px solid rgba(226, 216, 196, 0.82);
}

.company-activity-cell {
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 253, 250, 0.88));
}

.company-structure-cell {
  border-color: rgba(99, 102, 241, 0.22);
  background:
    radial-gradient(circle at top left, rgba(124, 90, 255, 0.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(37, 194, 160, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.9));
}

.company-list-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.company-list-location-object-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.company-list-location-object-grid .company-list-kpi-card {
  min-height: 92px;
  padding: 12px;
}

.company-list-kpi-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 86px;
  padding: 10px;
  border: 1px solid rgba(205, 216, 235, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(49, 67, 105, 0.05);
}

.company-list-kpi-card.is-info {
  border-color: rgba(96, 165, 250, 0.34);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.76));
}

.company-list-kpi-card.is-success {
  border-color: rgba(52, 211, 153, 0.36);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.76));
}

.company-list-kpi-card.is-warning {
  border-color: rgba(251, 191, 36, 0.42);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.78));
}

.company-list-kpi-card.is-accent {
  border-color: rgba(14, 165, 233, 0.32);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.78));
}

.company-list-kpi-card.is-danger {
  border-color: rgba(248, 113, 113, 0.44);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.78));
}

.company-list-kpi-card.is-muted {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.76));
}

.company-list-kpi-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  color: #4f46e5;
  box-shadow: inset 0 0 0 1px rgba(124, 90, 255, 0.13);
}

.company-list-kpi-card.is-success .company-list-kpi-icon {
  color: #069668;
}

.company-list-kpi-card.is-warning .company-list-kpi-icon {
  color: #b77900;
}

.company-list-kpi-card.is-danger .company-list-kpi-icon {
  color: #d43737;
}

.company-list-kpi-card.is-accent .company-list-kpi-icon {
  color: #0284c7;
}

.company-list-kpi-card.is-muted .company-list-kpi-icon {
  color: #64748b;
}

.company-list-kpi-icon svg {
  width: 17px;
  height: 17px;
}

.company-list-kpi-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.company-list-kpi-label {
  color: #69758c;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.company-list-kpi-value {
  color: #111b3b;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.05;
}

.company-list-kpi-detail {
  min-width: 0;
  overflow: hidden;
  color: #6b768b;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-list-kpi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.company-list-kpi-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 7px;
  border: 1px solid rgba(197, 208, 231, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #41516e;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.company-list-kpi-card.is-emphasis .company-list-kpi-meta > span {
  border-color: rgba(52, 211, 153, 0.36);
  background: rgba(255, 255, 255, 0.82);
  color: #047857;
}

.company-status-line {
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(210, 221, 234, 0.82);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.company-status-label {
  color: #667085;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.company-status-value {
  font-size: 0.82rem;
  font-weight: 850;
}

@media (max-width: 980px) {
  .companies-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .companies-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .companies-table {
    min-width: 980px;
  }
}

@media (max-width: 760px) {
  .companies-kpi-row {
    grid-template-columns: 1fr;
  }

  .company-list-cell {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .company-list-logo {
    display: none;
  }
}

.list-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.list-cell-tight {
  gap: 8px;
}

.list-eyebrow {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.list-primary {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
}

.list-secondary {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.list-tertiary {
  color: #8a9387;
  font-size: 0.8rem;
  line-height: 1.4;
}

.list-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.list-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2ed;
  color: #5d655b;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.list-meta-pill.is-success {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.list-meta-pill.is-muted {
  background: #ecefeb;
  color: #6c736c;
}

.list-meta-pill.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.list-meta-pill.is-info {
  background: rgba(226, 238, 255, 0.95);
  border-color: rgba(140, 170, 224, 0.5);
  color: #3863b3;
}

.table-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.table-actions .card-button {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
}

.list-meta-pill.is-accent {
  color: #7e2cf0;
  background: rgba(126, 44, 240, 0.12);
  border-color: rgba(126, 44, 240, 0.22);
}

.helper-copy {
  max-width: 28ch;
  text-align: right;
}

@media (max-width: 980px) {
  .helper-copy {
    text-align: left;
  }
}

.auth-layout-signin {
  width: min(1220px, calc(100vw - 48px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 0.85fr);
  gap: 24px;
}

.auth-login-panel,
.auth-story-panel {
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}

.auth-login-panel {
  display: grid;
  align-content: start;
  gap: 28px;
  padding: clamp(28px, 4vw, 46px);
  background:
    linear-gradient(180deg, rgba(255, 247, 240, 0.2), rgba(255, 247, 240, 0.06)),
    linear-gradient(145deg, rgba(255, 121, 121, 0.22), rgba(255, 164, 136, 0.2) 40%, rgba(164, 121, 255, 0.18));
  backdrop-filter: blur(18px);
}

.auth-logo-compact .auth-logo-word {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.auth-login-copy {
  display: grid;
  gap: 10px;
}

.auth-login-copy h1 {
  margin: 0;
  color: #fff8f5;
  font-size: clamp(2.3rem, 4.1vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  max-width: 12ch;
}

.auth-form-tenant {
  gap: 18px;
}

.auth-form-tenant .field > span {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 10px;
  clip: auto;
  white-space: normal;
  color: rgba(255, 247, 245, 0.92);
  font-size: 0.95rem;
}

.auth-form-tenant input {
  min-height: 68px;
  border-radius: 999px;
  background: rgba(10, 10, 16, 0.92);
}

.auth-signup-note {
  margin-top: -2px;
}

.auth-story-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(88, 92, 255, 0.2), transparent 28%),
    radial-gradient(circle at 12% 86%, rgba(255, 148, 100, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(15, 11, 17, 0.98), rgba(17, 18, 33, 0.98));
}

.auth-story-shell {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 26px;
  padding: clamp(30px, 4vw, 42px);
}

.auth-story-accent {
  display: inline-flex;
  width: fit-content;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 245, 240, 0.82);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-story-panel h2 {
  margin: 0;
  color: #fffaf8;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.05em;
  max-width: 8ch;
}

.auth-story-quote {
  margin: 0;
  color: rgba(245, 239, 255, 0.84);
  font-size: 1.04rem;
  line-height: 1.8;
  max-width: 36ch;
}

.auth-story-author {
  display: grid;
  gap: 6px;
  color: rgba(255, 247, 245, 0.84);
}

.auth-story-author strong {
  font-size: 1.1rem;
}

.auth-story-feature-card {
  margin-top: auto;
  max-width: 360px;
  padding: 22px 24px;
  border-radius: 28px;
  background: rgba(255, 250, 248, 0.94);
  color: #15111c;
}

.auth-story-feature-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.15rem;
  line-height: 1.2;
}

.auth-story-feature-card p {
  margin: 0;
  color: #5a4d64;
  line-height: 1.7;
}

.topbar-context {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.organization-context {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #233047;
  font-size: 0.92rem;
}

.organization-context:empty {
  display: none;
}

.organization-context-link,
.organization-context-current {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.organization-context-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: #65728a;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.organization-context-link:hover {
  color: #263248;
  opacity: 1;
}

.organization-context-current {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(205, 214, 231, 0.9);
  color: #233047;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(121, 131, 177, 0.08);
}

.organization-context-separator {
  color: #a4aec1;
  font-size: 0.8rem;
  font-weight: 700;
}

.management-intro-panel {
  gap: 10px;
}

.management-panel-copy {
  margin: 0 0 16px;
  max-width: 68ch;
}

.organization-editor-backdrop {
  z-index: 180;
}

.organization-editor-panel {
  position: fixed;
  inset: 5vh 5vw;
  z-index: 181;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(28, 40, 72, 0.24);
}

.organization-editor-panel[hidden],
.organization-editor-backdrop[hidden] {
  display: none;
}

.organization-editor-body {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
  overflow: auto;
}

.organization-editor-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(203, 216, 237, 0.9);
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 248, 253, 0.92));
}

.organization-editor-intro strong {
  color: #14213d;
  font-weight: 900;
}

.organization-editor-intro span {
  color: #667492;
  font-size: 0.86rem;
  font-weight: 700;
}

.organization-editor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .organization-editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .organization-editor-panel {
    inset: 12px;
  }

  .organization-editor-grid {
    grid-template-columns: 1fr;
  }
}

.organization-switcher {
  min-width: 240px;
}

.organization-switcher span {
  font-size: 0.82rem;
}

.organization-switcher select {
  min-height: 46px;
}

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

  .auth-story-feature-card {
    margin-top: 12px;
  }
}

.form-success {
  min-height: 1.2rem;
  margin: 0;
  color: #7bdcb5;
}

.form-success.is-error {
  color: #ff7b8f;
}

.auth-minimal-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 28px);
  position: relative;
  z-index: 2;
}

.auth-minimal-card {
  width: min(100%, 420px);
  display: grid;
  gap: 0;
  padding: clamp(34px, 4vw, 42px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px rgba(59, 55, 122, 0.22);
}

.auth-view {
  display: grid;
  align-content: start;
  gap: 24px;
}

.auth-logo-compact {
  justify-content: center;
}

.auth-form-tenant {
  gap: 18px;
}

.auth-form-tenant .field > span {
  display: block;
  margin-bottom: 6px;
  color: #67637b;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.auth-form-tenant input {
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid #d9dbe7;
  border-radius: 0;
  background: transparent;
  color: #211f2e;
  padding: 10px 4px 10px 30px;
  box-shadow: none;
}

.auth-input-shell {
  position: relative;
}

.auth-input-icon {
  position: absolute;
  top: 50%;
  left: 2px;
  display: block;
  margin: 0;
  width: 12px;
  height: 12px;
  line-height: 0;
  font-size: 0;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.auth-input-icon-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='6.5' width='16' height='11' rx='2' stroke='%23b1b0be' stroke-width='1.8'/%3E%3Cpath d='M5.5 8 12 12.5 18.5 8' stroke='%23b1b0be' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.auth-input-icon-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='10' width='14' height='10' rx='2' stroke='%23b1b0be' stroke-width='1.8'/%3E%3Cpath d='M8 10V7.5A4 4 0 0 1 12 4a4 4 0 0 1 4 3.5V10' stroke='%23b1b0be' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.auth-input-shell input {
  padding-left: 28px;
}

.auth-form-tenant input::placeholder {
  color: #a9a7b7;
}

.auth-form-tenant input:focus {
  outline: none;
  border-bottom-color: #cc47e6;
  box-shadow: 0 1px 0 0 #cc47e6;
}

.auth-submit-button {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(90deg, #59d5ec 0%, #8c7cff 48%, #ea42d7 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 18px 36px rgba(189, 69, 232, 0.22);
}

.auth-switch-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  flex-wrap: wrap;
}

.auth-switch-copy {
  color: #8f8aa7;
  font-size: 0.84rem;
}

.auth-switch-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: #7d56ff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  box-shadow: none;
  text-decoration: none;
}

.auth-switch-link:hover {
  transform: none;
  filter: none;
}

.auth-login-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.auth-login-copy h1 {
  margin: 0;
  color: #201d2b;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.auth-login-copy p {
  margin: 0;
  color: #8b879f;
  font-size: 0.95rem;
}

.auth-logo-compact .auth-logo-word {
  color: #201d2b;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(4, 4, 8, 0.62);
  backdrop-filter: blur(8px);
}

.auth-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  display: grid;
  gap: 18px;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(19, 19, 26, 0.98), rgba(11, 11, 16, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.auth-modal-copy h2 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.auth-modal-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

.auth-signup-form {
  gap: 10px;
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4rem;
  line-height: 1;
}

.auth-request-screen::before {
  top: auto;
  bottom: -10%;
  left: auto;
  right: -8%;
  width: min(30vw, 320px);
  height: min(46vw, 540px);
  transform: rotate(-18deg);
}

.auth-request-screen {
  overflow-y: auto;
}

.auth-request-card {
  width: min(100%, 680px);
  gap: 18px;
}

.auth-request-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 16px;
}

.auth-request-form .auth-submit-button {
  margin-top: 4px;
}

.auth-textarea-shell {
  min-height: 72px;
  align-items: stretch;
}

.auth-textarea-shell textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.45;
}

.auth-request-actions {
  display: flex;
  justify-content: center;
}

.auth-screen .form-error {
  min-height: 1.25rem;
  margin: 0;
  color: #d54867;
  text-align: center;
}

.auth-screen .form-success {
  min-height: 1.25rem;
  color: #2a9b74;
  text-align: center;
}

.auth-screen .form-success.is-error {
  color: #d54867;
}

.auth-page .auth-screen::before,
.auth-page .auth-screen::after {
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 720ms ease;
}

.auth-page .auth-minimal-card {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(10px);
}

.auth-page .auth-logo,
.auth-page .auth-login-copy,
.auth-page .auth-form-tenant .field,
.auth-page .auth-submit-button,
.auth-page .auth-switch-row,
.auth-page .auth-screen .form-error,
.auth-page .auth-screen .form-success {
  opacity: 0;
  transform: translateY(14px);
}

.auth-page.is-auth-ready .auth-minimal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
  animation: auth-card-in 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-logo {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 520ms 90ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-login-copy {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 520ms 150ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(1) {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 480ms 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 480ms 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(3) {
  animation: auth-fade-up 480ms 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(4) {
  animation: auth-fade-up 480ms 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(5) {
  animation: auth-fade-up 480ms 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(6) {
  animation: auth-fade-up 480ms 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(7) {
  animation: auth-fade-up 480ms 580ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(8) {
  animation: auth-fade-up 480ms 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(9) {
  animation: auth-fade-up 480ms 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-submit-button {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 520ms 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-switch-row,
.auth-page.is-auth-ready .auth-request-actions {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 520ms 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-request-screen .auth-submit-button {
  animation: auth-fade-up 520ms 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-request-actions {
  animation: auth-fade-up 520ms 840ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-screen .form-error,
.auth-page.is-auth-ready .auth-screen .form-success {
  opacity: 1;
  transform: translateY(0);
  animation: auth-fade-up 420ms 880ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-page.is-auth-ready .auth-screen::before {
  transform: translate3d(-12px, 18px, 0) rotate(14deg) scale(1.03);
}

.auth-page.is-auth-ready .auth-screen::after {
  transform: translate3d(12px, -8px, 0) scale(1.04);
}

.auth-page.is-auth-leaving .auth-minimal-card {
  opacity: 0;
  transform: translateY(-18px) scale(0.975);
  filter: blur(12px);
  transition:
    opacity 240ms ease,
    transform 260ms cubic-bezier(0.4, 0, 1, 1),
    filter 240ms ease;
}

.auth-page.is-auth-leaving .auth-logo,
.auth-page.is-auth-leaving .auth-login-copy,
.auth-page.is-auth-leaving .auth-form-tenant .field,
.auth-page.is-auth-leaving .auth-submit-button,
.auth-page.is-auth-leaving .auth-switch-row,
.auth-page.is-auth-leaving .auth-screen .form-error,
.auth-page.is-auth-leaving .auth-screen .form-success {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 160ms ease,
    transform 220ms ease;
}

.auth-page.is-auth-leaving .auth-screen::before {
  opacity: 0.2;
  transform: translate3d(26px, 0, 0) rotate(24deg) scale(1.08);
}

.auth-page.is-auth-leaving .auth-screen::after {
  opacity: 0.18;
  transform: translate3d(-18px, 0, 0) scale(1.1);
}

@media (max-width: 720px) {
  .auth-minimal-card {
    width: min(100%, 390px);
    padding: 28px 22px;
  }

  .auth-view {
    gap: 20px;
  }

  .auth-modal-panel {
    padding: 22px;
  }

  .auth-request-card {
    width: min(100%, 430px);
  }

  .auth-request-form {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

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

  .work-order-editor-main {
    min-height: 0;
  }

  .work-order-editor-body {
    max-height: none;
  }

  .work-order-activity-panel {
    border-left: 0;
    border-top: 1px solid #edf0f6;
    max-height: 320px;
  }

  .measurement-sheet-panel {
    width: min(100%, calc(100vw - 24px));
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    padding: 18px;
  }

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

  .measurement-sheet-toolbar {
    grid-template-columns: 1fr;
  }

  .measurement-toolbar-secondary {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .measurement-sheet-modal {
    padding: 12px;
  }

  .measurement-sheet-panel {
    width: 100%;
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    padding: 16px;
    border-radius: 22px;
  }

  .measurement-sheet-head {
    flex-direction: column;
  }

  .measurement-sheet-head-actions {
    width: 100%;
    justify-content: stretch;
  }

  .measurement-sheet-head-actions > * {
    flex: 1 1 140px;
  }

  .measurement-sheet-meta {
    grid-template-columns: 1fr;
  }

  .measurement-toolbar-primary,
  .measurement-toolbar-secondary {
    flex-direction: column;
    align-items: stretch;
  }

  .measurement-toolbar-namebox,
  .measurement-toolbar-decimals,
  .measurement-toolbar-format {
    width: 100%;
    flex: 1 1 auto;
  }
}

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

  .reminders-composer-card {
    position: static;
  }

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

  .reminder-editor-panel.is-modal-open {
    top: 10px;
    width: calc(100vw - 14px);
    height: calc(100vh - 14px);
    border-radius: 18px;
  }

  .reminder-card-top,
  .reminder-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .reminder-card-meta,
  .reminder-card-actions {
    justify-content: flex-start;
  }

  .reminder-editor-body {
    padding: 0 10px 10px;
  }
}

@keyframes auth-card-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes auth-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page .auth-screen::before,
  .auth-page .auth-screen::after,
  .auth-page .auth-minimal-card,
  .auth-page .auth-logo,
  .auth-page .auth-login-copy,
  .auth-page .auth-form-tenant .field,
  .auth-page .auth-submit-button,
  .auth-page .auth-switch-row,
  .auth-page .auth-screen .form-error,
  .auth-page .auth-screen .form-success {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.chat-dock {
  position: fixed;
  right: 18px;
  left: auto;
  bottom: 18px;
  z-index: 120;
  display: grid;
  width: auto;
  max-width: calc(100vw - 20px);
  grid-template-columns: minmax(0, auto) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "toast toast"
    "tabs launcher";
  align-items: end;
  justify-content: end;
  gap: 10px;
  pointer-events: none;
}

.chat-toast {
  grid-area: toast;
  justify-self: end;
  width: min(360px, calc(100vw - 40px));
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 184, 255, 0.5);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(90, 169, 255, 0.26), transparent 42%),
    linear-gradient(135deg, rgba(15, 27, 54, 0.98), rgba(34, 91, 172, 0.95));
  color: #ffffff;
  box-shadow:
    0 26px 56px rgba(14, 31, 65, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  pointer-events: auto;
  transition:
    opacity 260ms ease,
    transform 260ms ease,
    filter 260ms ease;
  animation: chatToastEnter 360ms cubic-bezier(0.18, 0.9, 0.2, 1.15);
}

.chat-toast[hidden] {
  display: none;
}

.chat-toast.is-hiding {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  filter: saturate(0.86);
  pointer-events: none;
}

.chat-toast-avatar {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 38px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  position: relative;
}

.chat-toast-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-toast-avatar::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(16, 30, 57, 0.96);
  background: #2fb36f;
}

.chat-toast-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

.chat-toast-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-toast-copy strong,
.chat-toast-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-toast-copy strong {
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

.chat-toast-copy span {
  color: rgba(235, 244, 255, 0.82);
  font-size: 0.78rem;
}

.chat-toast-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

.chat-launcher {
  grid-area: launcher;
  align-self: end;
  pointer-events: auto;
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(175, 198, 238, 0.88);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 243, 255, 0.94));
  box-shadow:
    0 18px 34px rgba(38, 54, 90, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  color: #235dcf;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.chat-launcher:hover {
  transform: translateY(-1px);
  border-color: rgba(91, 138, 223, 0.92);
  box-shadow:
    0 22px 40px rgba(44, 73, 132, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.chat-launcher-copy {
  display: none;
}

.chat-presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #98a4b7;
  box-shadow: 0 0 0 4px rgba(152, 164, 183, 0.12);
  flex: 0 0 10px;
}

.chat-presence-dot[data-presence="online"] {
  background: #2fb36f;
  box-shadow: 0 0 0 4px rgba(47, 179, 111, 0.14);
}

.chat-presence-dot[data-presence="away"] {
  background: #f1b44c;
  box-shadow: 0 0 0 4px rgba(241, 180, 76, 0.15);
}

.chat-presence-dot[data-presence="busy"] {
  background: #e06363;
  box-shadow: 0 0 0 4px rgba(224, 99, 99, 0.14);
}

.chat-presence-dot[data-presence="offline"] {
  background: #98a4b7;
}

.chat-launcher-presence {
  --chat-launcher-accent: rgba(76, 170, 242, 0.38);
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 0 rgba(76, 170, 242, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
  animation: chatLauncherPulse 2600ms ease-in-out infinite;
}

.chat-launcher-presence[data-presence="online"] {
  --chat-launcher-accent: rgba(47, 179, 111, 0.34);
}

.chat-launcher-presence[data-presence="away"] {
  --chat-launcher-accent: rgba(241, 180, 76, 0.34);
}

.chat-launcher-presence[data-presence="busy"] {
  --chat-launcher-accent: rgba(224, 99, 99, 0.34);
}

.chat-launcher-presence[data-presence="offline"] {
  --chat-launcher-accent: rgba(152, 164, 183, 0.28);
}

.chat-launcher-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 4px 10px rgba(61, 103, 198, 0.12));
}

.chat-launcher.has-unread {
  transform: translateY(-1px);
}

.chat-launcher.is-dock-collapsed:not(.has-unread) {
  box-shadow:
    0 20px 36px rgba(41, 74, 141, 0.18),
    0 0 0 5px rgba(63, 127, 234, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.chat-launcher.has-unread .chat-launcher-presence {
  animation: chatLauncherPulseStrong 1180ms ease-in-out infinite;
}

.chat-launcher-unread {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d74388, #8d3bdf);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(141, 59, 223, 0.28);
}

.chat-desktop-tabs {
  --chat-dock-visible-tabs: 3;
  --chat-dock-visible-gaps: 2;
  --chat-dock-tab-width: 206px;
  --chat-dock-tab-gap: 7px;
  grid-area: tabs;
  align-self: end;
  justify-self: end;
  width: auto;
  max-width: calc(100vw - 88px);
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(193, 207, 232, 0.82);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(236, 243, 255, 0.92));
  box-shadow:
    0 22px 44px rgba(42, 47, 74, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  pointer-events: auto;
}

.chat-desktop-tabs[hidden] {
  display: none;
}

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

.chat-desktop-tabs-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-dock-nav,
.chat-dock-toggle {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(190, 204, 230, 0.94);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #5f6f88;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.chat-dock-nav[hidden] {
  display: none;
}

.chat-dock-nav[disabled] {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

.chat-dock-nav:hover:not(:disabled),
.chat-dock-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(84, 128, 222, 0.42);
  color: #2e5fcb;
  box-shadow: 0 12px 22px rgba(47, 85, 158, 0.12);
}

.chat-dock-nav .icon-svg,
.chat-dock-toggle .icon-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.chat-conversation-menu {
  position: fixed;
  z-index: 122;
  width: min(280px, calc(100vw - 24px));
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(206, 180, 225, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 242, 253, 0.98));
  box-shadow:
    0 24px 46px rgba(26, 32, 52, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  pointer-events: auto;
}

.chat-conversation-menu[hidden] {
  display: none;
}

.chat-conversation-menu-body {
  display: grid;
  gap: 5px;
}

.chat-conversation-menu-kicker {
  color: #77839a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat-conversation-menu-title {
  color: #283146;
  font-size: 0.9rem;
  line-height: 1.35;
}

.chat-conversation-menu-copy {
  margin: 0;
  color: #667287;
  font-size: 0.76rem;
  line-height: 1.45;
}

.chat-conversation-menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.chat-conversation-menu-actions .ghost-button,
.chat-conversation-menu-actions .card-button {
  min-height: 30px;
}

.chat-conversation-menu-delete {
  white-space: nowrap;
}

.chat-desktop-tabs-rail {
  min-width: 0;
  display: flex;
  gap: var(--chat-dock-tab-gap);
  width: min(
    calc((var(--chat-dock-tab-width) * var(--chat-dock-visible-tabs)) + (var(--chat-dock-tab-gap) * var(--chat-dock-visible-gaps))),
    calc(100vw - 280px)
  );
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.chat-desktop-tabs-rail::-webkit-scrollbar {
  display: none;
}

.chat-desktop-tab {
  flex: 0 0 var(--chat-dock-tab-width);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 5px;
  padding: 4px 5px 4px 4px;
  border-radius: 18px;
  border: 1px solid rgba(204, 215, 236, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.92));
  box-shadow: 0 10px 22px rgba(44, 63, 112, 0.08);
  scroll-snap-align: end;
  will-change: transform;
}

.chat-desktop-tab.is-active {
  border-color: rgba(48, 118, 229, 0.54);
  background:
    linear-gradient(135deg, rgba(230, 241, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow:
    0 16px 30px rgba(48, 103, 205, 0.16),
    inset 3px 0 0 rgba(48, 118, 229, 0.78);
}

.chat-desktop-tab.is-unread:not(.is-active) {
  border-color: rgba(215, 67, 136, 0.38);
  box-shadow:
    0 16px 28px rgba(215, 67, 136, 0.12),
    inset 3px 0 0 rgba(215, 67, 136, 0.62);
  animation: chatDockTabPulse 1800ms ease-in-out infinite;
}

.chat-desktop-tab-main {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px;
  text-align: left;
  cursor: pointer;
}

.chat-desktop-tab-icon {
  width: 31px;
  height: 31px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 31px;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  background: linear-gradient(135deg, #2a5fd3, #4cc2ee);
}

.chat-desktop-tab-icon.is-group {
  background: linear-gradient(135deg, #d74388, #825cf4);
}

.chat-desktop-tab-icon.is-general {
  background: linear-gradient(135deg, #273246, #64748b);
}

.chat-desktop-tab-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.chat-desktop-tab-copy strong,
.chat-desktop-tab-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-desktop-tab-copy strong {
  color: #243049;
  font-size: 0.8rem;
}

.chat-desktop-tab-copy span {
  color: #77839a;
  font-size: 0.68rem;
}

.chat-desktop-tab-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d74388, #376ff4);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
}

.chat-desktop-tab-close,
.chat-thread-tab-close {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(226, 232, 244, 0.82);
  color: #6b768c;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.chat-desktop-tab-close:hover,
.chat-thread-tab-close:hover {
  background: rgba(255, 226, 232, 0.96);
  color: #b33455;
}

.chat-desktop-new-group {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid rgba(48, 118, 229, 0.38);
  background: linear-gradient(135deg, #2363d5, #4cc2ee);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.7rem;
  cursor: pointer;
  box-shadow: 0 8px 14px rgba(35, 99, 213, 0.16);
}

.chat-panel {
  position: fixed;
  right: 18px;
  bottom: 84px;
  pointer-events: auto;
  width: min(540px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 108px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  contain: layout paint;
  will-change: left, top, transform;
  border-radius: 28px;
  border: 1px solid rgba(195, 180, 229, 0.9);
  background:
    radial-gradient(circle at top right, rgba(55, 135, 255, 0.14), transparent 26%),
    radial-gradient(circle at bottom left, rgba(222, 96, 177, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(251, 252, 255, 0.99), rgba(242, 246, 253, 0.98));
  box-shadow:
    0 34px 72px rgba(29, 35, 58, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.chat-panel[data-mode="hub"] {
  width: min(460px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 108px));
  grid-template-rows: auto auto minmax(0, 1fr);
}

.chat-panel[data-mode="hub"] .chat-panel-layout {
  grid-template-columns: 1fr;
}

.chat-panel[data-mode="hub"] .chat-thread-panel,
.chat-panel[data-mode="hub"] .chat-thread-tabs {
  display: none;
}

.chat-panel[data-mode="conversation"] {
  width: min(540px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 108px));
  grid-template-rows: auto minmax(0, 1fr);
}

.chat-panel[data-mode="conversation"] .chat-panel-tabs,
.chat-panel[data-mode="conversation"] .chat-list-panel,
.chat-panel[data-mode="conversation"] .chat-thread-tabs {
  display: none;
}

.chat-panel[data-mode="conversation"] .chat-panel-layout {
  grid-template-columns: 1fr;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(220, 226, 239, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 246, 255, 0.76));
}

.chat-panel-title {
  display: grid;
  gap: 3px;
}

.chat-panel-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b768c;
}

.chat-panel-title strong {
  font-size: 1rem;
  color: #263146;
}

.chat-panel-title > span:not(.chat-panel-kicker) {
  color: #6d7890;
  font-size: 0.76rem;
}

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

.chat-header-button {
  min-height: 32px;
  padding-inline: 10px;
}

.chat-panel-actions .chat-header-button {
  font-size: 0.78rem;
}

#chat-new-group-button {
  padding-inline: 9px;
  border-radius: 12px;
}

.chat-panel-tabs {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
}

.chat-tab-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 221, 235, 0.92);
  background: rgba(255, 255, 255, 0.82);
  color: #667287;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-tab-button.is-active {
  border-color: rgba(212, 89, 173, 0.34);
  background: linear-gradient(135deg, rgba(233, 73, 150, 0.14), rgba(118, 96, 245, 0.1));
  color: #24324a;
}

.chat-panel-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
}

.chat-list-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px 18px;
  border-right: 1px solid rgba(220, 226, 239, 0.92);
  background: linear-gradient(180deg, rgba(247, 249, 255, 0.96), rgba(240, 243, 251, 0.96));
}

.chat-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(213, 220, 236, 0.96);
  background: rgba(255, 255, 255, 0.9);
}

.chat-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #283145;
  font: inherit;
}

.chat-search-field input:focus {
  outline: none;
}

.chat-search-icon {
  width: 16px;
  height: 16px;
  color: #8b95ab;
  display: inline-flex;
}

.chat-list-caption {
  margin: 0;
  font-size: 0.78rem;
  color: #7a859a;
}

.chat-people-summary {
  display: none;
}

.chat-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(232, 238, 249, 0.95);
  color: #50607a;
  font-size: 0.72rem;
  font-weight: 700;
}

.chat-status-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #98a4b7;
}

.chat-status-pill[data-presence="online"] .chat-status-pill-dot {
  background: #2fb36f;
}

.chat-status-pill[data-presence="away"] .chat-status-pill-dot {
  background: #f1b44c;
}

.chat-status-pill[data-presence="busy"] .chat-status-pill-dot {
  background: #e06363;
}

.chat-status-pill strong {
  color: #233149;
  font-size: 0.73rem;
}

.chat-list-view {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  contain: layout paint;
  padding-right: 4px;
}

.chat-list-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 2px 0;
  color: #6f7d94;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat-list-section-heading strong {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(225, 233, 248, 0.96);
  color: #375177;
  font-size: 0.68rem;
  letter-spacing: 0;
}

.chat-list-card,
.chat-person-card {
  border: 1px solid rgba(214, 221, 235, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  padding: 9px 10px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.chat-list-card:hover,
.chat-person-card:hover {
  transform: translateY(-1px);
  border-color: rgba(197, 154, 224, 0.92);
  box-shadow: 0 14px 26px rgba(54, 62, 94, 0.1);
}

.chat-list-card.is-active,
.chat-person-card.is-active {
  border-color: rgba(214, 89, 173, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 244, 252, 0.95));
  box-shadow: 0 16px 28px rgba(95, 70, 132, 0.12);
}

.chat-list-card.is-unread {
  border-color: rgba(69, 136, 246, 0.45);
  box-shadow:
    0 16px 28px rgba(47, 100, 190, 0.12),
    inset 3px 0 0 rgba(51, 125, 244, 0.72);
}

.chat-list-card.is-docked {
  border-color: rgba(67, 123, 225, 0.34);
}

.chat-person-card[data-presence="online"] {
  border-color: rgba(47, 179, 111, 0.28);
}

.chat-person-card[data-presence="away"] {
  border-color: rgba(241, 180, 76, 0.3);
}

.chat-person-card[data-presence="busy"] {
  border-color: rgba(224, 99, 99, 0.24);
}

.chat-list-card-head,
.chat-person-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chat-participant-avatar,
.chat-person-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #31476e;
  background: linear-gradient(135deg, rgba(116, 162, 255, 0.18), rgba(216, 89, 173, 0.18));
  position: relative;
  overflow: hidden;
  flex: 0 0 30px;
}

.chat-participant-avatar img,
.chat-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-participant-avatar::after,
.chat-person-avatar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.96);
  background: #98a4b7;
}

.chat-participant-avatar[data-presence="online"]::after,
.chat-person-avatar[data-presence="online"]::after {
  background: #2fb36f;
}

.chat-participant-avatar[data-presence="away"]::after,
.chat-person-avatar[data-presence="away"]::after {
  background: #f1b44c;
}

.chat-participant-avatar[data-presence="busy"]::after,
.chat-person-avatar[data-presence="busy"]::after {
  background: #e06363;
}

.chat-list-card-copy,
.chat-person-card-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.chat-list-card-copy strong,
.chat-person-card-copy strong {
  font-size: 0.84rem;
  color: #263147;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-card-copy span,
.chat-person-card-copy span {
  font-size: 0.72rem;
  color: #768196;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-card-preview {
  margin: 0;
  font-size: 0.72rem;
  color: #526077;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.chat-list-card-head .chat-unread-badge {
  margin-left: auto;
  flex: 0 0 auto;
}

.chat-person-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #667287;
}

.chat-person-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #98a4b7;
  flex: 0 0 8px;
}

.chat-person-status[data-presence="online"]::before {
  background: #2fb36f;
}

.chat-person-status[data-presence="away"]::before {
  background: #f1b44c;
}

.chat-person-status[data-presence="busy"]::before {
  background: #e06363;
}

.chat-list-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-list-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(235, 239, 248, 0.9);
  color: #63708b;
  font-size: 0.72rem;
  font-weight: 600;
}

.chat-unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d74388, #8d3bdf);
  color: #ffffff;
  font-size: 0.69rem;
  font-weight: 700;
}

.chat-thread-panel {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
}

.chat-thread-empty,
.chat-thread-view {
  min-width: 0;
  min-height: 0;
}

.chat-thread-empty {
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 28px;
  text-align: center;
  color: #69768f;
}

.chat-thread-empty strong {
  font-size: 1rem;
  color: #283247;
}

.chat-thread-empty p {
  max-width: 300px;
  margin: 0;
  line-height: 1.55;
}

.chat-thread-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.chat-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(220, 226, 239, 0.9);
}

.chat-thread-head-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chat-thread-head-copy strong {
  font-size: 0.95rem;
  color: #283146;
}

.chat-thread-head-copy span {
  font-size: 0.76rem;
  color: #768196;
}

.chat-thread-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-thread-head-actions .chat-header-button {
  min-height: 30px;
  padding-inline: 10px;
  font-size: 0.74rem;
}

.chat-thread-messages {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px;
  contain: layout paint;
  background:
    radial-gradient(circle at bottom right, rgba(216, 89, 173, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 248, 253, 0.92));
}

.chat-message-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-message-row.is-own {
  justify-content: flex-end;
}

.chat-message-bubble {
  max-width: min(78%, 520px);
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(216, 222, 236, 0.92);
  box-shadow: 0 10px 20px rgba(52, 60, 90, 0.06);
}

.chat-message-row.is-own .chat-message-bubble {
  background: linear-gradient(135deg, rgba(221, 79, 160, 0.16), rgba(117, 109, 245, 0.14));
  border-color: rgba(210, 136, 198, 0.36);
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  color: #7c879b;
}

.chat-message-meta strong {
  color: #2d3650;
}

.chat-message-body {
  margin: 0;
  color: #33415b;
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message-form {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(220, 226, 239, 0.92);
  background: rgba(251, 252, 255, 0.96);
}

.chat-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 2px;
  margin: -2px 0 2px;
  border-radius: 18px;
  border: 1px solid rgba(216, 224, 239, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94));
  box-shadow: 0 14px 28px rgba(60, 83, 128, 0.08);
}

.chat-emoji-picker[hidden] {
  display: none;
}

.chat-emoji-option {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(212, 220, 236, 0.92);
  background: rgba(255, 255, 255, 0.94);
  color: #2d3750;
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.chat-emoji-option:hover {
  transform: translateY(-1px);
  border-color: rgba(86, 132, 226, 0.4);
  box-shadow: 0 10px 18px rgba(75, 103, 163, 0.12);
}

.chat-emoji-option-symbol {
  font-size: 1rem;
  line-height: 1;
}

.chat-emoji-option-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #60708c;
}

.chat-message-form textarea {
  width: 100%;
  min-height: 78px;
  resize: none;
  border-radius: 18px;
  border: 1px solid rgba(212, 220, 235, 0.96);
  background: rgba(255, 255, 255, 0.96);
  padding: 12px 14px;
  font: inherit;
  color: #2a344b;
}

.chat-message-form textarea:focus {
  outline: 0;
  border-color: rgba(212, 89, 173, 0.45);
  box-shadow: 0 0 0 4px rgba(212, 89, 173, 0.08);
}

.chat-message-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-message-actions-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.chat-emoji-button {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  font-size: 1.1rem;
  line-height: 1;
}

.chat-thread-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(217, 225, 241, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(242, 247, 255, 0.96));
}

.chat-thread-tabs[hidden] {
  display: none;
}

.chat-thread-tabs-label {
  padding-inline: 2px;
  color: #7a859a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat-thread-tabs-rail {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.chat-thread-tab {
  flex: 0 0 auto;
  width: min(220px, 46vw);
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  border-radius: 18px;
  border: 1px solid rgba(209, 219, 239, 0.96);
  background: rgba(255, 255, 255, 0.82);
  color: #283146;
  box-shadow: 0 8px 18px rgba(46, 59, 96, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.chat-thread-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(85, 143, 246, 0.46);
  box-shadow: 0 14px 24px rgba(46, 72, 124, 0.1);
}

.chat-thread-tab.is-active {
  border-color: rgba(51, 125, 244, 0.5);
  background:
    linear-gradient(135deg, rgba(235, 244, 255, 0.98), rgba(250, 246, 255, 0.96));
  box-shadow:
    0 16px 28px rgba(53, 104, 196, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.chat-thread-tab.is-unread:not(.is-active) {
  border-color: rgba(39, 122, 244, 0.48);
  background: linear-gradient(135deg, rgba(235, 244, 255, 0.98), rgba(255, 255, 255, 0.9));
  animation: chatDockTabPulse 1800ms ease-in-out infinite;
}

.chat-thread-tab-main {
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  text-align: left;
  cursor: pointer;
}

.chat-thread-tab-icon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #2a5fd3, #4cc2ee);
}

.chat-thread-tab-icon.is-group {
  background: linear-gradient(135deg, #d74388, #825cf4);
}

.chat-thread-tab-icon.is-general {
  background: linear-gradient(135deg, #273246, #64748b);
}

.chat-thread-tab-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.chat-thread-tab-copy strong,
.chat-thread-tab-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-tab-copy strong {
  color: #273146;
  font-size: 0.8rem;
}

.chat-thread-tab-copy span {
  color: #78839a;
  font-size: 0.7rem;
}

.chat-thread-tab-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #d74388, #376ff4);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
}

.chat-error {
  margin: 0;
  min-height: 0;
}

.chat-composer {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.chat-composer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 29, 46, 0.24);
  backdrop-filter: blur(3px);
}

.chat-composer-card {
  position: absolute;
  top: 20px;
  right: 20px;
  width: min(420px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(200, 186, 229, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 243, 253, 0.98));
  box-shadow: 0 24px 48px rgba(30, 36, 58, 0.2);
}

.chat-composer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.chat-composer-head strong {
  display: block;
  margin-top: 4px;
  font-size: 1rem;
  color: #253047;
}

.chat-composer-head p {
  max-width: 300px;
  margin: 6px 0 0;
  color: #748098;
  font-size: 0.78rem;
  line-height: 1.45;
}

.chat-composer-people {
  display: grid;
  gap: 10px;
}

.chat-composer-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #6b768c;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-composer-users {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-height: min(360px, calc(100vh - 320px));
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
  content-visibility: auto;
  contain: layout paint;
}

.chat-composer-users-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(235, 244, 255, 0.92);
  color: #64718a;
  font-size: 0.76rem;
  font-weight: 700;
}

.chat-composer-users-summary strong {
  color: #2158c6;
  font-size: 0.92rem;
}

.chat-composer-user {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(214, 221, 235, 0.94);
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.chat-composer-user:hover {
  transform: translateY(-1px);
  border-color: rgba(74, 130, 240, 0.42);
  box-shadow: 0 12px 22px rgba(54, 82, 142, 0.09);
}

.chat-composer-user.is-selected {
  border-color: rgba(51, 125, 244, 0.46);
  background: linear-gradient(135deg, rgba(235, 244, 255, 0.96), rgba(255, 255, 255, 0.94));
  box-shadow: inset 3px 0 0 rgba(51, 125, 244, 0.72);
}

.chat-composer-user input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chat-composer-check {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(188, 199, 220, 0.95);
  background: rgba(255, 255, 255, 0.96);
  color: transparent;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.chat-composer-user.is-selected .chat-composer-check {
  border-color: rgba(37, 117, 224, 0.55);
  background: linear-gradient(135deg, #2b72e8, #42c6ee);
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(43, 114, 232, 0.2);
}

.chat-composer-user-copy {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: 2px;
}

.chat-composer-user-copy strong {
  font-size: 0.85rem;
  color: #283146;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-composer-user-copy span {
  font-size: 0.74rem;
  color: #7a859a;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.chat-composer-actions {
  display: grid;
  gap: 10px;
}

.chat-empty-inline {
  padding: 16px;
  border-radius: 18px;
  border: 1px dashed rgba(202, 210, 226, 0.96);
  background: rgba(255, 255, 255, 0.74);
  color: #7d879a;
  font-size: 0.8rem;
  text-align: center;
}

@keyframes chatToastEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chatLauncherPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(76, 170, 242, 0.08),
      0 8px 18px rgba(46, 86, 166, 0.1),
      0 0 0 3px var(--chat-launcher-accent);
  }

  50% {
    transform: scale(1.04);
    box-shadow:
      0 0 0 8px rgba(76, 170, 242, 0.08),
      0 14px 26px rgba(46, 86, 166, 0.16),
      0 0 0 5px var(--chat-launcher-accent);
  }
}

@keyframes chatLauncherPulseStrong {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(214, 67, 136, 0.16),
      0 14px 28px rgba(51, 107, 215, 0.22),
      0 0 0 4px rgba(214, 67, 136, 0.22);
  }

  50% {
    transform: scale(1.11);
    box-shadow:
      0 0 0 12px rgba(214, 67, 136, 0.08),
      0 20px 34px rgba(51, 107, 215, 0.28),
      0 0 0 7px rgba(78, 144, 242, 0.3);
  }
}

@keyframes chatDockTabPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 16px 28px rgba(215, 67, 136, 0.12),
      inset 3px 0 0 rgba(215, 67, 136, 0.62);
  }

  50% {
    transform: translateY(-1px);
    box-shadow:
      0 20px 34px rgba(55, 111, 244, 0.18),
      inset 3px 0 0 rgba(55, 111, 244, 0.74);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-toast,
  .chat-launcher-presence,
  .chat-launcher,
  .chat-desktop-tab.is-unread:not(.is-active),
  .chat-thread-tab.is-unread:not(.is-active) {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1180px) {
  .chat-dock {
    max-width: calc(100vw - 20px);
  }

  .chat-desktop-tabs {
    --chat-dock-tab-width: 188px;
    max-width: calc(100vw - 84px);
  }

  .chat-panel,
  .chat-panel[data-mode="hub"],
  .chat-panel[data-mode="conversation"] {
    width: min(460px, calc(100vw - 20px));
  }
}

@media (max-width: 920px) {
  .chat-dock {
    max-width: calc(100vw - 18px);
  }

  .chat-desktop-tabs {
    --chat-dock-visible-tabs: 2;
    --chat-dock-visible-gaps: 1;
    --chat-dock-tab-width: 182px;
    max-width: calc(100vw - 80px);
  }

  .chat-panel,
  .chat-panel[data-mode="hub"],
  .chat-panel[data-mode="conversation"] {
    width: min(420px, calc(100vw - 18px));
    height: min(74vh, 640px);
  }
}

@media (max-width: 640px) {
  .chat-dock {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: 10px;
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "toast"
      "tabs"
      "launcher";
  }

  .chat-launcher {
    justify-self: end;
    width: 50px;
    min-width: 50px;
    height: 50px;
  }

  .chat-desktop-tabs {
    --chat-dock-visible-tabs: 1;
    --chat-dock-visible-gaps: 0;
    --chat-dock-tab-width: min(220px, calc(100vw - 178px));
    width: min(100%, calc(100vw - 74px));
    max-width: none;
  }

  .chat-desktop-tab {
    flex-basis: var(--chat-dock-tab-width);
  }

  .chat-toast,
  .chat-panel {
    grid-column: 1;
  }

  .chat-panel,
  .chat-panel[data-mode="hub"],
  .chat-panel[data-mode="conversation"] {
    left: 10px;
    right: 10px;
    bottom: 58px;
    top: auto;
    width: min(100%, calc(100vw - 20px));
    height: min(70vh, calc(100vh - 108px));
  }
}

@media (max-width: 1280px) {
  .work-order-map-layout {
    grid-template-columns: 1fr;
  }

  .work-order-map-list {
    max-height: 260px;
  }
}

@media (max-width: 980px) {
  .work-order-filter-row {
    grid-template-columns: 1fr;
  }

  .work-order-filter-actions {
    justify-content: flex-start;
  }

  .work-order-filter-builder {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 40px));
  }

  .work-order-filter-rule {
    grid-template-columns: 1fr;
  }

  .work-order-calendar-toolbar,
  .work-order-map-toolbar {
    align-items: stretch;
  }

  .work-order-calendar-toolbar-side {
    justify-content: space-between;
  }

  .work-order-calendar-content {
    grid-template-columns: 1fr;
  }

  .work-order-calendar-unscheduled {
    position: static;
    max-height: none;
    order: 2;
  }

  .work-order-calendar-grid-shell {
    min-height: 280px;
    height: var(--work-order-calendar-shell-height, min(64vh, calc(100dvh - 260px)));
    max-height: var(--work-order-calendar-shell-height, min(64vh, calc(100dvh - 260px)));
  }

  .work-order-calendar-grid-row,
  .work-order-calendar-week-row {
    min-width: 0;
    width: 100%;
  }

  .work-order-map-stage {
    min-height: 400px;
    height: 400px;
  }
}

@media (max-width: 720px) {
  .work-order-filter-builder-head,
  .work-order-filter-group-head,
  .work-order-filter-footer {
    align-items: stretch;
  }

  .work-order-filter-builder-controls {
    margin-left: 0;
  }

  .work-order-filter-builder-actions,
  .work-order-filter-group-actions,
  .work-order-filter-footer-actions {
    justify-content: stretch;
  }

  .work-order-filter-builder-actions > *,
  .work-order-filter-group-actions > *,
  .work-order-filter-footer-actions > * {
    width: 100%;
  }
}

.vehicles-module {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

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

.vehicles-stat-card {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 22px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 246, 0.96));
  display: grid;
  gap: 6px;
}

.vehicles-stat-card.is-available {
  background: linear-gradient(180deg, rgba(235, 250, 241, 0.98), rgba(245, 251, 247, 0.98));
}

.vehicles-stat-card.is-reserved {
  background: linear-gradient(180deg, rgba(255, 245, 222, 0.98), rgba(252, 249, 240, 0.98));
}

.vehicles-stat-card.is-service {
  background: linear-gradient(180deg, rgba(246, 242, 239, 0.98), rgba(250, 248, 246, 0.98));
}

.vehicles-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.72);
}

.vehicles-stat-value {
  font-size: 1.7rem;
  color: #24362e;
}

.vehicles-toolbar-panel,
.vehicles-list-panel,
.vehicle-schedule-panel,
.vehicle-modal-panel,
.vehicles-reservations-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

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

.vehicles-panel-head-actions,
.vehicle-schedule-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vehicles-panel-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.vehicles-inline-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(47, 104, 84, 0.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(251, 253, 252, 0.98), rgba(246, 249, 247, 0.98));
}

.vehicles-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.vehicles-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
}

.vehicle-list-row {
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 22px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  gap: 14px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  min-width: 0;
}

.vehicle-list-row:hover,
.vehicle-list-row:focus-visible,
.vehicle-list-row.is-active {
  border-color: rgba(32, 102, 79, 0.32);
  box-shadow: 0 16px 34px rgba(29, 60, 47, 0.12);
  transform: translateY(-1px);
}

.vehicle-list-row.is-available {
  background: linear-gradient(180deg, rgba(250, 253, 251, 0.98), rgba(244, 249, 246, 0.98));
}

.vehicle-list-row.is-reserved {
  background: linear-gradient(180deg, rgba(255, 251, 243, 0.98), rgba(252, 248, 238, 0.98));
}

.vehicle-list-row.is-service,
.vehicle-list-row.is-inactive {
  background: linear-gradient(180deg, rgba(250, 247, 244, 0.98), rgba(246, 242, 238, 0.98));
}

.vehicle-list-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, auto) auto;
  align-items: start;
  gap: 12px;
}

.vehicle-list-row-actions,
.vehicle-reservation-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vehicle-list-row-actions {
  align-items: center;
  flex-wrap: wrap;
}

.vehicle-reservation-item-head {
  flex-wrap: wrap;
  align-items: center;
}

.vehicle-list-row-copy,
.vehicle-reservation-item-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.vehicle-list-row-title {
  margin: 0;
  font-size: 1.08rem;
  color: #22352d;
}

.vehicle-list-row-plate {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(53, 86, 73, 0.72);
}

.vehicle-list-row-meta,
.vehicle-list-card-detail,
.vehicle-list-row-detail,
.vehicle-reservation-item-window {
  margin: 0;
  display: block;
  color: #5f7068;
  font-size: 0.92rem;
  line-height: 1.5;
}

.vehicle-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.82rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.vehicle-status-badge.is-available {
  background: rgba(87, 181, 124, 0.18);
  color: #207046;
}

.vehicle-status-badge.is-reserved {
  background: rgba(234, 189, 77, 0.22);
  color: #8c5a10;
}

.vehicle-status-badge.is-service {
  background: rgba(132, 108, 93, 0.16);
  color: #6f5547;
}

.vehicle-status-badge.is-inactive {
  background: rgba(157, 166, 160, 0.2);
  color: #51635a;
}

body.is-vehicle-editor-open,
body.is-vehicle-reservation-open,
body.is-vehicle-usage-open {
  overflow: hidden;
}

.vehicle-modal-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
}

.vehicle-modal-panel.is-modal-open {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 69;
  width: min(980px, calc(100vw - 24px));
  height: calc(100vh - 28px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

.vehicle-reservation-modal.is-modal-open {
  width: min(1120px, calc(100vw - 24px));
}

.vehicles-editor-fixed-head {
  display: grid;
  gap: 10px;
  padding: 18px 20px 12px;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(247, 249, 253, 0.96));
  border-bottom: 1px solid rgba(232, 236, 245, 0.9);
}

.vehicles-editor-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.vehicle-modal-body {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 12px 20px 20px;
  display: grid;
  align-content: start;
  gap: 14px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.vehicle-modal-body:focus {
  outline: none;
}

.vehicle-modal-body > .entity-form {
  display: grid;
  gap: 14px;
  min-width: 0;
}

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

.vehicle-inline-status-select {
  min-width: 170px;
  max-width: 100%;
}

.vehicle-reservation-assignees-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.vehicle-reservation-assignees-summary {
  color: #5f7068;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-reservation-assignee-dropdown {
  position: relative;
  min-width: 0;
}

.vehicle-reservation-assignee-trigger {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 104, 84, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: #22352d;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.vehicle-reservation-assignee-trigger:hover,
.vehicle-reservation-assignee-trigger:focus-visible,
.vehicle-reservation-assignee-dropdown.is-open .vehicle-reservation-assignee-trigger {
  border-color: rgba(32, 102, 79, 0.28);
  box-shadow: 0 10px 18px rgba(30, 64, 51, 0.08);
  outline: none;
}

.vehicle-reservation-assignee-caret {
  flex: 0 0 auto;
  color: #5f7068;
  transition: transform 140ms ease;
}

.vehicle-reservation-assignee-dropdown.is-open .vehicle-reservation-assignee-caret {
  transform: rotate(180deg);
}

.vehicle-reservation-assignee-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(47, 104, 84, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(30, 64, 51, 0.14);
}

.vehicle-reservation-assignee-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.vehicle-reservation-assignee-option:hover,
.vehicle-reservation-assignee-option.is-selected {
  border-color: rgba(32, 102, 79, 0.28);
  background: rgba(243, 249, 245, 0.96);
  box-shadow: 0 10px 18px rgba(30, 64, 51, 0.08);
}

.vehicle-reservation-assignee-option input {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #2f6854;
}

.vehicle-reservation-assignee-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vehicle-reservation-assignee-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vehicle-reservation-assignees-summary.is-placeholder {
  color: #66786f;
}

.vehicle-reservation-assignee-copy strong,
.vehicle-reservation-assignee-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-reservation-assignee-copy span,
.vehicle-reservation-assignee-empty,
.vehicle-reservation-executors-empty {
  color: #66786f;
  font-size: 0.84rem;
}

.vehicle-reservation-assignee-empty {
  margin: 0;
  padding: 6px 2px;
}

.vehicle-reservation-executors {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vehicle-reservation-executors.is-compact {
  gap: 6px;
}

.vehicle-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.vehicles-reservations-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(47, 104, 84, 0.12);
}

.vehicle-reservations-list {
  display: grid;
  gap: 10px;
}

.vehicle-reservation-item {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(248, 250, 249, 0.96);
  display: grid;
  gap: 10px;
}

.vehicle-reservation-item.is-active {
  border-color: rgba(32, 102, 79, 0.28);
  box-shadow: inset 0 0 0 1px rgba(32, 102, 79, 0.08);
}

.vehicle-reservation-item.is-reserved {
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(251, 247, 239, 0.98));
}

.vehicle-reservation-item.is-checked-out {
  background: linear-gradient(180deg, rgba(238, 247, 255, 0.98), rgba(244, 249, 255, 0.98));
}

.vehicle-reservation-item.is-completed {
  background: linear-gradient(180deg, rgba(241, 250, 243, 0.98), rgba(246, 252, 247, 0.98));
}

.vehicle-reservation-item.is-cancelled {
  background: linear-gradient(180deg, rgba(246, 246, 246, 0.98), rgba(250, 250, 250, 0.98));
}

.vehicle-reservation-item-copy span {
  color: #66786f;
  font-size: 0.9rem;
}

.vehicle-schedule-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.vehicle-schedule-date-input {
  min-width: 156px;
  max-width: 100%;
  min-height: 42px;
  padding-inline: 12px;
  border-radius: 14px;
}

.vehicle-schedule-grid-shell {
  min-width: 0;
  min-height: 320px;
  max-height: min(70vh, calc(100vh - 230px));
  overflow: auto;
  border: 1px solid rgba(47, 104, 84, 0.22);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(250, 252, 251, 0.99), rgba(236, 243, 239, 0.99));
  scrollbar-gutter: stable both-edges;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 34px rgba(30, 64, 51, 0.06);
}

.vehicle-schedule-grid {
  display: grid;
  gap: 10px;
  min-width: 100%;
  width: max-content;
  padding: 12px;
}

.vehicle-schedule-header-row {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(230px, 250px) repeat(var(--vehicle-hour-count, 16), minmax(72px, 1fr));
  gap: 8px;
  width: max-content;
  min-width: 100%;
  padding-bottom: 2px;
  background: linear-gradient(180deg, rgba(250, 252, 251, 0.99), rgba(250, 252, 251, 0.86));
  box-shadow: 0 12px 28px rgba(30, 64, 51, 0.06);
}

.vehicle-schedule-vehicle-head,
.vehicle-schedule-hour-head,
.vehicle-schedule-vehicle-cell {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.vehicle-schedule-vehicle-head {
  position: sticky;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.78);
}

.vehicle-schedule-hour-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 10px 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #40544b;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 248, 245, 0.98));
  box-shadow: inset 0 -2px 0 rgba(47, 104, 84, 0.08);
}

.vehicle-schedule-hour-head.is-current {
  border-color: rgba(230, 71, 114, 0.38);
  background: rgba(255, 239, 244, 0.98);
  color: #b0325a;
  box-shadow: inset 0 -2px 0 rgba(230, 71, 114, 0.2);
}

.vehicle-schedule-row {
  display: grid;
  grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
  gap: 8px;
  width: max-content;
  min-width: 100%;
  align-items: stretch;
}

.vehicle-schedule-row.is-active .vehicle-schedule-vehicle-cell {
  border-color: rgba(32, 102, 79, 0.28);
  box-shadow: 0 18px 34px rgba(30, 64, 51, 0.12);
}

.vehicle-schedule-vehicle-cell {
  position: sticky;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  color: #22352d;
}

.vehicle-schedule-vehicle-cell span {
  color: #5f7068;
  font-size: 0.88rem;
}

.vehicle-schedule-track {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--vehicle-hour-count, 16), minmax(72px, 1fr));
  grid-auto-rows: minmax(88px, auto);
  border: 1px solid rgba(47, 104, 84, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 248, 0.98));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.vehicle-schedule-track.is-service-track {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(237, 205, 156, 0.18),
      rgba(237, 205, 156, 0.18) 10px,
      rgba(255, 255, 255, 0.92) 10px,
      rgba(255, 255, 255, 0.92) 20px
    ),
    linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(251, 244, 235, 0.98));
}

.vehicle-schedule-slot,
.vehicle-schedule-reservation {
  grid-row: 1;
}

.vehicle-schedule-slot {
  min-height: 88px;
  border: 0;
  border-right: 1px solid rgba(47, 104, 84, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(244, 249, 246, 0.44));
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.vehicle-schedule-slot:nth-child(2n) {
  background: linear-gradient(180deg, rgba(228, 240, 234, 0.36), rgba(241, 247, 244, 0.48));
}

.vehicle-schedule-slot.is-current-hour {
  background: linear-gradient(180deg, rgba(255, 229, 237, 0.92), rgba(255, 240, 245, 0.92));
}

.vehicle-schedule-slot.is-disabled {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(214, 162, 84, 0.12),
      rgba(214, 162, 84, 0.12) 10px,
      rgba(255, 255, 255, 0.72) 10px,
      rgba(255, 255, 255, 0.72) 20px
    );
}

.vehicle-schedule-slot:hover,
.vehicle-schedule-slot.is-selected,
.vehicle-schedule-slot:focus-visible {
  background: rgba(47, 104, 84, 0.12);
  box-shadow: inset 0 0 0 1px rgba(47, 104, 84, 0.12);
  outline: none;
}

.vehicle-schedule-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, rgba(232, 67, 111, 0.95), rgba(197, 34, 80, 0.95));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 18px rgba(232, 67, 111, 0.22);
  pointer-events: none;
  z-index: 3;
}

.vehicle-schedule-row.is-service .vehicle-schedule-vehicle-cell {
  border-color: rgba(201, 122, 36, 0.24);
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(250, 243, 233, 0.98));
}

.vehicle-schedule-now-line.has-label::before {
  content: attr(data-label);
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: rgba(197, 34, 80, 0.94);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.vehicle-schedule-reservation {
  z-index: 2;
  align-self: center;
  margin: 10px 6px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 22px rgba(41, 54, 49, 0.12);
}

.vehicle-schedule-reservation strong,
.vehicle-schedule-reservation span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-schedule-reservation span {
  font-size: 0.8rem;
}

.vehicle-schedule-reservation.is-reserved {
  background: rgba(255, 230, 179, 0.94);
  border-color: rgba(196, 143, 29, 0.18);
  color: #744a0a;
}

.vehicle-schedule-reservation.is-checked-out {
  background: rgba(201, 227, 255, 0.96);
  border-color: rgba(84, 131, 196, 0.22);
  color: #224a7d;
}

.vehicle-schedule-reservation.is-completed {
  background: rgba(207, 238, 214, 0.96);
  border-color: rgba(70, 144, 89, 0.2);
  color: #265f35;
}

.vehicle-schedule-reservation.is-cancelled {
  background: rgba(231, 234, 236, 0.96);
  border-color: rgba(124, 133, 141, 0.16);
  color: #4f5961;
}

.vehicle-editor-section-block {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(251, 253, 252, 0.98), rgba(246, 249, 247, 0.98));
}

.vehicle-activity-list {
  display: grid;
  gap: 12px;
}

.vehicle-trip-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.vehicle-trip-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.vehicle-trip-card.is-open {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.vehicle-trip-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vehicle-trip-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vehicle-trip-card-head strong {
  color: #172033;
  font-size: 1rem;
}

.vehicle-trip-card-head span {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 700;
}

.vehicle-trip-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.vehicle-trip-fact {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  min-width: 0;
}

.vehicle-trip-fact span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vehicle-trip-fact strong {
  color: #0f172a;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.vehicle-trip-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.vehicle-trip-field {
  display: grid;
  gap: 6px;
}

.vehicle-trip-field span {
  color: rgba(47, 104, 84, 0.74);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vehicle-trip-document-tools {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.vehicle-trip-document-tools select {
  min-width: 150px;
}

.vehicle-trip-documents {
  display: grid;
  gap: 8px;
}

.vehicle-trip-document-row {
  background: rgba(248, 250, 252, 0.94);
}

.vehicle-trip-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.vehicle-trip-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.vehicle-trip-table th,
.vehicle-trip-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  text-align: left;
  vertical-align: top;
}

.vehicle-trip-table th {
  background: rgba(239, 246, 255, 0.94);
  color: #1d4ed8;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vehicle-trip-table tbody tr:last-child td {
  border-bottom: 0;
}

.vehicle-trip-table td {
  color: #263a32;
  font-weight: 700;
}

.vehicle-activity-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
}

.vehicle-activity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.vehicle-activity-field {
  display: grid;
  gap: 6px;
}

.vehicle-activity-field.is-wide {
  grid-column: span 2;
}

.vehicle-activity-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.74);
}

.vehicle-activity-actions {
  display: flex;
  justify-content: flex-end;
}

.vehicle-activity-row-meta {
  color: #5f7068;
  font-size: 0.86rem;
}

.vehicle-usage-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.88);
}

.vehicle-usage-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #334155;
  font-weight: 800;
}

.vehicle-usage-checklist input {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.vehicle-usage-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 4px;
}

.vehicle-usage-quick-actions button {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.88);
  color: #1d4ed8;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  padding: 8px 11px;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.vehicle-usage-quick-actions button:hover {
  background: #fff;
  border-color: rgba(37, 99, 235, 0.36);
  transform: translateY(-1px);
}

.vehicle-usage-quick-actions button.is-accent {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

@media (max-width: 1180px) {
  .vehicles-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .vehicles-summary-grid,
  .vehicles-inline-toolbar,
  .vehicles-filters,
  .vehicles-form-grid,
  .vehicle-reservation-assignee-panel,
  .vehicle-activity-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicles-toolbar-actions {
    justify-content: flex-start;
  }

  .vehicles-panel-head-actions,
  .vehicle-schedule-head-actions,
  .vehicle-schedule-toolbar,
  .vehicle-list-row-main,
  .vehicle-list-row-actions,
  .vehicle-reservation-item-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .vehicle-card-actions {
    justify-content: flex-start;
  }

  .vehicle-inline-status-select {
    width: 100%;
  }

  .vehicle-activity-field.is-wide {
    grid-column: span 1;
  }

  .vehicle-usage-checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-trip-facts,
  .vehicle-trip-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .vehicle-trip-document-tools {
    justify-content: flex-start;
  }

  .vehicle-modal-panel.is-modal-open,
  .vehicle-reservation-modal.is-modal-open {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
  }

  .vehicle-modal-body {
    padding-inline: 16px;
  }

  .vehicle-schedule-grid-shell {
    max-height: min(62vh, calc(100vh - 220px));
  }

  .vehicle-schedule-header-row {
    grid-template-columns: minmax(180px, 210px) repeat(var(--vehicle-hour-count, 16), minmax(64px, 1fr));
  }

  .vehicle-schedule-row {
    grid-template-columns: minmax(180px, 210px) minmax(0, 1fr);
  }
}

.documents-module,
.periodics-module,
.legal-framework-module,
.rulebooks-module,
.service-catalog-module,
.measurement-equipment-module,
.safety-authorization-module,
.template-development-module {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.documents-summary-grid,
.periodics-summary-grid,
.legal-framework-summary-grid,
.service-catalog-summary-grid,
.measurement-equipment-summary-grid,
.safety-authorization-summary-grid,
.template-development-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.documents-stat-card,
.periodics-stat-card,
.legal-framework-stat-card,
.service-catalog-stat-card,
.measurement-equipment-stat-card,
.safety-authorization-stat-card,
.template-development-stat-card {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 22px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 246, 0.96));
  display: grid;
  gap: 6px;
}

.documents-stat-label,
.periodics-stat-label,
.legal-framework-stat-label,
.service-catalog-stat-label,
.measurement-equipment-stat-label,
.safety-authorization-stat-label,
.template-development-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.72);
}

.documents-stat-value,
.periodics-stat-value,
.legal-framework-stat-value,
.service-catalog-stat-value,
.measurement-equipment-stat-value,
.safety-authorization-stat-value,
.template-development-stat-value {
  font-size: 1.7rem;
  color: #24362e;
}

.documents-toolbar-panel,
.documents-explorer-panel,
.periodics-toolbar-panel,
.legal-framework-toolbar-panel,
.legal-framework-list-panel,
.legal-framework-editor-panel,
.rulebooks-hero-panel,
.rulebooks-list-panel,
.rulebook-editor-panel,
.service-catalog-toolbar-panel,
.service-catalog-list-panel,
.service-catalog-editor-panel,
.measurement-equipment-toolbar-panel,
.measurement-equipment-list-panel,
.measurement-equipment-isznr-panel,
.measurement-equipment-editor-panel,
.safety-authorization-toolbar-panel,
.safety-authorization-list-panel,
.safety-authorization-editor-panel,
.template-development-toolbar-panel,
.template-development-list-panel,
.document-template-editor-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

.template-development-list-panel {
  gap: 18px;
}

.documents-filters,
.periodics-filters,
.legal-framework-filters,
.rulebooks-filters,
.service-catalog-filters,
.measurement-equipment-filters,
.measurement-equipment-isznr-filters,
.safety-authorization-filters,
.template-development-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 12px;
}

.periodics-filters {
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(160px, 210px);
}

.template-development-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.template-development-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 12px;
  align-items: end;
}

.safety-authorization-filters {
  grid-template-columns: minmax(0, 1fr);
}

.measurement-equipment-isznr-filters {
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(150px, 190px)
    minmax(150px, 190px)
    minmax(110px, 150px);
}

.service-catalog-filters {
  grid-template-columns:
    minmax(280px, 1fr)
    minmax(160px, 220px)
    minmax(160px, 220px);
}

.measurement-equipment-isznr-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.periodics-module {
  gap: 14px;
}

.periodics-module.is-calendar-mode {
  min-height: calc(100dvh - 122px);
  align-content: start;
}

.periodics-module.is-calendar-mode .periodics-summary-grid {
  display: none;
}

.periodics-stat-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 28px rgba(42, 55, 90, 0.1);
}

.periodics-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, rgba(108, 129, 235, 0.9), rgba(65, 176, 255, 0.85));
}

.periodics-stat-card.is-overdue::before {
  background: linear-gradient(180deg, rgba(229, 94, 105, 0.92), rgba(201, 54, 84, 0.88));
}

.periodics-stat-card.is-soon::before {
  background: linear-gradient(180deg, rgba(236, 170, 82, 0.92), rgba(222, 136, 54, 0.88));
}

.periodics-stat-card.is-critical::before {
  background: linear-gradient(180deg, rgba(204, 89, 210, 0.92), rgba(135, 92, 232, 0.88));
}

.periodics-toolbar-panel,
.periodics-section-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

.periodics-toolbar-panel {
  position: relative;
  border: 1px solid rgba(128, 151, 214, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(142, 171, 255, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(253, 254, 255, 0.98), rgba(246, 249, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 30px rgba(59, 74, 118, 0.09);
}

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

.periodics-view-toggle {
  flex-shrink: 0;
}

.periodics-section-card {
  position: relative;
  border: 1px solid rgba(128, 151, 214, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(142, 171, 255, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 28px rgba(52, 67, 112, 0.08);
}

.periodics-section-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, rgba(104, 133, 228, 0.9), rgba(104, 198, 241, 0.9));
}

.periodics-section-card.is-inspections::before {
  background: linear-gradient(90deg, rgba(104, 133, 228, 0.9), rgba(104, 198, 241, 0.9));
}

.periodics-section-card.is-inspection-periodics::before {
  background: linear-gradient(90deg, rgba(95, 179, 136, 0.92), rgba(95, 185, 215, 0.9));
}

.periodics-section-card.is-vehicles::before {
  background: linear-gradient(90deg, rgba(110, 178, 134, 0.9), rgba(80, 199, 176, 0.9));
}

.periodics-section-card.is-people::before {
  background: linear-gradient(90deg, rgba(206, 118, 193, 0.9), rgba(137, 148, 234, 0.9));
}

.periodics-section-card.is-equipment::before {
  background: linear-gradient(90deg, rgba(78, 171, 201, 0.9), rgba(98, 143, 231, 0.9));
}

.periodics-list-view {
  display: grid;
  gap: 14px;
}

.periodics-calendar-panel {
  gap: 16px;
  min-height: calc(100dvh - 220px);
}

.periodics-calendar-view {
  display: grid;
  gap: 14px;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.periodics-calendar-legend {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.periodics-calendar-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(152, 167, 207, 0.34);
  background: rgba(246, 249, 255, 0.94);
  color: #50617e;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.periodics-calendar-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(152, 167, 207, 0.34);
  background: rgba(246, 249, 255, 0.94);
  color: #50617e;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.periodics-calendar-filter-chip input {
  width: 16px;
  height: 16px;
  accent-color: #486de2;
  cursor: pointer;
}

.periodics-calendar-filter-chip.is-master {
  border-color: rgba(118, 138, 193, 0.42);
  background: linear-gradient(180deg, rgba(242, 247, 255, 0.98), rgba(231, 239, 255, 0.95));
  color: #29457f;
}

.periodics-calendar-filter-chip.is-inspections,
.periodics-calendar-card-tag.is-inspections {
  color: #2e4f97;
  border-color: rgba(88, 122, 220, 0.28);
  background: linear-gradient(180deg, rgba(236, 243, 255, 0.98), rgba(224, 236, 255, 0.94));
}

.periodics-calendar-filter-chip.is-vehicles,
.periodics-calendar-card-tag.is-vehicles {
  color: #1d785d;
  border-color: rgba(72, 175, 130, 0.26);
  background: linear-gradient(180deg, rgba(235, 251, 243, 0.98), rgba(221, 247, 234, 0.95));
}

.periodics-calendar-filter-chip.is-people,
.periodics-calendar-card-tag.is-people {
  color: #7a387d;
  border-color: rgba(177, 95, 177, 0.24);
  background: linear-gradient(180deg, rgba(251, 239, 255, 0.98), rgba(245, 228, 255, 0.94));
}

.periodics-calendar-filter-chip.is-equipment,
.periodics-calendar-card-tag.is-equipment {
  color: #175f7e;
  border-color: rgba(72, 147, 219, 0.26);
  background: linear-gradient(180deg, rgba(237, 248, 255, 0.98), rgba(224, 240, 255, 0.94));
}

.periodics-calendar-filter-chip.is-annual {
  color: #7a5800;
  border-color: rgba(201, 153, 55, 0.24);
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.98), rgba(255, 238, 194, 0.95));
}

.periodics-calendar-grid-shell {
  min-height: 0;
  height: var(--periodics-calendar-shell-height, min(74vh, calc(100dvh - 320px)));
  max-height: var(--periodics-calendar-shell-height, calc(100dvh - 320px));
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  border: 1px solid rgba(145, 166, 219, 0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(155, 188, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(241, 246, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 40px rgba(59, 74, 118, 0.12);
}

.periodics-calendar-grid {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 100%;
}

.periodics-calendar-week-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.periodics-calendar-week-rail {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 18px 10px;
  border: 1px solid rgba(145, 166, 219, 0.34);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(137, 167, 243, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(246, 249, 255, 0.98), rgba(236, 243, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 28px rgba(67, 82, 126, 0.1);
}

.periodics-calendar-week-rail-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7e8cab;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.periodics-calendar-week-rail-value {
  font-size: 1.55rem;
  line-height: 1;
  color: #253a68;
}

.periodics-calendar-week-grid {
  min-width: 0;
}

.periodics-calendar-day {
  min-height: 240px;
  border-color: rgba(154, 172, 217, 0.58);
  box-shadow:
    0 12px 26px rgba(70, 84, 123, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.periodics-calendar-day:hover {
  border-color: rgba(103, 133, 220, 0.6);
  box-shadow:
    0 16px 34px rgba(70, 84, 123, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.periodics-calendar-day:focus-visible {
  outline: 3px solid rgba(88, 126, 240, 0.28);
  outline-offset: 2px;
}

.periodics-calendar-day.is-selected {
  border-color: rgba(76, 121, 236, 0.72);
  box-shadow:
    0 20px 42px rgba(68, 97, 170, 0.18),
    0 0 0 3px rgba(93, 133, 248, 0.14);
}

.periodics-calendar-day.is-weekend {
  background:
    linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(243, 247, 255, 0.98));
}

.periodics-calendar-day.is-outside-month {
  opacity: 0.72;
  filter: saturate(0.7);
}

.periodics-calendar-day-body {
  gap: 10px;
}

.periodics-calendar-day-stamp {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex-shrink: 0;
}

.periodics-calendar-day-month {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7582a2;
}

.periodics-calendar-day .work-order-calendar-month-day-top {
  align-items: center;
  padding: 10px 12px 9px;
  border-bottom-color: rgba(217, 225, 243, 0.9);
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.99), rgba(240, 246, 255, 0.97));
}

.periodics-calendar-day .work-order-calendar-day-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: #8490ad;
}

.periodics-calendar-day .work-order-calendar-day-meta {
  font-size: 0.72rem;
  color: #617294;
}

.periodics-calendar-day .work-order-calendar-day-date {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 900;
  color: #253456;
}

.periodics-calendar-day.is-today .work-order-calendar-day-date {
  color: #305bd2;
}

.periodics-calendar-block-list {
  display: grid;
  gap: 6px;
  align-content: start;
}

.periodics-calendar-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(121, 146, 199, 0.26);
  background: linear-gradient(180deg, rgba(238, 245, 255, 0.98), rgba(229, 238, 255, 0.95));
  color: #32507d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.periodics-calendar-block.is-inspections {
  color: #2e4f97;
  border-color: rgba(88, 122, 220, 0.28);
  background: linear-gradient(180deg, rgba(232, 241, 255, 0.99), rgba(213, 229, 255, 0.96));
}

.periodics-calendar-block.is-vehicles {
  color: #196a53;
  border-color: rgba(72, 175, 130, 0.24);
  background: linear-gradient(180deg, rgba(229, 250, 239, 0.99), rgba(205, 244, 224, 0.96));
}

.periodics-calendar-block.is-people {
  color: #743275;
  border-color: rgba(177, 95, 177, 0.22);
  background: linear-gradient(180deg, rgba(248, 236, 255, 0.99), rgba(238, 217, 255, 0.96));
}

.periodics-calendar-block.is-equipment {
  color: #155c79;
  border-color: rgba(72, 147, 219, 0.22);
  background: linear-gradient(180deg, rgba(232, 246, 255, 0.99), rgba(211, 235, 255, 0.96));
}

.periodics-calendar-block.is-annual {
  color: #7a5800;
  border-color: rgba(201, 153, 55, 0.24);
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.99), rgba(255, 236, 191, 0.96));
}

.periodics-calendar-block.is-medical {
  color: #1a5f4b;
  border-color: rgba(61, 160, 129, 0.2);
  background: linear-gradient(180deg, rgba(232, 251, 244, 0.99), rgba(210, 243, 229, 0.96));
}

.periodics-calendar-block.is-other {
  color: #524678;
  border-color: rgba(121, 102, 190, 0.18);
  background: linear-gradient(180deg, rgba(245, 240, 255, 0.99), rgba(231, 223, 255, 0.96));
}

.periodics-calendar-block.is-overdue {
  box-shadow:
    inset 3px 0 0 rgba(217, 69, 93, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.periodics-calendar-block.is-warning,
.periodics-calendar-block.is-critical,
.periodics-calendar-block.is-today {
  box-shadow:
    inset 3px 0 0 rgba(220, 160, 66, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.periodics-calendar-block-label,
.periodics-calendar-block-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-calendar-block-label {
  font-size: 0.8rem;
  font-weight: 800;
}

.periodics-calendar-block-meta {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.88;
}

.periodics-calendar-block-more {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #5a7098;
  background: rgba(232, 239, 252, 0.92);
}

.periodics-calendar-card {
  --calendar-card-accent: #94a2bf;
  --calendar-card-soft: #ffffff;
}

.periodics-calendar-card.is-static {
  cursor: default;
}

.periodics-calendar-card.is-static:hover {
  transform: none;
}

.periodics-calendar-card.is-inspections {
  --calendar-card-accent: #5b82e2;
  --calendar-card-soft: color-mix(in srgb, #e8f0ff 54%, #ffffff);
}

.periodics-calendar-card.is-vehicles {
  --calendar-card-accent: #43b18a;
  --calendar-card-soft: color-mix(in srgb, #e4f9ef 55%, #ffffff);
}

.periodics-calendar-card.is-people {
  --calendar-card-accent: #b16fb4;
  --calendar-card-soft: color-mix(in srgb, #f7e8ff 54%, #ffffff);
}

.periodics-calendar-card.is-equipment {
  --calendar-card-accent: #54a2db;
  --calendar-card-soft: color-mix(in srgb, #e7f4ff 56%, #ffffff);
}

.periodics-calendar-card.is-absence.is-annual,
.periodics-calendar-card-tag.is-annual {
  --calendar-card-accent: #d39d32;
  --calendar-card-soft: color-mix(in srgb, #fff1c7 58%, #ffffff);
  color: #7a5800;
  border-color: rgba(201, 153, 55, 0.24);
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.98), rgba(255, 239, 197, 0.96));
}

.periodics-calendar-card.is-absence.is-medical,
.periodics-calendar-card-tag.is-medical {
  --calendar-card-accent: #3da07e;
  --calendar-card-soft: color-mix(in srgb, #dff7ec 58%, #ffffff);
  color: #1d6650;
  border-color: rgba(61, 160, 129, 0.2);
  background: linear-gradient(180deg, rgba(232, 252, 244, 0.98), rgba(215, 244, 232, 0.95));
}

.periodics-calendar-card.is-absence.is-other,
.periodics-calendar-card-tag.is-other {
  --calendar-card-accent: #8b73d7;
  --calendar-card-soft: color-mix(in srgb, #eee7ff 56%, #ffffff);
  color: #51467b;
  border-color: rgba(121, 102, 190, 0.18);
  background: linear-gradient(180deg, rgba(244, 239, 255, 0.98), rgba(233, 225, 255, 0.95));
}

.periodics-calendar-card.is-overdue {
  box-shadow:
    0 8px 18px rgba(69, 76, 108, 0.08),
    inset 0 0 0 1px rgba(220, 77, 100, 0.2);
}

.periodics-calendar-card.is-warning,
.periodics-calendar-card.is-critical,
.periodics-calendar-card.is-today {
  box-shadow:
    0 8px 18px rgba(69, 76, 108, 0.08),
    inset 0 0 0 1px rgba(220, 176, 78, 0.2);
}

.periodics-calendar-card-detail,
.periodics-calendar-card-date {
  font-size: 0.74rem;
  color: #66708a;
  min-width: 0;
  overflow-wrap: anywhere;
}

.periodics-calendar-card-date {
  font-weight: 700;
  color: #4a5a79;
}

.periodics-calendar-detail-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(135, 156, 213, 0.3);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(155, 185, 255, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 34px rgba(63, 79, 123, 0.12);
}

.periodics-calendar-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.periodics-calendar-detail-copy {
  display: grid;
  gap: 4px;
}

.periodics-calendar-detail-copy h4 {
  margin: 0;
  font-size: 1.2rem;
  color: #223152;
}

.periodics-calendar-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.periodics-calendar-detail-section {
  display: grid;
  gap: 10px;
  align-content: start;
}

.periodics-calendar-detail-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #6f7b99;
  font-size: 0.82rem;
}

.periodics-calendar-detail-section-head strong {
  color: #253456;
  font-size: 0.96rem;
}

.periodics-calendar-detail-card-list {
  display: grid;
  gap: 10px;
}

.periodics-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 2px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.periodics-section-heading:hover {
  background: rgba(244, 248, 255, 0.6);
}

.periodics-section-heading:focus-visible {
  outline: 2px solid rgba(119, 142, 217, 0.56);
  outline-offset: 2px;
}

.periodics-section-title-wrap {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.periodics-section-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.periodics-section-title-row h3 {
  margin: 0;
  min-width: 0;
}

.periodics-section-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 182px;
}

.periodics-section-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(58px, 58px));
  align-items: center;
  justify-items: center;
  gap: 7px;
}

.periodics-section-trend {
  min-width: 58px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(156, 167, 197, 0.52);
  background: rgba(243, 246, 255, 0.95);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  color: #3c4a71;
}

.periodics-section-trend.is-overdue {
  border-color: rgba(213, 87, 102, 0.54);
  background: rgba(255, 234, 238, 0.94);
  color: #ac394f;
}

.periodics-section-trend.is-warning {
  border-color: rgba(205, 167, 92, 0.56);
  background: rgba(255, 249, 232, 0.95);
  color: #8f6a1e;
}

.periodics-section-trend.is-warning.has-pulse-warning {
  position: relative;
  padding-left: 18px;
}

.periodics-section-trend.is-warning.has-pulse-warning::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0b449;
  transform: translateY(-50%);
  animation: periodicsPulseWarningDot 1.2s ease-out infinite;
}

.periodics-section-trend.is-valid {
  border-color: rgba(86, 163, 120, 0.52);
  background: rgba(232, 250, 238, 0.95);
  color: #2f7a52;
}

.periodics-section-alert-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.periodics-section-alert-dot {
  --periodics-dot-color: #e24a60;
  --periodics-dot-halo: rgba(226, 74, 96, 0.52);
  --periodics-dot-shadow: rgba(197, 73, 93, 0.42);
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--periodics-dot-color);
  box-shadow:
    0 0 0 2px rgba(255, 214, 221, 0.98),
    0 0 0 5px rgba(255, 232, 238, 0.72);
  filter: drop-shadow(0 2px 6px var(--periodics-dot-shadow));
}

.periodics-section-alert-dot.is-warning {
  --periodics-dot-color: #e2ae2f;
  --periodics-dot-halo: rgba(226, 174, 47, 0.52);
  --periodics-dot-shadow: rgba(175, 126, 19, 0.36);
  box-shadow:
    0 0 0 2px rgba(255, 243, 201, 0.96),
    0 0 0 5px rgba(255, 247, 216, 0.74);
}

.periodics-section-alert-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--periodics-dot-halo);
  animation: periodicsPulseAlert 1.15s ease-out infinite;
}

.periodics-section-card.has-overdue {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 28px rgba(52, 67, 112, 0.08),
    0 0 0 1px rgba(226, 74, 96, 0.22);
}

.periodics-section-card.has-warning {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 28px rgba(52, 67, 112, 0.08),
    0 0 0 1px rgba(219, 176, 78, 0.26);
}

.periodics-section-card.has-overdue.has-warning {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 28px rgba(52, 67, 112, 0.08),
    0 0 0 1px rgba(226, 74, 96, 0.24),
    0 0 0 3px rgba(219, 176, 78, 0.18);
}

.periodics-section-card.is-collapsed {
  border-color: rgba(138, 150, 178, 0.48);
  background:
    linear-gradient(180deg, rgba(239, 243, 250, 0.98), rgba(233, 239, 247, 0.96));
  filter: saturate(0.45);
}

.periodics-section-card.is-collapsed::before {
  opacity: 0.5;
}

.periodics-section-card.is-collapsed .periodics-section-heading {
  opacity: 0.92;
}

.periodics-section-count {
  display: none;
}

.periodics-section-body {
  display: grid;
  gap: 10px;
}

.periodics-inspection-controls {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 280px);
  gap: 10px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid rgba(183, 200, 236, 0.56);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(248, 252, 255, 0.98), rgba(255, 247, 253, 0.94));
}

.periodics-section-body.has-overdue .periodics-grid {
  border-color: rgba(226, 74, 96, 0.32);
}

.periodics-section-body.has-warning .periodics-grid {
  border-color: rgba(221, 181, 90, 0.34);
}

.periodics-section-body.has-overdue.has-warning .periodics-grid {
  border-color: rgba(226, 74, 96, 0.32);
  box-shadow: inset 0 0 0 1px rgba(221, 181, 90, 0.24);
}

.periodics-grid {
  border: 1px solid rgba(163, 176, 214, 0.5);
  border-radius: 16px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.96);
}

.periodics-grid-head,
.periodics-grid-row {
  display: grid;
  align-items: stretch;
}

.periodics-grid.is-inspections .periodics-grid-head,
.periodics-grid.is-inspections .periodics-grid-row {
  grid-template-columns:
    minmax(150px, 1.05fr)
    minmax(150px, 0.95fr)
    minmax(90px, 0.58fr)
    minmax(170px, 1.22fr)
    minmax(120px, 0.72fr)
    minmax(220px, 1.18fr)
    minmax(184px, 0.8fr);
  width: 100%;
  min-width: 1100px;
}

.periodics-grid.is-vehicles .periodics-grid-head,
.periodics-grid.is-vehicles .periodics-grid-row {
  grid-template-columns:
    minmax(200px, 1.2fr)
    minmax(170px, 0.95fr)
    minmax(180px, 0.9fr)
    minmax(230px, 1.3fr)
    minmax(130px, 0.75fr);
}

.periodics-grid.is-people .periodics-grid-head,
.periodics-grid.is-people .periodics-grid-row {
  grid-template-columns:
    minmax(220px, 1.2fr)
    minmax(170px, 0.8fr)
    minmax(220px, 1.15fr)
    minmax(130px, 0.7fr);
}

.periodics-grid.is-equipment .periodics-grid-head,
.periodics-grid.is-equipment .periodics-grid-row {
  grid-template-columns:
    minmax(220px, 1.2fr)
    minmax(170px, 0.82fr)
    minmax(250px, 1.35fr)
    minmax(220px, 1.1fr)
    minmax(130px, 0.7fr);
}

.periodics-grid-head {
  background: linear-gradient(180deg, rgba(236, 243, 255, 0.92), rgba(246, 247, 255, 0.96));
  border-bottom: 1px solid rgba(163, 176, 214, 0.5);
}

.periodics-grid-head span {
  min-width: 0;
  padding: 11px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #526084;
  border-right: 1px solid rgba(205, 216, 241, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-grid-head span:last-child {
  border-right: 0;
}

.periodics-grid-body {
  display: grid;
}

.periodics-grid-row {
  border-bottom: 1px solid rgba(210, 219, 240, 0.8);
  transition: background-color 140ms ease;
}

.periodics-grid-row:last-child {
  border-bottom: 0;
}

.periodics-grid-row:hover {
  background: rgba(247, 250, 255, 0.96);
}

.periodics-date-expand-row {
  background: rgba(248, 251, 255, 0.98);
}

.periodics-date-expand-cell {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 30px;
  color: rgba(76, 89, 118, 0.86);
}

.periodics-date-expand-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(116, 139, 191, 0.36);
  border-radius: 8px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #27508f;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(58, 87, 137, 0.08);
}

.periodics-date-expand-button:hover {
  border-color: rgba(47, 126, 247, 0.48);
  background: #ffffff;
}

.periodics-date-expand-button:focus-visible {
  outline: 3px solid rgba(47, 126, 247, 0.28);
  outline-offset: 2px;
}

.periodics-date-expand-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
}

.periodics-other-date-row {
  background: rgba(250, 252, 255, 0.98);
}

.periodics-other-date-row .periodics-cell-primary,
.periodics-other-date-row .periodics-cell-secondary {
  color: rgba(79, 93, 124, 0.78);
}

.periodics-grid.is-inspections .periodics-grid-head span {
  padding: 8px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}

.periodics-grid.is-inspections .periodics-grid-head span:last-child {
  text-align: right;
  padding-right: 18px;
}

.periodics-group-row {
  background:
    linear-gradient(90deg, rgba(232, 241, 255, 0.96), rgba(255, 248, 255, 0.94));
  border-top: 1px solid rgba(188, 203, 235, 0.8);
  cursor: pointer;
}

.periodics-group-row:focus-visible {
  outline: 3px solid rgba(47, 126, 247, 0.28);
  outline-offset: -3px;
}

.periodics-group-cell {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
}

.periodics-group-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.periodics-group-title-line,
.periodics-subgroup-title-line {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.periodics-group-cell strong {
  color: #13213a;
  font-size: 0.9rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-group-cell span {
  color: rgba(82, 99, 132, 0.88);
  font-size: 0.76rem;
}

.periodics-group-alert-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.periodics-group-alert-dot.is-overdue {
  background: #df3a55;
}

.periodics-group-alert-dot.is-warning {
  background: #e0b449;
}

.periodics-group-alert-dot.has-pulse-alert {
  animation: periodicsPulseDot 1.2s ease-out infinite;
}

.periodics-group-alert-dot.has-pulse-warning {
  animation: periodicsPulseWarningDot 1.2s ease-out infinite;
}

.periodics-grid-row.is-overdue {
  background-color: rgba(255, 241, 244, 0.98);
  animation: periodicsOverdueRowPulse 2.6s ease-in-out infinite;
}

.periodics-grid-row.is-today,
.periodics-grid-row.is-critical {
  background:
    linear-gradient(90deg, rgba(230, 162, 87, 0.12), rgba(255, 255, 255, 0.98) 40%);
}

.periodics-grid-row.is-warning {
  background-color: rgba(255, 248, 230, 0.98);
  animation: periodicsWarningRowPulse 2.8s ease-in-out infinite;
}

.periodics-grid-row.is-future {
  background:
    linear-gradient(90deg, rgba(82, 173, 111, 0.1), rgba(255, 255, 255, 0.98) 40%);
}

.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-overdue .periodics-cell:first-child,
.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-warning .periodics-cell:first-child,
.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-future .periodics-cell:first-child {
  position: relative;
  padding-left: 30px;
}

.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-overdue .periodics-cell:first-child::before,
.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-warning .periodics-cell:first-child::before,
.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-future .periodics-cell:first-child::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
}

.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-overdue .periodics-cell:first-child::before {
  background: #df3a55;
  box-shadow: 0 0 0 0 rgba(223, 58, 85, 0.62);
  animation: periodicsPulseDot 1.2s ease-out infinite;
}

.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-warning .periodics-cell:first-child::before {
  background: #e0b449;
  box-shadow: 0 0 0 0 rgba(224, 180, 73, 0.62);
  animation: periodicsPulseWarningDot 1.2s ease-out infinite;
}

.periodics-grid-row:not(.periodics-detail-row):not(.periodics-subgroup-row).is-future .periodics-cell:first-child::before {
  background: #49a56f;
  box-shadow: 0 0 0 2px rgba(225, 247, 233, 0.92);
}

.periodics-cell {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  align-content: center;
  border-right: 1px solid rgba(227, 233, 247, 0.84);
}

.periodics-grid-row .periodics-cell:last-child {
  border-right: 0;
}

.periodics-cell.is-dimmed .periodics-cell-primary {
  color: rgba(103, 117, 143, 0.82);
}

.periodics-cell-primary {
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.32;
  color: #233154;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-cell-secondary {
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.32;
  color: rgba(84, 96, 126, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-cell-due {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.periodics-cell-due .periodics-cell-primary {
  font-variant-numeric: tabular-nums;
}

.periodics-grid.is-inspections .periodics-cell {
  padding: 8px 10px;
}

.periodics-grid.is-inspections .periodics-cell-primary {
  font-size: 0.81rem;
  line-height: 1.22;
}

.periodics-grid.is-inspections .periodics-cell-secondary {
  font-size: 0.68rem;
  line-height: 1.16;
}

.periodics-grid.is-inspections .periodics-cell-due {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  justify-content: end;
  gap: 8px;
  white-space: nowrap;
}

.periodics-grid.is-inspections .periodics-cell-due .periodics-cell-primary {
  width: auto;
  text-align: right;
}

.periodics-group-summary {
  cursor: pointer;
}

.periodics-group-summary[aria-expanded="true"] {
  box-shadow: inset 3px 0 0 rgba(47, 126, 247, 0.76);
}

.periodics-detail-row {
  background:
    linear-gradient(90deg, rgba(244, 248, 255, 0.94), rgba(255, 255, 255, 0.98) 46%);
}

.periodics-detail-row .periodics-cell-blank {
  background: rgba(247, 250, 255, 0.56);
}

.periodics-detail-row .periodics-cell:nth-child(4) {
  padding-left: 18px;
}

.periodics-subgroup-row {
  cursor: pointer;
  background:
    linear-gradient(90deg, rgba(241, 247, 255, 0.98), rgba(255, 255, 255, 0.98) 48%);
}

.periodics-subgroup-row.is-object {
  background:
    linear-gradient(90deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98) 52%);
}

.periodics-subgroup-row[aria-expanded="true"] {
  box-shadow: inset 3px 0 0 rgba(88, 126, 195, 0.55);
}

.periodics-subgroup-cell {
  gap: 3px;
}

.periodics-subgroup-title {
  min-width: 0;
  color: #20304d;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-subgroup-summary-cell .periodics-cell-primary {
  color: #41516f;
}

.periodics-service-cell {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.periodics-service-cell .periodics-cell-primary {
  grid-column: 1;
  min-width: 0;
}

.periodics-service-cell .periodics-cell-secondary {
  grid-column: 1 / -1;
}

.periodics-service-cell .periodics-work-order-badge,
.periodics-service-cell .periodics-new-work-order-button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.periodics-work-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(161, 174, 202, 0.58);
  background: rgba(246, 248, 253, 0.92);
  color: #52607a;
  line-height: 1;
}

.periodics-work-order-badge-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.periodics-work-order-badge-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.periodics-work-order-badge.is-open {
  border-color: rgba(83, 130, 201, 0.46);
  background: rgba(232, 241, 255, 0.94);
  color: #2e65a2;
}

.periodics-work-order-badge.is-verified {
  border-color: rgba(84, 163, 112, 0.48);
  background: rgba(232, 250, 238, 0.96);
  color: #2c7a4c;
}

.periodics-work-order-badge.is-done,
.periodics-work-order-badge.is-invoiced {
  border-color: rgba(194, 154, 70, 0.5);
  background: rgba(255, 248, 226, 0.96);
  color: #87651d;
}

.periodics-work-order-badge.is-cancelled,
.periodics-work-order-badge.is-missing,
.periodics-work-order-badge.is-unlinked {
  border-color: rgba(174, 184, 202, 0.58);
  background: rgba(244, 246, 250, 0.94);
  color: #6a7488;
}

.periodics-new-work-order-button,
.periodics-new-work-order-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(223, 58, 85, 0.36);
  background: linear-gradient(180deg, #fff6f8, #ffe8ed);
  color: #c22d48;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.periodics-new-work-order-button {
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(205, 54, 82, 0.12);
}

.periodics-new-work-order-button:hover,
.periodics-new-work-order-button:focus-visible {
  border-color: rgba(223, 58, 85, 0.62);
  background: linear-gradient(180deg, #ffffff, #ffdfe7);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(223, 58, 85, 0.13),
    0 12px 22px rgba(205, 54, 82, 0.16);
}

.periodics-inspection-context-menu {
  position: fixed;
  z-index: 640;
  width: min(380px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(179, 196, 224, 0.82);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 22px 46px rgba(31, 46, 78, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.periodics-inspection-context-head {
  display: grid;
  gap: 3px;
  padding: 2px 2px 5px;
}

.periodics-inspection-context-head strong {
  color: #17233b;
  font-size: 0.9rem;
}

.periodics-inspection-context-head span,
.periodics-inspection-context-more {
  color: #697792;
  font-size: 0.74rem;
  font-weight: 650;
}

.periodics-inspection-context-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(219, 227, 242, 0.9);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  text-align: left;
  cursor: pointer;
}

.periodics-inspection-context-action:hover,
.periodics-inspection-context-action:focus-visible {
  border-color: rgba(84, 132, 210, 0.45);
  box-shadow: 0 0 0 3px rgba(84, 132, 210, 0.12);
  outline: none;
}

.periodics-inspection-context-action.is-new-rn {
  border-color: rgba(223, 58, 85, 0.22);
  background: linear-gradient(180deg, #fffefe, #fff5f7);
}

.periodics-inspection-context-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.periodics-inspection-context-copy strong {
  color: #1f2b47;
  font-size: 0.82rem;
}

.periodics-inspection-context-copy span {
  color: #6b7891;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.periodics-group-due {
  flex: 0 0 auto;
  min-width: 184px;
  border-right: 0;
  padding: 0;
  background: transparent;
  justify-content: end;
}

.periodics-due-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(156, 167, 197, 0.56);
  background: rgba(243, 246, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
  color: #3c4a71;
}

.periodics-due-pill.has-pulse-alert {
  position: relative;
  padding-left: 18px;
}

.periodics-due-pill.has-pulse-alert::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #df3a55;
  transform: translateY(-50%);
  animation: periodicsPulseDot 1.2s ease-out infinite;
}

.periodics-due-pill.has-pulse-warning {
  position: relative;
  padding-left: 18px;
}

.periodics-due-pill.has-pulse-warning::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0b449;
  transform: translateY(-50%);
  animation: periodicsPulseWarningDot 1.2s ease-out infinite;
}

.periodics-due-pill.is-overdue {
  border-color: rgba(213, 87, 102, 0.56);
  background: rgba(255, 234, 238, 0.92);
  color: #ac394f;
}

.periodics-due-pill.is-today,
.periodics-due-pill.is-critical {
  border-color: rgba(214, 142, 61, 0.52);
  background: rgba(255, 243, 226, 0.92);
  color: #a56216;
}

.periodics-due-pill.is-warning {
  border-color: rgba(205, 167, 92, 0.56);
  background: rgba(255, 249, 232, 0.92);
  color: #8f6a1e;
}

.periodics-due-pill.is-future {
  border-color: rgba(86, 163, 120, 0.56);
  background: rgba(232, 250, 238, 0.95);
  color: #2f7a52;
}

.periodics-stat-card.has-overdue-pulse::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e24a60;
  box-shadow: 0 0 0 2px rgba(255, 213, 221, 0.9);
  animation: periodicsPulseAlert 1.3s ease-out infinite;
}

@keyframes periodicsPulseAlert {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  70% {
    transform: scale(1.9);
    opacity: 0.14;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes periodicsPulseDot {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(223, 58, 85, 0.6);
  }

  100% {
    opacity: 0.95;
    box-shadow: 0 0 0 8px rgba(223, 58, 85, 0);
  }
}

@keyframes periodicsPulseWarningDot {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(224, 180, 73, 0.62);
  }

  100% {
    opacity: 0.96;
    box-shadow: 0 0 0 8px rgba(224, 180, 73, 0);
  }
}

@keyframes periodicsOverdueRowPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 999px rgba(226, 74, 96, 0.1);
  }

  50% {
    box-shadow: inset 0 0 0 999px rgba(226, 74, 96, 0.22);
  }
}

@keyframes periodicsWarningRowPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 999px rgba(224, 180, 73, 0.09);
  }

  50% {
    box-shadow: inset 0 0 0 999px rgba(224, 180, 73, 0.2);
  }
}

@media (max-width: 1180px) {
  .periodics-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .periodics-toolbar-actions,
  .periodics-calendar-legend {
    justify-content: flex-start;
  }

  .periodics-calendar-detail-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .periodics-calendar-week-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .periodics-section-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
  }

  .periodics-section-actions {
    grid-auto-flow: row;
    justify-items: end;
    align-content: start;
  }

  .periodics-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .periodics-grid-head {
    display: none;
  }

  .periodics-grid.is-inspections .periodics-grid-row,
  .periodics-grid.is-vehicles .periodics-grid-row,
  .periodics-grid.is-people .periodics-grid-row,
  .periodics-grid.is-equipment .periodics-grid-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .periodics-cell {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(227, 233, 247, 0.78);
    border-right: 0;
  }

  .periodics-grid-row .periodics-cell:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .periodics-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .periodics-view-toggle {
    width: 100%;
  }

  .periodics-view-toggle .work-order-calendar-tool-button {
    flex: 1 1 0;
  }

  .periodics-calendar-day {
    min-height: 200px;
  }

  .periodics-calendar-day .work-order-calendar-day-date {
    font-size: 1.6rem;
  }

  .periodics-calendar-detail-head {
    align-items: stretch;
  }

  .periodics-calendar-week-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .periodics-calendar-week-rail {
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    justify-items: start;
    padding: 12px 14px;
  }

  .periodics-calendar-week-rail-label {
    writing-mode: initial;
    transform: none;
  }

  .periodics-calendar-grid-shell {
    height: var(--periodics-calendar-shell-height, min(70vh, calc(100dvh - 280px)));
    max-height: var(--periodics-calendar-shell-height, calc(100dvh - 280px));
  }

  .app-capabilities-dialog {
    width: min(100vw - 12px, 1280px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px auto;
    padding: 16px;
  }

  .app-capabilities-head-actions {
    justify-content: flex-start;
  }

  .app-capabilities-module-head {
    flex-direction: column;
    align-items: stretch;
  }

  .app-capabilities-module-actions {
    padding-top: 0;
  }

  .app-capabilities-items-head {
    display: none;
  }

  .app-capabilities-item-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "choice actions"
      "title title";
    align-items: start;
  }

  .app-capabilities-choice-control {
    grid-area: choice;
  }

  .app-capabilities-item-input {
    grid-area: title;
  }

  .app-capabilities-item-actions {
    grid-area: actions;
    justify-content: flex-end;
  }

  .app-capabilities-status-pill {
    width: fit-content;
  }

  .app-capabilities-choice-control {
    width: 56px;
  }
}

.legal-framework-list,
.service-catalog-list,
.measurement-equipment-list,
.safety-authorization-list,
.document-template-list,
.document-template-custom-fields,
.document-template-equipment-items,
.document-template-sections {
  display: grid;
  gap: 12px;
}

.service-catalog-list {
  gap: 10px;
}

.documents-explorer-list {
  display: grid;
  gap: 10px;
}

.documents-explorer-row {
  border: 1px solid rgba(184, 86, 192, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.documents-explorer-row.is-company {
  border-color: rgba(179, 80, 217, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(251, 243, 255, 0.9));
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  appearance: none;
}

.documents-explorer-row.is-location {
  margin-left: 20px;
  border-color: rgba(171, 184, 216, 0.5);
  background: rgba(248, 250, 255, 0.95);
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  appearance: none;
}

.documents-explorer-row.is-rn {
  margin-left: 44px;
  border-color: rgba(47, 104, 84, 0.26);
  grid-template-columns: minmax(180px, 220px) minmax(0, 1.6fr) minmax(0, 1fr) auto;
  align-items: start;
  cursor: default;
}

.documents-explorer-row.is-rn.is-clickable {
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.documents-explorer-row.is-rn.is-clickable:hover,
.documents-explorer-row.is-rn.is-clickable:focus-visible {
  border-color: rgba(179, 80, 217, 0.42);
  box-shadow: 0 10px 22px rgba(48, 34, 74, 0.12);
  transform: translateY(-1px);
}

.documents-explorer-row-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.documents-explorer-toggle {
  width: 18px;
  text-align: center;
  color: rgba(68, 61, 96, 0.76);
  font-weight: 700;
}

.documents-explorer-icon {
  width: 18px;
  height: 18px;
  color: rgba(53, 73, 65, 0.84);
  flex: 0 0 auto;
}

.documents-explorer-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.documents-explorer-icon.is-chip {
  width: 14px;
  height: 14px;
  color: rgba(58, 85, 77, 0.75);
}

.documents-explorer-title {
  margin: 0;
  font-size: 0.95rem;
  color: #24362e;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-explorer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.documents-explorer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(174, 181, 198, 0.45);
  background: rgba(245, 247, 251, 0.9);
  min-width: 0;
}

.documents-explorer-chip-value {
  font-size: 0.75rem;
  color: rgba(41, 54, 48, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.documents-explorer-template-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.documents-explorer-template-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid rgba(182, 94, 218, 0.36);
  background: rgba(249, 239, 255, 0.86);
  font-size: 0.72rem;
  color: rgba(94, 43, 118, 0.86);
  white-space: nowrap;
}

.documents-explorer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.documents-explorer-open-button {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(74, 53, 122, 0.9);
}

.documents-explorer-open-button svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1240px) {
  .documents-explorer-row.is-rn {
    grid-template-columns: minmax(0, 1fr);
    margin-left: 20px;
  }

  .documents-explorer-row.is-rn .documents-explorer-meta {
    justify-content: flex-start;
  }

  .documents-explorer-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .documents-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .documents-explorer-row.is-location,
  .documents-explorer-row.is-rn {
    margin-left: 0;
  }
}

.documents-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.documents-category-card {
  border: 1px solid rgba(127, 146, 196, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(184, 200, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 28px rgba(66, 80, 122, 0.08);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.documents-category-card:hover,
.documents-category-card:focus-visible,
.documents-category-card.is-active {
  border-color: rgba(91, 123, 220, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 34px rgba(61, 77, 127, 0.12);
  transform: translateY(-1px);
}

.documents-category-card.is-active {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 158, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 246, 255, 0.98));
}

.documents-category-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(121, 138, 184, 0.24);
  background: rgba(255, 255, 255, 0.82);
  color: #425278;
  flex-shrink: 0;
}

.documents-category-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.documents-category-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.documents-category-copy strong {
  color: #22304d;
  font-size: 0.98rem;
}

.documents-category-copy span {
  color: #667391;
  font-size: 0.82rem;
  line-height: 1.45;
}

.documents-category-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.documents-folder-list {
  display: grid;
  gap: 12px;
}

.documents-folder-card {
  border: 1px solid rgba(127, 146, 196, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(186, 207, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 32px rgba(67, 81, 122, 0.08);
  overflow: hidden;
}

.documents-folder-card.is-expanded {
  border-color: rgba(91, 123, 220, 0.32);
}

.documents-folder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
}

.documents-folder-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0;
}

.documents-folder-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.documents-folder-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.documents-category-icon.is-folder {
  width: 32px;
  height: 32px;
  border-radius: 12px;
}

.documents-category-icon.is-folder svg {
  width: 16px;
  height: 16px;
}

.documents-folder-title {
  color: #22304d;
  font-size: 0.98rem;
}

.documents-folder-subtitle {
  color: #64728f;
  font-size: 0.84rem;
  line-height: 1.45;
}

.documents-folder-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.documents-folder-toggle-mark {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(127, 146, 196, 0.24);
  background: rgba(255, 255, 255, 0.86);
  color: #526389;
  font-size: 1rem;
  line-height: 1;
}

.documents-folder-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.documents-folder-body {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(217, 225, 244, 0.82);
}

.documents-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(183, 195, 227, 0.3);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.documents-file-row.is-nested {
  margin-left: 34px;
  width: calc(100% - 34px);
  background: rgba(255, 255, 255, 0.96);
}

.documents-hierarchy-row {
  width: 100%;
  border: 1px solid rgba(170, 186, 225, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 247, 255, 0.94));
  color: inherit;
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.documents-hierarchy-row.is-level-1 {
  margin-left: 20px;
  width: calc(100% - 20px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
}

.documents-hierarchy-row:hover {
  border-color: rgba(89, 123, 223, 0.42);
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 1), rgba(236, 244, 255, 0.98));
}

.documents-hierarchy-main {
  display: inline-grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.documents-hierarchy-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.documents-hierarchy-copy strong {
  color: #22304d;
  font-size: 0.94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-hierarchy-copy span {
  color: #6e7c98;
  font-size: 0.78rem;
  line-height: 1.35;
}

.documents-hierarchy-count {
  min-width: 32px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #2455b5;
  background: rgba(226, 235, 255, 0.9);
  border: 1px solid rgba(117, 151, 232, 0.22);
  font-weight: 800;
  font-size: 0.78rem;
}

.documents-hierarchy-empty {
  margin: 0 0 0 34px;
  color: #73819b;
  font-size: 0.86rem;
}

.documents-file-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.documents-file-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.documents-file-title-row .documents-explorer-icon {
  width: 16px;
  height: 16px;
}

.documents-file-title {
  min-width: 0;
  color: #22304d;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-file-description {
  color: #6e7c98;
  font-size: 0.8rem;
  line-height: 1.45;
}

.documents-file-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.documents-file-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.documents-category-card.is-records .documents-category-icon,
.list-meta-pill.is-records {
  color: #24498f;
  border-color: rgba(96, 132, 225, 0.28);
  background: linear-gradient(180deg, rgba(236, 243, 255, 0.98), rgba(224, 236, 255, 0.94));
}

.documents-category-card.is-measurement .documents-category-icon,
.list-meta-pill.is-measurement {
  color: #155d78;
  border-color: rgba(72, 147, 219, 0.26);
  background: linear-gradient(180deg, rgba(236, 248, 255, 0.98), rgba(222, 240, 255, 0.94));
}

.documents-category-card.is-legal .documents-category-icon,
.list-meta-pill.is-legal {
  color: #6d3a8b;
  border-color: rgba(176, 98, 202, 0.24);
  background: linear-gradient(180deg, rgba(250, 239, 255, 0.98), rgba(244, 228, 255, 0.94));
}

.documents-category-card.is-authorization .documents-category-icon,
.list-meta-pill.is-authorization {
  color: #1f6e55;
  border-color: rgba(72, 175, 130, 0.24);
  background: linear-gradient(180deg, rgba(235, 251, 243, 0.98), rgba(219, 246, 233, 0.94));
}

.documents-category-card.is-offers .documents-category-icon,
.documents-category-card.is-purchase-orders .documents-category-icon,
.documents-category-card.is-contracts .documents-category-icon,
.documents-category-card.is-contract-templates .documents-category-icon,
.documents-category-card.is-document-templates .documents-category-icon,
.list-meta-pill.is-offers,
.list-meta-pill.is-purchase-orders,
.list-meta-pill.is-contracts,
.list-meta-pill.is-contract-templates,
.list-meta-pill.is-document-templates {
  color: #8b4f14;
  border-color: rgba(215, 151, 67, 0.26);
  background: linear-gradient(180deg, rgba(255, 248, 233, 0.98), rgba(255, 238, 198, 0.94));
}

.documents-category-card.is-vehicles .documents-category-icon,
.list-meta-pill.is-vehicles {
  color: #27546f;
  border-color: rgba(102, 136, 182, 0.26);
  background: linear-gradient(180deg, rgba(240, 246, 255, 0.98), rgba(227, 237, 255, 0.94));
}

.documents-category-card.is-people .documents-category-icon,
.documents-category-card.is-people-training .documents-category-icon,
.documents-category-card.is-absence .documents-category-icon,
.list-meta-pill.is-people,
.list-meta-pill.is-people-training,
.list-meta-pill.is-absence {
  color: #7a3f78;
  border-color: rgba(188, 110, 182, 0.24);
  background: linear-gradient(180deg, rgba(252, 240, 255, 0.98), rgba(245, 228, 255, 0.94));
}

@media (max-width: 1180px) {
  .documents-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .documents-folder-head,
  .documents-folder-toggle,
  .documents-file-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .documents-folder-meta,
  .documents-file-actions {
    justify-content: flex-start;
  }

  .documents-folder-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .documents-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .documents-category-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.documents-explorer-shell {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.documents-explorer-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}

.documents-explorer-topbar h3 {
  margin: 0;
}

.documents-refresh-meta {
  margin: 6px 0 0;
  color: #6f7a91;
  font-size: 0.78rem;
}

.documents-refresh-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}

.documents-explorer-shell .panel {
  border-radius: 8px;
}

.documents-explorer-shell .section-heading {
  margin-bottom: 10px;
}

.documents-toggle-folders-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}

.documents-toggle-folders-button svg {
  width: 18px;
  height: 18px;
}

.documents-library-panel .documents-filters {
  margin-bottom: 10px;
}

.documents-category-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.documents-category-card {
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 7px 9px;
  text-align: left;
  color: #263551;
  font: inherit;
  transition: background 120ms ease, color 120ms ease;
}

.documents-category-card:hover,
.documents-category-card:focus-visible,
.documents-category-card.is-active {
  border-color: transparent;
  box-shadow: none;
  transform: none;
  background: rgba(44, 103, 167, 0.1);
  color: #163f75;
}

.documents-category-card.is-active {
  background: rgba(44, 103, 167, 0.15);
}

.documents-category-card .documents-category-icon {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: currentColor;
}

.documents-category-card .documents-category-icon svg {
  width: 16px;
  height: 16px;
}

.documents-category-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.2;
}

.documents-explorer-header,
.documents-folder-head,
.documents-file-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(120px, 170px) minmax(96px, 130px) minmax(88px, auto);
  align-items: center;
}

.documents-explorer-header {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(167, 181, 213, 0.36);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: rgba(247, 250, 255, 0.96);
  color: #66748f;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.documents-folder-list {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(167, 181, 213, 0.36);
  border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, 0.96);
}

.documents-folder-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.documents-folder-card + .documents-folder-card {
  border-top: 1px solid rgba(218, 225, 240, 0.86);
}

.documents-folder-card.is-expanded {
  border-color: transparent;
}

.documents-folder-head {
  gap: 0;
  min-height: 44px;
  padding: 0;
}

.documents-folder-head:hover {
  background: rgba(236, 244, 255, 0.78);
}

.documents-folder-toggle {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 18px 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}

.documents-folder-toggle-mark {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 4px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: #65728d;
  font-size: 0.9rem;
  line-height: 1;
}

.documents-folder-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #b58022;
}

.documents-folder-icon svg {
  width: 22px;
  height: 22px;
}

.documents-folder-icon.is-measurement {
  color: #1b799a;
}

.documents-folder-icon.is-legal {
  color: #7a4a9a;
}

.documents-folder-icon.is-authorization {
  color: #2b7d61;
}

.documents-folder-icon.is-work-orders {
  color: #2f68a8;
}

.documents-folder-icon.is-companies {
  color: #315b77;
}

.documents-folder-icon.is-offers,
.documents-folder-icon.is-purchase-orders,
.documents-folder-icon.is-contracts,
.documents-folder-icon.is-contract-templates,
.documents-folder-icon.is-document-templates {
  color: #b58022;
}

.documents-folder-icon.is-vehicles {
  color: #3c6587;
}

.documents-folder-icon.is-people,
.documents-folder-icon.is-absence {
  color: #8a4c86;
}

.documents-folder-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.documents-folder-title-row {
  min-width: 0;
  display: block;
}

.documents-folder-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2f4a;
  font-size: 0.92rem;
}

.documents-folder-subtitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6f7a91;
  font-size: 0.76rem;
  line-height: 1.25;
}

.documents-folder-kind,
.documents-folder-date,
.documents-file-kind,
.documents-file-date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 10px;
  color: #64718a;
  font-size: 0.8rem;
}

.documents-folder-head-actions,
.documents-file-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 6px 10px;
}

.documents-folder-body {
  display: block;
  padding: 0;
  border-top: 1px solid rgba(218, 225, 240, 0.86);
  background: rgba(249, 251, 255, 0.92);
}

.documents-file-row {
  gap: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.documents-file-row + .documents-file-row {
  border-top: 1px solid rgba(226, 232, 244, 0.82);
}

.documents-file-row:hover {
  background: rgba(232, 242, 255, 0.72);
}

.documents-file-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px 8px 54px;
}

.documents-file-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.documents-file-title-row .documents-explorer-icon {
  width: 16px;
  height: 16px;
  color: #5a6986;
}

.documents-file-signed-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #0f8a5f;
  background: linear-gradient(135deg, rgba(21, 185, 129, 0.16), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(21, 185, 129, 0.34);
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.12);
}

.documents-file-signed-badge svg {
  width: 14px;
  height: 14px;
}

.documents-file-title {
  min-width: 0;
  color: #22304d;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-file-description,
.documents-file-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #758096;
  font-size: 0.74rem;
  line-height: 1.25;
}

@media (max-width: 980px) {
  .documents-explorer-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .documents-category-list {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}

@media (max-width: 760px) {
  .documents-explorer-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .documents-explorer-header {
    display: none;
  }

  .documents-folder-list {
    border-radius: 8px;
  }

  .documents-folder-head,
  .documents-file-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .documents-folder-kind,
  .documents-folder-date,
  .documents-file-kind,
  .documents-file-date {
    display: none;
  }

  .documents-folder-head-actions,
  .documents-file-actions {
    justify-content: flex-start;
    padding-left: 54px;
  }
}

.documents-explorer-shell {
  grid-template-columns: minmax(236px, 284px) minmax(0, 1fr);
  gap: 16px;
}

.documents-explorer-shell .panel {
  border-radius: 16px;
}

.documents-explorer-topbar {
  padding: 18px 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(250, 204, 21, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff, #f8fbff);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.documents-explorer-topbar h3 {
  color: #0f172a;
  font-size: clamp(1.25rem, 1.5vw, 1.65rem);
  letter-spacing: 0;
}

.documents-topbar-copy {
  max-width: 760px;
  margin: 6px 0 0;
  color: #526178;
  font-size: 0.88rem;
  line-height: 1.45;
}

.documents-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.documents-scope-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.5);
  background: rgba(254, 249, 195, 0.72);
  color: #713f12;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.documents-refresh-button,
.documents-toggle-folders-button {
  border-color: rgba(30, 64, 175, 0.18);
  background: #ffffff;
  color: #1e3a8a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.documents-categories-panel,
.documents-library-panel {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.documents-category-list {
  gap: 8px;
}

.documents-category-card {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
  color: #1f2a44;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.documents-category-card:hover,
.documents-category-card:focus-visible {
  border-color: rgba(37, 99, 235, 0.26);
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.documents-category-card.is-active {
  border-color: rgba(250, 204, 21, 0.68);
  background:
    radial-gradient(circle at 0 0, rgba(250, 204, 21, 0.16), transparent 48%),
    linear-gradient(180deg, #ffffff, #fffdf2);
  box-shadow: 0 16px 34px rgba(113, 63, 18, 0.12);
}

.documents-category-card .documents-category-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(30, 64, 175, 0.16);
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
}

.documents-category-card .documents-category-icon svg {
  width: 21px;
  height: 21px;
}

.documents-category-card strong {
  align-self: center;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
}

.documents-category-count,
.documents-folder-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #f8fafc;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.documents-category-card.is-active .documents-category-count {
  border-color: rgba(250, 204, 21, 0.72);
  background: #facc15;
  color: #111827;
}

.documents-explorer-header,
.documents-folder-head,
.documents-file-row {
  grid-template-columns: minmax(280px, 1fr) minmax(110px, 150px) minmax(100px, 130px) minmax(112px, auto);
}

.documents-explorer-header {
  min-height: 38px;
  padding: 0 14px;
  border-color: rgba(148, 163, 184, 0.26);
  border-radius: 14px 14px 0 0;
  background: #f8fafc;
  color: #475569;
}

.documents-folder-list {
  border-color: rgba(148, 163, 184, 0.26);
  border-radius: 0 0 14px 14px;
}

.documents-folder-card + .documents-folder-card,
.documents-file-row + .documents-file-row {
  border-top-color: rgba(226, 232, 240, 0.96);
}

.documents-folder-head {
  min-height: 60px;
  transition: background 140ms ease;
}

.documents-folder-head:hover {
  background: #f8fbff;
}

.documents-folder-toggle {
  grid-template-columns: 22px 38px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 14px;
}

.documents-folder-toggle-mark {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
}

.documents-folder-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(30, 64, 175, 0.15);
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
}

.documents-folder-icon svg {
  width: 22px;
  height: 22px;
}

.documents-folder-icon.is-measurement {
  background: #ecfeff;
  border-color: rgba(8, 145, 178, 0.22);
  color: #0e7490;
}

.documents-folder-icon.is-legal {
  background: #faf5ff;
  border-color: rgba(147, 51, 234, 0.22);
  color: #7e22ce;
}

.documents-folder-icon.is-authorization {
  background: #ecfdf5;
  border-color: rgba(5, 150, 105, 0.22);
  color: #047857;
}

.documents-folder-icon.is-offers,
.documents-folder-icon.is-purchase-orders,
.documents-folder-icon.is-contracts {
  background: #fffbeb;
  border-color: rgba(217, 119, 6, 0.22);
  color: #b45309;
}

.documents-folder-icon.is-vehicles {
  background: #f1f5f9;
  border-color: rgba(71, 85, 105, 0.22);
  color: #475569;
}

.documents-folder-icon.is-people,
.documents-folder-icon.is-people-training,
.documents-folder-icon.is-absence {
  background: #fdf2f8;
  border-color: rgba(219, 39, 119, 0.18);
  color: #be185d;
}

.documents-folder-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.documents-folder-title {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
}

.documents-folder-count {
  flex: 0 0 auto;
  min-width: auto;
  height: 22px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 0.68rem;
}

.documents-folder-subtitle {
  color: #64748b;
  font-size: 0.78rem;
}

.documents-folder-kind,
.documents-folder-date,
.documents-file-date {
  color: #64748b;
  font-size: 0.78rem;
}

.documents-file-row {
  min-height: 54px;
  transition: background 140ms ease;
}

.documents-file-row:hover {
  background: #f8fbff;
}

.documents-file-copy {
  gap: 4px;
  padding: 10px 12px 10px 74px;
}

.documents-file-title-row {
  gap: 10px;
}

.documents-file-title-row .documents-explorer-icon.is-file {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

.documents-file-title-row .documents-explorer-icon.is-file svg {
  width: 17px;
  height: 17px;
}

.documents-file-title-row .documents-explorer-icon.is-pdf {
  border-color: rgba(220, 38, 38, 0.2);
  background: #fef2f2;
  color: #b91c1c;
}

.documents-file-title-row .documents-explorer-icon.is-word {
  border-color: rgba(37, 99, 235, 0.2);
  background: #eff6ff;
  color: #1d4ed8;
}

.documents-file-title-row .documents-explorer-icon.is-image {
  border-color: rgba(5, 150, 105, 0.2);
  background: #ecfdf5;
  color: #047857;
}

.documents-file-title-row .documents-explorer-icon.is-record {
  border-color: rgba(124, 58, 237, 0.2);
  background: #f5f3ff;
  color: #6d28d9;
}

.documents-file-title {
  color: #172033;
  font-size: 0.9rem;
  font-weight: 800;
}

.documents-file-kind {
  justify-self: start;
  margin-left: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
}

.documents-file-description,
.documents-file-meta {
  color: #64748b;
}

@media (max-width: 980px) {
  .documents-explorer-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .documents-category-list {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

@media (max-width: 760px) {
  .documents-topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .documents-folder-toggle {
    grid-template-columns: 22px 38px minmax(0, 1fr);
  }

  .documents-file-copy {
    padding-left: 14px;
  }

  .documents-folder-head-actions,
  .documents-file-actions {
    padding-left: 64px;
  }
}

.legal-framework-card,
.service-catalog-card,
.measurement-equipment-card,
.safety-authorization-card,
.document-template-card {
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 24px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  gap: 12px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.legal-framework-card:hover,
.legal-framework-card:focus-visible,
.legal-framework-card.is-active,
.service-catalog-card:hover,
.service-catalog-card:focus-visible,
.service-catalog-card.is-active,
.measurement-equipment-card:hover,
.measurement-equipment-card:focus-visible,
.measurement-equipment-card.is-active,
.safety-authorization-card:hover,
.safety-authorization-card:focus-visible,
.safety-authorization-card.is-active,
.document-template-card:hover,
.document-template-card:focus-visible,
.document-template-card.is-active {
  border-color: rgba(32, 102, 79, 0.32);
  box-shadow: 0 16px 34px rgba(29, 60, 47, 0.12);
  transform: translateY(-1px);
}

.legal-framework-card-head,
.service-catalog-card-head,
.measurement-equipment-card-head,
.safety-authorization-card-head,
.document-template-card-head,
.document-template-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.document-template-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(181, 116, 165, 0.34);
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 250, 0.98));
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 14px 28px rgba(91, 70, 129, 0.08);
}

.document-template-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.96), rgba(122, 97, 255, 0.86));
}

.document-template-card:hover,
.document-template-card:focus-visible,
.document-template-card.is-active {
  border-color: rgba(176, 90, 155, 0.46);
  box-shadow:
    0 20px 40px rgba(83, 59, 122, 0.14),
    0 0 0 1px rgba(215, 90, 177, 0.08);
}

.document-template-card-head,
.document-template-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: initial;
}

.document-template-head-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.document-template-runtime-save-progress {
  align-items: center;
  gap: 7px;
}

.document-template-runtime-save-progress .icon-svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}

.document-template-layout-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.document-template-workspace-head-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.document-template-runtime-header-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  align-items: stretch;
}

.document-template-runtime-header-badges > .document-template-runtime-chip {
  min-width: 0;
  cursor: default;
  width: 100%;
}

.document-template-runtime-header-badges > .document-template-runtime-badge,
.document-template-runtime-header-badges > .document-template-runtime-chip {
  width: 100%;
}

.measurement-equipment-card-head {
  justify-content: space-between;
  align-items: flex-start;
}

.measurement-equipment-tab-strip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid rgba(120, 73, 166, 0.18);
  border-radius: 16px;
  background: rgba(248, 246, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.measurement-equipment-tab-button {
  border: 1px solid transparent;
  border-radius: 12px;
  min-height: 38px;
  padding: 0 14px;
  color: #4d6178;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.measurement-equipment-tab-button:hover,
.measurement-equipment-tab-button:focus-visible {
  border-color: rgba(120, 73, 166, 0.22);
  color: #25324a;
  background: rgba(255, 255, 255, 0.78);
}

.measurement-equipment-tab-button.is-active {
  border-color: rgba(66, 111, 211, 0.26);
  color: #1d5fc6;
  background: #fff;
  box-shadow: 0 12px 24px rgba(92, 52, 140, 0.1);
}

.measurement-equipment-card--emphasized {
  border-color: rgba(120, 73, 166, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 247, 255, 0.98));
  box-shadow: 0 12px 28px rgba(92, 52, 140, 0.12);
}

.measurement-equipment-card--emphasized:hover,
.measurement-equipment-card--emphasized:focus-visible,
.measurement-equipment-card--emphasized.is-active {
  border-color: rgba(120, 73, 166, 0.48);
  box-shadow: 0 16px 34px rgba(92, 52, 140, 0.18);
}

.measurement-equipment-card--emphasized .measurement-equipment-card-meta {
  color: #466559;
  font-weight: 600;
}

.measurement-equipment-card-footer {
  justify-content: flex-start;
  align-items: flex-start;
}

.measurement-equipment-card-groups {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: stretch;
}

.measurement-equipment-card-group {
  border: 1px solid rgba(120, 73, 166, 0.18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  gap: 8px;
  min-width: 0;
}

.measurement-equipment-card-group-label {
  margin: 0;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d4a92;
  font-weight: 700;
}

.measurement-equipment-card-group .measurement-equipment-chip,
.measurement-equipment-card-group .service-catalog-template-badge {
  font-weight: 700;
}

.measurement-equipment-isznr-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.measurement-equipment-isznr-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(120, 73, 166, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
}

.measurement-equipment-isznr-stat span {
  font-size: 0.72rem;
  color: #60718a;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.measurement-equipment-isznr-stat strong {
  color: #14243c;
  font-size: 1.35rem;
  line-height: 1.1;
}

.measurement-equipment-isznr-list {
  display: grid;
  gap: 12px;
}

.measurement-equipment-isznr-card {
  border: 1px solid rgba(120, 73, 166, 0.2);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  gap: 12px;
  box-shadow: 0 12px 24px rgba(65, 72, 105, 0.08);
}

.measurement-equipment-isznr-card.is-linked {
  border-color: rgba(45, 143, 83, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 244, 0.98));
}

.measurement-equipment-isznr-card.is-probable {
  border-color: rgba(216, 157, 45, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 235, 0.98));
}

.measurement-equipment-isznr-card.is-unlinked {
  border-color: rgba(196, 79, 91, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 248, 0.98));
}

.measurement-equipment-isznr-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
}

.measurement-equipment-isznr-details {
  display: grid;
  gap: 6px;
  color: #51637a;
}

.measurement-equipment-isznr-detail {
  margin: 0;
  line-height: 1.45;
}

.measurement-equipment-isznr-detail.is-status {
  font-weight: 700;
  color: #34465e;
}

.measurement-equipment-isznr-status {
  font-weight: 800;
}

.measurement-equipment-isznr-status.is-linked {
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
  border-color: rgba(45, 143, 83, 0.24);
}

.measurement-equipment-isznr-status.is-probable {
  background: rgba(255, 244, 222, 0.98);
  color: #9a6a17;
  border-color: rgba(216, 157, 45, 0.28);
}

.measurement-equipment-isznr-status.is-unlinked {
  background: rgba(255, 238, 242, 0.98);
  color: #a33b4a;
  border-color: rgba(196, 79, 91, 0.24);
}

.measurement-equipment-isznr-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

.measurement-equipment-isznr-local-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(135, 153, 180, 0.28);
  border-radius: 14px;
  background: rgba(247, 250, 255, 0.92);
  color: #3d4b66;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.measurement-equipment-isznr-local-status-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(83, 118, 255, 0.12);
  color: #2d5bd7;
  font-size: 0.82rem;
  font-weight: 900;
}

.measurement-equipment-isznr-local-status.is-success {
  border-color: rgba(42, 157, 88, 0.28);
  background: rgba(230, 248, 238, 0.94);
  color: #12633b;
}

.measurement-equipment-isznr-local-status.is-success .measurement-equipment-isznr-local-status-icon {
  background: rgba(42, 157, 88, 0.14);
  color: #168248;
}

.measurement-equipment-isznr-local-status.is-warning {
  border-color: rgba(216, 157, 45, 0.32);
  background: rgba(255, 248, 224, 0.94);
  color: #7a5420;
}

.measurement-equipment-isznr-local-status.is-warning .measurement-equipment-isznr-local-status-icon {
  background: rgba(216, 157, 45, 0.18);
  color: #a56c16;
}

.measurement-equipment-isznr-local-status.is-error {
  border-color: rgba(196, 79, 91, 0.28);
  background: rgba(255, 238, 242, 0.96);
  color: #a33b4a;
}

.measurement-equipment-isznr-local-status.is-error .measurement-equipment-isznr-local-status-icon {
  background: rgba(196, 79, 91, 0.16);
  color: #a33b4a;
}

.measurement-equipment-isznr-panel .helper-copy.is-error {
  color: #a33b4a;
  font-weight: 700;
}

.measurement-equipment-card-copy,
.measurement-equipment-card-note,
.measurement-equipment-card-meta {
  text-align: left;
}

.legal-framework-card-heading,
.service-catalog-card-copy,
.measurement-equipment-card-copy,
.safety-authorization-card-copy,
.document-template-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: start;
  text-align: left;
}

.legal-framework-card h4,
.service-catalog-card h4,
.measurement-equipment-card h4,
.safety-authorization-card h4,
.document-template-card h4 {
  margin: 0;
  font-size: 1.05rem;
  color: #22352d;
}

.legal-framework-card-meta,
.service-catalog-card-meta,
.measurement-equipment-card-meta,
.safety-authorization-card-meta,
.document-template-card-meta,
.document-template-card-description,
.legal-framework-card-note,
.service-catalog-card-note,
.measurement-equipment-card-note,
.safety-authorization-card-note,
.service-catalog-card-updated {
  margin: 0;
  color: #60796f;
  line-height: 1.45;
}

.document-template-card-description {
  color: #42584f;
}

.legal-framework-card-footer,
.service-catalog-card-footer,
.measurement-equipment-card-footer,
.document-template-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.document-template-card-footer {
  justify-content: space-between;
}

.document-template-card-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.document-template-card-action.is-danger {
  min-height: 34px;
  padding: 0 12px;
  border-color: rgba(205, 76, 94, 0.34);
  color: #a73547;
  background: rgba(255, 247, 249, 0.96);
}

.document-template-card-action.is-danger:hover,
.document-template-card-action.is-danger:focus-visible {
  border-color: rgba(205, 76, 94, 0.58);
  color: #8f2637;
  background: rgba(255, 239, 243, 0.98);
}

.legal-framework-card-dates,
.legal-framework-card-tags,
.service-catalog-card-templates,
.measurement-equipment-card-badges,
.measurement-equipment-card-chips,
.safety-authorization-card-chips,
.document-template-card-badges,
.document-template-card-chips,
.document-template-preview-pill-row,
.document-template-placeholder-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-card-badges {
  justify-content: flex-end;
}

.legal-framework-list-panel {
  display: grid;
  gap: 16px;
}

.rulebooks-hero-panel,
.rulebooks-list-panel {
  display: grid;
  gap: 16px;
}

.rulebooks-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) minmax(160px, 220px);
}

.legal-framework-list-heading {
  align-items: flex-start;
  gap: 12px;
}

.rulebooks-list-heading {
  align-items: flex-start;
  gap: 12px;
}

.service-catalog-list-heading {
  align-items: flex-start;
  gap: 12px;
}

.legal-framework-list-heading > .primary-button {
  flex: 0 0 auto;
}

.rulebooks-list-heading > .primary-button {
  flex: 0 0 auto;
}

.service-catalog-list-heading > .primary-button {
  flex: 0 0 auto;
}

.rulebook-preset-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rulebook-preset-card,
.rulebook-card {
  border: 1px solid rgba(48, 71, 110, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07);
  min-width: 0;
}

.rulebook-preset-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.rulebook-preset-icon,
.rulebook-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2857d9;
  background: linear-gradient(135deg, rgba(235, 240, 255, 0.98), rgba(246, 248, 255, 0.95));
  box-shadow: inset 0 0 0 1px rgba(40, 87, 217, 0.12);
}

.rulebook-preset-icon .icon-svg,
.rulebook-card-icon .icon-svg {
  width: 22px;
  height: 22px;
}

.rulebook-preset-copy,
.rulebook-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.rulebook-preset-copy strong,
.rulebook-card-title h4 {
  color: #111827;
  line-height: 1.25;
}

.rulebook-preset-copy span,
.rulebook-card-title p,
.rulebook-card-summary {
  color: #64748b;
}

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

.rulebook-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.rulebook-card:hover,
.rulebook-card:focus-visible,
.rulebook-card.is-active {
  transform: translateY(-1px);
  border-color: rgba(40, 87, 217, 0.32);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.1);
  outline: none;
}

.rulebook-card-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.rulebook-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rulebook-card-title h4 {
  margin: 0;
  font-size: 1.02rem;
}

.rulebook-card-title p,
.rulebook-card-summary {
  margin: 0;
  font-size: 0.86rem;
}

.rulebook-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rulebook-status-badge,
.rulebook-meta-badge {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  border: 1px solid rgba(40, 87, 217, 0.14);
  background: rgba(248, 250, 252, 0.98);
  color: #334155;
}

.rulebook-status-badge.is-active {
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
  border-color: rgba(34, 197, 94, 0.2);
}

.rulebook-status-badge.is-review,
.rulebook-meta-badge.is-review {
  background: rgba(255, 244, 222, 0.98);
  color: #9a6a17;
  border-color: rgba(250, 204, 21, 0.32);
}

.rulebook-status-badge.is-archived {
  background: rgba(244, 244, 245, 0.98);
  color: #71717a;
}

.rulebook-document-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.rulebook-editor-panel.is-modal-open {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 28px));
  height: min(90vh, calc(100vh - 28px));
  z-index: 210;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.rulebook-editor-body {
  overflow: auto;
  padding: 18px;
}

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

.legal-framework-card {
  gap: 14px;
  padding: 18px 20px;
}

.legal-framework-card-head {
  justify-content: space-between;
  align-items: flex-start;
}

.legal-framework-card-primary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.legal-framework-card-heading {
  flex: 1 1 auto;
  text-align: left;
}

.legal-framework-card-actions,
.safety-authorization-card-actions,
.legal-framework-card-documents {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.legal-framework-card-download-button,
.safety-authorization-card-download-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
}

.legal-framework-card-footer {
  justify-content: flex-start;
}

.legal-framework-document-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.legal-framework-documents-block .document-template-reference-actions > button {
  flex: 0 0 auto;
  min-width: 128px;
}

.measurement-equipment-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
}

.measurement-equipment-card-action-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.measurement-equipment-card-action-button svg {
  width: 15px;
  height: 15px;
  display: block;
}

.legal-framework-status-badge,
.service-catalog-status-badge,
.document-template-status-badge,
.legal-framework-meta-badge,
.measurement-equipment-chip,
.document-template-meta-badge,
.legal-framework-tag,
.service-catalog-template-badge,
.document-template-inline-token {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.96);
  color: #335447;
}

.legal-framework-status-badge.is-active,
.service-catalog-status-badge.is-active,
.document-template-status-badge.is-active {
  background: rgba(232, 247, 238, 0.98);
  color: #2b7a52;
}

.legal-framework-status-badge.is-inactive,
.service-catalog-status-badge.is-inactive,
.document-template-status-badge.is-archived {
  background: rgba(246, 242, 239, 0.98);
  color: #7a6154;
}

.document-template-status-badge.is-draft,
.legal-framework-meta-badge.is-review {
  background: rgba(255, 244, 222, 0.98);
  color: #9a6a17;
}

.legal-framework-tag.is-muted {
  opacity: 0.72;
}

.measurement-equipment-chip.is-warning {
  background: rgba(255, 244, 222, 0.98);
  color: #9a6a17;
}

.legal-framework-editor-panel.is-modal-open,
.service-catalog-editor-panel.is-modal-open,
.measurement-equipment-editor-panel.is-modal-open,
.safety-authorization-editor-panel.is-modal-open,
.document-template-editor-panel.is-modal-open {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1160px, calc(100vw - 28px));
  height: min(90vh, calc(100vh - 28px));
  z-index: 210;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
}

.measurement-equipment-editor-panel.is-modal-open {
  width: min(1480px, calc(100vw - 20px));
  height: min(94vh, calc(100vh - 20px));
}

.document-template-editor-panel.is-modal-open.is-fill-mode {
  top: 4px;
  width: min(1780px, calc(100vw - 8px));
  height: min(98.5vh, calc(100vh - 8px));
  border-radius: 24px;
}

@media (min-width: 961px) {
  .document-template-editor-panel.is-modal-open.is-fill-mode {
    width: min(1720px, calc(100vw - 176px));
  }

  .document-template-editor-panel.is-workspace-open.is-fill-mode {
    inset: 6px 88px;
    left: 88px;
    right: 88px;
    width: auto;
    height: auto;
    transform: none;
  }
}

.legal-framework-editor-body,
.service-catalog-editor-body,
.measurement-equipment-editor-body,
.safety-authorization-editor-body,
.document-template-editor-body {
  min-height: 0;
  overflow: auto;
  padding: 0 18px 20px;
}

.measurement-equipment-editor-panel.is-modal-open .measurement-equipment-editor-body {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 14px 14px;
}

.measurement-equipment-editor-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: 14px;
}

.measurement-equipment-form {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding-right: 6px;
}

.measurement-equipment-side-activity-panel {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(183, 103, 205, 0.32);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 246, 255, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  overflow: auto;
  overscroll-behavior: contain;
}

.measurement-equipment-side-activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.measurement-equipment-side-activity-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c2740;
}

.measurement-equipment-side-activity-panel .module-copy {
  margin: 0;
}

.measurement-equipment-side-activity-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.measurement-equipment-side-activity-controls .field {
  margin: 0;
}

.measurement-equipment-side-activity-controls .field span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.measurement-equipment-side-activity-controls select,
.measurement-equipment-side-activity-controls input {
  min-height: 38px;
  font-size: 0.86rem;
}

.measurement-equipment-side-activity-panel .work-order-activity-list {
  gap: 8px;
  overflow: visible;
  padding-right: 0;
}

.measurement-equipment-side-activity-item {
  display: grid;
  gap: 3px;
  border-radius: 14px;
  border: 1px solid rgba(173, 102, 203, 0.22);
  background: rgba(255, 255, 255, 0.96);
  padding: 9px 10px;
}

.measurement-equipment-side-activity-item.is-system {
  border-color: rgba(124, 138, 176, 0.34);
  background: rgba(246, 248, 255, 0.95);
}

.measurement-equipment-side-activity-item.is-usage {
  border-color: rgba(83, 150, 128, 0.34);
  background: rgba(242, 251, 248, 0.95);
}

.measurement-equipment-side-activity-item.is-draft {
  border-color: rgba(209, 133, 82, 0.34);
  background: rgba(255, 248, 239, 0.96);
}

.measurement-equipment-side-activity-item.is-comment {
  border-color: rgba(169, 92, 194, 0.36);
  background: rgba(250, 242, 255, 0.97);
}

.measurement-equipment-side-activity-title {
  margin: 0;
  color: #242135;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.measurement-equipment-side-activity-subtitle {
  margin: 0;
  color: #6a617e;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
}

.measurement-equipment-side-activity-details {
  margin: 0;
  color: #5f6886;
  font-size: 0.74rem;
  line-height: 1.35;
}

.measurement-equipment-side-activity-comment {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(173, 102, 203, 0.26);
}

.measurement-equipment-side-activity-comment .field {
  margin: 0;
}

.measurement-equipment-side-activity-comment textarea {
  min-height: 82px;
  resize: vertical;
}

.measurement-equipment-side-activity-comment .primary-button {
  justify-self: end;
  min-height: 36px;
  padding: 0 14px;
}

.document-template-editor-panel.is-workspace-open {
  position: fixed;
  inset: 10px;
  z-index: 210;
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 16px 18px;
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(20, 33, 27, 0.18);
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) {
  left: 104px;
}

.document-template-editor-panel.is-workspace-open .document-template-editor-body {
  flex: 1 1 auto;
  height: 100%;
  padding: 0;
  overflow: auto;
  display: flex;
  min-height: 0;
  overscroll-behavior: contain;
}

.document-template-editor-panel.is-fill-mode .document-template-editor-body {
  padding: 0 16px 0;
  overflow: hidden;
  display: flex;
  min-height: 0;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding-bottom: 26px;
}

.document-template-editor-panel.is-fill-mode .document-template-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 10px;
  overscroll-behavior: contain;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-dock {
  position: static;
  flex: 0 0 auto;
  margin: 2px 0 8px;
}

.document-template-editor-panel.is-fill-mode .form-actions {
  display: none !important;
}

body.is-document-template-editor-open {
  overflow: hidden;
}

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

.service-catalog-people-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-radius: 16px;
  background: rgba(244, 248, 255, 0.88);
}

.service-catalog-people-check input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: #2f6fed;
}

.service-catalog-people-check > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.service-catalog-people-check strong {
  color: #172743;
  font-size: 0.88rem;
}

.service-catalog-people-check small {
  color: #657891;
  font-size: 0.76rem;
  font-weight: 720;
}

.service-catalog-summary-grid,
.measurement-equipment-summary-grid,
.safety-authorization-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 170px));
  justify-content: start;
  gap: 10px;
}

.service-catalog-stat-card,
.measurement-equipment-stat-card,
.safety-authorization-stat-card {
  padding: 10px 12px;
  gap: 4px;
}

.service-catalog-stat-value,
.measurement-equipment-stat-value,
.safety-authorization-stat-value {
  font-size: 1.35rem;
}

.service-catalog-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 13px 15px;
}

.service-catalog-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.service-catalog-card-head-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.service-catalog-card-copy {
  gap: 2px;
}

.service-catalog-card-copy h4 {
  font-size: 1rem;
}

.service-catalog-card-meta,
.service-catalog-card-note,
.service-catalog-card-updated {
  font-size: 0.86rem;
}

.service-catalog-card-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.service-catalog-card-templates .service-catalog-template-badge {
  padding: 4px 9px;
  font-size: 0.72rem;
}

.service-catalog-card-footer {
  justify-content: flex-start;
  gap: 10px;
}

.measurement-equipment-card,
.safety-authorization-card {
  gap: 10px;
  padding: 14px 16px;
}

.measurement-equipment-card-note,
.safety-authorization-card-note {
  font-size: 0.88rem;
}

.safety-authorization-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.measurement-equipment-card-badges {
  justify-content: flex-end;
}

.measurement-equipment-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.measurement-equipment-specs-list {
  display: grid;
  gap: 8px;
}

.measurement-equipment-spec-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 14px;
  background: rgba(247, 250, 248, 0.88);
}

.measurement-equipment-spec-index {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 22px;
  border-radius: 999px;
  border: 1px solid rgba(47, 104, 84, 0.18);
  color: #426c5a;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.measurement-equipment-spec-field {
  min-width: 0;
  gap: 4px;
}

.measurement-equipment-spec-field span {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
}

.user-editor-modules {
  display: grid;
  grid-template-areas:
    "documents"
    "electrical";
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.user-editor-module {
  min-width: 0;
  min-height: 0;
  align-self: start;
  position: relative;
  overflow: hidden;
}

.user-electrical-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.user-electrical-grid > .field {
  align-content: start;
}

.user-electrical-grid > .field:nth-child(1),
.user-electrical-grid > .field:nth-child(2) {
  grid-column: span 3;
}

.user-electrical-grid > .field:nth-child(3),
.user-electrical-grid > .field:nth-child(4),
.user-electrical-grid > .field:nth-child(5) {
  grid-column: span 2;
}

.user-documents-block,
.user-signature-module-block,
.user-electrical-qualification-block {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  align-content: start;
  border: 1px solid transparent;
  border-radius: 22px;
}

.user-documents-block::before,
.user-signature-module-block::before,
.user-electrical-qualification-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(213, 77, 192, 0.92), rgba(106, 93, 243, 0.86));
}

.user-documents-block {
  grid-area: documents;
}

.user-documents-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 248, 255, 0.98)) padding-box,
    linear-gradient(135deg, rgba(213, 77, 192, 0.72), rgba(106, 93, 243, 0.56)) border-box;
  box-shadow:
    0 16px 32px rgba(116, 78, 178, 0.06),
    0 0 0 1px rgba(204, 71, 230, 0.1);
}

.user-documents-block .section-heading,
.user-signature-module-block .section-heading,
.user-electrical-qualification-block .section-heading {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(204, 71, 230, 0.12);
}

.user-documents-block h3,
.user-signature-module-block h3,
.user-electrical-qualification-block h3 {
  margin: 0;
  font-size: 1rem;
}

.user-documents-block .section-kicker,
.user-signature-module-block .section-kicker,
.user-electrical-qualification-block .section-kicker {
  color: #c03aa7;
}

.user-documents-block .document-template-reference-actions > button {
  flex: 0 0 auto;
  min-width: 148px;
}

.user-signature-module-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(252, 248, 255, 0.98)) padding-box,
    linear-gradient(135deg, rgba(213, 77, 192, 0.72), rgba(106, 93, 243, 0.56)) border-box;
  box-shadow:
    0 16px 32px rgba(116, 78, 178, 0.06),
    0 0 0 1px rgba(204, 71, 230, 0.1);
}

.user-signature-module-block .document-template-reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-signature-module-block .document-template-reference-actions > button {
  flex: 0 0 auto;
}

.user-electrical-qualification-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(253, 246, 255, 0.98)) padding-box,
    linear-gradient(135deg, rgba(213, 77, 192, 0.78), rgba(106, 93, 243, 0.62)) border-box;
  box-shadow:
    0 18px 34px rgba(133, 78, 178, 0.08),
    0 0 0 1px rgba(204, 71, 230, 0.12);
}

.user-editor-panel .user-electrical-qualification-block {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
  border-color: rgba(204, 71, 230, 0.16);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

.user-editor-panel .user-electrical-qualification-block::before {
  height: 2px;
  background: rgba(204, 71, 230, 0.52);
}

.user-qualification-catalog-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  align-content: start;
}

.user-qualification-areas {
  display: grid;
  gap: 10px;
}

.user-qualification-service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.user-electrical-grid > .field.user-qualification-role-group {
  align-items: stretch;
  grid-column: 1 / -1;
  gap: 5px;
}

.user-electrical-grid > .field.user-qualification-role-group:not(.is-special) .user-qualification-role-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-electrical-grid > .field.user-qualification-service-field {
  grid-column: 1 / -1;
  gap: 6px;
}

.user-qualification-role-options {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.user-qualification-service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px;
  max-height: 156px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.user-qualification-checkbox {
  min-height: 32px;
  padding: 0 9px;
  gap: 8px;
  border-radius: 10px;
  font-size: 0.76rem;
  letter-spacing: 0;
  line-height: 1.2;
  box-sizing: border-box;
}

.user-electrical-qualification-block .user-qualification-checkbox input[type="checkbox"] {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  flex: 0 0 14px;
  margin: 0;
}

.user-electrical-qualification-block .user-qualification-checkbox span {
  font-size: 0.76rem;
  letter-spacing: 0;
  color: #4f5d78;
}

.user-qualification-service-option {
  min-height: 36px;
  padding: 7px 9px;
  gap: 8px;
  border-radius: 10px;
  border-color: rgba(204, 71, 230, 0.16);
  background: rgba(255, 255, 255, 0.94);
  align-items: center;
}

.user-qualification-service-option input[type="checkbox"] {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  margin: 0;
}

.user-qualification-service-option .service-catalog-template-option-copy {
  gap: 2px;
}

.user-qualification-service-option .service-catalog-template-option-copy strong {
  color: #34415b;
  font-size: 0.78rem;
  line-height: 1.2;
}

.user-qualification-service-option .service-catalog-template-option-copy span {
  color: #748097;
  font-size: 0.68rem;
  line-height: 1.2;
}

.user-qualification-service-empty {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed rgba(204, 71, 230, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.user-electrical-grid > .field.user-qualification-field-type {
  grid-column: span 3;
}

.user-electrical-qualification-block.has-special-roles .user-electrical-grid > .field.user-qualification-field-type {
  grid-column: 1 / -1;
}

.user-electrical-grid > .field.user-qualification-field-data1,
.user-electrical-grid > .field.user-qualification-field-data2,
.user-electrical-grid > .field.user-qualification-field-data3,
.user-electrical-grid > .field.user-qualification-field-passedOn,
.user-electrical-grid > .field.user-qualification-field-validUntil,
.user-electrical-grid > .field.qualification-validity-field {
  grid-column: span 2;
}

.user-electrical-grid > .field.qualification-validity-field .checkbox-field {
  min-height: 36px;
  padding: 0 10px;
  gap: 8px;
  border-radius: 10px;
  font-size: 0.76rem;
  letter-spacing: 0;
  line-height: 1.2;
}

.user-electrical-grid > .field.qualification-validity-field input[type="checkbox"] {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  flex: 0 0 14px;
  margin: 0;
}

.user-editor-panel .module-attachment-list {
  margin-top: 0;
}

.user-documents-block .module-attachment-list {
  gap: 7px;
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.user-documents-block .module-attachment-row {
  padding: 8px 10px;
  border-radius: 14px;
  gap: 8px;
  align-items: center;
  border-color: rgba(204, 71, 230, 0.12);
  background: rgba(255, 255, 255, 0.94);
}

.user-documents-block .module-attachment-row.is-unclassified {
  border-color: rgba(214, 113, 62, 0.34);
  box-shadow: 0 0 0 1px rgba(214, 113, 62, 0.08);
}

.user-documents-block .module-attachment-copy {
  gap: 4px;
}

.user-documents-block .module-attachment-meta {
  color: #6d768d;
  font-size: 0.72rem;
}

.user-documents-block .module-attachment-fields {
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, 0.9fr);
  gap: 6px;
  margin-top: 0;
}

.user-documents-block .module-attachment-field {
  max-width: none;
  gap: 3px;
}

.user-documents-block .module-attachment-field.is-custom-category {
  grid-column: 1 / -1;
}

.user-documents-block .module-attachment-field-label {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.user-documents-block .module-attachment-field input,
.user-documents-block .module-attachment-category-select {
  min-height: 34px;
}

.user-documents-block .module-attachment-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-self: center;
}

.user-documents-block .module-attachment-actions .card-button {
  min-width: 76px;
  min-height: 32px;
  padding: 0 9px;
}

.user-documents-block .module-attachment-empty {
  display: block;
  min-height: 90px;
  border: 1px dashed rgba(204, 71, 230, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
}

.user-electrical-qualification-block .section-heading + .form-grid {
  margin-top: 2px;
}

.user-electrical-qualification-block .field span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #6d6787;
}

.user-electrical-qualification-block select,
.user-electrical-qualification-block input:not([type="checkbox"]) {
  min-height: 42px;
}

.user-signature-field {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
  border: 1px dashed rgba(204, 71, 230, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
}

.user-signature-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-signature-field-head span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6d6787;
}

.user-signature-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-signature-upload-preview {
  display: grid;
  place-items: center;
  min-height: 168px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(204, 71, 230, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 245, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.user-signature-upload-preview::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(213, 77, 192, 0.14), rgba(106, 93, 243, 0.18));
  box-shadow: inset 0 0 0 1px rgba(204, 71, 230, 0.14);
}

.user-signature-upload-preview.is-empty::after {
  content: "Dodaj potpis";
  margin-top: 10px;
  font-size: 0.82rem;
  color: #756f91;
  letter-spacing: 0.04em;
}

.user-signature-upload-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(92, 66, 120, 0.12));
}

.user-signature-upload-preview:not(.is-empty)::before,
.user-signature-upload-preview:not(.is-empty)::after {
  content: none;
}

.user-editor-panel .form-actions {
  justify-content: flex-end;
  position: static;
  margin-top: 10px;
  padding-top: 6px;
  padding-bottom: 4px;
  background: transparent;
}

.user-editor-panel .masterdata-editor-head-actions .primary-button {
  min-width: 170px;
}

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

.module-attachment-list {
  display: grid;
  gap: 10px;
}

.module-attachment-row {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  background: rgba(247, 250, 248, 0.92);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.module-attachment-row.is-unclassified {
  border-color: rgba(214, 113, 62, 0.32);
  box-shadow: 0 0 0 1px rgba(214, 113, 62, 0.08);
}

.module-attachment-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.module-attachment-copy strong,
.module-attachment-copy span,
.module-attachment-description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-attachment-copy span,
.module-attachment-description {
  color: #60796f;
  font-size: 0.84rem;
}

.module-attachment-fields {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.module-attachment-middle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
}

.module-attachment-field {
  display: grid;
  gap: 6px;
  max-width: 320px;
}

.module-attachment-field-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #60796f;
}

.module-attachment-category-select {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(47, 104, 84, 0.18);
  background: #ffffff;
  min-width: 180px;
}

.module-attachment-category-value {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(47, 104, 84, 0.18);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: #264f41;
  font-weight: 700;
  min-width: 180px;
  justify-content: center;
}

.module-attachment-category-value.is-locked {
  background: rgba(239, 248, 244, 0.96);
  border-color: rgba(47, 104, 84, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.module-attachment-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.module-attachment-action-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
}

.module-attachment-action-button svg {
  width: 16px;
  height: 16px;
}

.measurement-equipment-document-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 238;
  background: rgba(17, 21, 31, 0.42);
  backdrop-filter: blur(7px);
}

.measurement-equipment-document-preview-panel {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 239;
  width: min(1220px, calc(100vw - 40px));
  height: calc(100vh - 40px);
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  border-radius: 28px;
  background: linear-gradient(180deg, #fbfcfe, #f4f7fb);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.28);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.measurement-equipment-document-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(210, 216, 230, 0.86);
  background: rgba(255, 255, 255, 0.9);
}

.measurement-equipment-document-preview-head h3 {
  margin: 0;
  color: #1f2a33;
  font-size: 1.35rem;
}

.measurement-equipment-document-preview-head .helper-copy {
  margin: 6px 0 0;
}

.measurement-equipment-document-preview-body {
  min-height: 0;
  padding: 18px 22px 22px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 250, 248, 0.94)),
    radial-gradient(circle at top left, rgba(235, 247, 241, 0.6), transparent 48%);
}

.measurement-equipment-document-preview-frame,
.measurement-equipment-document-preview-image {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.measurement-equipment-document-preview-frame {
  min-height: 0;
}

.measurement-equipment-document-preview-image {
  object-fit: contain;
}

.measurement-equipment-document-preview-empty {
  width: min(560px, 100%);
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  padding: 28px;
  border: 1px dashed rgba(47, 104, 84, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
}

.measurement-equipment-document-preview-empty strong {
  color: #20352d;
  font-size: 1rem;
}

.measurement-equipment-document-preview-empty p {
  margin: 0;
  color: #62786f;
  line-height: 1.5;
}

.measurement-equipment-document-preview-empty-actions {
  display: inline-flex;
  justify-content: center;
}

body.is-measurement-equipment-document-preview-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .module-attachment-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .module-attachment-middle,
  .module-attachment-actions {
    justify-content: flex-start;
  }

  .measurement-equipment-document-preview-panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
    border-radius: 22px;
  }

  .measurement-equipment-document-preview-head {
    padding: 16px 16px 12px;
  }

  .measurement-equipment-document-preview-body {
    padding: 12px 16px 16px;
  }
}

.document-template-preview-signature strong {
  color: #243846;
  font-size: 1rem;
}

.service-catalog-template-block {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  gap: 12px;
}

.measurement-equipment-export-block .document-template-reference-actions {
  flex-wrap: wrap;
}

.measurement-equipment-export-block--global {
  margin-top: 4px;
  border-color: rgba(127, 105, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 247, 255, 0.96));
  padding: 10px 12px;
  gap: 6px;
}

.measurement-equipment-export-block--global .section-kicker {
  color: #9a31c5;
  margin-bottom: 4px;
  font-size: 0.68rem;
}

.measurement-equipment-export-block--global .section-heading {
  margin-bottom: 2px;
  align-items: center;
  gap: 10px;
}

.measurement-equipment-export-block--global .section-heading h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.16;
}

.measurement-equipment-export-block--global .document-template-reference-actions {
  justify-content: flex-end;
  gap: 4px;
}

.measurement-equipment-export-block--global .document-template-reference-actions > button.measurement-equipment-export-action-button {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.measurement-equipment-export-action-button svg {
  width: 14px;
  height: 14px;
  display: block;
}

.measurement-equipment-export-block--global .module-copy,
.measurement-equipment-export-block--global .helper-copy {
  max-width: none;
  text-align: left;
  font-size: 0.84rem;
  line-height: 1.3;
}

#measurement-equipment-card-template-meta {
  margin-top: 0;
  margin-bottom: 0;
  color: #57627d;
}

.measurement-equipment-export-block .ghost-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.measurement-equipment-export-placeholders {
  display: none;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.measurement-equipment-export-placeholders code {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(127, 105, 255, 0.25);
  background: rgba(241, 237, 255, 0.86);
  color: #4d2b8f;
  font-size: 0.7rem;
  font-weight: 700;
}

.measurement-equipment-export-backdrop {
  z-index: 234;
  background: rgba(17, 21, 31, 0.38);
  backdrop-filter: blur(6px);
}

.measurement-equipment-export-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 235;
  width: min(680px, calc(100vw - 28px));
  max-height: min(86vh, calc(100vh - 28px));
  transform: translate(-50%, -50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  border-radius: 24px;
  background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.measurement-equipment-export-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(214, 219, 232, 0.9);
  background: rgba(255, 255, 255, 0.92);
}

.measurement-equipment-export-panel-head h3 {
  margin: 0;
}

.measurement-equipment-export-form {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 14px 18px 16px;
}

.measurement-equipment-export-multiselect {
  width: 100%;
  min-height: 140px;
  border: 1px solid rgba(196, 160, 224, 0.52);
  border-radius: 14px;
  background: rgba(252, 251, 255, 0.98);
  color: #2f2a3c;
  font-size: 0.86rem;
  padding: 8px 10px;
}

.measurement-equipment-export-multiselect option {
  padding: 6px 8px;
  border-radius: 8px;
}

.measurement-equipment-export-multiselect option:checked {
  background: linear-gradient(90deg, rgba(188, 95, 214, 0.24), rgba(111, 102, 236, 0.26));
  color: #2a2341;
}

.measurement-equipment-export-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -2px;
}

.measurement-equipment-export-form .form-actions {
  justify-content: flex-end;
  margin-top: 2px;
}

body.is-measurement-equipment-export-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .measurement-equipment-export-panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 20px;
  }

  .measurement-equipment-export-panel-head {
    padding: 14px 14px 10px;
  }

  .measurement-equipment-export-form {
    padding: 12px 14px 14px;
  }
}

.module-collapse-button {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.measurement-equipment-collapsible-body {
  display: grid;
  gap: 12px;
}

.measurement-equipment-activity-list {
  display: grid;
  gap: 10px;
}

.measurement-equipment-activity-row {
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 16px;
  background: rgba(247, 250, 248, 0.94);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.measurement-equipment-activity-row.is-locked {
  border-color: rgba(47, 104, 84, 0.28);
  background: rgba(240, 247, 243, 0.92);
}

.measurement-equipment-activity-row.is-pending {
  border-color: rgba(214, 113, 62, 0.34);
  box-shadow: 0 0 0 1px rgba(214, 113, 62, 0.08);
}

.measurement-equipment-activity-grid {
  display: grid;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.measurement-equipment-activity-grid.is-service-layout {
  grid-template-columns:
    minmax(132px, 0.92fr)
    minmax(118px, 0.62fr)
    minmax(154px, 0.92fr)
    minmax(206px, 1.2fr);
}

.measurement-equipment-activity-grid.is-calibration-layout {
  grid-template-columns:
    minmax(132px, 0.84fr)
    minmax(118px, 0.58fr)
    minmax(132px, 0.7fr)
    minmax(118px, 0.58fr)
    minmax(116px, 0.56fr);
}

.measurement-equipment-activity-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.measurement-equipment-activity-field.is-wide {
  grid-column: span 2;
}

.measurement-equipment-activity-field.is-note {
  min-width: 0;
}

.measurement-equipment-activity-field.is-doc {
  grid-column: 1 / -1;
}

.measurement-equipment-activity-field.is-date input[type="date"] {
  width: min(100%, 154px);
}

.measurement-equipment-activity-document-control {
  min-width: 0;
}

.measurement-equipment-activity-dropzone {
  padding: 10px 12px;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  border-radius: 14px;
}

.measurement-equipment-activity-dropzone .work-order-document-dropzone-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 1rem;
}

.measurement-equipment-activity-dropzone .work-order-document-dropzone-copy strong {
  font-size: 0.8rem;
}

.measurement-equipment-activity-dropzone .work-order-document-dropzone-copy span {
  font-size: 0.72rem;
}

.measurement-equipment-activity-label {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #61776d;
}

.measurement-equipment-activity-row-meta {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.measurement-equipment-activity-meta-text {
  margin: 0;
  font-size: 0.72rem;
  color: #60796f;
}

.measurement-equipment-activity-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(124, 142, 133, 0.26);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.measurement-equipment-activity-status.is-saved {
  color: #1f6f4b;
  background: rgba(222, 245, 231, 0.86);
  border-color: rgba(31, 111, 75, 0.24);
}

.measurement-equipment-activity-status.is-ready {
  color: #6b4a16;
  background: rgba(248, 239, 212, 0.9);
  border-color: rgba(176, 136, 69, 0.28);
}

.measurement-equipment-activity-status.is-draft {
  color: #8a4f1a;
  background: rgba(255, 239, 224, 0.9);
  border-color: rgba(196, 114, 45, 0.28);
}

.measurement-equipment-activity-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.measurement-equipment-activity-action {
  align-self: center;
  justify-self: end;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 12px;
}

.measurement-equipment-activity-action svg {
  width: 17px;
  height: 17px;
}

.measurement-equipment-activity-remove.card-danger {
  color: #c44a66;
  background: #fff3f6;
  border-color: rgba(196, 74, 102, 0.24);
}

.measurement-equipment-activity-edit {
  color: #556f66;
  background: #f0f5f2;
  border-color: rgba(85, 111, 102, 0.24);
}

.measurement-equipment-card-activity {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.service-catalog-template-list {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.service-catalog-template-option {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(247, 250, 248, 0.9);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.service-catalog-template-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.service-catalog-template-option-copy strong {
  font-size: 0.94rem;
  color: #22352d;
}

.service-catalog-template-option-copy span {
  color: #60796f;
}

.document-template-form {
  display: grid;
  gap: 14px;
  min-height: 0;
  height: 100%;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.document-template-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.document-template-nexai-toggle > span:first-child {
  color: #586782;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.document-template-nexai-toggle-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid rgba(126, 92, 255, 0.26);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(126, 92, 255, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 248, 253, 0.96));
  box-shadow: 0 14px 34px rgba(63, 78, 125, 0.08);
}

.document-template-nexai-toggle-card input {
  width: 18px;
  height: 18px;
  accent-color: #6f3ff5;
}

.document-template-nexai-toggle-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-template-nexai-toggle-copy strong {
  color: #172033;
  font-size: 0.94rem;
  font-weight: 900;
}

.document-template-nexai-toggle-copy small {
  color: #60708d;
  font-size: 0.78rem;
  line-height: 1.45;
}

.document-template-copy-source-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: 14px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(111, 145, 209, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245, 250, 255, 0.98), rgba(255, 248, 253, 0.96)),
    radial-gradient(circle at top right, rgba(46, 130, 245, 0.12), transparent 36%);
  box-shadow: 0 14px 36px rgba(35, 55, 92, 0.08);
}

.document-template-copy-source-card.is-toolbar {
  flex: 1 1 560px;
  max-width: 820px;
  min-width: min(100%, 420px);
  grid-template-columns: minmax(190px, 0.68fr) minmax(300px, 1fr);
  align-self: stretch;
  padding: 10px 12px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(35, 55, 92, 0.07);
}

.document-template-copy-source-card.is-toolbar .document-template-copy-source-copy {
  gap: 2px;
}

.document-template-copy-source-card.is-toolbar .document-template-copy-source-copy h4 {
  font-size: 0.92rem;
}

.document-template-copy-source-card.is-toolbar .document-template-copy-source-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-copy-source-card.is-toolbar .document-template-copy-source-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}

.document-template-copy-source-card.is-toolbar .document-template-copy-source-controls select {
  min-height: 38px;
}

.document-template-copy-source-card.is-toolbar .document-template-copy-source-controls .ghost-button {
  min-height: 38px;
  padding-inline: 14px;
}

.document-template-copy-source-card.is-header {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(220px, 0.72fr) minmax(340px, 1fr);
  align-self: stretch;
  padding: 10px 12px;
  border-radius: 16px;
  border-color: rgba(37, 99, 235, 0.34);
  border-left: 5px solid rgba(37, 99, 235, 0.82);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 248, 253, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.16), transparent 34%);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.11);
}

.document-template-copy-source-card.is-header .document-template-copy-source-copy {
  gap: 2px;
}

.document-template-copy-source-card.is-header .document-template-copy-source-copy h4 {
  font-size: 0.96rem;
}

.document-template-copy-source-card.is-header .document-template-copy-source-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-copy-source-card.is-header .document-template-copy-source-controls {
  grid-template-columns: minmax(0, 1fr) auto;
}

.document-template-copy-source-card.is-header .document-template-copy-source-controls select,
.document-template-copy-source-card.is-header .document-template-copy-source-controls button {
  min-height: 38px;
}

.document-template-copy-source-card.is-prominent {
  position: relative;
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1fr);
  margin: 2px 0 4px;
  border: 2px solid rgba(37, 99, 235, 0.34);
  border-left: 6px solid rgba(37, 99, 235, 0.78);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 247, 252, 0.96)),
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.16), transparent 34%);
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.12);
}

.document-template-copy-source-card.is-prominent .document-template-copy-source-copy h4 {
  font-size: 1.05rem;
}

.document-template-copy-source-card.is-prominent .primary-button {
  min-height: 44px;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.document-template-copy-source-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.document-template-copy-source-copy h4 {
  margin: 0;
  color: var(--ink-900);
  font-size: 1rem;
  letter-spacing: 0;
}

.document-template-copy-source-copy span {
  color: var(--ink-500);
  font-size: 0.86rem;
  line-height: 1.45;
}

.document-template-copy-source-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.document-template-copy-source-controls .field {
  margin: 0;
  min-width: 0;
}

.document-template-copy-source-controls .ghost-button {
  min-height: 42px;
  white-space: nowrap;
}

.document-template-builder-shell {
  display: grid;
  grid-template-columns: minmax(248px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: calc(100dvh - 230px);
}

.document-template-builder-sidebar,
.document-template-builder-main,
.document-template-builder-preview {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}

.document-template-editor-panel.is-workspace-open .document-template-workspace-head {
  position: relative;
  top: auto;
  z-index: 1;
  padding: 4px 0 12px;
  background: linear-gradient(180deg, rgba(255, 252, 255, 0.99), rgba(255, 248, 252, 0.96));
  border-bottom: 1px solid rgba(220, 156, 212, 0.24);
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  grid-template-columns: minmax(238px, 268px) minmax(0, 1fr);
  align-items: start;
  padding: 0 0 12px;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-sidebar,
.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-main {
  position: relative;
  top: auto;
  align-self: start;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-main {
  padding-right: 4px;
}

.document-template-sidebar-block {
  gap: 10px;
}

.document-template-sidebar-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.document-template-sidebar-block-head h3,
.document-template-placeholder-panel-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #22352d;
}

.document-template-sidebar-block-head .section-kicker {
  margin-bottom: 4px;
}

.document-template-sidebar-block-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.document-template-sidebar-toggle {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.document-template-toolbox {
  display: grid;
  gap: 8px;
}

.document-template-html-block {
  gap: 10px;
}

.document-template-workspace-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid rgba(53, 98, 196, 0.16);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.document-template-workspace-tabs[hidden],
.document-template-program-workspace-block[hidden],
.document-template-html-workspace-block[hidden] {
  display: none !important;
}

.document-template-workspace-tab {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: #51627d;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.document-template-workspace-tab.is-active {
  border-color: rgba(34, 111, 235, 0.24);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.98));
  color: #174ea6;
  box-shadow: 0 10px 22px rgba(34, 111, 235, 0.1);
}

.document-template-workspace-tab:focus-visible {
  outline: 2px solid rgba(34, 111, 235, 0.38);
  outline-offset: 2px;
}

.document-template-program-workspace-block {
  gap: 14px;
}

.document-template-canvas-mount {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.document-template-program-workspace-block .document-template-sheet-shell {
  justify-items: stretch;
}

.document-template-program-workspace-block .document-template-page-toolbar,
.document-template-program-workspace-block .document-template-a4-page-label {
  display: none;
}

.document-template-program-workspace-block .document-template-a4-page-stack {
  justify-items: stretch;
  gap: 14px;
  overflow: visible;
  padding: 0;
}

.document-template-program-workspace-block .document-template-a4-page-wrap {
  width: 100%;
  justify-items: stretch;
}

.document-template-program-workspace-block .document-template-sheet-panel {
  width: 100%;
  min-height: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.document-template-program-workspace-block .document-template-sheet-panel.is-drop-target {
  outline-offset: 2px;
  background: rgba(248, 251, 255, 0.76);
}

.document-template-program-workspace-head {
  align-items: start;
}

.document-template-program-workspace-head .helper-copy {
  margin: 4px 0 0;
  max-width: 980px;
}

.document-template-html-workspace-block {
  gap: 12px;
  border-color: rgba(34, 111, 235, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(34, 111, 235, 0.1), rgba(34, 111, 235, 0) 38%);
}

.document-template-html-workspace-head {
  align-items: center;
}

.document-template-html-workspace-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.document-template-html-workspace-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.document-template-html-workspace-head .helper-copy {
  margin: 0;
  max-width: 920px;
}

.document-template-html-workspace-body {
  gap: 12px;
}

.document-template-html-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.document-template-html-workbench-grid.is-preview-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.document-template-html-preview-panel,
.document-template-html-workbench-grid.is-preview-hidden .document-template-html-preview-panel {
  display: none;
}

#document-template-html-preview-toggle {
  display: none;
}

.document-template-html-editor-panel,
.document-template-html-preview-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

.document-template-html-workspace-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-content: start;
}

.document-template-html-workspace-actions > button {
  min-height: 42px;
  width: 100%;
}

.document-template-editor-panel.is-document-template-word-engine .document-template-html-token-panel,
.document-template-editor-panel.is-document-template-word-engine .document-template-html-builder-panel,
.document-template-editor-panel.is-document-template-word-engine .document-template-html-code-field,
.document-template-editor-panel.is-document-template-word-engine #document-template-html-save,
.document-template-editor-panel.is-document-template-word-engine #document-template-export-placeholder {
  display: none;
}

.document-template-editor-panel.is-document-template-word-engine .document-template-reference-meta {
  border-color: rgba(37, 99, 235, 0.24);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%);
}

.document-template-html-workspace-block .document-template-html-code-field {
  grid-column: 1 / -1;
}

.document-template-html-workspace-block .document-template-html-code-field textarea {
  width: 100%;
  min-height: clamp(360px, 44vh, 680px);
  font-size: 0.82rem;
}

.document-template-html-preview-panel {
  position: sticky;
  top: 8px;
}

.document-template-html-builder-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(53, 98, 196, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 242, 254, 0.58), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 249, 0.96));
}

.document-template-html-builder-head {
  align-items: center;
}

.document-template-html-builder-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.document-template-html-builder-actions .ghost-button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
}

.document-template-html-builder-toolbox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.document-template-html-builder-tool {
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid rgba(53, 98, 196, 0.18);
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.92);
  color: #24416f;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: grab;
}

.document-template-html-builder-tool:active {
  cursor: grabbing;
}

.document-template-html-builder-canvas {
  display: grid;
  gap: 8px;
  min-height: 168px;
  padding: 10px;
  border: 1px dashed rgba(53, 98, 196, 0.28);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
  transition: border-color 120ms ease, background 120ms ease;
}

.document-template-html-builder-canvas.is-drop-target {
  border-color: rgba(34, 111, 235, 0.58);
  background: rgba(239, 246, 255, 0.92);
}

.document-template-html-builder-empty {
  display: grid;
  place-items: center;
  min-height: 126px;
  color: #667085;
  font-size: 0.86rem;
  text-align: center;
}

.document-template-html-builder-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(53, 98, 196, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 18px rgba(22, 45, 37, 0.06);
}

.document-template-html-builder-card.is-selected {
  border-color: rgba(34, 111, 235, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(34, 111, 235, 0.12),
    0 12px 24px rgba(34, 111, 235, 0.1);
}

.document-template-html-builder-card.is-dragging {
  opacity: 0.62;
}

.document-template-html-builder-card-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(96px, 124px) auto;
  align-items: center;
  gap: 8px;
}

.document-template-html-builder-card-head input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.document-template-html-builder-handle {
  color: #8291aa;
  font-weight: 900;
  cursor: grab;
  line-height: 1;
}

.document-template-html-builder-card-head strong {
  overflow: hidden;
  color: #172033;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-html-builder-card-head select {
  min-height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.document-template-html-builder-card-head .ghost-button {
  min-width: 30px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 10px;
}

.document-template-html-builder-card-body {
  display: grid;
  gap: 8px;
}

.document-template-html-builder-card-body input,
.document-template-html-builder-card-body textarea,
.document-template-html-builder-card-body select {
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(211, 143, 207, 0.62);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  font-size: 0.82rem;
}

.document-template-html-builder-card-body textarea {
  min-height: 74px;
  resize: vertical;
}

.document-template-html-builder-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 8px;
}

.document-template-html-preview-head {
  margin: 0;
  padding: 0 2px;
}

.document-template-html-preview-frame {
  width: 100%;
  min-height: clamp(420px, 58vh, 760px);
  border: 1px solid rgba(53, 98, 196, 0.16);
  border-radius: 22px;
  background: #f8fafc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 20px 38px rgba(22, 45, 37, 0.1);
}

.document-template-html-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
  align-items: stretch;
}

.document-template-html-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid rgba(220, 156, 212, 0.3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 248, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.document-template-html-step strong {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.92), rgba(122, 97, 255, 0.88));
  color: #fff;
  font-size: 0.66rem;
}

.document-template-html-step span {
  display: block;
  min-width: 0;
  color: #4c3558;
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

.document-template-html-code-field textarea {
  min-height: 172px;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}

.document-template-tool-button {
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 18px;
  padding: 11px 12px;
  background: linear-gradient(180deg, rgba(250, 252, 251, 0.98), rgba(245, 249, 247, 0.98));
  color: #26493d;
  text-align: left;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.document-template-tool-button:hover,
.document-template-tool-button:focus-visible {
  border-color: rgba(47, 104, 84, 0.28);
  box-shadow: 0 10px 22px rgba(29, 60, 47, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.document-template-tool-button strong {
  font-size: 0.9rem;
  color: #22352d;
}

.document-template-tool-button span {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #60796f;
}

.document-template-block {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220, 156, 212, 0.62);
  border-radius: 24px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 246, 252, 0.95));
  display: grid;
  gap: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 16px 30px rgba(108, 83, 153, 0.08);
}

.document-template-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(240, 79, 151, 0.9), rgba(122, 97, 255, 0.82));
  opacity: 0.8;
}

.document-template-runtime-context {
  margin-top: 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(220, 156, 212, 0.52);
  border-radius: 24px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 244, 251, 0.98), rgba(255, 255, 255, 0.98));
  display: grid;
  gap: 12px;
}

.document-template-runtime-work-orders,
.document-template-runtime-common {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-runtime-common {
  align-items: stretch;
}

.document-template-runtime-common-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
}

.document-template-runtime-sequence-progress {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(214, 101, 190, 0.26);
  background: linear-gradient(135deg, rgba(255, 248, 252, 0.98), rgba(245, 242, 255, 0.98));
  color: #8f2e75;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.document-template-runtime-chip {
  border: 1px solid rgba(220, 156, 212, 0.46);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  padding: 8px 10px;
  min-width: 180px;
  display: grid;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  color: #4c3558;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.document-template-runtime-chip:hover,
.document-template-runtime-chip:focus-visible {
  border-color: rgba(214, 89, 173, 0.6);
  box-shadow: 0 10px 22px rgba(112, 73, 150, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.document-template-runtime-chip.is-active {
  border-color: rgba(47, 104, 84, 0.32);
  background: linear-gradient(180deg, rgba(231, 241, 236, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 0 0 1px rgba(47, 104, 84, 0.08);
}

.document-template-runtime-chip strong {
  font-size: 0.84rem;
  color: #22352d;
}

.document-template-runtime-chip span {
  font-size: 0.72rem;
  color: #60796f;
  line-height: 1.25;
}

.document-template-runtime-badge {
  min-width: 132px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  background: rgba(248, 251, 249, 0.95);
  display: grid;
  gap: 2px;
}

.document-template-runtime-badge.is-primary {
  border-color: rgba(47, 104, 84, 0.24);
  background: linear-gradient(180deg, rgba(231, 241, 236, 0.98), rgba(248, 251, 249, 0.98));
  box-shadow: inset 0 0 0 1px rgba(47, 104, 84, 0.06);
}

.document-template-runtime-badge span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #60796f;
}

.document-template-runtime-badge strong {
  color: #22352d;
  font-size: 0.82rem;
}

.document-template-runtime-badge-select-wrap {
  min-width: min(100%, 260px);
}

.document-template-runtime-badge-select {
  width: 100%;
  min-height: 34px;
  padding: 0 28px 0 0;
  border: 0;
  background: transparent;
  color: #22352d;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: none;
}

.document-template-runtime-badge-select:focus {
  outline: none;
  box-shadow: none;
}

.document-template-runtime-signing-card {
  flex: 1 1 100%;
  border: 1px solid rgba(220, 156, 212, 0.4);
  border-radius: 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.document-template-runtime-signing-copy {
  display: grid;
  gap: 4px;
}

.document-template-runtime-signing-copy strong {
  color: #3d2152;
}

.document-template-runtime-signing-copy .helper-copy {
  margin: 0;
}

.document-template-runtime-signing-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.document-template-runtime-signing-button.is-active {
  border-color: rgba(47, 104, 84, 0.36);
  background: linear-gradient(180deg, rgba(231, 241, 236, 0.98), rgba(255, 255, 255, 0.98));
  color: #1f4a3a;
  box-shadow: inset 0 0 0 1px rgba(47, 104, 84, 0.08);
}

.document-template-runtime-signing-button.is-active:hover,
.document-template-runtime-signing-button.is-active:focus-visible {
  border-color: rgba(47, 104, 84, 0.42);
}

.document-template-editor-panel.is-fill-mode .document-template-builder-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main {
  gap: 6px;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main .section-kicker {
  margin-bottom: 2px;
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main .section-heading {
  margin-bottom: 10px;
  gap: 10px;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main .section-heading h3 {
  font-size: 0.94rem;
  line-height: 1.15;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main > .document-template-block > .section-heading {
  display: none !important;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main > .document-template-block > .section-kicker,
.document-template-editor-panel.is-fill-mode .document-template-builder-main > .document-template-block > h3 {
  display: none !important;
}

.document-template-editor-panel.is-fill-mode .document-template-block {
  padding: 8px 10px;
  border-radius: 20px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-context {
  margin-top: 0;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-context > .section-heading,
.document-template-editor-panel.is-fill-mode .document-template-runtime-helper,
.document-template-editor-panel.is-fill-mode .document-template-runtime-sequence-progress {
  display: none !important;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-context {
  padding: 10px 12px;
  gap: 8px;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: start;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-work-orders,
.document-template-editor-panel.is-fill-mode .document-template-runtime-common {
  gap: 6px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-work-orders {
  grid-column: 1;
  display: grid;
  align-content: start;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-common {
  grid-column: 2;
  align-items: flex-start;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-work-orders .document-template-runtime-chip {
  min-width: 0;
  width: 100%;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-chip,
.document-template-editor-panel.is-fill-mode .document-template-runtime-badge {
  min-width: 0;
  padding: 6px 10px;
  gap: 2px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-chip strong,
.document-template-editor-panel.is-fill-mode .document-template-runtime-badge strong {
  font-size: 0.8rem;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-chip span {
  font-size: 0.68rem;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-badge span {
  font-size: 0.58rem;
}

.document-template-editor-panel.is-fill-mode .document-template-workspace-head {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 -16px;
  padding: 4px 12px;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255, 252, 255, 0.98), rgba(255, 246, 252, 0.96));
  border-bottom: 1px solid rgba(220, 156, 212, 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.document-template-editor-panel.is-fill-mode .document-template-copy-source-card.is-header {
  display: none;
}

.document-template-editor-panel.is-fill-mode .document-template-workspace-head-copy {
  gap: 4px;
}

.document-template-editor-panel.is-fill-mode .document-template-workspace-head-copy > .section-kicker,
.document-template-editor-panel.is-fill-mode .document-template-workspace-head-copy > h3 {
  display: none !important;
}

.document-template-editor-panel.is-fill-mode .document-template-workspace-head-copy h3 {
  font-size: 0.98rem;
  line-height: 1.2;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-header-badges {
  width: 100%;
  gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.document-template-editor-panel.is-fill-mode .document-template-custom-fields {
  display: grid;
  gap: 4px;
}

.document-template-editor-panel.is-fill-mode .document-template-custom-fields > .section-kicker,
.document-template-editor-panel.is-fill-mode .document-template-custom-fields > h3,
.document-template-editor-panel.is-fill-mode .document-template-custom-fields > .section-heading {
  display: none !important;
}

.document-template-runtime-shell {
  display: grid;
  gap: 6px;
}

.document-template-runtime-ai-assistant {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(280px, 0.85fr) minmax(230px, 0.55fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(95, 132, 225, 0.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(47, 117, 255, 0.16), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(222, 72, 178, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(246, 251, 255, 0.99), rgba(255, 249, 253, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 18px 34px rgba(74, 91, 138, 0.1);
  overflow: hidden;
}

.document-template-runtime-ai-assistant-togglebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(95, 132, 225, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(246, 251, 255, 0.96), rgba(255, 249, 253, 0.96));
  color: #5f6e8b;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.document-template-runtime-ai-assistant-togglebar:hover,
.document-template-runtime-ai-assistant-togglebar:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(95, 132, 225, 0.52);
  box-shadow: 0 12px 24px rgba(73, 91, 143, 0.1);
}

.document-template-runtime-ai-assistant::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #2d7df0, #d84ac4, #32b27c);
}

.document-template-runtime-ai-assistant.is-loading {
  border-color: rgba(217, 155, 28, 0.42);
}

.document-template-runtime-ai-assistant.is-success {
  border-color: rgba(48, 164, 108, 0.42);
}

.document-template-runtime-ai-assistant.is-error {
  border-color: rgba(211, 77, 93, 0.5);
}

.document-template-runtime-ai-intro,
.document-template-runtime-ai-upload,
.document-template-runtime-ai-action {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(150, 177, 219, 0.34);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(63, 82, 128, 0.06);
}

.document-template-runtime-ai-intro {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 13px 14px 12px 16px;
}

.document-template-runtime-ai-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.document-template-runtime-ai-collapsible-head {
  margin: -4px;
  padding: 4px;
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.document-template-runtime-ai-collapsible-head:hover,
.document-template-runtime-ai-collapsible-head:focus-visible {
  outline: none;
  background: rgba(239, 246, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(99, 140, 226, 0.18);
}

.document-template-runtime-ai-hide {
  align-self: start;
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.document-template-runtime-ai-mark,
.document-template-runtime-ai-drop-icon,
.document-template-runtime-ai-run-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.document-template-runtime-ai-mark {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1f7bf2, #d94fc3);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(84, 101, 219, 0.22);
}

.document-template-runtime-ai-mark svg,
.document-template-runtime-ai-drop-icon svg,
.document-template-runtime-ai-run-icon svg {
  width: 18px;
  height: 18px;
}

.document-template-runtime-ai-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.document-template-runtime-ai-eyebrow {
  color: #2372f4;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.document-template-runtime-ai-copy strong {
  color: #17213a;
  font-size: 1.02rem;
  line-height: 1.2;
}

.document-template-runtime-ai-copy p {
  max-width: 760px;
  margin: 0;
  color: #60708f;
  font-size: 0.8rem;
  line-height: 1.45;
}

.document-template-runtime-ai-connection {
  margin-top: 4px;
}

.document-template-runtime-ai-upload {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.document-template-runtime-ai-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 13px;
  border: 1px dashed rgba(51, 113, 225, 0.44);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(237, 245, 255, 0.96), rgba(255, 249, 253, 0.98));
  color: #18243c;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.document-template-runtime-ai-dropzone:hover,
.document-template-runtime-ai-dropzone:focus-visible,
.document-template-runtime-ai-dropzone.is-drag-over {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(47, 117, 255, 0.72);
  background: linear-gradient(135deg, rgba(224, 239, 255, 0.98), rgba(255, 243, 252, 1));
  box-shadow: 0 12px 24px rgba(47, 117, 255, 0.12);
}

.document-template-runtime-ai-drop-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(47, 117, 255, 0.26);
  background: rgba(255, 255, 255, 0.9);
  color: #1f74f2;
}

.document-template-runtime-ai-drop-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-template-runtime-ai-drop-copy strong {
  color: #16233d;
  font-size: 0.92rem;
}

.document-template-runtime-ai-drop-copy span {
  color: #63728d;
  font-size: 0.78rem;
}

.document-template-runtime-ai-files {
  display: grid;
  gap: 6px;
  max-height: 132px;
  overflow: auto;
  padding-right: 2px;
}

.document-template-runtime-ai-empty {
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(245, 248, 255, 0.78);
  color: #61708c;
  font-size: 0.78rem;
  line-height: 1.35;
}

.document-template-runtime-ai-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(157, 178, 214, 0.32);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.document-template-runtime-ai-file span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-template-runtime-ai-file strong,
.document-template-runtime-ai-file small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-ai-file strong {
  color: #18223b;
  font-size: 0.8rem;
}

.document-template-runtime-ai-file small {
  color: #6b7890;
  font-size: 0.7rem;
}

.document-template-runtime-ai-file-remove {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(211, 77, 93, 0.18);
  border-radius: 11px;
  background: rgba(255, 246, 248, 0.96);
  color: #b4232c;
  cursor: pointer;
}

.document-template-runtime-ai-file-remove svg {
  width: 15px;
  height: 15px;
}

.document-template-runtime-ai-action {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 14px;
}

.document-template-runtime-ai-action > strong {
  color: #17213a;
  font-size: 0.96rem;
}

.document-template-runtime-ai-action > span {
  color: #64738f;
  font-size: 0.78rem;
  line-height: 1.35;
}

.document-template-runtime-ai-model {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(133, 161, 214, 0.32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 249, 255, 0.94), rgba(255, 250, 253, 0.96));
}

.document-template-runtime-ai-model-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.document-template-runtime-ai-model-head strong {
  color: #17213a;
  font-size: 0.78rem;
}

.document-template-runtime-ai-model-head small {
  color: #7b4f9f;
  font-size: 0.68rem;
  font-weight: 800;
}

.document-template-runtime-ai-model select {
  min-height: 38px;
  border: 1px solid rgba(152, 173, 213, 0.64);
  border-radius: 13px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #14213d;
  font-weight: 750;
}

.document-template-runtime-ai-model-copy {
  color: #65738d;
  font-size: 0.72rem;
  line-height: 1.35;
}

.document-template-runtime-ai-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 15px;
  background: linear-gradient(135deg, #1d74f5, #d84ac4);
  box-shadow: 0 14px 26px rgba(108, 83, 153, 0.18);
}

.document-template-runtime-ai-run:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  box-shadow: none;
}

.document-template-runtime-ai-message {
  margin: 0;
  color: #4d5c78;
  font-size: 0.75rem;
  line-height: 1.35;
}

.document-template-runtime-ai-assistant.is-success .document-template-runtime-ai-message {
  color: #267052;
}

.document-template-runtime-ai-assistant.is-error .document-template-runtime-ai-message {
  color: #b4232c;
}

.document-template-runtime-ai-suggestions {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(88, 145, 214, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 22px rgba(63, 82, 128, 0.06);
}

.document-template-runtime-ai-suggestions-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.document-template-runtime-ai-suggestions-head strong {
  color: #17213a;
  font-size: 0.92rem;
}

.document-template-runtime-ai-suggestions-head span {
  color: #64738f;
  font-size: 0.74rem;
  font-weight: 800;
}

.document-template-runtime-ai-suggestions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.document-template-runtime-ai-suggestion {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(79, 171, 119, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(244, 253, 248, 0.94), rgba(255, 255, 255, 0.96));
}

.document-template-runtime-ai-suggestion.is-unmatched {
  border-color: rgba(218, 150, 47, 0.36);
  background: linear-gradient(135deg, rgba(255, 250, 239, 0.96), rgba(255, 255, 255, 0.96));
}

.document-template-runtime-ai-suggestion-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.document-template-runtime-ai-suggestion-head strong {
  min-width: 0;
  color: #17213a;
  font-size: 0.84rem;
  line-height: 1.25;
}

.document-template-runtime-ai-suggestion-head span {
  flex: 0 0 auto;
  max-width: 46%;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(237, 246, 255, 0.9);
  color: #315f9c;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.document-template-runtime-ai-suggestion-value {
  margin: 0;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(245, 248, 255, 0.78);
  color: #21314f;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.document-template-runtime-ai-suggestion-value.is-rich-text {
  max-height: 300px;
  overflow: auto;
}

.document-template-runtime-ai-suggestion-value.is-rich-text h2,
.document-template-runtime-ai-suggestion-value.is-rich-text h3 {
  margin: 0.45rem 0 0.25rem;
  color: #1b2d4f;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.document-template-runtime-ai-suggestion-value.is-rich-text h2:first-child,
.document-template-runtime-ai-suggestion-value.is-rich-text h3:first-child {
  margin-top: 0;
}

.document-template-runtime-ai-suggestion-value.is-rich-text p {
  margin: 0 0 0.45rem;
}

.document-template-runtime-ai-suggestion-value.is-rich-text ul,
.document-template-runtime-ai-suggestion-value.is-rich-text ol {
  margin: 0.15rem 0 0.55rem 1.2rem;
  padding: 0;
}

.document-template-runtime-ai-suggestion-value.is-rich-text li {
  margin: 0.08rem 0;
}

.document-template-runtime-ai-suggestion-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.document-template-runtime-ai-suggestion-footer small {
  color: #66758e;
  font-size: 0.68rem;
  line-height: 1.3;
}

.document-template-runtime-ai-suggestion-copy {
  margin-left: auto;
  min-height: 28px;
  padding: 0 9px;
}

@media (max-width: 1180px) {
  .document-template-runtime-ai-assistant {
    grid-template-columns: minmax(0, 1fr);
  }
}

.document-template-runtime-block {
  border: 1px solid rgba(205, 129, 188, 0.62);
  border-radius: 24px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 246, 252, 0.99), rgba(255, 255, 255, 1));
  display: grid;
  gap: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(240, 79, 151, 0.08),
    0 16px 30px rgba(108, 83, 153, 0.07);
}

.document-template-runtime-block.is-collapsed {
  gap: 0;
}

.document-template-runtime-block.is-ok {
  border-color: rgba(69, 165, 111, 0.42);
}

.document-template-runtime-block.is-warning {
  border-color: rgba(220, 82, 95, 0.44);
}

.document-template-runtime-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.document-template-runtime-block-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-head {
  gap: 8px;
  margin-bottom: 2px;
  cursor: pointer;
}

.document-template-runtime-block-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.document-template-runtime-block-status-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #d34d5d;
  box-shadow: 0 0 0 5px rgba(211, 77, 93, 0.12);
}

.document-template-runtime-block.is-ok .document-template-runtime-block-status-dot {
  background: #30a46c;
  box-shadow: 0 0 0 5px rgba(48, 164, 108, 0.13);
}

.document-template-meta-badge.is-success {
  border-color: rgba(48, 164, 108, 0.2);
  background: rgba(232, 247, 238, 0.98);
  color: #25734d;
}

.document-template-meta-badge.is-warning {
  border-color: rgba(220, 82, 95, 0.24);
  background: rgba(255, 237, 239, 0.98);
  color: #a93d49;
}

.document-template-runtime-block-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  color: #3d2152;
  font-size: 1.02rem;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-head h4 {
  font-size: 0.94rem;
}

.document-template-runtime-block-meta {
  margin: 4px 0 0;
  color: #6d6280;
  font-size: 0.88rem;
  line-height: 1.5;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-meta {
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.35;
  max-width: none;
  white-space: normal;
  max-height: 2.8rem;
  overflow: auto;
}

.document-template-runtime-block-body {
  display: grid;
  gap: 10px;
  grid-auto-flow: dense;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body > .field-span-full,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body > .document-template-runtime-readonly-card,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body > .document-template-runtime-legal-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body > .document-template-runtime-media-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body > .document-template-runtime-measurement-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body > .document-template-runtime-digital-signature-card {
  grid-column: 1 / -1;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block .field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-readonly-card,
.document-template-editor-panel.is-fill-mode .document-template-runtime-legal-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-media-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-measurement-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-digital-signature-card {
  padding: 9px 11px;
  border: 1px solid rgba(151, 178, 166, 0.42);
  border-left: 4px solid rgba(82, 154, 113, 0.78);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 252, 250, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 18px rgba(54, 84, 72, 0.06);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card {
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  justify-self: stretch;
  width: 100%;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card::before {
  display: none;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block .field > span {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4b5262;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(244, 248, 246, 0.96);
  border: 1px solid rgba(143, 173, 160, 0.28);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block input:not([type="checkbox"]):not([type="radio"]),
.document-template-editor-panel.is-fill-mode .document-template-runtime-block select,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea {
  width: 100%;
  min-height: 38px;
  border-radius: 13px;
  border: 1px solid rgba(173, 193, 184, 0.74);
  background: rgba(255, 255, 255, 1);
  color: #26192f;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 1px 4px rgba(57, 76, 70, 0.06);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block input:not([type="checkbox"]):not([type="radio"])::placeholder,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea::placeholder {
  color: #7c6788;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block input:not([type="checkbox"]):not([type="radio"]):focus,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block select:focus,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea:focus {
  border-color: rgba(82, 154, 113, 0.62);
  box-shadow:
    0 0 0 4px rgba(82, 154, 113, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  outline: none;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea {
  min-height: 112px;
  resize: vertical;
}

.document-template-runtime-summary-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.document-template-runtime-summary-card {
  padding: 7px 10px;
  border: 1px solid rgba(220, 156, 212, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  gap: 4px;
  box-shadow: 0 12px 28px rgba(111, 82, 150, 0.08);
}

.document-template-runtime-summary-card strong,
.document-template-runtime-summary-entry strong {
  color: #3d2152;
}

.document-template-runtime-summary-overview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.document-template-runtime-summary-overview-card {
  display: grid;
  gap: 2px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(186, 199, 217, 0.72);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.document-template-runtime-summary-overview-card strong {
  color: #26324c;
  font-size: 1.35rem;
  line-height: 1;
}

.document-template-runtime-summary-overview-card span {
  color: #273653;
  font-size: 0.78rem;
  font-weight: 800;
}

.document-template-runtime-summary-overview-card small {
  color: #69758c;
  font-size: 0.72rem;
  line-height: 1.25;
}

.document-template-runtime-summary-overview-card.is-ok {
  border-color: rgba(60, 170, 111, 0.32);
  background: linear-gradient(180deg, rgba(242, 252, 246, 0.99), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-overview-card.is-ok strong {
  color: #25734d;
}

.document-template-runtime-summary-overview-card.is-warning {
  border-color: rgba(220, 82, 95, 0.3);
  background: linear-gradient(180deg, rgba(255, 244, 245, 0.99), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-overview-card.is-warning strong {
  color: #a93d49;
}

.document-template-runtime-summary-overview-card.is-skipped {
  border-color: rgba(119, 129, 146, 0.24);
  background: linear-gradient(180deg, rgba(246, 248, 251, 0.99), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-runtime-summary-final-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.document-template-runtime-summary-final-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-template-runtime-summary-final-copy p {
  margin: 0;
  max-width: 82ch;
}

.document-template-runtime-summary-final-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.document-template-runtime-summary-finish-panel {
  position: sticky;
  bottom: 8px;
  z-index: 3;
  border-color: rgba(123, 92, 255, 0.32);
  background:
    radial-gradient(circle at 94% 0%, rgba(123, 92, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.97));
  box-shadow: 0 18px 36px rgba(90, 76, 132, 0.14);
}

.document-template-runtime-summary-signature-select {
  min-width: 210px;
  display: grid;
  gap: 3px;
}

.document-template-runtime-summary-signature-select span {
  color: #607089;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-template-runtime-summary-signature-select select {
  min-height: 34px;
  padding: 0 38px 0 12px;
  border: 1px solid rgba(164, 187, 219, 0.82);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96));
  color: #172033;
  font-weight: 800;
}

.document-template-runtime-summary-finish-button {
  min-width: 160px;
  min-height: 36px;
}

.document-template-runtime-summary-zip-button {
  min-width: 132px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 13px;
  border-color: rgba(34, 211, 238, 0.34);
  background: linear-gradient(135deg, rgba(236, 254, 255, 0.96), rgba(245, 243, 255, 0.96));
  color: #1d3f72;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(60, 88, 160, 0.12);
}

.document-template-runtime-summary-zip-button svg {
  width: 16px;
  height: 16px;
}

.document-template-runtime-summary-zip-button:hover,
.document-template-runtime-summary-zip-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(124, 92, 255, 0.44);
  background: linear-gradient(135deg, rgba(224, 252, 255, 0.98), rgba(237, 233, 254, 0.98));
  box-shadow: 0 16px 30px rgba(84, 76, 180, 0.16);
}

.document-template-runtime-summary-zip-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.document-template-runtime-summary-body .ghost-button,
.document-template-runtime-summary-body .primary-button {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 11px;
}

.document-template-runtime-summary-final-actions .document-template-runtime-summary-actions {
  gap: 6px;
}

.document-template-runtime-summary-actions .ghost-button.is-active,
.document-template-runtime-summary-actions .ghost-button:hover,
.document-template-runtime-summary-actions .ghost-button:focus-visible {
  border-color: rgba(240, 79, 151, 0.42);
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.88), rgba(123, 92, 255, 0.92));
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(113, 67, 196, 0.24);
}

.document-template-runtime-summary-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.document-template-runtime-summary-entry {
  padding: 10px;
  border: 1px solid rgba(196, 205, 224, 0.76);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.96));
  display: grid;
  gap: 9px;
  box-shadow: 0 14px 30px rgba(55, 65, 104, 0.08);
}

.document-template-runtime-summary-entry.is-ok {
  border-color: rgba(48, 164, 108, 0.36);
  background: linear-gradient(180deg, rgba(245, 253, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-entry.is-export-running {
  border-color: rgba(37, 99, 235, 0.42);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(245, 250, 255, 0.99), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-entry.is-export-done {
  border-color: rgba(16, 185, 129, 0.48);
  background:
    linear-gradient(90deg, rgba(16, 185, 129, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(240, 253, 244, 0.99), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-entry.is-export-error {
  border-color: rgba(220, 38, 38, 0.48);
  background:
    linear-gradient(90deg, rgba(220, 38, 38, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(255, 245, 246, 0.99), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-entry.is-warning {
  border-color: rgba(220, 82, 95, 0.34);
  background: linear-gradient(180deg, rgba(255, 245, 246, 0.98), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-entry.is-skipped {
  opacity: 0.68;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.95), rgba(255, 255, 255, 0.98));
}

.document-template-runtime-summary-entry.is-collapsed {
  gap: 0;
}

.document-template-runtime-summary-entry.is-collapsed .document-template-runtime-summary-required-warning,
.document-template-runtime-summary-entry.is-collapsed .document-template-runtime-summary-services {
  display: none;
}

.document-template-runtime-summary-entry-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
}

.document-template-runtime-summary-entry-head.is-simple {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.document-template-runtime-summary-entry-toggle {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 2px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.document-template-runtime-summary-entry-toggle:hover,
.document-template-runtime-summary-entry-toggle:focus-visible {
  outline: none;
  background: rgba(124, 92, 255, 0.08);
}

.document-template-runtime-summary-entry-toggle-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.document-template-runtime-summary-entry-toggle-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #5b42cc;
  border-bottom: 2px solid #5b42cc;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.16s ease;
}

.document-template-runtime-summary-entry.is-collapsed .document-template-runtime-summary-entry-toggle-icon::before {
  transform: rotate(-45deg) translate(-1px, 1px);
}

.document-template-runtime-summary-include {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(176, 190, 210, 0.82);
  background: #fff;
  color: transparent;
  cursor: pointer;
}

.document-template-runtime-summary-include input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.document-template-runtime-summary-include span {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: #f1f5f9;
  color: transparent;
  font-size: 0.72rem;
  font-weight: 900;
}

.document-template-runtime-summary-include input:checked + span {
  background: #19b37a;
  color: #fff;
}

.document-template-runtime-summary-include input:indeterminate + span {
  background: linear-gradient(135deg, #f04f97, #7b5cff);
  color: #fff;
}

.document-template-runtime-summary-include:focus-within {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.document-template-runtime-summary-entry-title {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.document-template-runtime-summary-entry-title strong {
  font-size: 0.84rem;
  line-height: 1.15;
}

.document-template-runtime-summary-entry-title > span {
  color: #6d6280;
  font-size: 0.68rem;
  line-height: 1.2;
}

.document-template-runtime-summary-entry-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.document-template-runtime-summary-entry-location {
  min-width: 0;
  max-width: min(360px, 100%);
  overflow: hidden;
  color: #55627a;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-summary-entry-codes {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.document-template-runtime-summary-entry-code {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  background: rgba(124, 92, 255, 0.08);
  color: #4f36c7;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.document-template-runtime-summary-entry-code.is-empty {
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(241, 245, 249, 0.82);
  color: #64748b;
}

.document-template-runtime-summary-entry-actions {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.document-template-runtime-summary-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(48, 164, 108, 0.2);
  background: rgba(232, 247, 238, 0.98);
  color: #25734d;
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

.document-template-runtime-summary-status.is-ready,
.document-template-runtime-summary-status.is-done {
  border-color: rgba(16, 185, 129, 0.36);
  background: linear-gradient(135deg, #e8fbf0, #f8fffb);
  color: #047857;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.12);
}

.document-template-runtime-summary-status.is-pending {
  border-color: rgba(37, 99, 235, 0.26);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  color: #1d4ed8;
}

.document-template-runtime-summary-status.is-running {
  border-color: rgba(37, 99, 235, 0.36);
  background: linear-gradient(135deg, #dbeafe, #f8fbff);
  color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.document-template-runtime-summary-status.is-running::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid rgba(37, 99, 235, 0.24);
  border-top-color: #2563eb;
  border-radius: 999px;
  animation: safenexus-summary-status-spin 0.8s linear infinite;
}

.document-template-runtime-summary-status.is-blocked,
.document-template-runtime-summary-entry.is-warning .document-template-runtime-summary-status {
  border-color: rgba(220, 82, 95, 0.24);
  background: rgba(255, 237, 239, 0.98);
  color: #a93d49;
}

.document-template-runtime-summary-status.is-error {
  border-color: rgba(220, 38, 38, 0.34);
  background: linear-gradient(135deg, #fee2e2, #fff7f7);
  color: #991b1b;
}

.document-template-runtime-summary-status.is-skipped,
.document-template-runtime-summary-entry.is-skipped .document-template-runtime-summary-status {
  border-color: rgba(119, 129, 146, 0.2);
  background: rgba(242, 245, 249, 0.98);
  color: #647086;
}

.document-template-runtime-summary-entry-progress {
  color: #5f6f8b;
  font-size: 0.66rem;
  line-height: 1.35;
}

.document-template-runtime-summary-required-warning {
  padding: 6px 8px;
  border: 1px solid rgba(220, 82, 95, 0.24);
  border-radius: 10px;
  background: rgba(255, 241, 242, 0.88);
  color: #9f2835;
  font-size: 0.68rem;
  font-weight: 800;
}

.document-template-runtime-summary-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.document-template-runtime-summary-checklist-item {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 4px 7px;
  border: 1px solid rgba(186, 199, 217, 0.6);
  border-radius: 9px;
  background: rgba(248, 250, 252, 0.86);
}

.document-template-runtime-summary-checklist-item small {
  color: #647086;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.document-template-runtime-summary-checklist-item strong {
  color: #26324c;
  font-size: 0.66rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.document-template-runtime-summary-checklist-item.is-ok {
  border-color: rgba(48, 164, 108, 0.28);
  background: rgba(240, 253, 244, 0.9);
}

.document-template-runtime-summary-checklist-item.is-ok strong {
  color: #166534;
}

.document-template-runtime-summary-checklist-item.is-warning {
  border-color: rgba(220, 82, 95, 0.26);
  background: rgba(255, 241, 242, 0.9);
}

.document-template-runtime-summary-checklist-item.is-warning strong {
  color: #9f2835;
}

.document-template-runtime-summary-skip {
  min-height: 26px;
  padding: 0 8px;
  border-radius: 10px;
}

.document-template-runtime-summary-download {
  width: auto;
  min-width: 112px;
  height: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 12px;
  border-color: rgba(16, 185, 129, 0.34);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.96));
  color: #047857;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.12);
}

.document-template-runtime-summary-download-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-grid;
  place-items: center;
}

.document-template-runtime-summary-download > span:last-child {
  min-width: 0;
  color: currentColor;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-summary-download.is-report {
  border-color: rgba(124, 92, 255, 0.28);
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.96));
  color: #5536c9;
  box-shadow: 0 8px 18px rgba(124, 92, 255, 0.12);
}

.document-template-runtime-summary-download.is-handover {
  border-color: rgba(34, 211, 238, 0.36);
  background: linear-gradient(135deg, rgba(236, 254, 255, 0.98), rgba(255, 255, 255, 0.96));
  color: #0e7490;
  box-shadow: 0 8px 18px rgba(34, 211, 238, 0.12);
}

.document-template-runtime-summary-download:hover,
.document-template-runtime-summary-download:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(124, 92, 255, 0.42);
  box-shadow: 0 12px 24px rgba(96, 70, 180, 0.16);
}

.document-template-runtime-summary-download.is-handover:hover,
.document-template-runtime-summary-download.is-handover:focus-visible {
  border-color: rgba(34, 211, 238, 0.58);
  box-shadow: 0 12px 24px rgba(8, 145, 178, 0.16);
}

.document-template-runtime-summary-download-icon svg,
.document-template-runtime-summary-download svg {
  width: 16px;
  height: 16px;
}

.document-template-runtime-summary-download-more {
  min-width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(124, 92, 255, 0.24);
  background: rgba(124, 92, 255, 0.08);
  color: #4f36c7;
  font-size: 0.66rem;
  font-weight: 900;
}

.document-template-runtime-summary-entry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.document-template-runtime-summary-services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.document-template-runtime-summary-services-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #1d2a44;
  font-size: 0.68rem;
}

.document-template-runtime-summary-services-title strong {
  font-size: 0.72rem;
}

.document-template-runtime-summary-services-title span {
  color: #647086;
  font-size: 0.62rem;
  font-weight: 800;
}

.document-template-runtime-summary-service,
.document-template-runtime-summary-service-empty {
  min-height: 44px;
  width: 100%;
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 13px;
  border: 1px solid rgba(190, 201, 222, 0.72);
  background: rgba(248, 250, 252, 0.9);
  color: #28334d;
  font-size: 0.74rem;
  font-weight: 850;
}

.document-template-runtime-summary-service-empty {
  grid-template-columns: minmax(0, 1fr);
  background: rgba(247, 249, 252, 0.86);
}

.document-template-runtime-summary-service-check {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.document-template-runtime-summary-service.is-deselected {
  border-color: rgba(190, 201, 222, 0.46);
  background: rgba(248, 250, 252, 0.52);
  color: rgba(40, 51, 77, 0.62);
}

.document-template-runtime-summary-service.is-complete {
  border-color: rgba(48, 164, 108, 0.26);
  background: rgba(244, 252, 247, 0.96);
}

.document-template-runtime-summary-service.is-progress {
  border-color: rgba(216, 156, 49, 0.26);
  background: rgba(255, 249, 232, 0.95);
}

.document-template-runtime-summary-service-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-summary-service-code {
  width: 34px;
  min-width: 34px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.document-template-runtime-summary-service-code svg {
  width: 14px;
  height: 14px;
}

.document-template-runtime-summary-handover {
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
  border-color: rgba(34, 211, 238, 0.32);
  background: linear-gradient(135deg, rgba(236, 254, 255, 0.96), rgba(255, 255, 255, 0.94));
}

.document-template-runtime-summary-handover .document-template-runtime-summary-service-code {
  background: rgba(8, 47, 73, 0.9);
  color: #cffafe;
}

.document-template-runtime-summary-handover:hover,
.document-template-runtime-summary-handover:focus-visible {
  outline: none;
  border-color: rgba(34, 211, 238, 0.58);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

.document-template-runtime-summary-handover-action {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #155e75;
  cursor: pointer;
}

.document-template-runtime-summary-handover-action:hover,
.document-template-runtime-summary-handover-action:focus-visible {
  outline: none;
  border-color: rgba(34, 211, 238, 0.54);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.document-template-runtime-summary-handover-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.document-template-runtime-summary-handover-action svg {
  width: 14px;
  height: 14px;
}

.document-template-runtime-summary-service-status-select {
  min-height: 25px;
  width: 118px;
  padding: 0 22px 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(100, 112, 134, 0.18);
  background: #fff;
  color: #35415f;
  font-size: 0.66rem;
  font-weight: 800;
}

.document-template-runtime-summary-service-meta {
  margin: 0;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-source-picker {
  border-radius: 20px;
}

.document-template-object-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14, 20, 34, 0.46);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.document-template-object-picker-dialog {
  width: min(860px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(190, 205, 232, 0.78);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(229, 241, 255, 0.88), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96));
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.28);
}

.document-template-object-picker-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.document-template-object-picker-head h3 {
  margin: 2px 0 4px;
  color: #1f2d45;
  font-size: 1.05rem;
}

.document-template-object-picker-head p {
  margin: 0;
  color: #65728a;
  font-size: 0.86rem;
}

.document-template-object-picker-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.document-template-object-picker-context span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(190, 205, 232, 0.68);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.document-template-object-picker-context small {
  color: #6d7c92;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.document-template-object-picker-context strong {
  overflow: hidden;
  color: #1f2d45;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-object-picker-list {
  display: grid;
  gap: 9px;
}

.document-template-object-picker-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(190, 205, 232, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.document-template-object-picker-card:hover,
.document-template-object-picker-card:focus-within {
  transform: translateY(-1px);
  border-color: rgba(47, 117, 255, 0.36);
  box-shadow: 0 16px 30px rgba(46, 74, 128, 0.12);
}

.document-template-object-picker-card.is-selected {
  border-color: rgba(47, 117, 255, 0.58);
  background: linear-gradient(135deg, rgba(241, 247, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: inset 4px 0 0 rgba(47, 117, 255, 0.5), 0 18px 34px rgba(47, 117, 255, 0.14);
}

.document-template-object-picker-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.document-template-object-picker-card.is-new {
  border-color: rgba(240, 79, 151, 0.28);
  background: linear-gradient(135deg, rgba(255, 248, 253, 0.98), rgba(255, 255, 255, 0.96));
}

.document-template-object-picker-card input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #2f75ff;
}

.document-template-object-picker-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-template-object-picker-card-copy strong {
  overflow: hidden;
  color: #1f2d45;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-object-picker-card-copy span {
  color: #65728a;
  font-size: 0.76rem;
  line-height: 1.3;
}

.document-template-object-picker-badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.document-template-object-picker-badges em {
  padding: 4px 8px;
  border: 1px solid rgba(190, 205, 232, 0.72);
  border-radius: 999px;
  background: rgba(244, 248, 255, 0.92);
  color: #53627b;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.document-template-object-picker-new-input {
  margin-top: 8px;
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(209, 219, 236, 0.9);
  border-radius: 12px;
  padding: 8px 11px;
  background: #ffffff;
  color: #1f2433;
}

.document-template-object-picker-new-input:focus {
  outline: none;
  border-color: rgba(47, 117, 255, 0.48);
  box-shadow: 0 0 0 3px rgba(47, 117, 255, 0.12);
}

.document-template-object-picker-error {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(255, 151, 151, 0.7);
  border-radius: 12px;
  background: rgba(255, 244, 244, 0.9);
  color: #9f2f2f;
  font-size: 0.82rem;
  font-weight: 800;
}

.document-template-object-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.document-template-runtime-dock {
  position: sticky;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  padding: 3px 6px;
  border: 1px solid rgba(231, 88, 201, 0.22);
  border-radius: 14px;
  background: rgba(15, 13, 26, 0.92);
  box-shadow: 0 22px 44px rgba(14, 11, 26, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.document-template-runtime-dock-summary {
  display: none;
}

.document-template-runtime-dock-kicker {
  display: none;
}

.document-template-runtime-dock-summary strong {
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.2;
}

.document-template-runtime-dock-summary span:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  line-height: 1.15;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.document-template-runtime-dock-summary span:last-child:empty {
  display: none;
}

.document-template-runtime-dock-track-shell {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  justify-items: center;
  width: min(100%, 920px);
  margin-inline: auto;
}

.document-template-runtime-dock-track {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
  justify-content: center;
}

.document-template-runtime-dock-track::-webkit-scrollbar {
  height: 8px;
}

.document-template-runtime-dock-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.document-template-runtime-dock-scroll {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid rgba(240, 79, 151, 0.34);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.18), rgba(123, 92, 255, 0.18));
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.document-template-runtime-dock-track-shell:hover .document-template-runtime-dock-scroll,
.document-template-runtime-dock-scroll:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.document-template-runtime-dock-scroll:hover,
.document-template-runtime-dock-scroll:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(240, 79, 151, 0.48);
  box-shadow: 0 14px 24px rgba(113, 67, 196, 0.24);
}

.document-template-runtime-dock-group {
  min-width: 118px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 2px;
}

.document-template-runtime-dock-group.is-active {
  border-color: rgba(240, 79, 151, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.document-template-runtime-dock-group-head {
  display: grid;
  gap: 1px;
  justify-items: center;
  text-align: center;
}

.document-template-runtime-dock-group-head strong {
  color: #ffffff;
  font-size: 0.66rem;
}

.document-template-runtime-dock-group-head span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.56rem;
  line-height: 1.2;
}

.document-template-runtime-dock-group-head span:empty {
  display: none;
}

.document-template-runtime-dock-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.document-template-runtime-dock-item {
  min-width: 0;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  position: relative;
  color: #ffffff;
  font-size: 0.68rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.document-template-runtime-dock-item:hover,
.document-template-runtime-dock-item:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(240, 79, 151, 0.42);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 28px rgba(113, 67, 196, 0.24);
}

.document-template-runtime-dock-item.is-active {
  border-color: rgba(240, 79, 151, 0.44);
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.9), rgba(123, 92, 255, 0.92));
  box-shadow: 0 16px 32px rgba(113, 67, 196, 0.32);
}

.document-template-runtime-dock-item.is-complete {
  padding-right: 24px;
  border-color: rgba(74, 222, 128, 0.42);
  background: rgba(20, 83, 45, 0.34);
}

.document-template-runtime-dock-item.is-complete::after {
  content: "✓";
  position: absolute;
  right: 6px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #34d399;
  color: #062818;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(6, 40, 24, 0.36);
}

.document-template-runtime-dock-item.is-active.is-complete::after {
  background: #ecfdf5;
  color: #047857;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

.document-template-runtime-dock-item.is-active.is-complete {
  border-color: rgba(74, 222, 128, 0.58);
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.9), rgba(123, 92, 255, 0.88));
}

.document-template-runtime-dock-item.is-complete {
  padding-right: 28px;
  border-color: rgba(74, 222, 128, 0.68);
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.92), rgba(20, 184, 166, 0.82));
  color: #ecfdf5;
  box-shadow: 0 12px 24px rgba(22, 163, 74, 0.24);
}

.document-template-runtime-dock-item.is-complete::after {
  content: "OK";
  right: 5px;
  width: 20px;
  background: #ecfdf5;
  color: #062818;
  font-size: 0.52rem;
}

.document-template-runtime-dock-item.is-active.is-complete {
  border-color: rgba(74, 222, 128, 0.72);
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.98), rgba(13, 148, 136, 0.94));
}

.document-template-runtime-dock-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  align-self: center;
}

.document-template-runtime-dock-signature-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.document-template-runtime-dock-actions .ghost-button,
.document-template-runtime-dock-signature-mode .ghost-button {
  min-height: 26px;
  padding: 0 10px;
  border-color: rgba(240, 79, 151, 0.22);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
}

.document-template-runtime-dock-actions .ghost-button:hover,
.document-template-runtime-dock-actions .ghost-button:focus-visible,
.document-template-runtime-dock-signature-mode .ghost-button:hover,
.document-template-runtime-dock-signature-mode .ghost-button:focus-visible,
.document-template-runtime-dock-signature-mode .ghost-button.is-active {
  border-color: rgba(240, 79, 151, 0.42);
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.88), rgba(123, 92, 255, 0.92));
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(113, 67, 196, 0.28);
}

.document-template-runtime-side-nav {
  position: fixed;
  top: 50%;
  z-index: 222;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(240, 79, 151, 0.32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240, 79, 151, 0.92), rgba(123, 92, 255, 0.96));
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
  box-shadow: 0 20px 36px rgba(113, 67, 196, 0.26);
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: 0.94;
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.document-template-runtime-side-nav.is-prev {
  left: 20px;
}

.document-template-runtime-side-nav.is-next {
  right: 20px;
}

.document-template-editor-panel.is-fill-mode:hover .document-template-runtime-side-nav:not([hidden]),
.document-template-runtime-side-nav:hover,
.document-template-runtime-side-nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.document-template-runtime-side-nav:hover,
.document-template-runtime-side-nav:focus-visible {
  outline: none;
  transform: translateY(-50%) scale(1.02);
  box-shadow: 0 24px 42px rgba(113, 67, 196, 0.34);
}

.document-template-runtime-side-nav:disabled {
  opacity: 0;
  cursor: not-allowed;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: none;
}

@media (max-width: 960px) {
  .document-template-editor-panel.is-modal-open.is-fill-mode {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
  }

  .document-template-runtime-header-badges,
  .document-template-editor-panel.is-fill-mode .document-template-runtime-header-badges {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .document-template-editor-panel.is-fill-mode .document-template-runtime-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode .document-template-runtime-work-orders,
  .document-template-editor-panel.is-fill-mode .document-template-runtime-common {
    grid-column: auto;
  }

  .document-template-editor-panel.is-fill-mode .document-template-runtime-block-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-summary-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-summary-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-template-runtime-summary-checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-summary-final-panel,
  .document-template-runtime-summary-entry-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-summary-entry-head.is-simple {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .document-template-runtime-summary-entry-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .document-template-runtime-summary-final-actions,
  .document-template-runtime-summary-entry-head {
    justify-items: start;
  }

  .document-template-runtime-summary-entry-head.is-simple {
    justify-items: stretch;
  }

  .document-template-runtime-dock {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-dock-track-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-dock-scroll {
    display: none;
  }

  .document-template-runtime-dock-group {
    min-width: 170px;
  }

  .document-template-runtime-side-nav {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .document-template-runtime-side-nav.is-prev {
    left: 12px;
  }

  .document-template-runtime-side-nav.is-next {
    right: 12px;
  }
}

.document-template-runtime-block-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(198, 64, 172, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #3d2152;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.document-template-runtime-block-toggle:hover,
.document-template-runtime-block-toggle:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(198, 64, 172, 0.52);
  box-shadow: 0 10px 20px rgba(108, 83, 153, 0.08);
}

.document-template-runtime-block.is-collapsed {
  gap: 0;
}

.document-template-runtime-field-card {
  background: rgba(255, 255, 255, 0.94);
  min-width: 0;
  min-height: var(--document-template-runtime-card-min-height, auto);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card {
  grid-column: span var(--document-template-runtime-span, 6);
  align-content: start;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card[data-field-width="full"] {
  grid-column: 1 / -1;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card[data-field-width="9"] {
  grid-column: 1 / -1;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(96, 160, 126, 0.34);
  border-left: 5px solid rgba(96, 160, 126, 0.82);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 252, 248, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 28px rgba(67, 106, 90, 0.08);
}

.document-template-runtime-field-bundle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.document-template-runtime-field-bundle-head strong {
  color: #2f4d3f;
  font-size: 0.92rem;
}

.document-template-runtime-field-bundle-head span {
  color: #60796f;
  font-size: 0.74rem;
}

.document-template-runtime-field-bundle-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid .document-template-runtime-field-card {
  grid-column: span var(--document-template-runtime-span, 3);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid .document-template-runtime-field-card[data-field-width="9"],
.document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid .document-template-runtime-field-card[data-field-width="full"] {
  grid-column: span 3;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle .field {
  border-color: rgba(96, 160, 126, 0.26);
  box-shadow: none;
}

@media (max-width: 960px) {
  .document-template-runtime-field-bundle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid .document-template-runtime-field-card,
  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid .document-template-runtime-field-card[data-field-width="9"],
  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid .document-template-runtime-field-card[data-field-width="full"] {
    grid-column: 1 / -1;
  }
}

.document-template-runtime-field-grid {
  grid-template-columns: minmax(0, 1fr);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-grid {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  justify-items: stretch;
  align-items: start;
  gap: 0;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card .field {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  align-content: start;
  min-width: 0;
  height: 100%;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card .field > span {
  margin-bottom: 6px;
}

.document-template-runtime-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(220, 156, 212, 0.4);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #4c3558;
}

.document-template-runtime-checkbox input {
  width: 14px;
  height: 14px;
  accent-color: #c640ac;
}

.document-template-runtime-toggle-group {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 4px;
  width: fit-content;
  min-height: 42px;
  padding: 4px;
  border: 1px solid rgba(158, 122, 188, 0.34);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.document-template-runtime-toggle-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #4f5f78;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.document-template-runtime-toggle-option:hover,
.document-template-runtime-toggle-option:focus-visible {
  outline: none;
  border-color: rgba(96, 126, 190, 0.28);
  background: rgba(240, 245, 255, 0.92);
}

.document-template-runtime-toggle-option.is-active.is-yes {
  border-color: rgba(45, 142, 91, 0.42);
  background: linear-gradient(135deg, #e6f8ed, #f7fff9);
  color: #166534;
  box-shadow: 0 8px 18px rgba(34, 130, 74, 0.12);
}

.document-template-runtime-toggle-option.is-active.is-no {
  border-color: rgba(210, 76, 76, 0.38);
  background: linear-gradient(135deg, #fff0f0, #fffafa);
  color: #a12a2a;
  box-shadow: 0 8px 18px rgba(180, 54, 54, 0.1);
}

.document-template-runtime-field-help {
  color: #6d6280;
  font-size: 0.8rem;
  line-height: 1.45;
}

.document-template-runtime-source-picker {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(198, 134, 182, 0.42);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 251, 254, 0.99), rgba(244, 249, 246, 0.99));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.document-template-runtime-source-label {
  color: #5d416f;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.document-template-runtime-source-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-runtime-source-option {
  min-width: 150px;
  display: grid;
  gap: 4px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(198, 134, 182, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  color: #2b1d3d;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.document-template-runtime-source-option:hover,
.document-template-runtime-source-option:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(198, 64, 172, 0.42);
  box-shadow: 0 12px 24px rgba(108, 83, 153, 0.08);
}

.document-template-runtime-source-option strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.document-template-runtime-source-option span {
  color: #6d6280;
  font-size: 0.72rem;
  line-height: 1.35;
}

.document-template-runtime-source-option.is-primary {
  border-color: rgba(182, 88, 156, 0.54);
  background: linear-gradient(135deg, rgba(255, 242, 252, 0.99), rgba(243, 250, 246, 0.99));
  box-shadow: 0 12px 26px rgba(108, 83, 153, 0.12);
}

.document-template-runtime-source-option.is-active {
  border-color: rgba(95, 160, 126, 0.52);
  background: linear-gradient(135deg, rgba(240, 252, 244, 0.99), rgba(251, 247, 255, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(95, 160, 126, 0.18),
    0 10px 22px rgba(91, 140, 111, 0.12);
}

.document-template-runtime-source-empty {
  color: #6d6280;
  font-size: 0.76rem;
  line-height: 1.45;
}

.document-template-runtime-readonly-card,
.document-template-runtime-measurement-field,
.document-template-runtime-legal-field {
  display: grid;
  gap: 8px;
}

.document-template-runtime-system-description-field {
  display: grid;
  gap: 12px;
}

.document-template-runtime-system-blocks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.document-template-runtime-system-blocks-copy {
  display: grid;
  gap: 4px;
}

.document-template-runtime-system-blocks-copy strong {
  color: #1f2937;
  font-size: 0.92rem;
}

.document-template-runtime-system-blocks-copy span {
  color: #6d6280;
  font-size: 0.78rem;
  line-height: 1.45;
}

.document-template-runtime-system-title {
  padding: 8px 12px;
  border-radius: 4px;
  background: #d1d5db;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.document-template-runtime-system-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.document-template-runtime-system-blocks {
  display: grid;
  gap: 16px;
}

.document-template-runtime-system-block {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(181, 116, 165, 0.32);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 245, 252, 0.92) 100%);
  box-shadow: 0 16px 30px rgba(179, 125, 196, 0.08);
}

.document-template-runtime-system-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.document-template-runtime-system-block-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(110, 93, 201, 0.1);
  color: #5f44ae;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-template-runtime-system-block-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.document-template-runtime-system-block-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-template-runtime-system-rows {
  display: grid;
  gap: 10px;
}

.document-template-runtime-system-row {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(181, 116, 165, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
}

.document-template-runtime-system-row-meta {
  display: grid;
  gap: 10px;
}

.document-template-runtime-system-row.is-description-only {
  grid-template-columns: minmax(0, 1fr);
}

.document-template-runtime-system-row-label {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: #1f2937;
  font-size: 0.88rem;
  font-weight: 800;
}

.document-template-runtime-system-row-control {
  min-width: 0;
}

.document-template-runtime-system-row-control input,
.document-template-runtime-system-row-control textarea {
  width: 100%;
}

.document-template-runtime-system-row-remove {
  justify-self: start;
}

.document-template-runtime-media-field {
  display: grid;
  gap: 12px;
}

.document-template-runtime-media-dropzone {
  width: 100%;
  justify-content: flex-start;
  min-height: 92px;
  border-radius: 22px;
}

.document-template-runtime-media-preview {
  display: grid;
  gap: 10px;
}

.document-template-runtime-media-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #172033;
}

.document-template-runtime-media-preview-head strong {
  font-size: 0.88rem;
}

.document-template-runtime-media-preview-head span {
  color: #667085;
  font-size: 0.76rem;
}

.document-template-runtime-media-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.document-template-runtime-media-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(124, 90, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
  box-shadow: 0 10px 22px rgba(34, 47, 84, 0.06);
}

.document-template-runtime-media-file-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 34px;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid rgba(124, 90, 255, 0.18);
  background: linear-gradient(135deg, rgba(229, 245, 241, 0.96), rgba(241, 236, 255, 0.96));
  color: #234a60;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
}

.document-template-runtime-media-image {
  display: block;
  width: min(100%, 180px);
  max-height: 96px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(255, 255, 255, 0.96);
  padding: 6px;
}

@media (max-width: 720px) {
  .document-template-runtime-media-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-template-runtime-media-preview-list {
    grid-template-columns: 1fr;
  }

  .document-template-runtime-media-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .document-template-runtime-media-row .module-attachment-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.document-template-runtime-excel-trigger {
  justify-self: start;
}

.document-template-runtime-checklist {
  display: grid;
  gap: 8px;
}

.document-template-runtime-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(220, 156, 212, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #4c3558;
}

.document-template-runtime-checklist-item input {
  accent-color: #c640ac;
}

.document-template-runtime-checklist-item input[type="checkbox"] {
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  flex: 0 0 13px;
  margin: 0;
}

.checkbox-field input[type="checkbox"],
.field-checkbox input[type="checkbox"],
.work-order-row-select input[type="checkbox"],
.document-template-runtime-checkbox input[type="checkbox"],
.document-template-runtime-checklist-item input[type="checkbox"],
.document-template-runtime-summary-service-check {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  padding: 0 !important;
  box-sizing: border-box;
  line-height: 1;
  border: 1.25px solid rgba(94, 111, 142, 0.56);
  border-top-color: rgba(62, 75, 104, 0.76);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 1px 2px rgba(34, 47, 84, 0.1);
}

.checkbox-field input[type="checkbox"]::after,
.field-checkbox input[type="checkbox"]::after,
.work-order-row-select input[type="checkbox"]::after,
.document-template-runtime-checkbox input[type="checkbox"]::after,
.document-template-runtime-checklist-item input[type="checkbox"]::after,
.document-template-runtime-summary-service-check::after {
  content: "";
  width: 6px;
  height: 3px;
  margin-top: -1px;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.checkbox-field input[type="checkbox"]:checked,
.field-checkbox input[type="checkbox"]:checked,
.work-order-row-select input[type="checkbox"]:checked,
.document-template-runtime-checkbox input[type="checkbox"]:checked,
.document-template-runtime-checklist-item input[type="checkbox"]:checked,
.document-template-runtime-summary-service-check:checked {
  border-color: rgba(198, 64, 172, 0.92);
  border-top-color: rgba(138, 41, 118, 0.95);
  background: linear-gradient(135deg, #f04f97, #7b5cff);
}

.checkbox-field input[type="checkbox"]:checked::after,
.field-checkbox input[type="checkbox"]:checked::after,
.work-order-row-select input[type="checkbox"]:checked::after,
.document-template-runtime-checkbox input[type="checkbox"]:checked::after,
.document-template-runtime-checklist-item input[type="checkbox"]:checked::after,
.document-template-runtime-summary-service-check:checked::after {
  transform: rotate(-45deg) scale(1);
}

.document-template-runtime-checklist-item.is-suggested-by-code {
  border-color: rgba(47, 104, 84, 0.34);
  background: linear-gradient(180deg, rgba(239, 252, 246, 0.98), rgba(247, 250, 255, 0.98));
}

.document-template-runtime-checklist-item.is-selected-equipment {
  border-color: rgba(123, 92, 255, 0.32);
  box-shadow: 0 8px 20px rgba(123, 92, 255, 0.08);
}

.document-template-runtime-checklist-item.is-extra-equipment {
  background: rgba(250, 251, 255, 0.9);
}

.document-template-runtime-equipment-more {
  justify-self: start;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border-color: rgba(123, 92, 255, 0.2);
  color: #513ba4;
  font-size: 0.76rem;
  font-weight: 800;
}

.document-template-runtime-checklist-item > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  line-height: 1.35;
}

.document-template-runtime-checklist-item-copy {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.document-template-runtime-checklist-item-copy strong {
  color: #2c1f36;
  font-size: 0.82rem;
  line-height: 1.25;
}

.document-template-runtime-checklist-meta {
  color: #6a5a79;
  font-size: 0.68rem;
  line-height: 1.3;
}

.document-template-runtime-equipment-code-picker {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(47, 104, 84, 0.16);
  border-radius: 14px;
  background: rgba(247, 251, 249, 0.96);
}

.document-template-runtime-equipment-code-picker > span {
  color: #60796f;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-template-runtime-equipment-code-picker small {
  color: #6a5a79;
  font-size: 0.74rem;
}

.document-template-runtime-excel-preview {
  border-style: dashed;
  color: #6d6280;
  font-size: 0.88rem;
}

.document-template-runtime-signature-image {
  max-width: min(220px, 100%);
  max-height: 72px;
  object-fit: contain;
}

.document-template-runtime-digital-signature-card {
  gap: 12px;
}

.document-template-runtime-digital-signature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-runtime-digital-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.document-template-runtime-digital-signature-slot {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px dashed rgba(17, 17, 17, 0.36);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.document-template-runtime-digital-signature-slot.is-empty {
  grid-column: 1 / -1;
  color: #6d6280;
}

.document-template-runtime-digital-signature-role {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7b61ff;
}

.document-template-runtime-digital-signature-meta {
  display: grid;
  gap: 2px;
  font-size: 0.84rem;
  color: #4c3558;
}

.document-template-runtime-digital-signature-footer {
  display: flex;
  justify-content: flex-start;
}

.document-template-item-card {
  position: relative;
  border: 1px solid rgba(184, 114, 168, 0.26);
  border-radius: 20px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 252, 0.98));
  display: grid;
  gap: 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 12px 24px rgba(108, 83, 153, 0.06);
}

.document-template-item-card:hover {
  border-color: rgba(198, 64, 172, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 34px rgba(108, 83, 153, 0.09);
}

.document-template-item-card::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47, 104, 84, 0.9), rgba(108, 153, 132, 0.78));
}

.document-template-item-card.is-dragging {
  opacity: 0.66;
  transform: scale(0.995);
}

.document-template-item-card.is-drop-before {
  border-top-color: rgba(47, 104, 84, 0.56);
  box-shadow: inset 0 3px 0 rgba(47, 104, 84, 0.28);
}

.document-template-item-card.is-drop-after {
  border-bottom-color: rgba(47, 104, 84, 0.56);
  box-shadow: inset 0 -3px 0 rgba(47, 104, 84, 0.28);
}

.document-template-item-card.is-chapter {
  border-color: rgba(214, 89, 173, 0.32);
  background: linear-gradient(180deg, rgba(255, 246, 252, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 10px 24px rgba(157, 80, 170, 0.08);
}

.document-template-item-card.is-chapter::before {
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.92), rgba(122, 97, 255, 0.86));
}

.document-template-chapter-group {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(214, 89, 173, 0.28);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 245, 252, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow: 0 16px 34px rgba(157, 80, 170, 0.08);
}

.document-template-chapter-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(122, 97, 255, 0.08);
}

.document-template-chapter-group > .document-template-item-card.is-chapter {
  margin: 0;
}

.document-template-chapter-group-body {
  display: grid;
  gap: 10px;
  padding: 2px 0 0 18px;
  margin-left: 12px;
  border-left: 2px solid rgba(214, 89, 173, 0.18);
}

.document-template-chapter-group.is-collapsed .document-template-chapter-group-body {
  display: none;
}

.document-template-chapter-group .document-template-item-card.is-chapter-child {
  margin-left: 0;
  border-color: rgba(214, 89, 173, 0.18);
}

.document-template-chapter-group .document-template-item-card.is-chapter-child-start,
.document-template-chapter-group .document-template-item-card.is-chapter-child-end {
  margin-top: 0;
  margin-bottom: 0;
}

.document-template-item-card.is-chapter-child {
  margin-left: 22px;
  border-color: rgba(214, 89, 173, 0.18);
  background: linear-gradient(180deg, rgba(255, 250, 253, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 8px 20px rgba(157, 80, 170, 0.05);
}

.document-template-item-card.is-chapter-child::before {
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.6), rgba(122, 97, 255, 0.52));
}

.document-template-item-card.is-chapter-child-start {
  margin-top: -2px;
}

.document-template-item-card.is-chapter-child-end {
  margin-bottom: 6px;
}

.document-template-item-card.is-hidden-by-chapter {
  display: none;
}

.document-template-item-card.is-excel-block {
  cursor: pointer;
}

.document-template-item-card.is-excel-block:hover {
  border-color: rgba(214, 89, 173, 0.34);
  box-shadow: 0 22px 44px rgba(214, 89, 173, 0.12);
}

.document-template-inline-excel-host {
  margin-top: 10px;
  min-height: 0;
  display: grid;
  gap: 10px;
}

.document-template-inline-excel-host.is-active {
  border-radius: 18px;
}

.document-template-inline-excel-editor {
  display: grid;
  gap: 10px;
  padding: 10px 11px 11px;
  border: 1px solid rgba(214, 89, 173, 0.24);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 251, 255, 0.98), rgba(248, 244, 252, 0.96));
}

.document-template-inline-excel-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.document-template-inline-excel-editor-title {
  font-size: 0.82rem;
  color: #4c2d6d;
  letter-spacing: 0.02em;
}

.document-template-inline-excel-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.document-template-inline-excel-editor-actions .ghost-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.74rem;
}

.document-template-inline-excel-editor-grid-wrap {
  overflow: auto;
  max-height: min(52vh, 560px);
  border: 1px solid rgba(196, 168, 231, 0.35);
  border-radius: 12px;
  background: #fff;
}

.document-template-inline-excel-editor-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.document-template-inline-excel-editor-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef1f8;
  color: #3a4462;
  font-weight: 700;
}

.document-template-inline-excel-editor-grid th,
.document-template-inline-excel-editor-grid td {
  border: 1px solid rgba(192, 201, 224, 0.6);
  padding: 0;
  min-width: 120px;
  text-align: left;
  vertical-align: top;
}

.document-template-inline-excel-editor-grid .document-template-inline-excel-editor-index-head,
.document-template-inline-excel-editor-grid .document-template-inline-excel-editor-row-head {
  min-width: 42px;
  text-align: center;
  background: #f5f7fc;
  color: #607096;
  font-weight: 700;
}

.document-template-inline-excel-editor-head-cell {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}

.document-template-inline-excel-editor-letter {
  font-size: 0.68rem;
  color: #607096;
  font-weight: 700;
}

.document-template-inline-excel-editor-column-input,
.document-template-inline-excel-editor-cell-input {
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  color: #2f394f;
  font-size: 0.78rem;
}

.document-template-inline-excel-editor-column-input:focus,
.document-template-inline-excel-editor-cell-input:focus {
  background: rgba(236, 224, 252, 0.35);
}

.document-template-inline-excel-preview {
  display: grid;
  gap: 8px;
  padding: 10px 11px 11px;
  border: 1px solid rgba(214, 89, 173, 0.24);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 251, 255, 0.98), rgba(248, 244, 252, 0.96));
}

.document-template-inline-excel-preview-head {
  color: #4c2d6d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.document-template-inline-excel-preview-wrap {
  overflow: auto;
  max-height: min(42vh, 420px);
  border: 1px solid rgba(196, 168, 231, 0.35);
  border-radius: 12px;
  background: #fff;
}

.document-template-inline-excel-preview-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.document-template-inline-excel-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef1f8;
  color: #3a4462;
  font-weight: 700;
}

.document-template-inline-excel-preview-table th,
.document-template-inline-excel-preview-table td {
  border: 1px solid rgba(192, 201, 224, 0.6);
  padding: 6px 8px;
  min-width: 110px;
  text-align: left;
  vertical-align: top;
}

.document-template-inline-excel-preview-table tbody th {
  min-width: 42px;
  text-align: center;
  background: #f5f7fc;
  color: #607096;
  font-weight: 700;
}

.document-template-sheet-shell {
  display: grid;
  gap: 10px;
}

.document-template-sheet-panel {
  display: grid;
  gap: 10px;
}

.document-template-drop-tail {
  border: 1px dashed rgba(47, 104, 84, 0.18);
  border-radius: 16px;
  padding: 12px 14px;
  color: #60796f;
  font-size: 0.88rem;
  background: rgba(248, 251, 249, 0.92);
  text-align: center;
}

.document-template-drop-tail.is-active {
  border-color: rgba(47, 104, 84, 0.34);
  background: rgba(241, 248, 244, 0.98);
  color: #26493d;
}

.document-template-sheet-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(47, 104, 84, 0.18);
  border-radius: 18px;
  background: rgba(248, 251, 249, 0.95);
}

.document-template-field-hint {
  margin: -4px 0 0;
}

.document-template-source-config {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(214, 89, 173, 0.24);
  border-radius: 18px;
  background: rgba(255, 250, 253, 0.92);
}

.document-template-source-config > span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f357c;
}

.document-template-source-config-grid {
  gap: 10px;
}

.document-template-source-config-hint {
  color: #6d6280;
  font-size: 0.8rem;
  line-height: 1.5;
}

.document-template-toggle-labels-config {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed rgba(47, 104, 84, 0.2);
  border-radius: 18px;
  background: rgba(248, 251, 249, 0.92);
}

.document-template-toggle-labels-config > span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4d7165;
}

.document-template-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 0 0 6px 2px;
  border-bottom: 1px solid rgba(47, 104, 84, 0.08);
  min-width: 0;
}

.document-template-item-head-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 240px;
  min-width: 0;
}

.document-template-item-head-copy strong {
  flex: 1 1 100%;
  min-width: 0;
  color: #22352d;
  font-size: 0.94rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.document-template-item-card.is-chapter .document-template-item-head-copy strong {
  font-size: 1rem;
  color: #3d2152;
}

.document-template-chapter-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 89, 173, 0.2);
  background: rgba(255, 240, 249, 0.96);
  color: #a0368c;
  font-size: 0.74rem;
  font-weight: 700;
}

.document-template-chapter-toggle {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border-color: rgba(214, 89, 173, 0.28);
  color: #8f357c;
  background: rgba(255, 246, 252, 0.96);
}

.document-template-chapter-toggle:hover,
.document-template-chapter-toggle:focus-visible {
  border-color: rgba(214, 89, 173, 0.42);
  background: rgba(255, 239, 249, 0.98);
  color: #7f2c6d;
  outline: none;
}

.document-template-drag-handle {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: #60796f;
  display: inline-grid;
  place-items: center;
  cursor: grab;
  padding: 0;
}

.document-template-drag-handle:active {
  cursor: grabbing;
}

.document-template-drag-handle span {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.1em;
}

.document-template-item-card .document-template-inline-token {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-family: Consolas, "SFMono-Regular", monospace;
  letter-spacing: 0.02em;
  border-color: rgba(47, 104, 84, 0.22);
  background: rgba(234, 243, 239, 0.98);
  color: #2d5a49;
  overflow-wrap: anywhere;
}

.document-template-item-token-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 0 2px 4px 38px;
}

.document-template-item-token-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60796f;
}

.document-template-item-token-value {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(47, 104, 84, 0.16);
  background: rgba(248, 251, 249, 0.96);
  color: #2d5a49;
  font-size: 0.78rem;
  font-family: Consolas, "SFMono-Regular", monospace;
  overflow-wrap: anywhere;
  white-space: normal;
}

.document-template-token-copy {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 12px;
  font-size: 0.74rem;
}

.document-template-excel-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  min-width: 0;
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(47, 104, 84, 0.18);
  background: rgba(248, 251, 249, 0.96);
  text-align: left;
  cursor: pointer;
}

.document-template-excel-meta strong {
  color: #22352d;
  font-size: 0.84rem;
}

.document-template-excel-meta span {
  color: #60796f;
  font-size: 0.76rem;
  line-height: 1.35;
}

.document-template-excel-meta:hover,
.document-template-excel-meta:focus-visible {
  border-color: rgba(47, 104, 84, 0.28);
  background: rgba(243, 249, 246, 0.98);
  box-shadow: 0 0 0 3px rgba(47, 104, 84, 0.08);
  outline: none;
}

.document-template-link-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-template-link-card {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  background: rgba(247, 250, 248, 0.9);
  padding: 14px 16px;
  display: grid;
  gap: 4px;
}

.document-template-link-card span {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.72);
}

.document-template-link-card strong {
  font-size: 1.4rem;
  color: #22352d;
}

.document-template-link-card.is-ready strong {
  color: #255848;
}

.document-template-link-card.is-pending strong {
  color: #a0368c;
}

.document-template-link-card p {
  margin: 0;
  color: #60796f;
}

.document-template-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}

.document-template-inline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: end;
}

.document-template-item-card.is-chapter .document-template-inline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-template-item-card.is-chapter .document-template-inline-special-field {
  grid-column: 1 / -1;
}

.document-template-inline-grid.is-excel-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.document-template-item-card .field {
  gap: 4px;
  min-width: 0;
}

.document-template-builder-main > .document-template-block,
.document-template-custom-fields,
.document-template-item-card,
.document-template-chapter-group,
.document-template-chapter-group-body {
  min-width: 0;
}

.document-template-item-card .field span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60796f;
}

.document-template-item-card input,
.document-template-item-card select,
.document-template-item-card textarea {
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 14px;
}

.document-template-item-card .field select[multiple] {
  min-height: 132px;
  padding-block: 8px;
}

.document-template-item-card .card-button {
  padding: 8px 14px;
  min-height: 38px;
}

.document-template-item-remove {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
}

.document-template-inline-special-field,
.document-template-inline-excel-field {
  align-self: stretch;
  grid-column: span 2;
}

.document-template-inline-grid.is-excel-layout > .field {
  align-self: start;
}

.document-template-inline-grid.is-excel-layout .document-template-inline-excel-field {
  grid-column: 1 / -1;
  width: 100%;
}

.document-template-inline-excel-field > .document-template-inline-excel-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #4c2d6d;
  cursor: pointer;
}

.document-template-inline-excel-field > .document-template-inline-excel-label:focus-visible {
  outline: 2px solid rgba(214, 89, 173, 0.32);
  outline-offset: 3px;
  border-radius: 10px;
}

.document-template-inline-excel-launcher {
  cursor: pointer;
}

.document-template-inline-excel-host {
  width: 100%;
}

.measurement-sheet-panel.is-inline-template-sheet {
  width: 100%;
  height: auto;
  max-height: none;
  grid-template-rows: auto auto auto;
  align-content: start;
  padding: 10px 12px 12px;
  overflow: visible;
  border-radius: 24px;
  border: 1px solid rgba(214, 89, 173, 0.28);
  background: linear-gradient(180deg, rgba(255, 250, 255, 0.98), rgba(249, 243, 255, 0.98));
  box-shadow: 0 16px 34px rgba(109, 72, 170, 0.12);
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-head {
  gap: 8px;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-head h2 {
  font-size: 1.02rem;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.measurement-sheet-panel.is-runtime-inline-sheet .measurement-sheet-head-actions {
  display: none;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-meta {
  display: none;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-preset-wrap,
.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-preset-status {
  display: none !important;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-meta-field-secondary {
  display: none;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-meta .field input,
.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-meta .field select {
  min-height: 38px;
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-grid-wrap {
  height: auto;
  min-height: 420px;
  max-height: min(64vh, 720px);
}

.document-template-builder-inspector.is-open.is-excel-inspector .measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-grid-wrap {
  height: clamp(430px, 54dvh, 720px);
  max-height: calc(100dvh - 320px);
}

.measurement-sheet-panel.is-inline-template-sheet .measurement-sheet-grid {
  min-height: 0;
}

.document-template-inline-special-value {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 14px;
  background: rgba(248, 251, 249, 0.96);
  color: #4c695d;
  font-size: 0.82rem;
  line-height: 1.35;
}

.document-template-inline-checkbox-field {
  align-self: stretch;
}

.document-template-inline-checkbox-body,
.document-template-signature-meta-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 14px;
  background: rgba(248, 251, 249, 0.96);
}

.document-template-inline-checkbox-body {
  justify-content: space-between;
}

.document-template-inline-checkbox-body input,
.document-template-inline-mini-check input {
  box-sizing: border-box;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  accent-color: #c640ac;
}

.document-template-inline-checkbox-body input[type="checkbox"],
.document-template-inline-mini-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 14px;
  margin: 0;
  padding: 0 !important;
  border: 1.25px solid rgba(94, 111, 142, 0.56);
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 1px 2px rgba(34, 47, 84, 0.1);
}

.document-template-inline-checkbox-body input[type="checkbox"]::after,
.document-template-inline-mini-check input[type="checkbox"]::after {
  content: "";
  width: 6px;
  height: 3px;
  margin-top: -1px;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease;
}

.document-template-inline-checkbox-body input[type="checkbox"]:checked,
.document-template-inline-mini-check input[type="checkbox"]:checked {
  border-color: rgba(198, 64, 172, 0.92);
  background: linear-gradient(135deg, #f04f97, #7b5cff);
}

.document-template-inline-checkbox-body input[type="checkbox"]:checked::after,
.document-template-inline-mini-check input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}

.document-template-inline-checkbox-body strong,
.document-template-inline-mini-check span {
  color: #4c695d;
  font-size: 0.8rem;
  font-weight: 800;
}

.document-template-inline-mini-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.document-template-system-config {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(198, 134, 182, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 251, 254, 0.98), rgba(247, 251, 248, 0.98));
}

.document-template-system-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.document-template-system-config-copy {
  display: grid;
  gap: 4px;
}

.document-template-system-config-copy strong {
  color: #2b1d3d;
  font-size: 0.92rem;
}

.document-template-system-config-copy span {
  color: #6d6280;
  font-size: 0.76rem;
  line-height: 1.45;
}

.document-template-system-config-list {
  display: grid;
  gap: 10px;
}

.document-template-system-config-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(214, 89, 173, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
}

.document-template-system-config-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.document-template-system-config-row-head strong {
  color: #3d2152;
  font-size: 0.82rem;
}

.document-template-system-config-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  gap: 8px 10px;
}

.document-template-system-config-row-grid > .field-span-full {
  grid-column: 1 / -1;
}

.document-template-system-config-line-field {
  min-width: 140px;
}

.document-template-digital-signature-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px 18px;
  align-items: center;
}

.document-template-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4c3558;
  font-size: 0.9rem;
}

.document-template-inline-toggle input {
  accent-color: #c640ac;
}

.document-template-legal-hint {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 10px 12px;
}

.document-template-preview-section.is-chapter {
  margin-top: 20px;
}

.document-template-preview-chapter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid rgba(214, 89, 173, 0.24);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 246, 252, 0.96), rgba(255, 255, 255, 0.96));
}

.document-template-preview-chapter h2 {
  margin: 0;
}

.document-template-preview-chapter-line {
  width: 6px;
  height: 100%;
  min-height: 54px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 79, 151, 0.92), rgba(122, 97, 255, 0.88));
}

.document-template-preview-system-block {
  display: grid;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
}

.document-template-preview-system-block:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.document-template-preview-system-stack {
  display: grid;
  gap: 18px;
}

.document-template-preview-system-title {
  padding: 6px 12px;
  border-radius: 4px;
  background: #d1d5db;
  color: #111827;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.document-template-preview-system-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 0.84rem;
  line-height: 1.5;
}

.document-template-preview-system-rows {
  display: grid;
  gap: 8px;
}

.document-template-preview-system-row {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.document-template-preview-system-row.is-description-only {
  justify-items: stretch;
  text-align: left;
}

.document-template-preview-system-row-label {
  color: #111827;
  font-size: 0.88rem;
  font-weight: 800;
}

.document-template-preview-system-row-value {
  width: 100%;
  min-height: calc(var(--document-template-system-lines, 1) * 1.4rem);
  color: #1f2937;
  font-size: 0.98rem;
  line-height: 1.45;
}

.document-template-preview-system-placeholder {
  color: #94a3b8;
  font-style: italic;
}

@media (max-width: 860px) {
  .document-template-system-config-row-grid,
  .document-template-runtime-system-block-meta,
  .document-template-runtime-system-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-preview-system-row {
    justify-items: stretch;
    text-align: left;
  }
}

.document-template-item-card {
  gap: 6px;
  padding: 10px 12px;
}

.document-template-placeholder-chip {
  border: 1px solid rgba(47, 104, 84, 0.16);
  border-radius: 18px;
  background: #fff;
  color: #26493d;
  display: inline-grid;
  gap: 2px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.document-template-placeholder-chip strong {
  font-size: 0.82rem;
}

.document-template-placeholder-chip span {
  font-size: 0.82rem;
  color: #60796f;
}

.document-template-legal-framework-list {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow: auto;
  padding-right: 4px;
}

.document-template-legal-option {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(247, 250, 248, 0.9);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.document-template-legal-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.document-template-legal-option-copy strong {
  font-size: 0.94rem;
  color: #22352d;
}

.document-template-legal-option-copy span,
.document-template-reference-meta,
.document-template-preview-muted {
  color: #60796f;
}

.document-template-reference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.document-template-reference-actions--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.document-template-reference-actions--stack > button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

.document-template-reference-actions > button {
  flex: 1 1 160px;
}

.document-template-reference-engine-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.38fr) minmax(260px, 1fr);
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(97, 134, 190, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 248, 253, 0.98));
  box-shadow: 0 14px 32px rgba(61, 82, 129, 0.08);
}

.document-template-reference-engine-grid .module-copy {
  margin: 0;
  color: #52677f;
  line-height: 1.45;
}

.document-template-engine-segmented {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(119, 92, 210, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.document-template-engine-segmented button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-600);
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.document-template-engine-segmented button:hover {
  background: rgba(37, 99, 235, 0.08);
  color: var(--ink-900);
}

.document-template-engine-segmented button.is-active {
  background: linear-gradient(135deg, #2f7df0, #1f56c1);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.document-template-reference-meta {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px dashed rgba(214, 89, 173, 0.26);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 253, 0.98), rgba(255, 255, 255, 0.98));
  font-size: 0.81rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.document-template-reference-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.document-template-reference-state {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.document-template-reference-state.is-ready {
  border: 1px solid rgba(47, 104, 84, 0.18);
  background: rgba(230, 242, 236, 0.98);
  color: #255848;
}

.document-template-reference-state.is-missing {
  border: 1px solid rgba(214, 89, 173, 0.2);
  background: rgba(255, 242, 249, 0.98);
  color: #a0368c;
}

.document-template-reference-note {
  color: #6d6280;
  font-size: 0.8rem;
}

.document-template-placeholder-panel {
  display: grid;
  gap: 10px;
  padding-top: 0;
  border-top: none;
}

.document-template-html-token-panel {
  padding-top: 12px;
  border-top: 1px solid rgba(53, 98, 196, 0.12);
}

.document-template-html-token-panel .document-template-placeholder-palette {
  max-height: 190px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.document-template-placeholder-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.document-template-placeholder-panel-head h4 {
  margin: 0;
  font-size: 1rem;
  color: #22352d;
}

.document-template-placeholder-palette {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.document-template-preview-block {
  min-height: 0;
}

.document-template-preview {
  border: 1px solid rgba(182, 117, 167, 0.28);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(246, 249, 247, 0.99), rgba(255, 255, 255, 0.99));
  padding: 16px;
  max-height: calc(100dvh - 220px);
  overflow: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 16px 30px rgba(83, 59, 122, 0.08);
}

.document-template-preview-shell {
  display: grid;
  gap: 10px;
}

.document-template-sheet-tabs.is-preview .document-template-sheet-tab {
  min-width: 148px;
  border-radius: 14px;
  padding-right: 14px;
}

.document-template-preview-page {
  display: grid;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(47, 104, 84, 0.1);
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 20px 34px rgba(22, 45, 37, 0.08);
}

.document-template-preview-page + .document-template-preview-page {
  margin-top: 18px;
  page-break-before: always;
}

.document-template-preview-header {
  display: grid;
  gap: 18px;
}

.document-template-preview-header h1 {
  margin: 0;
  font-size: 2rem;
  color: #22352d;
}

.document-template-preview-eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.72);
}

.document-template-preview-lead {
  margin: 0;
  color: #60796f;
}

.document-template-preview-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-template-preview-meta-grid div {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(247, 250, 248, 0.94);
  display: grid;
  gap: 4px;
}

.document-template-preview-meta-grid span {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(47, 104, 84, 0.72);
}

.document-template-preview-section {
  display: grid;
  gap: 10px;
}

.document-template-preview-section h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #22352d;
}

.document-template-preview-section.is-align-center,
.document-template-preview-section.is-align-center .document-template-preview-table th,
.document-template-preview-section.is-align-center .document-template-preview-table td {
  text-align: center;
}

.document-template-preview-section.is-align-right,
.document-template-preview-section.is-align-right .document-template-preview-table th,
.document-template-preview-section.is-align-right .document-template-preview-table td {
  text-align: right;
}

.document-template-preview-section.is-tone-soft {
  padding: 14px;
  border-radius: 8px;
  background: rgba(246, 250, 248, 0.94);
}

.document-template-preview-section.is-tone-outline {
  padding: 14px;
  border: 1px solid rgba(53, 98, 196, 0.18);
  border-radius: 8px;
}

.document-template-preview-section.is-tone-plain .document-template-preview-field-value {
  border-color: transparent;
  background: transparent;
  padding-inline: 0;
}

.document-template-preview-section.is-text-small {
  font-size: 0.88rem;
}

.document-template-preview-section.is-text-large {
  font-size: 1.08rem;
}

.document-template-preview-section.is-text-small h2 {
  font-size: 1rem;
}

.document-template-preview-section.is-text-large h2 {
  font-size: 1.32rem;
}

.document-template-preview-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.document-template-preview-cover {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 24px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(247, 250, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.document-template-preview-copy,
.document-template-preview-list {
  margin: 0;
  color: #42584f;
  line-height: 1.55;
}

.document-template-preview-text-list {
  margin: 0;
  padding-left: 1.2rem;
  color: inherit;
  line-height: 1.55;
}

.document-template-preview-text-list li + li {
  margin-top: 0.25rem;
}

.document-template-preview-text-list.is-dash {
  list-style: none;
  padding-left: 0;
}

.document-template-preview-text-list.is-dash li {
  position: relative;
  padding-left: 1rem;
}

.document-template-preview-text-list.is-dash li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: currentColor;
}

.document-template-preview-table {
  width: 100%;
  border-collapse: collapse;
}

.document-template-preview-table th,
.document-template-preview-table td {
  border: 1px solid rgba(47, 104, 84, 0.14);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.document-template-preview-table th {
  background: rgba(241, 247, 244, 0.98);
}

.document-template-preview-field-value {
  position: relative;
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(247, 250, 248, 0.96);
  color: #26493d;
  line-height: 1.55;
}

.document-template-rich-text p {
  margin: 0 0 .55em;
}

.document-template-rich-text h1,
.document-template-rich-text h2,
.document-template-rich-text h3,
.document-template-rich-text h4 {
  margin: .1em 0 .4em;
  color: #172033;
  line-height: 1.18;
}

.document-template-rich-text h1 { font-size: 1.55em; }
.document-template-rich-text h2 { font-size: 1.32em; }
.document-template-rich-text h3 { font-size: 1.15em; }

.document-template-rich-text ul,
.document-template-rich-text ol {
  margin: .25em 0 .65em 1.35em;
  padding: 0;
}

.document-template-rich-text table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: .35em 0 .75em;
  background: #fff;
}

.document-template-rich-text th,
.document-template-rich-text td {
  border: 1px solid rgba(47, 104, 84, 0.18);
  padding: 7px 9px;
  vertical-align: top;
}

.document-template-rich-text th {
  background: rgba(241, 247, 244, 0.98);
  font-weight: 700;
}

.document-template-runtime-rich-editor {
  width: 100%;
  min-height: 160px;
  border: 1px solid rgba(205, 129, 188, 0.54);
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  color: #172033;
  font: inherit;
  line-height: 1.55;
  overflow: auto;
  outline: none;
}

.document-template-runtime-rich-editor:focus {
  border-color: rgba(82, 154, 113, 0.62);
  box-shadow:
    0 0 0 3px rgba(82, 154, 113, 0.13),
    0 12px 30px rgba(112, 73, 150, 0.08);
}

.document-template-runtime-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #8b7898;
  pointer-events: none;
}

.document-template-runtime-rich-editor p {
  margin: 0 0 .55em;
}

.document-template-runtime-rich-editor h1,
.document-template-runtime-rich-editor h2,
.document-template-runtime-rich-editor h3,
.document-template-runtime-rich-editor h4 {
  margin: .1em 0 .4em;
  color: #172033;
  line-height: 1.18;
}

.document-template-runtime-rich-editor h1 { font-size: 1.55em; }
.document-template-runtime-rich-editor h2 { font-size: 1.32em; }
.document-template-runtime-rich-editor h3 { font-size: 1.15em; }

.document-template-runtime-rich-editor ul,
.document-template-runtime-rich-editor ol {
  margin: .25em 0 .65em 1.35em;
  padding: 0;
}

.document-template-runtime-rich-editor table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: .35em 0 .75em;
}

.document-template-runtime-rich-editor th,
.document-template-runtime-rich-editor td {
  border: 1px solid rgba(47, 104, 84, 0.2);
  padding: 7px 9px;
  vertical-align: top;
}

.document-template-runtime-rich-editor th {
  background: rgba(241, 247, 244, 0.98);
  font-weight: 700;
}

.document-template-runtime-rich-command-menu {
  position: fixed;
  z-index: 10080;
  display: grid;
  width: min(260px, calc(100vw - 24px));
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(205, 129, 188, 0.54);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 60px rgba(43, 36, 62, 0.18);
}

.document-template-runtime-rich-command-menu button {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.document-template-runtime-rich-command-menu button:hover,
.document-template-runtime-rich-command-menu button.is-active {
  background: linear-gradient(135deg, rgba(240, 252, 244, 0.98), rgba(251, 247, 255, 0.98));
}

.document-template-runtime-rich-command-menu strong {
  color: #172033;
  font-size: 0.84rem;
}

.document-template-runtime-rich-command-menu span {
  color: #6a5a79;
  font-size: 0.72rem;
}

.document-template-preview-field-value.is-resizable-input {
  padding-bottom: 28px;
}

.document-template-preview-media-placeholder,
.document-template-preview-media-frame {
  border: 1px dashed rgba(47, 104, 84, 0.24);
  border-radius: 22px;
  background: rgba(247, 250, 248, 0.98);
}

.document-template-preview-media-placeholder {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  color: #60796f;
  line-height: 1.5;
}

.document-template-preview-media-placeholder.is-file {
  min-height: 108px;
  font-weight: 600;
  color: #22352d;
}

.document-template-preview-media-frame {
  padding: 14px;
}

.document-template-preview-media-image {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 16px;
}

.document-template-preview-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.document-template-preview-media-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 142px;
  border: 1px solid rgba(124, 90, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96));
  padding: 12px;
  box-shadow: 0 14px 28px rgba(34, 47, 84, 0.06);
}

.document-template-preview-media-card.is-image {
  min-height: 190px;
}

.document-template-preview-media-card .document-template-preview-media-frame {
  min-height: 118px;
  padding: 8px;
  border-radius: 16px;
}

.document-template-preview-media-card .document-template-preview-media-image {
  max-height: 170px;
}

.document-template-preview-media-file-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(124, 90, 255, 0.18);
  background: linear-gradient(135deg, rgba(229, 245, 241, 0.98), rgba(241, 236, 255, 0.98));
  color: #234a60;
  font-size: 0.76rem;
  font-weight: 900;
}

.document-template-preview-media-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-template-preview-media-card-copy strong,
.document-template-preview-media-card-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-preview-media-card-copy strong {
  color: #172033;
  font-size: 0.88rem;
}

.document-template-preview-media-card-copy span {
  color: #667085;
  font-size: 0.76rem;
}

.document-template-preview-field-value.is-checkbox,
.document-template-preview-field-value.is-toggle {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-width: 96px;
  justify-content: center;
  font-weight: 700;
}

.document-template-preview-pill,
.document-template-preview-empty {
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.98);
  color: #335447;
}

.document-template-preview-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.document-template-preview-signature {
  display: grid;
  gap: 10px;
}

.document-template-preview-signature-image {
  display: block;
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}

.document-template-preview-signature-line {
  height: 54px;
  border-bottom: 1px solid rgba(47, 104, 84, 0.24);
}

.document-template-preview-person-signature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  align-items: end;
}

.document-template-preview-person-signature {
  display: grid;
  gap: 12px;
  min-height: 180px;
  align-content: end;
}

.document-template-preview-person-signature.is-right-aligned {
  grid-column: 2;
}

.document-template-preview-person-copy {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.document-template-preview-person-role {
  font-size: 0.82rem;
  color: #60796f;
}

.document-template-preview-person-meta {
  display: grid;
  gap: 2px;
  font-size: 0.86rem;
  color: #29493d;
}

.document-template-preview-signature-placeholder {
  min-height: 88px;
  border-bottom: 1px solid rgba(47, 104, 84, 0.24);
  display: grid;
  align-items: end;
  justify-items: center;
  color: #7a869f;
  font-size: 0.82rem;
  padding-bottom: 8px;
}

.document-template-preview-signature-placeholder.is-digital {
  min-height: 96px;
  border: 1px dashed rgba(17, 17, 17, 0.36);
  border-radius: 18px;
  border-bottom-width: 1px;
  padding: 14px;
  align-items: center;
  justify-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: #7b61ff;
}

.document-template-preview-signature--digital {
  justify-items: center;
  gap: 10px;
}

.work-order-document-wizard-common-grid select[multiple],
.work-order-document-selection-grid select[multiple] {
  min-height: 120px;
}

.document-template-preview-page-break {
  border: 1px dashed rgba(47, 104, 84, 0.3);
  border-radius: 18px;
  padding: 16px;
  background: rgba(247, 250, 248, 0.88);
  display: grid;
  gap: 6px;
  text-align: center;
}

@media (max-width: 1180px) {
  .legal-framework-summary-grid,
  .rulebook-preset-list,
  .service-catalog-summary-grid,
  .measurement-equipment-summary-grid,
  .measurement-equipment-isznr-summary,
  .safety-authorization-summary-grid,
  .template-development-summary-grid,
  .document-template-copy-source-card,
  .document-template-meta-grid,
  .document-template-builder-shell,
  .document-template-preview-person-signature-grid,
  .work-order-document-wizard-common-grid,
  .work-order-document-wizard-common-core-grid,
  .work-order-document-wizard-common-env-grid,
  .work-order-document-wizard-common-periods-grid,
  .work-order-document-wizard-common-people-grid,
  .work-order-document-wizard-common-person-area-grid,
  .work-order-document-selection-basic-grid,
  .work-order-document-selection-env-grid,
  .work-order-document-selection-person-grid,
  .work-order-document-selection-person-area-grid,
  .work-order-document-selection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-template-builder-shell {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  }

  .work-order-document-carousel-track .work-order-document-selection-card {
    flex-basis: calc((100% - 12px) / 2);
  }

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

  .measurement-equipment-activity-field.is-wide {
    grid-column: span 2;
  }

  .measurement-equipment-card-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .measurement-equipment-isznr-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .measurement-equipment-editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .measurement-equipment-form {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .measurement-equipment-side-activity-panel {
    max-height: 320px;
  }
}

@media (max-width: 760px) {
  .legal-framework-summary-grid,
  .service-catalog-summary-grid,
  .measurement-equipment-summary-grid,
  .safety-authorization-summary-grid,
  .template-development-summary-grid,
  .legal-framework-filters,
  .rulebooks-filters,
  .service-catalog-filters,
  .measurement-equipment-filters,
  .measurement-equipment-isznr-filters,
  .safety-authorization-filters,
  .template-development-filters,
  .service-catalog-form-grid,
  .user-editor-modules,
  .user-electrical-grid,
  .measurement-equipment-form-grid,
  .rulebook-form-grid,
  .measurement-equipment-spec-row,
  .safety-authorization-form-grid,
  .document-template-copy-source-card,
  .document-template-copy-source-controls,
  .document-template-copy-source-card.is-toolbar,
  .document-template-meta-grid,
  .document-template-builder-shell,
  .document-template-inline-grid,
  .document-template-link-summary,
  .document-template-preview-meta-grid,
  .document-template-preview-signatures,
  .document-template-preview-person-signature-grid,
  .work-order-document-wizard-common-grid,
  .work-order-document-wizard-common-core-grid,
  .work-order-document-wizard-common-env-grid,
  .work-order-document-wizard-common-periods-grid,
  .work-order-document-wizard-common-people-grid,
  .work-order-document-wizard-common-person-area-grid,
  .work-order-document-selection-basic-grid,
  .work-order-document-selection-env-grid,
  .work-order-document-selection-person-grid,
  .work-order-document-selection-person-area-grid,
  .work-order-document-selection-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-framework-list-heading,
  .rulebooks-list-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .service-catalog-list-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .legal-framework-list-heading > .primary-button,
  .rulebooks-list-heading > .primary-button {
    width: 100%;
  }

  .service-catalog-list-heading > .primary-button {
    width: 100%;
  }

  .legal-framework-card-head,
  .legal-framework-card-primary {
    flex-direction: column;
  }

  .legal-framework-card-actions,
  .safety-authorization-card-actions,
  .legal-framework-card-documents {
    justify-content: flex-start;
  }

  .rulebook-preset-card,
  .rulebook-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-preview-person-signature.is-right-aligned {
    grid-column: auto;
  }

  .work-order-document-company-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-document-wizard-sheet-tabs {
    width: 100%;
  }

  .work-order-document-selection-head,
  .work-order-document-selection-section-head,
  .work-order-document-selection-executors {
    align-items: flex-start;
  }

  .work-order-document-selection-executors {
    flex-direction: column;
  }

  .work-order-document-selection-executor-label {
    white-space: normal;
  }

  .work-order-document-wizard-work-orders[data-layout="double"],
  .work-order-document-wizard-work-orders[data-layout="triple"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-documents-block .module-attachment-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-documents-block .module-attachment-actions {
    flex-direction: row;
    justify-content: flex-start;
  }

  .user-electrical-grid > .field.user-qualification-role-group,
  .user-electrical-grid > .field.user-qualification-role-group.is-special,
  .user-electrical-grid > .field.user-qualification-service-field,
  .user-electrical-grid > .field.user-qualification-field-type,
  .user-electrical-grid > .field.user-qualification-field-data1,
  .user-electrical-grid > .field.user-qualification-field-data2,
  .user-electrical-grid > .field.user-qualification-field-data3,
  .user-electrical-grid > .field.user-qualification-field-passedOn,
  .user-electrical-grid > .field.user-qualification-field-validUntil,
  .user-electrical-grid > .field.qualification-validity-field {
    grid-column: 1 / -1;
  }

  .user-electrical-grid > .field.user-qualification-role-group:not(.is-special) .user-qualification-role-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-qualification-service-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .measurement-equipment-activity-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .measurement-equipment-spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .measurement-equipment-spec-index {
    margin-top: 0;
  }

  .measurement-equipment-activity-actions {
    justify-content: flex-start;
  }

  .work-order-document-carousel-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .work-order-document-carousel-track .work-order-document-selection-card {
    flex-basis: 100%;
    min-width: 100%;
  }

  .document-template-sheet-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .document-template-excel-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-framework-editor-panel.is-modal-open,
  .rulebook-editor-panel.is-modal-open,
  .service-catalog-editor-panel.is-modal-open,
  .measurement-equipment-editor-panel.is-modal-open,
  .safety-authorization-editor-panel.is-modal-open,
  .document-template-editor-panel.is-modal-open {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
  }

  .measurement-equipment-editor-panel.is-modal-open .measurement-equipment-editor-body {
    overflow: auto;
    padding-inline: 16px;
    padding-bottom: 14px;
  }

  .document-template-editor-panel.is-workspace-open {
    inset: 8px;
    padding: 14px;
    border-radius: 22px;
  }

  .work-order-document-wizard-panel {
    width: calc(100vw - 16px);
    left: 50%;
    top: 8px;
    max-height: calc(100dvh - 16px);
    padding: 16px;
    border-radius: 22px;
  }

  .work-order-document-wizard-head,
  .work-order-document-wizard-block-head {
    align-items: flex-start;
  }

  .legal-framework-editor-body,
  .service-catalog-editor-body,
  .measurement-equipment-editor-body,
  .safety-authorization-editor-body,
  .document-template-editor-body {
    padding-inline: 16px;
  }

  .measurement-equipment-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .measurement-equipment-side-activity-panel {
    max-height: none;
  }

  .module-attachment-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.learning-tests-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.learning-tests-stat-card {
  border: 1px solid rgba(222, 126, 188, 0.28);
  border-radius: 22px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 250, 255, 0.88));
  box-shadow: 0 12px 30px rgba(83, 54, 117, 0.08);
}

.learning-tests-stat-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7c7397;
}

.learning-tests-stat-value {
  font-size: 2rem;
  line-height: 1;
  color: #241b3d;
}

.learning-tests-toolbar-panel,
.learning-tests-list-panel,
.learning-people-list-panel,
.learning-test-editor-panel {
  border-color: rgba(222, 126, 188, 0.3);
}

.learning-tests-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

#learning-test-import-questions-feedback:empty {
  display: none;
}

#learning-test-import-questions-feedback {
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(143, 170, 220, 0.45);
  border-radius: 10px;
  background: rgba(245, 248, 255, 0.82);
  color: #42516f;
}

#learning-test-import-questions-feedback[data-tone="success"] {
  border-color: rgba(68, 190, 120, 0.42);
  background: rgba(232, 250, 241, 0.9);
  color: #19633d;
}

#learning-test-import-questions-feedback[data-tone="warning"],
#learning-test-import-questions-feedback[data-tone="loading"] {
  border-color: rgba(236, 180, 64, 0.48);
  background: rgba(255, 248, 226, 0.9);
  color: #7a5614;
}

#learning-test-import-questions-feedback[data-tone="error"] {
  border-color: rgba(236, 103, 128, 0.52);
  background: rgba(255, 240, 243, 0.92);
  color: #9a243f;
}

.learning-tests-filters {
  display: grid;
  grid-template-columns: minmax(280px, 1.8fr) minmax(180px, 0.6fr);
  gap: 14px;
  align-items: end;
}

.learning-tests-list-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}

.learning-tests-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.learning-test-card,
.learning-test-list-row {
  border: 1px solid rgba(222, 126, 188, 0.24);
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.92));
  box-shadow: 0 14px 30px rgba(70, 39, 102, 0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.learning-test-list-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(360px, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.learning-test-card[role="button"],
.learning-test-list-row[role="button"] {
  cursor: pointer;
}

.learning-test-card:hover,
.learning-test-card:focus-visible,
.learning-test-card.is-active,
.learning-test-list-row:hover,
.learning-test-list-row:focus-visible,
.learning-test-list-row.is-active {
  transform: translateY(-1px);
  border-color: rgba(213, 76, 190, 0.45);
  box-shadow: 0 18px 36px rgba(70, 39, 102, 0.12);
}

.learning-test-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.learning-test-card-copy h4 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: #241b3d;
}

.learning-test-card-meta {
  margin: 0;
  color: #72678c;
  font-size: 0.92rem;
}

.learning-test-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.learning-test-card-description {
  margin: 0;
  color: #5e5675;
  line-height: 1.5;
}

.learning-test-list-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learning-test-list-title h4,
.learning-test-list-title p {
  margin: 0;
}

.learning-test-list-title h4 {
  color: #241b3d;
  font-size: 1rem;
}

.learning-test-list-title p {
  color: #6a617e;
  font-size: 0.86rem;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-test-list-title .learning-test-list-meta {
  color: #2563eb;
  font-size: 0.76rem;
}

.learning-test-list-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
  min-width: 0;
}

.learning-test-list-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(221, 199, 231, 0.76);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.learning-test-list-stat small {
  color: #84799e;
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.learning-test-list-stat strong {
  color: #241b3d;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-test-list-status {
  display: flex;
  justify-content: flex-end;
}

.learning-test-editor-backdrop {
  z-index: 1200;
}

.learning-test-editor-panel {
  position: fixed;
  inset: 4vh 4vw;
  z-index: 1201;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.learning-test-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 2px 0;
}

.learning-test-form-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.5fr);
  gap: 14px;
}

.learning-test-editor-steps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.learning-test-editor-steps .ghost-button.is-active {
  background: linear-gradient(135deg, rgba(231, 243, 236, 0.96), rgba(213, 236, 219, 0.92));
  border-color: rgba(101, 161, 121, 0.38);
  color: #214d2e;
}

.learning-test-editor-step {
  display: grid;
  gap: 16px;
}

.learning-test-step-actions {
  justify-content: flex-start;
}

.learning-test-question-list {
  display: grid;
  gap: 16px;
}

.learning-test-materials-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(214, 120, 184, 0.24);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 252, 255, 0.94));
  box-shadow: 0 14px 30px rgba(66, 41, 93, 0.08);
}

.learning-test-material-empty {
  padding: 18px 20px;
  border: 1px dashed rgba(214, 120, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
}

.learning-test-material-empty strong {
  display: block;
  margin-bottom: 6px;
  color: #241b3d;
}

.learning-test-material-empty p {
  margin: 0;
  color: #6b6284;
}

.learning-test-material-row {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(214, 120, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  padding: 14px 16px;
}

.learning-test-group-card {
  border: 1px solid rgba(214, 120, 184, 0.26);
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 252, 255, 0.94));
  box-shadow: 0 10px 24px rgba(66, 41, 93, 0.08);
}

.learning-test-group-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.learning-test-group-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.learning-test-question-stack {
  display: grid;
  gap: 12px;
}

.learning-test-question-card {
  border: 1px solid rgba(214, 120, 184, 0.24);
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 249, 255, 0.94));
  box-shadow: 0 12px 24px rgba(70, 39, 102, 0.07);
}

.learning-test-question-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(214, 120, 184, 0.18);
}

.learning-test-question-card-copy {
  display: grid;
  gap: 4px;
}

.learning-test-question-card-copy strong {
  color: #241b3d;
  font-size: 1rem;
}

.learning-test-question-card-copy span {
  color: #72678c;
  font-size: 0.9rem;
}

.learning-test-question-setup {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 12px;
}

.learning-test-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.learning-test-ordered-answer-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}

.learning-test-order-input {
  text-align: center;
}

.learning-test-question-media {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(214, 120, 184, 0.28);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
}

.learning-test-question-media-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.learning-test-question-media-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d6d92;
}

.learning-test-question-media-summary {
  font-size: 0.92rem;
  color: #28324f;
}

.learning-test-question-media-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.learning-test-question-image-preview {
  width: min(100%, 320px);
  overflow: hidden;
  border: 1px solid rgba(214, 120, 184, 0.2);
  border-radius: 14px;
  background: #fff;
}

.learning-test-question-image-preview img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.learning-test-multi-correct-field,
.learning-test-ordering-help {
  min-width: min(100%, 420px);
}

.learning-test-correct-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.learning-test-correct-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 120, 184, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: #28324f;
}

.learning-test-ordering-help small {
  display: block;
  margin-top: 8px;
  color: #6f6782;
}

.learning-test-question-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}

.learning-test-bottom-actions {
  position: sticky;
  bottom: -2px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(214, 120, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 26px rgba(70, 39, 102, 0.08);
  backdrop-filter: blur(10px);
}

.learning-test-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(23, 15, 41, 0.48);
  backdrop-filter: blur(5px);
}

.learning-test-preview-panel {
  position: fixed;
  inset: max(12px, 3vh) max(16px, 4vw);
  z-index: 1251;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.learning-test-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 2px 2px;
}

.learning-test-preview-stage {
  display: grid;
  min-height: 0;
}

.learning-test-preview-frame {
  display: grid;
  gap: 16px;
  min-height: 0;
}

.learning-test-preview-slide-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.learning-test-preview-slide-copy {
  display: grid;
  gap: 8px;
}

.learning-test-preview-slide-copy h4 {
  margin: 0;
  font-size: 1.35rem;
  color: #231a3c;
}

.learning-test-preview-slide-copy p {
  margin: 0;
  color: #635b7b;
  line-height: 1.55;
}

.learning-test-preview-slide-kicker {
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b24a97;
}

.learning-test-preview-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(241, 244, 251, 0.96);
  color: #4f4765;
  font-weight: 700;
}

.learning-test-preview-slide-body {
  display: grid;
  min-height: clamp(280px, 58vh, 760px);
}

.learning-test-preview-slide-card {
  display: grid;
  gap: 14px;
  min-height: 0;
  height: 100%;
  padding: 24px;
  border: 1px solid rgba(214, 120, 184, 0.24);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 252, 255, 0.95));
  box-shadow: 0 18px 34px rgba(70, 39, 102, 0.08);
  overflow: hidden;
}

.learning-test-preview-slide-card.is-intro {
  align-content: center;
}

.learning-test-preview-slide-card.is-intro h5 {
  margin: 0;
  font-size: 1.8rem;
  color: #231a3c;
}

.learning-test-preview-slide-card.is-intro p {
  margin: 0;
  max-width: 72ch;
  color: #62597a;
  line-height: 1.65;
}

.learning-test-preview-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.learning-test-preview-image,
.learning-test-preview-video,
.learning-test-preview-pdf {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: clamp(240px, 52vh, 720px);
  border: 1px solid rgba(214, 120, 184, 0.18);
  border-radius: 18px;
  background: #fff;
  object-fit: contain;
}

.learning-test-preview-pdf {
  height: clamp(280px, 54vh, 760px);
}

.learning-test-preview-download {
  display: grid;
  gap: 10px;
  align-content: center;
  min-height: 0;
  height: 100%;
}

.learning-test-preview-download strong {
  color: #231a3c;
}

.learning-test-preview-download p {
  margin: 0;
  color: #635b7b;
}

.learning-test-preview-question-prompt {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.6;
  color: #231a3c;
}

.learning-test-preview-question-image {
  width: min(100%, 520px);
  max-height: clamp(160px, 28vh, 320px);
  overflow: hidden;
  border: 1px solid rgba(214, 120, 184, 0.18);
  border-radius: 18px;
  background: #fff;
}

.learning-test-preview-question-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.learning-test-preview-answer-list {
  display: grid;
  gap: 10px;
}

.learning-test-preview-answer {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(245, 247, 252, 0.92);
  border: 1px solid rgba(214, 120, 184, 0.12);
}

.learning-test-preview-answer-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 12px;
  background: rgba(237, 222, 255, 0.78);
  color: #612f7d;
  font-weight: 800;
}

.learning-test-preview-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.learning-person-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(214, 120, 184, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 900px) {
  .learning-tests-filters,
  .learning-tests-list-toolbar,
  .learning-test-list-row,
  .learning-test-form-grid,
  .learning-test-group-header,
  .learning-test-question-setup,
  .learning-test-answer-grid,
  .learning-test-question-footer,
  .learning-test-material-row,
  .learning-test-preview-slide-head,
  .learning-test-preview-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .learning-test-card-head,
  .learning-person-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .learning-test-list-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-test-list-status {
    justify-content: flex-start;
  }

  .learning-test-preview-panel {
    inset: 12px;
  }

  .learning-test-preview-slide-body,
  .learning-test-preview-slide-card {
    min-height: auto;
  }

  .learning-test-preview-image,
  .learning-test-preview-video,
  .learning-test-preview-pdf {
    max-height: 48vh;
  }
}

.work-order-document-training-card {
  display: grid;
  gap: 0.8rem;
}

.work-order-document-training-specialist {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.work-order-document-training-tests {
  display: grid;
  gap: 0.75rem;
}

.work-order-document-training-row {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 0.72rem;
  background: color-mix(in srgb, var(--surface-soft) 92%, white 8%);
  display: grid;
  gap: 0.6rem;
}

.work-order-document-training-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.work-order-document-training-row-head strong {
  font-size: 0.96rem;
}

.work-order-document-training-row-head span {
  font-size: 0.78rem;
  color: var(--muted);
}

.work-order-document-training-row-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  align-items: center;
}

.work-order-document-training-row-controls .field {
  margin: 0;
}

.work-order-document-training-assignment-list {
  display: grid;
  gap: 0.45rem;
}

.work-order-document-training-external-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 0.55rem;
}

.work-order-document-training-assignment-item {
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.52rem 0.62rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--surface);
}

.work-order-document-training-assignment-item span {
  font-size: 0.76rem;
  color: var(--muted);
}

.work-order-document-training-cockpit {
  display: grid;
  gap: 0.85rem;
  width: 100%;
}

.work-order-document-training-cockpit-head,
.work-order-document-training-quick-actions,
.work-order-document-training-card-chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.work-order-document-training-cockpit-head > div:first-child {
  display: grid;
  gap: 0.22rem;
  min-width: min(320px, 100%);
}

.work-order-document-training-cockpit-head strong {
  color: #18223a;
  font-size: 1rem;
  font-weight: 900;
}

.work-order-document-training-cockpit-head span {
  color: #66738d;
  font-size: 0.82rem;
  line-height: 1.45;
}

.work-order-document-training-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 0.48rem;
}

.work-order-document-training-stats span {
  min-height: 54px;
  padding: 0.55rem 0.68rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(91, 124, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 255, 0.92));
  box-shadow: 0 8px 18px rgba(42, 72, 145, 0.07);
  display: grid;
  align-content: center;
}

.work-order-document-training-stats strong {
  color: #1d4ed8;
  font-size: 1.08rem;
}

.work-order-document-training-stats small {
  color: #69758e;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.work-order-document-training-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.work-order-document-training-mode-button {
  min-height: 76px;
  border-radius: 1rem;
  padding: 0.7rem 0.82rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.58rem;
  text-align: left;
  white-space: normal;
}

.work-order-document-training-mode-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.14), rgba(216, 77, 193, 0.12));
  color: #2563eb;
}

.work-order-document-training-mode-icon svg {
  width: 18px;
  height: 18px;
}

.work-order-document-training-mode-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.work-order-document-training-mode-button strong {
  color: #1d2b4d;
  font-size: 0.9rem;
  font-weight: 900;
}

.work-order-document-training-mode-copy small {
  color: #6d7890;
  font-size: 0.72rem;
  line-height: 1.35;
}

.work-order-document-training-mode-button.is-active {
  border-color: rgba(37, 99, 235, 0.34);
  background: linear-gradient(135deg, rgba(233, 242, 255, 0.98), rgba(242, 247, 255, 0.96));
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14), 0 14px 28px rgba(37, 99, 235, 0.12);
}

.work-order-document-training-question-settings {
  display: grid;
  gap: 0.62rem;
  padding: 0.78rem;
  border-radius: 1rem;
  border: 1px solid rgba(142, 173, 226, 0.36);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.94));
}

.work-order-document-training-question-settings-head,
.work-order-document-training-question-setting,
.work-order-document-training-question-setting-controls {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.work-order-document-training-question-settings-head {
  justify-content: space-between;
}

.work-order-document-training-question-settings-head strong,
.work-order-document-training-question-setting-copy strong {
  color: #1d2b4d;
  font-weight: 900;
}

.work-order-document-training-question-settings-head span,
.work-order-document-training-question-setting-copy span {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}

.work-order-document-training-question-settings-list {
  display: grid;
  gap: 0.55rem;
}

.work-order-document-training-question-setting {
  justify-content: space-between;
  padding: 0.62rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(100, 116, 139, 0.14);
  background: rgba(255, 255, 255, 0.9);
}

.work-order-document-training-question-setting-copy {
  display: grid;
  gap: 0.18rem;
  min-width: min(300px, 100%);
}

.work-order-document-training-question-setting .compact-field {
  min-width: 124px;
  max-width: 150px;
  margin: 0;
}

.work-order-document-training-quick-actions {
  justify-content: flex-start;
}

.work-order-document-training-notice,
.work-order-document-training-message {
  margin: 0;
  padding: 0.72rem 0.86rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(100, 116, 139, 0.16);
  background: rgba(248, 250, 252, 0.9);
  color: #526078;
  font-size: 0.82rem;
  line-height: 1.45;
}

.work-order-document-training-notice.is-warning {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 247, 237, 0.94);
  color: #8a4b0f;
}

.work-order-document-training-message {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(240, 253, 244, 0.94);
  color: #166534;
  font-weight: 750;
}

.work-order-document-training-card-chips {
  justify-content: flex-end;
}

.work-order-document-training-card-chips .is-selected {
  background: rgba(219, 234, 254, 0.95);
  color: #1d4ed8;
}

.work-order-document-training-card-chips .is-completed {
  background: rgba(220, 252, 231, 0.95);
  color: #15803d;
}

.work-order-document-training-card-chips .is-pending {
  background: rgba(254, 243, 199, 0.95);
  color: #92400e;
}

.work-order-document-training-service-header,
.work-order-document-training-person-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(0, 2.4fr);
  gap: 0.75rem;
  align-items: center;
}

.work-order-document-training-service-header {
  padding: 0.35rem 0.6rem;
  border-radius: 0.9rem;
  background: rgba(241, 245, 249, 0.82);
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.work-order-document-training-service-header > span:not(:first-child) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.work-order-document-training-service-header > span:first-child {
  text-transform: none;
  letter-spacing: 0;
}

.work-order-document-training-service-header {
  grid-template-columns: minmax(240px, 1.1fr) repeat(var(--training-service-count, 1), minmax(116px, 1fr));
}

.work-order-document-training-person-list {
  display: grid;
  gap: 0.5rem;
}

.work-order-document-training-person-row {
  padding: 0.62rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(30, 41, 59, 0.05);
}

.work-order-document-training-service-cells {
  display: grid;
  grid-template-columns: repeat(var(--training-service-count, 1), minmax(116px, 1fr));
  gap: 0.45rem;
}

.work-order-document-training-service-cell {
  min-height: 48px;
  padding: 0.44rem 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.82rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.12rem 0.42rem;
  align-items: center;
  background: rgba(248, 250, 252, 0.94);
  color: #334155;
  cursor: pointer;
}

.work-order-document-training-service-cell input {
  grid-row: span 2;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
}

.work-order-document-training-service-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 900;
}

.work-order-document-training-service-cell span {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 760;
}

.work-order-document-training-service-cell.is-selected {
  border-color: rgba(37, 99, 235, 0.38);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.95));
}

.work-order-document-training-service-cell.is-completed {
  border-color: rgba(34, 197, 94, 0.26);
  background: rgba(240, 253, 244, 0.92);
}

.work-order-document-training-service-cell.is-pending,
.work-order-document-training-service-cell.is-in_progress {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(255, 251, 235, 0.92);
}

.work-order-document-training-service-cell.is-recommended strong::after {
  content: " AI";
  color: #7c3aed;
  font-size: 0.64rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .work-order-document-category-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .work-order-document-category-select {
    grid-column: 1 / -1;
  }

  .work-order-document-category-project-name {
    grid-column: 1 / -1;
  }

  .work-order-document-training-row-controls {
    justify-content: stretch;
  }

  .work-order-document-training-row-controls .primary-button {
    width: 100%;
  }

  .work-order-document-training-external-grid {
    grid-template-columns: 1fr;
  }

  .work-order-document-training-assignment-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-order-document-training-mode-grid,
  .work-order-document-training-stats {
    grid-template-columns: 1fr;
  }

  .work-order-document-training-service-header {
    display: none;
  }

  .work-order-document-training-person-row {
    grid-template-columns: 1fr;
  }

  .work-order-document-training-service-cells {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

@media (max-width: 1480px) {
  .document-template-builder-shell {
    grid-template-columns: minmax(238px, 268px) minmax(0, 1fr);
  }

  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
    overflow: visible;
    align-items: start;
  }

  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-sidebar,
  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-main {
    overflow: visible;
    padding-right: 0;
  }

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

  .document-template-inline-special-field,
  .document-template-inline-excel-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1320px) {
  .document-template-builder-shell,
  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-builder-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .document-template-sidebar-block.document-template-toolbox-block {
    grid-column: 1 / -1;
  }

  .document-template-item-token-row {
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .document-template-builder-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-development-list-heading,
  .template-development-list-toolbar,
  .document-template-card-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .template-development-list-heading {
    display: grid;
  }

  .document-template-card-badges {
    justify-content: flex-start;
  }

  .document-template-inline-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.document-template-builder-shell {
  grid-template-columns: minmax(248px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
  grid-template-columns: minmax(238px, 272px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 0 0 16px;
}

.document-template-builder-sidebar,
.document-template-builder-main {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}

.document-template-sidebar-top-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-sidebar {
  position: sticky;
  top: 8px;
  align-self: start;
  max-height: calc(100dvh - 142px);
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-right: 0;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-sidebar-top-stack {
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-sidebar-block.document-template-toolbox-block {
  position: sticky;
  bottom: 0;
  z-index: 8;
  gap: 8px;
  padding: 12px;
  border-color: rgba(53, 98, 196, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 249, 0.98));
  box-shadow:
    0 -16px 32px rgba(22, 45, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-toolbox {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-toolbox-block .helper-copy {
  display: none;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-tool-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 54px;
  padding: 8px 9px;
  border-radius: 14px;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-tool-button::before {
  content: attr(data-template-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(53, 98, 196, 0.18);
  background: rgba(239, 246, 255, 0.94);
  color: #24529d;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-tool-button strong {
  grid-column: 2;
  font-size: 0.78rem;
  line-height: 1.18;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-tool-button span {
  grid-column: 2;
  display: none;
}

.document-template-tool-button.is-dragging-tool {
  border-color: rgba(34, 111, 235, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(34, 111, 235, 0.12),
    0 16px 28px rgba(34, 111, 235, 0.14);
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-main {
  position: relative;
  top: auto;
  align-self: start;
  overflow: visible;
  padding-right: 0;
}

.document-template-builder-main > .document-template-block {
  min-width: 0;
}

.document-template-builder-inspector {
  min-width: 0;
}

.document-template-builder-inspector[hidden] {
  display: none !important;
}

.document-template-builder-inspector.is-open {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  align-content: center;
  padding: clamp(16px, 4vw, 42px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 34%),
    rgba(18, 25, 39, 0.34);
  backdrop-filter: blur(5px);
}

.document-template-builder-inspector.is-open .document-template-inspector-block {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-color: rgba(53, 98, 196, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 249, 0.99));
  box-shadow:
    0 34px 72px rgba(22, 45, 37, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.document-template-builder-inspector.is-open.is-excel-inspector {
  place-items: stretch;
  align-content: stretch;
  padding: clamp(8px, 1.4vw, 18px);
}

.document-template-builder-inspector.is-open.is-excel-inspector .document-template-inspector-block {
  width: calc(100vw - clamp(16px, 2.8vw, 36px));
  max-width: none;
  max-height: calc(100dvh - clamp(16px, 2.8vw, 36px));
  margin: auto;
}

.document-template-custom-fields {
  gap: 16px;
}

.document-template-sheet-shell {
  gap: 16px;
  justify-items: center;
}

.document-template-page-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(53, 98, 196, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow:
    0 18px 32px rgba(22, 45, 37, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.document-template-page-toolbar-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-template-page-toolbar-copy strong {
  color: #13233f;
  font-size: 0.86rem;
}

.document-template-page-toolbar-copy span {
  color: #61708f;
  font-size: 0.72rem;
}

.document-template-sheet-tabs {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: auto;
  padding-bottom: 2px;
}

.document-template-sheet-tab {
  appearance: none;
  display: grid;
  gap: 1px;
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid rgba(53, 98, 196, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #20324f;
  text-align: left;
  cursor: pointer;
}

.document-template-sheet-tab strong,
.document-template-sheet-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-sheet-tab strong {
  font-size: 0.78rem;
}

.document-template-sheet-tab span {
  color: #667693;
  font-size: 0.68rem;
}

.document-template-sheet-tab.is-active {
  border-color: rgba(34, 111, 235, 0.38);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(224, 236, 255, 0.94));
  box-shadow: inset 0 0 0 1px rgba(34, 111, 235, 0.1);
}

.document-template-page-add {
  white-space: nowrap;
}

.document-template-a4-page-stack {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 28px;
  overflow-x: auto;
  padding: 2px 0 18px;
}

.document-template-a4-page-wrap {
  width: min(100%, 860px);
  display: grid;
  justify-items: center;
  gap: 9px;
}

.document-template-a4-page-label {
  width: min(100%, 794px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #52627e;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.document-template-a4-page-label strong {
  color: #20324f;
}

.document-template-sheet-panel {
  display: grid;
  width: min(100%, 794px);
  min-height: 1123px;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
  align-items: stretch;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid rgba(47, 104, 84, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 22px 48px rgba(22, 45, 37, 0.12);
}

.document-template-sheet-panel.is-drop-target {
  outline: 2px dashed rgba(34, 111, 235, 0.42);
  outline-offset: -12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 251, 255, 0.98));
}

.document-template-sheet-panel > .document-template-sheet-empty,
.document-template-sheet-panel > .document-template-drop-tail {
  grid-column: 1 / -1;
}

.document-template-item-card.is-canvas-field {
  grid-column: span var(--document-template-builder-span, 9);
  width: 100%;
  max-width: none;
  justify-self: stretch;
  align-self: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 14px;
  border-color: rgba(47, 104, 84, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(250, 252, 251, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 16px 28px rgba(22, 45, 37, 0.06);
}

.document-template-item-card.is-canvas-field:not(.is-chapter):not(.is-excel-block) {
  min-height: 128px;
}

.document-template-item-card.is-canvas-field[data-field-width="9"],
.document-template-item-card.is-canvas-field[data-field-width="full"],
.document-template-item-card.is-canvas-field.is-chapter,
.document-template-item-card.is-canvas-field.is-excel-block {
  grid-column: 1 / -1;
}

.document-template-item-card.is-canvas-field::before {
  top: 10px;
  bottom: 10px;
  width: 4px;
}

.document-template-item-card.is-canvas-field:hover {
  border-color: rgba(47, 104, 84, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 22px 38px rgba(22, 45, 37, 0.08);
}

.document-template-item-card.is-canvas-field.is-active {
  border-color: rgba(53, 98, 196, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(53, 98, 196, 0.12),
    0 24px 42px rgba(53, 98, 196, 0.14);
  transform: translateY(-1px);
}

.document-template-item-card.is-canvas-field.is-resizing {
  user-select: none;
  cursor: ew-resize;
}

.document-template-item-card.is-canvas-field.is-resizing-height {
  user-select: none;
  cursor: ns-resize;
}

.document-template-item-card.is-canvas-field.is-resizing-inner {
  user-select: none;
  cursor: nwse-resize;
}

body.is-document-template-resizing .document-template-item-card.is-canvas-field,
body.is-document-template-resizing-vertical .document-template-item-card.is-canvas-field,
body.is-document-template-resizing-diagonal .document-template-item-card.is-canvas-field,
body.is-document-template-resizing .document-template-canvas-preview,
body.is-document-template-resizing-vertical .document-template-canvas-preview,
body.is-document-template-resizing-diagonal .document-template-canvas-preview,
body.is-document-template-resizing .document-template-preview-field-value,
body.is-document-template-resizing-vertical .document-template-preview-field-value,
body.is-document-template-resizing-diagonal .document-template-preview-field-value {
  transition: none !important;
  will-change: width, min-height;
}

.document-template-item-card.is-canvas-field.is-active::before {
  background: linear-gradient(180deg, rgba(34, 111, 235, 0.92), rgba(53, 98, 196, 0.82));
}

.document-template-item-card.is-canvas-field.is-chapter-child {
  margin-left: 0;
}

.document-template-item-card.is-canvas-field .document-template-item-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding: 0 0 4px 2px;
  margin-bottom: 0;
  gap: 6px;
}

.document-template-item-card.is-canvas-field .document-template-item-head-copy strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  line-height: 1.2;
}

.document-template-item-card.is-canvas-field .document-template-item-head-copy {
  flex: initial;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  gap: 6px;
}

.document-template-item-card.is-canvas-field .document-template-inline-token {
  flex: 0 0 auto;
  padding: 2px 7px;
  font-size: 0.6rem;
}

.document-template-item-card.is-canvas-field .document-template-drag-handle {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 10px;
}

.document-template-item-card.is-canvas-field .document-template-item-head-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  max-width: calc(100% - 16px);
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  padding: 3px;
  border: 1px solid rgba(157, 178, 214, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(42, 61, 104, 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.document-template-item-card.is-canvas-field:hover .document-template-item-head-actions,
.document-template-item-card.is-canvas-field:focus-within .document-template-item-head-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.document-template-item-card.is-canvas-field .document-template-item-remove {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 0.68rem;
}

.document-template-ai-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(157, 178, 214, 0.28);
  background: rgba(245, 248, 255, 0.96);
  color: #35507b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.document-template-ai-pill.is-high {
  border-color: rgba(47, 104, 84, 0.24);
  background: rgba(236, 253, 245, 0.98);
  color: #267052;
}

.document-template-ai-pill.is-medium {
  border-color: rgba(217, 155, 28, 0.28);
  background: rgba(255, 251, 235, 0.98);
  color: #9a6512;
}

.document-template-ai-pill.is-low {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(254, 242, 242, 0.98);
  color: #b4232c;
}

.document-template-ai-pill.is-runtime {
  align-self: flex-start;
  margin: 0 0 8px auto;
}

.document-template-ai-pill.is-inline-runtime {
  min-height: 18px;
  padding: 2px 7px;
  margin-left: 8px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  vertical-align: middle;
}

.document-template-ai-pill.is-block-runtime {
  min-height: 20px;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.document-template-runtime-field-title-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.document-template-ai-pill.is-filled {
  box-shadow: 0 10px 24px rgba(65, 82, 120, 0.12);
}

.document-template-ai-pill.is-filled::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
}

.document-template-runtime-field-card.is-ai-filled {
  position: relative;
}

.document-template-runtime-field-card.is-ai-filled .field {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.document-template-runtime-field-card.is-ai-high .field {
  border-color: rgba(47, 104, 84, 0.38);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 0 0 1px rgba(47, 104, 84, 0.08), 0 14px 34px rgba(47, 104, 84, 0.08);
}

.document-template-runtime-field-card.is-ai-medium .field {
  border-color: rgba(217, 155, 28, 0.42);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 0 0 1px rgba(217, 155, 28, 0.08), 0 14px 34px rgba(217, 155, 28, 0.08);
}

.document-template-runtime-field-card.is-ai-low .field {
  border-color: rgba(220, 38, 38, 0.34);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.08), 0 14px 34px rgba(220, 38, 38, 0.08);
}

.document-template-ai-wizard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 44px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 42%),
    rgba(22, 28, 42, 0.38);
  backdrop-filter: blur(6px);
}

.document-template-ai-wizard {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border: 1px solid rgba(126, 146, 219, 0.28);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.99)),
    #ffffff;
  box-shadow: 0 34px 82px rgba(22, 28, 42, 0.26);
}

.document-template-ai-wizard-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(157, 178, 214, 0.24);
}

.document-template-ai-wizard-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #2f68eb;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.document-template-ai-wizard-head strong {
  display: block;
  color: #18233d;
  font-size: 1.18rem;
}

.document-template-ai-wizard-head p {
  margin: 5px 0 0;
  color: #687695;
  font-size: 0.9rem;
}

.document-template-ai-wizard-form {
  display: grid;
  gap: 16px;
  padding: 18px 24px 24px;
}

.document-template-ai-wizard-toggle,
.document-template-ai-wizard-checks label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: #22304c;
  font-weight: 800;
}

.document-template-ai-wizard-toggle input,
.document-template-ai-wizard-checks input {
  width: 16px;
  height: 16px;
}

.document-template-ai-wizard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.document-template-ai-wizard-field {
  display: grid;
  gap: 6px;
}

.document-template-ai-wizard-field.is-full {
  grid-column: 1 / -1;
}

.document-template-ai-wizard-field span {
  color: #66738f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.document-template-ai-wizard-field input,
.document-template-ai-wizard-field select,
.document-template-ai-wizard-field textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(157, 178, 214, 0.5);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.98);
  color: #18233d;
  font: inherit;
}

.document-template-ai-wizard-field textarea {
  min-height: 88px;
  resize: vertical;
}

.document-template-ai-wizard-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.document-template-ai-wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(157, 178, 214, 0.18);
}

@media (max-width: 760px) {
  .document-template-ai-wizard-head,
  .document-template-ai-wizard-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .document-template-ai-wizard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.document-template-item-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

.document-template-canvas-settings,
.document-template-canvas-resize {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
}

.document-template-canvas-settings {
  border-color: rgba(34, 111, 235, 0.24);
  background: rgba(239, 246, 255, 0.96);
  color: #1d4ed8;
}

.document-template-canvas-settings:hover,
.document-template-canvas-settings:focus-visible {
  border-color: rgba(34, 111, 235, 0.34);
  background: rgba(224, 238, 255, 0.98);
  color: #1e40af;
}

.document-template-canvas-ai {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 10px;
  border-color: rgba(79, 70, 229, 0.2);
  background: rgba(245, 243, 255, 0.96);
  color: #4338ca;
  font-size: 0.68rem;
  font-weight: 800;
}

.document-template-canvas-ai.is-enabled {
  border-color: rgba(47, 104, 84, 0.28);
  background: rgba(236, 253, 245, 0.98);
  color: #267052;
}

.document-template-canvas-resize {
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(240, 253, 250, 0.96);
  color: #0f766e;
}

.document-template-canvas-resize:hover,
.document-template-canvas-resize:focus-visible {
  border-color: rgba(15, 118, 110, 0.34);
  background: rgba(221, 248, 243, 0.98);
  color: #115e59;
}

.document-template-canvas-preview {
  border: 1px solid rgba(47, 104, 84, 0.12);
  border-radius: 12px;
  padding: 7px 8px;
  background: #fff;
  overflow: hidden;
  height: 100%;
  min-height: var(--document-template-canvas-preview-min-height, 74px);
}

.document-template-canvas-preview .document-template-preview-section {
  gap: 7px;
}

.document-template-canvas-preview .document-template-preview-section h2 {
  font-size: 0.92rem;
}

.document-template-canvas-preview .document-template-preview-field-head {
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
}

.document-template-canvas-preview .document-template-preview-muted {
  display: none;
}

.document-template-canvas-preview .document-template-preview-field-value {
  min-height: 32px;
  border-color: rgba(59, 118, 214, 0.28);
  background:
    linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(252, 254, 255, 0.99)),
    repeating-linear-gradient(
      180deg,
      rgba(34, 111, 235, 0.035) 0,
      rgba(34, 111, 235, 0.035) 1px,
      transparent 1px,
      transparent 28px
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(34, 111, 235, 0.06);
  color: #183d73;
  padding: 8px 10px;
  line-height: 1.4;
  font-size: 0.82rem;
}

.document-template-canvas-preview .document-template-preview-field-value::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(59, 118, 214, 0.2);
  border-radius: 10px;
  pointer-events: none;
}

.document-template-canvas-preview .document-template-preview-field-value.is-checkbox,
.document-template-canvas-preview .document-template-preview-field-value.is-toggle {
  padding: 9px 12px;
}

.document-template-canvas-preview .document-template-preview-field-value.is-resizable-input {
  padding-bottom: 20px;
}

.document-template-canvas-preview .document-template-preview-field-value.is-checkbox::after,
.document-template-canvas-preview .document-template-preview-field-value.is-toggle::after {
  display: none;
}

.document-template-item-card.is-canvas-field:hover .document-template-canvas-preview .document-template-preview-field-value,
.document-template-item-card.is-canvas-field.is-active .document-template-canvas-preview .document-template-preview-field-value {
  border-color: rgba(34, 111, 235, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.96),
    0 16px 30px rgba(34, 111, 235, 0.12);
}

.document-template-canvas-preview .document-template-preview-media-placeholder {
  min-height: 128px;
}

.document-template-canvas-preview .document-template-preview-system-title {
  font-size: 0.96rem;
}

.document-template-canvas-preview .document-template-preview-system-row {
  gap: 6px;
}

.document-template-canvas-preview .document-template-preview-system-row-value {
  min-height: calc(var(--document-template-system-lines, 1) * 1.5rem);
}

.document-template-canvas-preview .document-template-preview-person-signature {
  min-height: 58px;
  gap: 4px;
  align-content: center;
}

.document-template-canvas-preview .document-template-preview-person-signature-grid {
  gap: 8px 14px;
}

.document-template-canvas-preview .document-template-preview-person-copy {
  gap: 2px;
}

.document-template-canvas-preview .document-template-preview-person-role,
.document-template-canvas-preview .document-template-preview-person-meta {
  font-size: 0.72rem;
}

.document-template-canvas-preview .document-template-preview-signature {
  gap: 4px;
}

.document-template-canvas-preview .document-template-preview-signature-placeholder {
  min-height: 34px;
  padding-bottom: 4px;
  font-size: 0.72rem;
}

.document-template-canvas-preview .document-template-preview-signature-placeholder.is-digital {
  min-height: 40px;
  padding: 8px;
  border-radius: 10px;
}

.document-template-canvas-preview .document-template-preview-signature-image {
  max-height: 42px;
}

.document-template-canvas-meta {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.document-template-canvas-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(47, 104, 84, 0.14);
  background: rgba(247, 250, 248, 0.98);
  color: #335447;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.document-template-canvas-meta-pill.is-periodics {
  border-color: rgba(47, 126, 247, 0.26);
  background: linear-gradient(135deg, rgba(231, 240, 255, 0.98), rgba(248, 232, 255, 0.94));
  color: #2456a9;
}

.document-template-canvas-resize-handle {
  position: absolute;
  top: 12px;
  right: -12px;
  bottom: 12px;
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}

.document-template-canvas-resize-handle::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 111, 235, 0.14), rgba(34, 111, 235, 0.34));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.document-template-canvas-resize-handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(34, 111, 235, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.98));
  box-shadow:
    0 14px 26px rgba(31, 65, 148, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: #1d4ed8;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.document-template-item-card.is-canvas-field:hover .document-template-canvas-resize-handle::before,
.document-template-item-card.is-canvas-field.is-active .document-template-canvas-resize-handle::before,
.document-template-item-card.is-canvas-field.is-resizing .document-template-canvas-resize-handle::before,
.document-template-item-card.is-canvas-field:focus-within .document-template-canvas-resize-handle::before {
  opacity: 1;
}

.document-template-canvas-resize-handle:hover::before,
.document-template-item-card.is-canvas-field.is-resizing .document-template-canvas-resize-handle::before {
  background: linear-gradient(180deg, rgba(34, 111, 235, 0.34), rgba(34, 111, 235, 0.82));
  box-shadow:
    0 0 0 4px rgba(34, 111, 235, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.document-template-canvas-resize-handle:hover .document-template-canvas-resize-handle-icon,
.document-template-canvas-resize-handle:focus-visible .document-template-canvas-resize-handle-icon,
.document-template-item-card.is-canvas-field.is-resizing .document-template-canvas-resize-handle-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  border-color: rgba(34, 111, 235, 0.34);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(222, 238, 255, 0.98));
}

.document-template-canvas-height-handle {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -12px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ns-resize;
  touch-action: none;
  z-index: 2;
}

.document-template-canvas-height-handle::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 111, 235, 0.14), rgba(34, 111, 235, 0.34));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.document-template-canvas-height-handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(34, 111, 235, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.98));
  box-shadow:
    0 14px 26px rgba(31, 65, 148, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: #1d4ed8;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.document-template-item-card.is-canvas-field:hover .document-template-canvas-height-handle::before,
.document-template-item-card.is-canvas-field.is-active .document-template-canvas-height-handle::before,
.document-template-item-card.is-canvas-field.is-resizing-height .document-template-canvas-height-handle::before,
.document-template-item-card.is-canvas-field:focus-within .document-template-canvas-height-handle::before {
  opacity: 1;
}

.document-template-canvas-height-handle:hover::before,
.document-template-item-card.is-canvas-field.is-resizing-height .document-template-canvas-height-handle::before {
  background: linear-gradient(90deg, rgba(34, 111, 235, 0.34), rgba(34, 111, 235, 0.82));
  box-shadow:
    0 0 0 4px rgba(34, 111, 235, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92);
}

.document-template-canvas-height-handle:hover .document-template-canvas-height-handle-icon,
.document-template-canvas-height-handle:focus-visible .document-template-canvas-height-handle-icon,
.document-template-item-card.is-canvas-field.is-resizing-height .document-template-canvas-height-handle-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  border-color: rgba(34, 111, 235, 0.34);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(222, 238, 255, 0.98));
}

body.is-document-template-resizing,
body.is-document-template-resizing * {
  cursor: ew-resize !important;
}

body.is-document-template-resizing-vertical,
body.is-document-template-resizing-vertical * {
  cursor: ns-resize !important;
}

body.is-document-template-resizing-diagonal,
body.is-document-template-resizing-diagonal * {
  cursor: nwse-resize !important;
}

.document-template-canvas-input-resize-handle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: nwse-resize;
  touch-action: none;
}

.document-template-canvas-input-resize-handle::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-right: 3px solid rgba(34, 111, 235, 0.42);
  border-bottom: 3px solid rgba(34, 111, 235, 0.42);
  border-bottom-right-radius: 10px;
  opacity: 0.78;
  transition: border-color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.document-template-canvas-input-resize-handle-icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(34, 111, 235, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.98));
  box-shadow:
    0 10px 22px rgba(31, 65, 148, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  transform: scale(0.92);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.document-template-preview-field-value.is-resizable-input:hover .document-template-canvas-input-resize-handle-icon,
.document-template-item-card.is-canvas-field.is-resizing-inner .document-template-canvas-input-resize-handle-icon,
.document-template-preview-field-value.is-resizable-input:focus-within .document-template-canvas-input-resize-handle-icon {
  opacity: 1;
  transform: scale(1);
}

.document-template-preview-field-value.is-resizable-input:hover .document-template-canvas-input-resize-handle::before,
.document-template-item-card.is-canvas-field.is-resizing-inner .document-template-canvas-input-resize-handle::before {
  border-color: rgba(34, 111, 235, 0.82);
  opacity: 1;
  transform: translate(-1px, -1px);
}

.document-template-preview-field-value.is-resizable-input:hover .document-template-canvas-input-resize-handle-icon,
.document-template-canvas-input-resize-handle:focus-visible .document-template-canvas-input-resize-handle-icon,
.document-template-item-card.is-canvas-field.is-resizing-inner .document-template-canvas-input-resize-handle-icon {
  border-color: rgba(34, 111, 235, 0.34);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(222, 238, 255, 0.98));
}

.document-template-chapter-group {
  grid-column: 1 / -1;
  grid-template-columns: repeat(9, minmax(72px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px;
}

.document-template-chapter-group > .document-template-item-card.is-chapter {
  grid-column: 1 / -1;
}

.document-template-chapter-group > .document-template-item-card.is-canvas-field.is-chapter {
  min-height: 0;
  padding-block: 8px;
}

.document-template-chapter-group > .document-template-item-card.is-canvas-field.is-chapter .document-template-item-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.document-template-chapter-group > .document-template-item-card.is-canvas-field.is-chapter .document-template-canvas-preview,
.document-template-chapter-group > .document-template-item-card.is-canvas-field.is-chapter .document-template-canvas-meta {
  display: none;
}

.document-template-chapter-group-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(9, minmax(72px, 1fr));
  gap: 12px;
  padding: 2px 0 0 14px;
  align-items: stretch;
}

.document-template-chapter-group-body > .document-template-item-card.is-canvas-field {
  grid-column: span var(--document-template-builder-span, 9);
}

.document-template-chapter-group-body > .document-template-item-card.is-canvas-field[data-field-width="9"],
.document-template-chapter-group-body > .document-template-item-card.is-canvas-field[data-field-width="full"],
.document-template-chapter-group-body > .document-template-item-card.is-canvas-field.is-excel-block {
  grid-column: 1 / -1;
}

.document-template-builder-inspector {
  min-width: 0;
}

.document-template-inspector-block {
  min-width: 0;
}

.document-template-field-inspector,
.document-template-field-inspector-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.document-template-field-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(47, 104, 84, 0.1);
}

.document-template-inspector-close {
  white-space: nowrap;
}

.document-template-field-inspector-copy {
  display: grid;
  gap: 4px;
}

.document-template-field-inspector-copy strong {
  color: #22352d;
  font-size: 1rem;
}

.document-template-field-inspector-copy span {
  color: #60796f;
  font-size: 0.82rem;
  line-height: 1.45;
}

.document-template-field-inspector .document-template-item-token-row {
  padding: 0;
}

.document-template-field-inspector .document-template-inline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.document-template-field-inspector .document-template-inline-grid.is-excel-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-template-field-inspector .field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.document-template-field-inspector .field span {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60796f;
}

.document-template-field-inspector input,
.document-template-field-inspector select,
.document-template-field-inspector textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border-radius: 14px;
}

.document-template-field-inspector .document-template-inline-checkbox-field {
  align-self: start;
}

.document-template-field-inspector .document-template-inline-checkbox-body {
  display: inline-flex;
  justify-content: flex-start;
  width: fit-content;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 11px;
}

.document-template-field-inspector .document-template-inline-checkbox-body input[type="checkbox"] {
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px;
  flex: 0 0 14px;
}

.document-template-field-inspector .document-template-inline-checkbox-body strong {
  font-size: 0.74rem;
  line-height: 1;
}

.document-template-field-inspector .field select[multiple] {
  min-height: 132px;
  padding-block: 8px;
}

.document-template-field-inspector .field-span-full,
.document-template-field-inspector .document-template-inline-special-field,
.document-template-field-inspector .document-template-inline-excel-field,
.document-template-field-inspector .document-template-legal-hint {
  grid-column: 1 / -1;
}

.document-template-field-inspector .document-template-source-config {
  background: rgba(255, 250, 253, 0.96);
}

.document-template-field-inspector .document-template-inline-excel-host {
  margin-top: 12px;
}

.document-template-field-inspector .document-template-inline-excel-editor-grid-wrap {
  max-height: min(46vh, 520px);
}

@media (max-width: 1480px) {
  .document-template-builder-shell,
  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  }
}

@media (max-width: 1320px) {
  .document-template-builder-shell,
  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-sidebar {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .document-template-builder-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .document-template-sidebar-top-stack {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .document-template-builder-main {
    order: 2;
  }

  .document-template-field-inspector .document-template-item-token-row {
    padding-left: 0;
  }
}

@media (max-width: 980px) {
  .document-template-builder-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-sidebar-top-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-html-workbench-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-html-preview-panel {
    position: static;
  }

  .document-template-page-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-workspace-open:not(.is-fill-mode) {
    left: 8px;
  }

  .document-template-sheet-panel,
  .document-template-chapter-group,
  .document-template-chapter-group-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-item-card.is-canvas-field {
    grid-column: 1 / -1;
    width: 100%;
  }

  .document-template-field-inspector .document-template-inline-grid,
  .document-template-field-inspector .document-template-inline-grid.is-excel-layout,
  .document-template-field-inspector .document-template-system-config-row-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* People directory uses a grid-based table surface so it stays readable inside the app shell. */
.people-directory-table {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0 !important;
  border-collapse: separate;
}

.people-directory-table thead,
.people-directory-table tbody {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.people-directory-table thead tr,
.people-directory-table tbody tr {
  display: grid;
  grid-template-columns: minmax(210px, 1.75fr) minmax(140px, 1fr) minmax(88px, 0.62fr) minmax(108px, 0.72fr) minmax(90px, 0.58fr);
  align-items: stretch;
  min-width: 0;
}

.people-directory-table th,
.people-directory-table td {
  min-width: 0 !important;
}

.people-directory-table thead th {
  position: static;
  padding: 0 14px 8px !important;
  border: 0 !important;
  background: transparent !important;
}

.people-directory-table tbody tr {
  overflow: hidden;
  border: 1px solid rgba(194, 211, 232, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 253, 255, 0.96));
  box-shadow: 0 10px 24px rgba(69, 90, 122, 0.05);
}

.people-directory-table tbody tr:hover,
.people-directory-table tbody tr:focus-visible {
  border-color: rgba(111, 151, 220, 0.58);
  box-shadow: 0 14px 30px rgba(69, 90, 122, 0.09);
}

.people-directory-table tbody td {
  padding: 17px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.people-directory-table th:last-child,
.people-directory-table td:last-child {
  text-align: right;
}

@media (max-width: 760px) {
  .people-directory-table thead {
    display: none;
  }

  .people-directory-table tbody tr {
    grid-template-columns: 1fr;
  }

  .people-directory-table th:last-child,
  .people-directory-table td:last-child {
    text-align: left;
  }
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) {
  display: block;
  height: calc(100dvh - 20px);
  max-height: calc(100dvh - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-editor-body {
  display: block;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-form {
  height: auto;
  min-height: 100%;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-shell {
  min-height: 0;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-builder-sidebar {
  overscroll-behavior: contain;
}

.document-template-editor-panel.is-workspace-open:not(.is-fill-mode) .document-template-sidebar-top-stack {
  max-height: 100%;
  overscroll-behavior: contain;
}

.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;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.brand-lockup-full {
  width: 100%;
}

.brand-logo-badge {
  --logo-badge-size: 42px;
  width: var(--logo-badge-size);
  height: var(--logo-badge-size);
  flex: 0 0 var(--logo-badge-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--logo-badge-size) * 0.38);
  overflow: hidden;
  border: 1px solid rgba(80, 131, 208, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(234, 242, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 14px 26px rgba(15, 53, 121, 0.12);
}

.brand-logo-badge-large {
  --logo-badge-size: 62px;
}

.brand-logo-badge-loader {
  --logo-badge-size: 86px;
  position: relative;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(232, 241, 255, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 1px rgba(125, 211, 252, 0.24),
    0 22px 44px rgba(56, 189, 248, 0.26);
  animation: safenexus-loader-pulse 1.55s ease-in-out infinite;
}

.brand-logo-badge-loader::before,
.brand-logo-badge-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.brand-logo-badge-loader::before {
  background:
    linear-gradient(110deg, transparent 0 32%, rgba(255, 255, 255, 0.82) 45%, transparent 58%),
    linear-gradient(180deg, rgba(35, 129, 230, 0), rgba(35, 129, 230, 0.2));
  transform: translateX(-120%);
  animation: safenexus-loader-shine 2.2s ease-in-out infinite;
  z-index: 2;
}

.brand-logo-badge-loader::after {
  top: auto;
  height: 62%;
  background:
    linear-gradient(180deg, rgba(54, 158, 255, 0), rgba(54, 158, 255, 0.38)),
    linear-gradient(90deg, rgba(180, 92, 225, 0.24), rgba(33, 124, 238, 0.32), rgba(23, 184, 152, 0.22));
  mix-blend-mode: multiply;
  animation: safenexus-logo-fill 2.8s cubic-bezier(0.33, 1, 0.68, 1) infinite;
  z-index: 1;
}

.brand-logo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.brand-full-logo {
  width: min(244px, 72vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(16, 55, 128, 0.12));
}

.auth-brand-lockup {
  width: auto;
  flex-direction: column;
  align-self: center;
  gap: 16px;
}

.auth-brand-mark {
  --logo-badge-size: clamp(86px, 13vw, 118px);
  border-radius: calc(var(--logo-badge-size) * 0.34);
  border: 1px solid rgba(95, 146, 220, 0.16);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.94) 55%, rgba(224, 236, 255, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 38px rgba(11, 53, 122, 0.16);
}

.auth-brand-mark .brand-logo-image {
  object-fit: cover;
  transform: scale(1.03);
}

.auth-brand-wordmark {
  font-size: clamp(2.2rem, 4.1vw, 3.2rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.brand-wordmark-core {
  color: #122d63;
}

.brand-wordmark-accent {
  background: linear-gradient(135deg, #1361df 0%, #29a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-wordmark-compact {
  font-size: 1rem;
}

.auth-screen {
  background:
    linear-gradient(135deg, #0e2e6f 0%, #174fba 33%, #2895ff 72%, #79d4ff 100%);
}

.auth-screen::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
  opacity: 0.56;
}

.auth-screen::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 72%);
}

.auth-minimal-card {
  border-color: rgba(187, 214, 248, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
  box-shadow:
    0 30px 72px rgba(7, 33, 87, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.auth-logo.auth-logo-compact {
  gap: 16px;
}

.auth-logo.auth-logo-compact .auth-logo-word {
  font-size: clamp(1.55rem, 2.1vw, 1.95rem);
  color: #14223c;
}

.auth-logo.auth-logo-compact.auth-brand-lockup {
  gap: 16px;
}

.auth-login-copy h1 {
  color: #0f1e38;
}

.auth-login-copy p,
.auth-switch-copy {
  color: #627089;
}

.auth-form-tenant input:focus {
  border-bottom-color: #248dff;
  box-shadow: 0 1px 0 0 #248dff;
}

.auth-form.auth-form-tenant,
.auth-form.auth-form-tenant .auth-input-shell,
.auth-form.auth-form-tenant input {
  color-scheme: only light;
}

.auth-form.auth-form-tenant .auth-input-shell {
  display: flex;
  align-items: center;
  min-height: 46px;
  border: 1px solid #d9e3f2;
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(17, 54, 124, 0.06);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.auth-form.auth-form-tenant .auth-input-shell:focus-within {
  border-color: #248dff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 3px rgba(36, 141, 255, 0.12);
}

.auth-form.auth-form-tenant input,
.auth-form.auth-form-tenant input:hover,
.auth-form.auth-form-tenant input:focus,
.auth-form.auth-form-tenant input:active {
  min-height: 44px;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #1f2430 !important;
  -webkit-text-fill-color: #1f2430 !important;
  caret-color: #1f2430 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 14px 10px 30px;
}

.auth-form.auth-form-tenant input::placeholder {
  color: #8b96ab !important;
}

.auth-form.auth-form-tenant input::selection {
  background: rgba(36, 141, 255, 0.16);
  color: #1f2430;
}

.auth-android-download {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -2px;
  padding: 13px 14px;
  border: 1px solid rgba(36, 141, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 253, 245, 0.94));
  color: #12315f;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(17, 54, 124, 0.08);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.auth-android-download:hover,
.auth-android-download:focus-visible {
  border-color: rgba(36, 141, 255, 0.36);
  box-shadow: 0 16px 30px rgba(17, 54, 124, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.auth-android-download-icon {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #1d74f5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.auth-android-download-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 14px;
  height: 15px;
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  transform: translateX(-50%);
}

.auth-android-download-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateX(-50%) rotate(45deg);
}

.auth-android-download span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.auth-android-download strong {
  color: #0f1e38;
  font-size: 0.95rem;
  line-height: 1.2;
}

.auth-android-download small {
  color: #627089;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
}

.auth-form-tenant #login-email:-webkit-autofill,
.auth-form-tenant #login-password:-webkit-autofill,
.auth-form-tenant #login-email:-webkit-autofill:hover,
.auth-form-tenant #login-password:-webkit-autofill:hover,
.auth-form-tenant #login-email:-webkit-autofill:focus,
.auth-form-tenant #login-password:-webkit-autofill:focus,
.auth-form-tenant #login-email:-webkit-autofill:active,
.auth-form-tenant #login-password:-webkit-autofill:active,
.auth-form-tenant #login-email:autofill,
.auth-form-tenant #login-password:autofill {
  -webkit-text-fill-color: #1f2430 !important;
  caret-color: #1f2430 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  border: 0 !important;
  transition:
    background-color 999999s ease-in-out 0s,
    color 999999s ease-in-out 0s;
}

.auth-form.auth-form-tenant input:-webkit-autofill,
.auth-form.auth-form-tenant input:-webkit-autofill:hover,
.auth-form.auth-form-tenant input:-webkit-autofill:focus,
.auth-form.auth-form-tenant input:-webkit-autofill:active,
.auth-form.auth-form-tenant input:autofill {
  -webkit-text-fill-color: #1f2430 !important;
  caret-color: #1f2430 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  transition:
    background-color 999999s ease-in-out 0s,
    color 999999s ease-in-out 0s;
}

.auth-submit-button {
  background: linear-gradient(90deg, #11367c 0%, #1763e2 52%, #43c3ff 100%);
  box-shadow: 0 20px 36px rgba(18, 77, 174, 0.24);
}

.auth-switch-link {
  color: #145fd9;
}

.app-frame {
  border-color: rgba(166, 191, 225, 0.82);
  background:
    linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(240, 246, 255, 0.95));
  box-shadow:
    0 28px 84px rgba(17, 42, 91, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 0 0 1px rgba(27, 106, 214, 0.04);
}

.app-rail {
  border-color: rgba(150, 181, 227, 0.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(66, 173, 255, 0.2), transparent 32%),
    radial-gradient(circle at 74% 18%, rgba(23, 62, 142, 0.16), transparent 28%),
    linear-gradient(180deg, #eef5ff 0%, #e0edff 52%, #d3e4fb 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 22px 40px rgba(22, 58, 124, 0.16);
}

.app-rail-logo {
  width: 54px;
  height: 54px;
  padding: 3px;
  border-radius: 20px;
  border: 1px solid rgba(160, 187, 229, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 239, 255, 0.92));
  box-shadow: 0 16px 28px rgba(13, 47, 111, 0.14);
}

.app-rail-logo .brand-logo-badge {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: scale(1.06);
}

.app-rail-logo:hover {
  box-shadow: 0 20px 32px rgba(13, 47, 111, 0.18);
}

.app-sidebar {
  border-color: rgba(176, 198, 230, 0.76);
  background:
    radial-gradient(circle at 18% 0%, rgba(40, 149, 255, 0.1), transparent 26%),
    radial-gradient(circle at 84% 8%, rgba(20, 62, 142, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(249, 252, 255, 0.99), rgba(238, 245, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 36px rgba(18, 54, 116, 0.08);
}

.sidebar-brand-pill {
  padding: 12px 14px;
  min-height: 80px;
  border-color: rgba(185, 205, 237, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(242, 248, 255, 0.95));
}

.sidebar-brand-pill:hover {
  border-color: rgba(72, 140, 233, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 14px 26px rgba(21, 62, 142, 0.12);
}

.sidebar-brand-meta {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo name"
    "logo workspace";
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
}

.sidebar-brand-meta > .brand-logo-badge {
  grid-area: logo;
  align-self: center;
}

.sidebar-brand-meta > .brand-wordmark {
  grid-area: name;
  align-self: end;
  font-size: 1.3rem;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.sidebar-brand-meta > #sidebar-active-organization {
  grid-area: workspace;
  align-self: start;
  color: #657995;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-brand-logo {
  --logo-badge-size: 46px;
  border-radius: 16px;
}

.sidebar-group.is-open .sidebar-group-toggle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(242, 248, 255, 0.91));
  border-color: rgba(103, 161, 233, 0.36);
}

.sidebar-group-icon {
  background: linear-gradient(180deg, rgba(233, 241, 255, 0.98), rgba(216, 230, 252, 0.94));
  color: #18458f;
}

.global-loading-indicator {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.global-loading-indicator.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.global-loading-indicator-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(56, 189, 248, 0.22), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(168, 85, 247, 0.2), transparent 36%),
    linear-gradient(135deg, rgba(7, 12, 28, 0.82), rgba(15, 23, 42, 0.9));
  backdrop-filter: blur(18px) saturate(1.2);
}

.global-loading-indicator-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  display: grid;
  justify-items: center;
  gap: 16px;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  background:
    radial-gradient(circle at 16% 0%, rgba(56, 189, 248, 0.22), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(216, 96, 216, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(12, 18, 34, 0.96));
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.global-loading-indicator-panel::before {
  content: "";
  position: absolute;
  inset: -45% -18%;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.18) 48%, transparent 62%);
  transform: translateX(-62%) rotate(8deg);
  animation: safenexus-loader-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

.global-loading-indicator-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.global-loading-indicator-mark {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
}

.global-loading-indicator-mark::before,
.global-loading-indicator-mark::after {
  content: "";
  position: absolute;
  border-radius: 32px;
}

.global-loading-indicator-mark::before {
  inset: 0;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.98)) padding-box,
    conic-gradient(from 0deg, rgba(56, 189, 248, 0), #38bdf8, #a78bfa, #34d399, rgba(56, 189, 248, 0)) border-box;
  animation: safenexus-loader-orbit 1.45s linear infinite;
}

.global-loading-indicator-mark::after {
  inset: 11px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.22);
  animation: safenexus-loader-ring 1.8s ease-in-out infinite;
}

.global-loading-indicator-title {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 1.34rem;
  font-weight: 900;
  letter-spacing: 0;
}

.global-loading-indicator-copy {
  position: relative;
  z-index: 1;
  color: #dbeafe;
  font-size: 0.92rem;
  text-align: center;
  line-height: 1.5;
  max-width: 42ch;
}

.global-loading-phase {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.global-loading-phase[hidden] {
  display: none;
}

.global-loading-phase-meter {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.24);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94));
  box-shadow:
    inset 0 1px 5px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.global-loading-phase-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #38bdf8, #a78bfa 48%, #34d399),
    repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.28) 0 12px, transparent 12px 24px);
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.42);
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: safenexus-loader-scan 1.1s linear infinite;
}

.global-loading-phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #e0f2fe;
  font-size: 0.82rem;
  font-weight: 800;
}

.global-loading-phase-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.global-loading-phase-percent {
  flex: 0 0 auto;
  color: #67e8f9;
  font-variant-numeric: tabular-nums;
}

.global-loading-phase-steps {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.global-loading-phase-step {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.62);
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-loading-phase-step.is-active {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.46);
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.28), rgba(30, 41, 59, 0.78));
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.2);
}

.global-loading-phase-step.is-done {
  color: #bbf7d0;
  border-color: rgba(52, 211, 153, 0.36);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.22), rgba(30, 41, 59, 0.68));
}

body.is-global-loading {
  cursor: progress;
}

@keyframes safenexus-loader-sweep {
  0% {
    transform: translateX(-66%) rotate(8deg);
    opacity: 0;
  }
  22% {
    opacity: 0.9;
  }
  62% {
    opacity: 0.38;
  }
  100% {
    transform: translateX(66%) rotate(8deg);
    opacity: 0;
  }
}

@keyframes safenexus-loader-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes safenexus-loader-scan {
  to {
    background-position: 0 0, 34px 0;
  }
}

@keyframes safenexus-loader-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 12px 22px rgba(17, 70, 154, 0.14);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98),
      0 18px 28px rgba(24, 102, 214, 0.24);
  }
}

@keyframes safenexus-loader-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.24;
  }
  70% {
    transform: scale(1.08);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.16);
    opacity: 0;
  }
}

@keyframes safenexus-loader-bloom {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.34;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.62;
  }
}

@keyframes safenexus-summary-status-spin {
  to {
    transform: rotate(360deg);
  }
}

.people-training-panel {
  display: grid;
  gap: 16px;
}

.people-training-editor-panel.is-modal-open {
  position: fixed;
  z-index: 236;
  top: 18px;
  left: 50%;
  width: min(1560px, calc(100vw - 16px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(118, 151, 218, 0.42);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 255, 0.96)),
    radial-gradient(circle at 8% 0%, rgba(63, 131, 248, 0.12), transparent 34%);
  box-shadow: 0 28px 78px rgba(25, 45, 86, 0.22);
}

.people-training-editor-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.people-training-editor-head-actions .inline-feedback {
  margin: 0;
}

.people-training-editor-panel .people-training-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.people-training-editor-sections,
.people-training-type-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.people-training-editor-section {
  overflow: hidden;
  border: 1px solid rgba(180, 201, 234, 0.86);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(247, 251, 255, 0.92)),
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.08), transparent 34%);
}

.people-training-editor-section.is-missing {
  border-color: rgba(215, 80, 100, 0.52);
}

.people-training-editor-section.is-expiring {
  border-color: rgba(210, 151, 33, 0.56);
}

.people-training-editor-section.is-valid {
  border-color: rgba(57, 173, 114, 0.48);
}

.people-training-section-summary {
  display: grid;
  align-items: center;
  min-height: 60px;
  padding: 11px 48px 11px 14px;
  cursor: pointer;
  list-style: none;
  background: rgba(232, 240, 252, 0.62);
  border-bottom: 1px solid rgba(200, 214, 238, 0.72);
  position: relative;
}

.people-training-section-summary::-webkit-details-marker {
  display: none;
}

.people-training-section-summary::marker {
  content: "";
}

.people-training-section-summary::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(178, 198, 230, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #244a8f;
  font-size: 0.72rem;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.16s ease;
}

.people-training-editor-section:not([open]) .people-training-section-summary {
  border-bottom-color: transparent;
}

.people-training-editor-section:not([open]) .people-training-section-summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.people-training-section-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.people-training-section-title > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 32px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.16), rgba(216, 77, 193, 0.12));
  color: #244a8f;
  font-size: 0.72rem;
  font-weight: 950;
}

.people-training-section-title strong {
  min-width: 0;
  overflow: hidden;
  color: #172743;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-section-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.people-training-section-brief {
  max-width: 100%;
  overflow: hidden;
  color: #5f718d;
  font-size: 0.75rem;
  font-weight: 780;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-section-brief.is-valid {
  color: #17623c;
}

.people-training-section-brief.is-expiring {
  color: #835a0b;
}

.people-training-section-brief.is-missing {
  color: #9a2737;
}

.people-training-section-body,
.people-training-editor-section > .people-training-form-grid {
  padding: 12px;
}

.people-training-training-section .people-training-section-body {
  display: grid;
  gap: 10px;
}

.people-training-training-section .people-training-type-card {
  border-radius: 17px;
  box-shadow: none;
}

.people-training-section-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px dashed rgba(134, 164, 216, 0.86);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(247, 251, 255, 0.96), rgba(255, 255, 255, 0.92)),
    radial-gradient(circle at top right, rgba(57, 173, 114, 0.1), transparent 36%);
}

.people-training-section-upload.is-drag-over {
  border-color: rgba(47, 111, 237, 0.9);
  background: rgba(239, 246, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0.22);
}

.people-training-section-upload.is-in-medical-card {
  margin-top: -2px;
  border-color: rgba(190, 204, 232, 0.88);
  background:
    linear-gradient(135deg, rgba(247, 251, 255, 0.84), rgba(255, 255, 255, 0.9)),
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.08), transparent 38%);
}

.people-training-section-upload-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-section-upload-copy strong {
  color: #172743;
  font-size: 0.9rem;
}

.people-training-section-upload-copy span {
  color: #657891;
  font-size: 0.78rem;
  font-weight: 760;
}

.people-training-health-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  white-space: nowrap;
}

.people-training-health-upload-button svg {
  width: 15px;
  height: 15px;
}

.people-training-editor-panel .people-training-dossier {
  background: linear-gradient(135deg, rgba(247, 252, 249, 0.96), rgba(255, 255, 255, 0.96));
}

.people-training-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.people-training-stat-card {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.9));
  box-shadow: 0 18px 42px rgba(35, 54, 98, 0.07);
}

.people-training-stat-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 12px 16px;
  height: 3px;
  border-radius: 999px;
  background: rgba(104, 137, 205, 0.22);
}

.people-training-stat-card.is-valid::after {
  background: linear-gradient(90deg, #3ab879, #9be7ba);
}

.people-training-stat-card.is-warning::after {
  background: linear-gradient(90deg, #d39b24, #ffe08a);
}

.people-training-stat-card.is-expired::after {
  background: linear-gradient(90deg, #d84d62, #ff9fb0);
}

.people-training-stat-card span {
  color: #687d9f;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.people-training-stat-card strong {
  color: #1c2d4d;
  font-size: 1.8rem;
  line-height: 1;
}

.people-training-stat-card small {
  color: #667895;
  font-size: 0.8rem;
}

.people-training-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(150px, 0.8fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(190, 204, 232, 0.84);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.9)),
    radial-gradient(circle at bottom left, rgba(211, 68, 188, 0.07), transparent 42%);
}

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

.people-training-flow-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(47, 111, 237, 0.11), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.92));
}

.people-training-flow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(193, 209, 237, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.people-training-flow-step span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: linear-gradient(135deg, #2f6fed, #d84dc1);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(84, 105, 218, 0.18);
}

.people-training-flow-step strong {
  color: #172743;
  font-size: 0.96rem;
}

.people-training-flow-step small {
  color: #627490;
  font-weight: 700;
}

.people-training-exam-overview-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(57, 173, 114, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.92));
  box-shadow: 0 18px 44px rgba(35, 54, 98, 0.07);
}

.people-training-exam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}

.people-training-exam-head h4 {
  margin: 0;
  color: #172743;
}

.people-training-exam-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(100%, 760px);
}

.people-training-exam-controls select,
.people-training-exam-search-label input {
  flex: 1 1 280px;
  min-width: 220px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(178, 198, 230, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.96);
  color: #172743;
  font-weight: 850;
}

.people-training-exam-search-label {
  display: grid;
  gap: 4px;
  flex: 1 1 230px;
  min-width: 210px;
  cursor: default;
}

.people-training-exam-search-label span {
  color: #657891;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.people-training-collapse-button {
  min-width: 42px;
  width: 42px;
  padding-inline: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.people-training-exam-overview-card.is-collapsed {
  gap: 0;
  padding-block: 12px;
}

.people-training-exam-overview-card.is-collapsed .people-training-exam-head {
  align-items: center;
}

.people-training-exam-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.people-training-exam-status-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(205, 216, 238, 0.82);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.people-training-exam-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.people-training-exam-status-head strong {
  color: #172743;
}

.people-training-exam-status-list {
  display: grid;
  gap: 7px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.people-training-exam-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(210px, 0.82fr) minmax(240px, 1fr) minmax(180px, 0.7fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(203, 214, 234, 0.82);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.9);
}

.people-training-exam-status-section .people-training-exam-row {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
  gap: 7px 10px;
  padding: 8px 9px;
  border-radius: 14px;
}

.people-training-exam-status-section .people-training-exam-meta,
.people-training-exam-status-section .people-training-exam-status {
  grid-column: 1 / -1;
}

.people-training-exam-status-section .people-training-exam-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.people-training-exam-row.is-valid {
  border-color: rgba(57, 173, 114, 0.4);
  background: linear-gradient(135deg, rgba(244, 255, 249, 0.96), rgba(255, 255, 255, 0.94));
}

.people-training-exam-row.is-expiring {
  border-color: rgba(210, 151, 33, 0.42);
  background: linear-gradient(135deg, rgba(255, 249, 235, 0.96), rgba(255, 255, 255, 0.94));
}

.people-training-exam-row.is-expired,
.people-training-exam-row.is-missing {
  border-color: rgba(215, 80, 100, 0.35);
  background: linear-gradient(135deg, rgba(255, 244, 247, 0.95), rgba(255, 255, 255, 0.94));
}

.people-training-exam-person,
.people-training-exam-company,
.people-training-exam-meta,
.people-training-exam-status {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-exam-person strong,
.people-training-exam-company strong,
.people-training-exam-meta strong {
  overflow: hidden;
  color: #172743;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-exam-person span,
.people-training-exam-company span,
.people-training-exam-meta span,
.people-training-exam-status span:not(.people-training-status-pill) {
  overflow: hidden;
  color: #657891;
  font-size: 0.78rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-form-card,
.people-training-list-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(36, 100, 235, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.92));
  box-shadow: 0 20px 52px rgba(35, 54, 98, 0.08);
}

.people-training-list-card {
  order: 1;
}

.people-training-form-card {
  order: 2;
}

.people-training-form-head,
.people-training-list-head,
.people-training-company-head,
.people-training-type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.people-training-form-head h4,
.people-training-list-head h4 {
  margin: 0;
  color: #172743;
}

.people-training-list-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

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

.people-training-form-grid .is-wide {
  grid-column: 1 / -1;
}

.people-training-type-grid {
  display: grid;
  gap: 12px;
}

.people-training-type-card {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-left-width: 5px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
}

.people-training-type-card.is-valid {
  border-left-color: #39ad72;
}

.people-training-type-card.is-expiring {
  border-left-color: #d29721;
}

.people-training-type-card.is-expired,
.people-training-type-card.is-missing {
  border-left-color: #d75064;
}

.people-training-medical-combined-card {
  gap: 14px;
  border-left-color: #2f6fed;
}

.people-training-medical-combined-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.people-training-medical-combined-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-medical-combined-head small {
  color: #657891;
  font-size: 0.76rem;
  font-weight: 760;
}

.people-training-medical-panels {
  display: grid;
  gap: 12px;
}

.people-training-medical-panel {
  display: grid;
  gap: 11px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(190, 204, 232, 0.74);
}

.people-training-medical-panel:first-child {
  padding-top: 0;
  border-top: 0;
}

.people-training-medical-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.people-training-medical-panel-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-medical-panel-head strong {
  color: #172743;
  font-size: 0.86rem;
}

.people-training-medical-panel-head span:not(.people-training-status-chip) {
  color: #657891;
  font-size: 0.72rem;
  font-weight: 760;
}

.people-training-type-head strong {
  color: #172743;
  font-size: 0.96rem;
}

.people-training-type-service-meta {
  color: #657891;
  font-size: 0.76rem;
  font-weight: 760;
}

.people-training-type-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  padding-top: 2px;
}

.people-training-type-document-status,
.people-training-type-history {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 999px;
  background: rgba(244, 248, 255, 0.78);
  color: #526886;
  font-size: 0.75rem;
  font-weight: 840;
}

.people-training-type-pdf-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 12px;
}

.people-training-type-pdf-button svg {
  width: 15px;
  height: 15px;
}

.people-training-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.people-training-mini-grid.is-structured {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.people-training-mini-grid .is-wide {
  grid-column: 1 / -1;
}

.people-training-ra1-choice-block {
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 10px 22px rgba(25, 45, 86, 0.045);
}

.people-training-ra1-choice-block .risk-assessment-job-choice-block-head {
  align-items: start;
  gap: 8px;
}

.people-training-ra1-choice-block .risk-assessment-job-choice-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

.people-training-ra1-choice-block .risk-assessment-job-choice-block-head strong {
  font-size: 0.78rem;
}

.people-training-ra1-choice-block .risk-assessment-job-choice-block-head small {
  font-size: 0.68rem;
}

.people-training-ra1-choice-block > div {
  gap: 6px;
}

.people-training-ra1-choice-block .risk-assessment-job-choice-block button,
.people-training-ra1-choice-block button {
  min-height: 29px;
  padding: 6px 9px;
  font-size: 0.7rem;
}

.people-training-inline-load-weight {
  width: 92px;
  min-height: 28px;
  font-size: 0.68rem;
}

.people-training-mini-grid textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.4;
}

.people-training-mini-grid input.is-readonly,
.people-training-mini-grid textarea.is-readonly {
  color: #31456a;
  background: rgba(239, 246, 255, 0.82);
  border-color: rgba(166, 188, 225, 0.9);
  cursor: default;
}

.people-training-check {
  display: inline-flex;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-radius: 15px;
  background: rgba(244, 248, 255, 0.84);
  color: #24385d;
  font-size: 0.85rem;
  font-weight: 800;
}

.people-training-check input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  accent-color: #2f6fed;
}

.people-training-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.people-training-list {
  display: grid;
  gap: 10px;
}

.people-training-person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(203, 214, 234, 0.82);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.91)),
    radial-gradient(circle at right, rgba(47, 111, 237, 0.08), transparent 42%);
  box-shadow: 0 12px 28px rgba(38, 62, 112, 0.07);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.people-training-person-row:hover,
.people-training-person-row:focus-visible,
.people-training-person-row.is-drag-over {
  border-color: rgba(47, 111, 237, 0.42);
  box-shadow: 0 20px 38px rgba(38, 62, 112, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.people-training-person-row.is-drag-over {
  background:
    linear-gradient(135deg, rgba(239, 247, 255, 0.99), rgba(255, 255, 255, 0.94)),
    radial-gradient(circle at right, rgba(47, 111, 237, 0.16), transparent 42%);
}

.people-training-person-row.is-valid {
  border-color: rgba(57, 173, 114, 0.38);
  box-shadow: inset 4px 0 0 rgba(57, 173, 114, 0.72), 0 12px 28px rgba(38, 62, 112, 0.07);
}

.people-training-person-row.is-expiring {
  border-color: rgba(210, 151, 33, 0.44);
  box-shadow: inset 4px 0 0 rgba(210, 151, 33, 0.76), 0 12px 28px rgba(38, 62, 112, 0.07);
}

.people-training-person-row.is-expired,
.people-training-person-row.is-missing {
  border-color: rgba(215, 80, 100, 0.35);
  box-shadow: inset 4px 0 0 rgba(215, 80, 100, 0.72), 0 12px 28px rgba(38, 62, 112, 0.07);
}

.people-training-person-row.is-selected {
  border-color: rgba(47, 111, 237, 0.72);
  box-shadow:
    inset 4px 0 0 rgba(47, 111, 237, 0.72),
    0 0 0 3px rgba(47, 111, 237, 0.12),
    0 18px 38px rgba(35, 54, 98, 0.14);
}

.people-training-list .people-training-person-row:hover,
.people-training-list .people-training-person-row:focus-visible,
.people-training-list .people-training-person-row.is-drag-over {
  border-color: rgba(47, 111, 237, 0.76);
  box-shadow:
    inset 0 0 0 2px rgba(47, 111, 237, 0.18),
    0 0 0 4px rgba(47, 111, 237, 0.12),
    0 24px 48px rgba(35, 54, 98, 0.18);
  transform: translateY(-2px) scale(1.004);
}

.people-training-list .people-training-person-row.is-valid:hover,
.people-training-list .people-training-person-row.is-valid:focus-visible,
.people-training-list .people-training-person-row.is-valid.is-drag-over {
  box-shadow:
    inset 4px 0 0 rgba(57, 173, 114, 0.86),
    inset 0 0 0 2px rgba(47, 111, 237, 0.18),
    0 0 0 4px rgba(47, 111, 237, 0.12),
    0 24px 48px rgba(35, 54, 98, 0.18);
}

.people-training-list .people-training-person-row.is-expiring:hover,
.people-training-list .people-training-person-row.is-expiring:focus-visible,
.people-training-list .people-training-person-row.is-expiring.is-drag-over {
  box-shadow:
    inset 4px 0 0 rgba(210, 151, 33, 0.88),
    inset 0 0 0 2px rgba(47, 111, 237, 0.18),
    0 0 0 4px rgba(47, 111, 237, 0.12),
    0 24px 48px rgba(35, 54, 98, 0.18);
}

.people-training-list .people-training-person-row.is-expired:hover,
.people-training-list .people-training-person-row.is-expired:focus-visible,
.people-training-list .people-training-person-row.is-expired.is-drag-over,
.people-training-list .people-training-person-row.is-missing:hover,
.people-training-list .people-training-person-row.is-missing:focus-visible,
.people-training-list .people-training-person-row.is-missing.is-drag-over {
  box-shadow:
    inset 4px 0 0 rgba(215, 80, 100, 0.88),
    inset 0 0 0 2px rgba(47, 111, 237, 0.18),
    0 0 0 4px rgba(47, 111, 237, 0.12),
    0 24px 48px rgba(35, 54, 98, 0.18);
}

.people-training-person-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.people-training-row-select {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border: 1px solid rgba(154, 178, 220, 0.62);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #2f6fed;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.people-training-row-select:hover,
.people-training-row-select:focus-within {
  border-color: rgba(47, 111, 237, 0.58);
  box-shadow: 0 8px 18px rgba(39, 67, 119, 0.12);
}

.people-training-row-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.people-training-row-select span {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.92);
}

.people-training-row-select input:checked + span {
  background: #2f6fed;
  border-color: #2f6fed;
  box-shadow: inset 0 0 0 3px #fff;
}

.people-training-person-identity {
  display: grid;
  grid-template-columns: minmax(210px, 0.95fr) minmax(210px, 0.95fr);
  gap: 10px;
  min-width: 0;
}

.people-training-person-overview {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 420px;
}

.people-training-attachment-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}

.people-training-attachment-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid rgba(154, 178, 220, 0.62);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #244a8f;
  font-size: 0.68rem;
  font-weight: 920;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.people-training-attachment-button svg {
  width: 14px;
  height: 14px;
}

.people-training-attachment-button:hover,
.people-training-attachment-button:focus-visible {
  border-color: rgba(47, 111, 237, 0.58);
  box-shadow: 0 8px 18px rgba(39, 67, 119, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.people-training-attachment-button.is-more {
  min-width: 34px;
  color: #172743;
}

.people-training-person-row .people-training-person-statuses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 58px));
  justify-content: start;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(218, 225, 239, 0.74);
  border-radius: 17px;
  background: rgba(250, 252, 255, 0.8);
}

.people-training-person-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #63738e;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.people-training-person-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding-top: 2px;
}

.people-training-inline-exam-form {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(120px, 0.75fr) minmax(180px, 1fr) minmax(140px, 0.85fr) minmax(140px, 0.85fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(218, 225, 239, 0.7);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.76);
}

.people-training-inline-exam-form select,
.people-training-inline-exam-form input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(178, 198, 230, 0.88);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  color: #172743;
  font-weight: 780;
}

.people-training-inline-exam-form select:focus,
.people-training-inline-exam-form input:focus {
  border-color: rgba(47, 111, 237, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
}

.people-training-inline-save {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 13px;
}

.people-training-edit-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  white-space: nowrap;
}

.people-training-edit-button svg {
  width: 16px;
  height: 16px;
}

.people-training-drop-hint {
  align-self: center;
  color: #6b7892;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.people-training-dossier {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(155, 185, 227, 0.72);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(57, 173, 114, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(248, 252, 255, 0.98), rgba(255, 255, 255, 0.9));
}

.people-training-dossier.is-empty {
  border-style: dashed;
  color: #657891;
}

.people-training-dossier.is-drag-over {
  border-color: rgba(47, 111, 237, 0.56);
  background: linear-gradient(135deg, rgba(239, 247, 255, 0.98), rgba(255, 255, 255, 0.94));
}

.people-training-dossier.people-training-editor-section {
  display: block;
  gap: 0;
  padding: 0;
}

.people-training-dossier-head,
.people-training-dossier-subhead,
.people-training-attachment-dialog-head,
.people-training-attachment-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.people-training-dossier-title,
.people-training-dossier-subhead {
  min-width: 0;
}

.people-training-dossier-title {
  display: grid;
  gap: 3px;
}

.people-training-dossier-title strong,
.people-training-dossier-subhead strong {
  color: #172743;
}

.people-training-dossier-title span,
.people-training-dossier-subhead span {
  color: #657891;
  font-size: 0.8rem;
  font-weight: 720;
}

.people-training-dossier-subhead > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-generate-documents-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
}

.people-training-generate-documents-button svg {
  width: 15px;
  height: 15px;
}

.people-training-dossier-training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.people-training-dossier-training-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(203, 214, 234, 0.74);
  border-left-width: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.people-training-dossier-training-item.is-valid {
  border-left-color: #39ad72;
}

.people-training-dossier-training-item.is-expiring {
  border-left-color: #d29721;
}

.people-training-dossier-training-item.is-expired,
.people-training-dossier-training-item.is-missing {
  border-left-color: #d75064;
}

.people-training-dossier-training-item > span:first-child {
  grid-row: span 2;
}

.people-training-dossier-training-item strong {
  min-width: 0;
  overflow: hidden;
  color: #172743;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-dossier-training-item > span:last-child {
  min-width: 0;
  overflow: hidden;
  color: #657891;
  font-size: 0.76rem;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-dossier-documents,
.people-training-attachment-file-list {
  display: grid;
  gap: 8px;
}

.people-training-document-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(203, 214, 234, 0.74);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
}

.people-training-document-icon {
  width: 42px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf4ff, #fff2fb);
  color: #2c5fbf;
  font-size: 0.72rem;
  font-weight: 950;
}

.people-training-document-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.people-training-document-title-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.people-training-document-copy strong,
.people-training-document-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-document-copy strong {
  color: #172743;
  font-size: 0.84rem;
}

.people-training-document-copy span {
  color: #657891;
  font-size: 0.76rem;
  font-weight: 720;
}

.people-training-document-version {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  font-size: 0.68rem;
  font-weight: 920;
}

.people-training-document-version.is-active {
  color: #14724a;
  background: rgba(229, 250, 238, 0.92);
  border-color: rgba(71, 190, 127, 0.45);
}

.people-training-document-version.is-archived {
  color: #64748b;
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
}

.people-training-document-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.people-training-attachment-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(6px);
}

.people-training-attachment-dialog {
  position: fixed;
  z-index: 241;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(190, 204, 232, 0.92);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 26px 70px rgba(31, 42, 71, 0.24);
  transform: translate(-50%, -48%);
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.people-training-attachment-dialog.is-open {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.people-training-attachment-dialog h3 {
  margin: 0;
  color: #172743;
}

.people-training-attachment-file-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, 0.8fr) minmax(160px, 0.75fr) minmax(180px, 1fr);
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(203, 214, 234, 0.74);
  border-radius: 17px;
  background: rgba(248, 251, 255, 0.88);
}

.people-training-attachment-file-row > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-attachment-file-row strong,
.people-training-attachment-file-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-attachment-file-row strong {
  color: #172743;
}

.people-training-attachment-file-row small {
  color: #657891;
  font-weight: 720;
}

.people-training-attachment-file-row select,
.people-training-attachment-file-row input {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(178, 198, 230, 0.88);
  border-radius: 13px;
}

.client-portal-preview-row.is-training {
  grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1.05fr) minmax(0, 1.15fr) auto;
}

.client-portal-training-details {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(203, 214, 234, 0.62);
}

.client-portal-training-detail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(154, 178, 220, 0.62);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.82);
  color: #244a8f;
  font-size: 0.72rem;
  font-weight: 850;
}

.client-portal-training-detail-pill.is-valid,
.client-portal-training-detail-pill.is-document {
  border-color: rgba(57, 173, 114, 0.38);
  background: rgba(233, 250, 240, 0.9);
  color: #17623c;
}

.client-portal-training-detail-pill.is-expiring {
  border-color: rgba(210, 151, 33, 0.42);
  background: rgba(255, 247, 225, 0.94);
  color: #815600;
}

.client-portal-training-detail-pill.is-expired,
.client-portal-training-detail-pill.is-missing {
  border-color: rgba(215, 80, 100, 0.36);
  background: rgba(255, 239, 242, 0.9);
  color: #9a2737;
}

.people-training-company-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
}

.people-training-company-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.people-training-company-head strong {
  color: #172743;
}

.people-training-company-head span:not(.soft-pill) {
  color: #657891;
  font-size: 0.82rem;
}

.people-training-company-people {
  display: grid;
  gap: 8px;
}

.people-training-person-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(160px, 0.85fr) minmax(210px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(203, 214, 234, 0.78);
  border-radius: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.86));
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.people-training-person-card:hover,
.people-training-person-card:focus-visible {
  border-color: rgba(72, 118, 222, 0.42);
  box-shadow: 0 14px 28px rgba(47, 83, 149, 0.11);
  transform: translateY(-1px);
  outline: none;
}

.people-training-person-card.is-valid {
  box-shadow: inset 4px 0 0 rgba(57, 173, 114, 0.72);
}

.people-training-person-card.is-expiring {
  box-shadow: inset 4px 0 0 rgba(210, 151, 33, 0.76);
}

.people-training-person-card.is-expired,
.people-training-person-card.is-missing {
  box-shadow: inset 4px 0 0 rgba(215, 80, 100, 0.76);
}

.people-training-person-main,
.people-training-person-location {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-person-main strong,
.people-training-person-location strong {
  color: #172743;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-person-main span,
.people-training-person-location span {
  color: #697b96;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-person-statuses,
.client-portal-preview-row-meta.is-training-statuses {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.people-training-source-trail {
  flex-basis: 100%;
  min-width: 0;
  overflow: hidden;
  color: #657891;
  font-size: 0.76rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-status-pill,
.people-training-certificate-pill.has-pdf small::after {
  content: " · PDF";
}

.people-training-certificate-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 9px;
  text-align: center;
  box-shadow: 0 5px 12px rgba(39, 67, 119, 0.05);
}

.people-training-certificate-pill strong {
  display: block;
  max-width: 100%;
  font-size: 0.72rem;
}

.people-training-certificate-pill span,
.people-training-certificate-pill small {
  display: none;
}

.people-training-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(154, 178, 220, 0.62);
  border-radius: 999px;
  background: rgba(235, 242, 255, 0.9);
  color: #244a8f;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.people-training-certificate-pill {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(154, 178, 220, 0.62);
  border-radius: 12px;
  background: rgba(235, 242, 255, 0.9);
  color: #244a8f;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(39, 67, 119, 0.06);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.people-training-certificate-pill:hover,
.people-training-certificate-pill:focus-visible {
  border-color: rgba(47, 111, 237, 0.52);
  box-shadow: 0 12px 24px rgba(39, 67, 119, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.people-training-certificate-pill strong {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-certificate-pill span {
  overflow: hidden;
  color: #18253f;
  font-size: 0.66rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-certificate-pill small {
  overflow: hidden;
  color: #61718b;
  font-size: 0.61rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-certificate-pill.has-pdf small::after {
  content: " · otvori";
  color: #1e5f40;
  font-weight: 900;
}

.people-training-status-chip {
  min-height: 30px;
  padding-inline: 11px;
}

.people-training-status-pill.is-valid,
.people-training-status-chip.is-valid,
.people-training-certificate-pill.is-valid,
.client-portal-preview-row-badge.is-training.is-valid {
  border-color: rgba(57, 173, 114, 0.44);
  background: rgba(233, 250, 240, 0.94);
  color: #17623c;
}

.people-training-status-pill.is-expiring,
.people-training-status-chip.is-expiring,
.people-training-certificate-pill.is-expiring,
.client-portal-preview-row-badge.is-training.is-expiring {
  border-color: rgba(210, 151, 33, 0.42);
  background: rgba(255, 247, 225, 0.96);
  color: #815600;
}

.people-training-status-pill.is-expired,
.people-training-status-pill.is-missing,
.people-training-status-chip.is-expired,
.people-training-status-chip.is-missing,
.people-training-certificate-pill.is-expired,
.people-training-certificate-pill.is-missing,
.client-portal-preview-row-badge.is-training.is-expired,
.client-portal-preview-row-badge.is-training.is-missing {
  border-color: rgba(215, 80, 100, 0.42);
  background: rgba(255, 239, 242, 0.96);
  color: #9a2737;
}

.people-training-certificate-pill.is-missing {
  border-color: rgba(156, 172, 197, 0.56);
  background: rgba(241, 245, 250, 0.96);
  color: #586a82;
}

.people-training-certificate-pill.is-missing span,
.people-training-certificate-pill.is-missing small {
  color: #6d7d92;
}

.people-training-person-row .people-training-person-statuses {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.people-training-person-footer {
  justify-content: flex-end;
  min-height: 24px;
}

.people-training-certificate-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  box-shadow: none;
}

.people-training-certificate-pill:hover,
.people-training-certificate-pill:focus-visible {
  box-shadow: 0 6px 14px rgba(39, 67, 119, 0.12);
}

.people-training-certificate-pill strong {
  display: block;
  max-width: 88px;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-certificate-pill span,
.people-training-certificate-pill small {
  display: none;
}

.people-training-row-shell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.people-training-row-shell > .people-training-row-select {
  margin-top: 18px;
}

.people-training-person-top {
  grid-template-columns: minmax(0, 1fr) auto;
}

.people-training-attachment-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.people-training-attachment-button.is-menu {
  min-width: 40px;
  min-height: 30px;
  padding: 4px 8px;
}

.people-training-attachment-button:disabled {
  opacity: 0.52;
  cursor: default;
  transform: none;
}

.people-training-certificate-pill {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
}

.people-training-certificate-pill.is-expiring {
  animation: periodicsPulseWarningDot 1.2s ease-out infinite;
}

.people-training-certificate-pill.is-expired {
  animation: periodicsPulseDot 1.2s ease-out infinite;
}

.people-training-attachment-menu-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.people-training-attachment-menu-copy strong {
  overflow: hidden;
  color: #172743;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-attachment-menu-copy small {
  overflow: hidden;
  color: #657891;
  font-size: 0.7rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-attachment-menu-empty {
  margin: 2px 6px 6px;
  color: #657891;
  font-size: 0.78rem;
  font-weight: 760;
}

.people-training-item-menu {
  position: fixed;
  z-index: 120;
  display: grid;
  gap: 5px;
  width: min(270px, calc(100vw - 20px));
  padding: 8px;
  border: 1px solid rgba(174, 190, 220, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 54px rgba(31, 47, 84, 0.2);
}

.people-training-item-menu-head {
  display: grid;
  gap: 2px;
  padding: 5px 7px 7px;
  border-bottom: 1px solid rgba(218, 225, 239, 0.84);
}

.people-training-item-menu-head strong {
  color: #172743;
  font-size: 0.84rem;
}

.people-training-item-menu-head span {
  overflow: hidden;
  color: #657891;
  font-size: 0.72rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-item-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1b2b48;
  font-size: 0.82rem;
  font-weight: 820;
  text-align: left;
  cursor: pointer;
}

.people-training-item-menu button:hover,
.people-training-item-menu button:focus-visible {
  background: rgba(235, 242, 255, 0.94);
  outline: none;
}

.people-training-item-menu button:disabled {
  color: #9aa8bc;
  cursor: not-allowed;
}

.people-training-item-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #2f6fed;
}

.people-training-item-menu-icon svg {
  width: 16px;
  height: 16px;
}

.people-training-service-launch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(24, 35, 55, 0.34);
  backdrop-filter: blur(7px);
}

.people-training-service-launch-modal {
  display: grid;
  gap: 14px;
  width: min(980px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(190, 204, 232, 0.86);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.95));
  box-shadow: 0 28px 72px rgba(22, 35, 62, 0.24);
}

.people-training-service-launch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(218, 225, 239, 0.84);
}

.people-training-service-launch-head h4 {
  margin: 0;
  color: #172743;
}

.people-training-service-launch-head span {
  display: block;
  margin-top: 4px;
  color: #657891;
  font-size: 0.82rem;
  font-weight: 760;
}

.people-training-service-launch-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.people-training-service-launch-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 102px;
  padding: 14px;
  border: 1px solid rgba(178, 198, 230, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: #172743;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(35, 54, 98, 0.08);
}

.people-training-service-launch-choice:hover,
.people-training-service-launch-choice:focus-visible {
  border-color: rgba(47, 111, 237, 0.72);
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgba(47, 111, 237, 0.12),
    0 20px 40px rgba(35, 54, 98, 0.13);
}

.people-training-service-launch-icon {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(47, 111, 237, 0.14), rgba(216, 77, 193, 0.12));
  color: #2f6fed;
}

.people-training-service-launch-icon svg {
  width: 19px;
  height: 19px;
}

.people-training-service-launch-choice strong {
  font-size: 0.94rem;
}

.people-training-service-launch-choice small {
  color: #657891;
  font-size: 0.78rem;
  font-weight: 760;
}

.people-training-service-existing-button {
  grid-column: 1 / -1;
  justify-self: end;
}

.client-portal-preview-row.is-training {
  border-color: rgba(83, 149, 194, 0.34);
  background:
    linear-gradient(135deg, rgba(247, 252, 255, 0.98), rgba(255, 255, 255, 0.88));
}

.client-portal-preview-row-badge.is-training {
  border-color: rgba(83, 149, 194, 0.44);
  background: rgba(234, 246, 253, 0.94);
  color: #195779;
}

.absence-module,
.absence-report-module {
  display: grid;
  gap: 18px;
}

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

.absence-summary-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(66, 110, 188, 0.12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(236, 245, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.absence-summary-card span {
  color: #6780a3;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.absence-summary-card strong {
  color: #21314d;
  font-size: 1.65rem;
}

.absence-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(160px, 0.8fr));
  gap: 12px;
  align-items: end;
}

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

.absence-card {
  border-color: rgba(85, 126, 196, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(245, 249, 255, 0.95)),
    radial-gradient(circle at top left, rgba(93, 145, 235, 0.08), transparent 48%);
}

.absence-card.is-active {
  box-shadow:
    0 18px 30px rgba(64, 108, 184, 0.12),
    0 0 0 2px rgba(82, 135, 230, 0.14);
}

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

.absence-inline-summary {
  padding: 12px 14px;
  border: 1px solid rgba(79, 124, 204, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 249, 255, 0.96), rgba(236, 244, 255, 0.9));
}

.absence-inline-summary strong {
  color: #203453;
  font-size: 1rem;
}

.absence-inline-summary small {
  color: #6a7f9e;
  line-height: 1.45;
}

.absence-balance-list,
.absence-report-list {
  display: grid;
  gap: 12px;
}

.absence-balance-row,
.absence-report-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(67, 111, 188, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.94));
}

.absence-balance-row {
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: start;
}

.absence-balance-row-copy,
.absence-report-card-head {
  display: grid;
  gap: 4px;
}

.absence-balance-row-copy span,
.absence-report-card-head span {
  color: #6f819a;
  font-size: 0.84rem;
}

.absence-balance-row-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.absence-report-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.absence-report-card-stat {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(241, 247, 255, 0.92);
  border: 1px solid rgba(89, 131, 205, 0.1);
}

.absence-report-card-stat span {
  color: #7287a5;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.absence-report-card-stat strong {
  color: #203250;
  font-size: 1.12rem;
}

.absence-report-card-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work-order-calendar-absence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.work-order-calendar-head-absence-strip,
.work-order-calendar-week-absence-strip {
  margin-top: 6px;
}

.work-order-calendar-card-absence-strip {
  width: 100%;
  margin-top: 2px;
}

.work-order-calendar-absence-badge {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(78, 118, 188, 0.16);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  color: #274062;
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.98), rgba(232, 241, 255, 0.94));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-calendar-absence-badge.is-compact {
  font-size: 0.68rem;
  padding: 3px 8px;
}

.work-order-calendar-absence-badge.is-annual {
  color: #795000;
  border-color: rgba(199, 156, 61, 0.18);
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.98), rgba(255, 239, 197, 0.96));
}

.work-order-calendar-absence-badge.is-medical {
  color: #1f5d4d;
  border-color: rgba(58, 149, 118, 0.18);
  background: linear-gradient(180deg, rgba(232, 252, 244, 0.98), rgba(215, 244, 232, 0.95));
}

.work-order-calendar-absence-badge.is-other {
  color: #4b4476;
  border-color: rgba(121, 102, 190, 0.16);
  background: linear-gradient(180deg, rgba(244, 239, 255, 0.98), rgba(233, 225, 255, 0.95));
}

.work-order-calendar-absence-more {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  background: rgba(230, 237, 251, 0.92);
  color: #4a6287;
}

.work-order-calendar-month-day .work-order-calendar-cell-placeholder,
.work-order-calendar-week-cell .work-order-calendar-cell-placeholder {
  margin-top: auto;
}

@media (max-width: 1120px) {
  .people-training-stats,
  .absence-summary-grid,
  .absence-report-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-training-toolbar,
  .people-training-layout,
  .people-training-flow-panel,
  .people-training-exam-head,
  .people-training-exam-list,
  .people-training-exam-row,
  .people-training-form-grid,
  .people-training-person-row,
  .people-training-person-top,
  .people-training-person-actions,
  .people-training-inline-exam-form,
  .people-training-person-card,
  .absence-toolbar,
  .absence-balance-row,
  .absence-balance-row-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .people-training-person-statuses {
    justify-content: flex-start;
  }

  .people-training-section-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .people-training-mini-grid.is-structured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-training-section-brief {
    justify-self: start;
    max-width: 100%;
  }

  .people-training-list-head-actions,
  .people-training-person-overview {
    justify-content: flex-start;
    max-width: none;
    width: 100%;
  }

  .people-training-exam-controls {
    width: 100%;
    justify-content: stretch;
  }

  .people-training-exam-head,
  .people-training-exam-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .people-training-stats,
  .people-training-mini-grid,
  .people-training-mini-grid.is-structured,
  .absence-summary-grid,
  .absence-report-card-stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.offers-list-panel {
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(192, 207, 231, 0.72);
  background:
    radial-gradient(circle at top right, rgba(123, 97, 255, 0.06), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.92));
}

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

.offers-editor-panel.is-modal-open,
.offers-template-panel.is-modal-open {
  width: min(1320px, calc(100vw - 24px));
}

.offer-email-backdrop.is-modal-open {
  z-index: 72;
}

.offer-email-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(45, 111, 219, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
}

.offer-email-panel.is-modal-open {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 73;
  width: min(820px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(190, 204, 230, 0.92);
  border-radius: 24px;
  box-shadow: 0 30px 96px rgba(31, 48, 84, 0.26);
}

.offer-email-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.offer-email-preview-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(185, 201, 230, 0.78);
  background: rgba(245, 249, 255, 0.86);
  color: var(--text);
}

.offer-email-preview-card span {
  color: var(--muted);
  font-size: 0.83rem;
}

body.is-offer-email-open {
  overflow: hidden;
}

.offer-html-preview-backdrop.is-modal-open {
  z-index: 74;
}

.offer-html-preview-panel {
  display: grid;
  gap: 12px;
  min-height: 0;
  padding: 20px;
  background:
    radial-gradient(circle at top right, rgba(45, 111, 219, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.97));
}

.offer-html-preview-panel.is-modal-open {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 75;
  width: min(1120px, calc(100vw - 28px));
  height: calc(100vh - 36px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(190, 204, 230, 0.92);
  border-radius: 24px;
  box-shadow: 0 30px 96px rgba(31, 48, 84, 0.26);
}

.offer-html-preview-content {
  min-height: 0;
  overflow: auto;
  padding: 28px 34px;
  border: 1px solid rgba(191, 205, 229, 0.84);
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
  font-family: Arial, sans-serif;
  font-size: 0.94rem;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.offer-html-preview-content h1,
.offer-html-preview-content h2,
.offer-html-preview-content h3 {
  margin: 0 0 0.75em;
  color: #0f172a;
  line-height: 1.2;
}

.offer-html-preview-content p {
  margin: 0 0 0.85em;
}

.offer-html-preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.offer-html-preview-content th,
.offer-html-preview-content td {
  padding: 7px 9px;
  border: 1px solid #d7dfec;
  vertical-align: top;
}

.offer-html-preview-content img {
  max-width: 100%;
  height: auto;
}

.offer-html-preview-messages {
  display: grid;
  gap: 6px;
  max-height: 120px;
  overflow: auto;
}

.offer-html-preview-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid rgba(210, 190, 104, 0.64);
  border-radius: 12px;
  background: rgba(255, 247, 214, 0.72);
  color: #62470b;
  font-size: 0.78rem;
}

body.is-offer-html-preview-open {
  overflow: hidden;
}

.offers-template-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
}

.offers-template-panel.is-modal-open {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 70;
  height: calc(100vh - 28px);
  max-height: none;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(206, 212, 228, 0.94);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
  border-radius: 28px;
}

body.is-offer-template-open {
  overflow: hidden;
}

.offers-editor-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: stretch;
}

.offers-editor-meta-actions {
  display: grid;
  grid-template-columns: 40px 40px minmax(132px, auto);
  gap: 8px;
  justify-content: end;
  align-items: stretch;
}

.offer-icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
}

.offer-icon-button.has-label {
  display: inline-flex;
  width: auto;
  min-width: 0;
  gap: 8px;
  padding: 0 14px;
  font-weight: 700;
}

.offer-icon-button svg {
  width: 16px;
  height: 16px;
}

.offer-icon-button.has-label svg {
  flex: 0 0 auto;
}

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

.offer-text-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.offer-text-template-toolbar,
.offer-text-placeholder-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-text-template-select-field {
  flex: 1 1 240px;
  min-width: min(100%, 240px);
}

.offer-text-placeholder-row {
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(197, 209, 230, 0.76);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.78);
}

.offer-text-placeholder-row > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offer-text-placeholder-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.offer-text-placeholder-button {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.offer-extra-text-toggle {
  width: fit-content;
  min-height: 38px;
  padding-inline: 14px;
  margin-top: 4px;
  border-color: rgba(197, 209, 230, 0.9);
  background: rgba(255, 255, 255, 0.86);
}

.offer-text-block-field textarea {
  min-height: 96px;
  resize: vertical;
}

.offers-items-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-pricing-copy-menu {
  position: fixed;
  z-index: 1200;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(190, 204, 230, 0.92);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 44px rgba(34, 47, 82, 0.2);
}

.offer-pricing-copy-option {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(205, 216, 235, 0.82);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.offer-pricing-copy-option:hover {
  border-color: rgba(79, 125, 230, 0.52);
  background: #ffffff;
}

.offer-pricing-copy-option span,
.offer-pricing-copy-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.offer-location-field {
  position: relative;
  display: grid;
  gap: 8px;
}

.offer-location-trigger {
  width: 100%;
  padding: 0;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(189, 204, 229, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.offer-location-trigger:hover:not(:disabled) {
  border-color: rgba(101, 138, 202, 0.62);
}

.offer-location-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.offer-location-preview {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.offer-location-preview-title {
  color: var(--text);
  font-size: 0.94rem;
}

.offer-location-preview-meta {
  color: var(--muted);
  font-size: 0.8rem;
}

.offer-location-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(196, 210, 233, 0.9);
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(243, 247, 255, 0.96));
  box-shadow: 0 18px 36px rgba(39, 57, 98, 0.12);
  max-height: 280px;
  overflow: auto;
}

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

.offer-location-summary-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(115, 144, 198, 0.42);
  background: rgba(235, 242, 255, 0.82);
  color: #36558b;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.offer-location-list {
  display: grid;
  gap: 8px;
}

.offer-location-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(205, 216, 234, 0.84);
  background: rgba(255, 255, 255, 0.92);
}

.offer-location-option.is-selected {
  border-color: rgba(101, 138, 202, 0.62);
  background: linear-gradient(180deg, rgba(243, 247, 255, 0.98), rgba(236, 243, 255, 0.94));
  box-shadow: 0 12px 24px rgba(48, 74, 123, 0.1);
}

.offer-location-option-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.offer-location-option-copy strong {
  color: var(--text);
}

.offer-location-option-copy span {
  color: var(--muted);
  font-size: 0.8rem;
}

.offer-location-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.offer-location-mini-action {
  min-height: 32px;
  padding-inline: 12px;
}

.offer-list-card {
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border-left-width: 6px;
  box-shadow: 0 14px 28px rgba(30, 47, 82, 0.08);
}

.offer-list-card-body,
.offer-list-card-footer-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.offer-list-card-chips,
.offer-list-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-list-card-footer {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.offer-list-card-total {
  padding-left: 4px;
  font-size: 1rem;
  font-weight: 800;
}

.offer-item-row {
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(194, 208, 228, 0.8);
  background:
    radial-gradient(circle at top right, rgba(76, 138, 255, 0.05), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92));
  box-shadow: 0 16px 30px rgba(38, 55, 88, 0.08);
}

.offer-item-row.has-discount {
  border-color: rgba(239, 168, 88, 0.55);
}

.offer-item-row.has-breakdown {
  border-color: rgba(121, 112, 255, 0.42);
}

.offer-item-row.is-main-fee {
  border-color: rgba(86, 162, 116, 0.42);
  background:
    radial-gradient(circle at top right, rgba(87, 181, 127, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 249, 0.94));
}

.offer-item-row.is-included-service {
  border-color: rgba(86, 162, 116, 0.38);
  background:
    radial-gradient(circle at top right, rgba(87, 181, 127, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 249, 0.94));
}

.offer-fixed-included-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(134, 183, 155, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(87, 181, 127, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(249, 253, 250, 0.98), rgba(241, 249, 245, 0.94));
}

.offer-fixed-included-section strong {
  color: #14532d;
}

.offer-fixed-included-section p {
  margin: 3px 0 0;
}

.offer-hybrid-services-section {
  border-color: rgba(37, 99, 235, 0.28);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 35%),
    linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(241, 247, 255, 0.94));
}

.offer-hybrid-services-section strong {
  color: #1d4ed8;
}

.offer-fixed-included-add {
  flex: 0 0 auto;
}

.offer-item-head-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-item-main-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.7fr) minmax(0, 1.15fr);
  gap: 10px;
  align-items: end;
}

.offer-item-row.has-breakdown .offer-item-main-grid {
  grid-template-columns: minmax(0, 1fr);
}

.offer-item-row.has-breakdown .offer-item-field.is-description input {
  min-height: 44px;
  font-weight: 700;
}

.offer-item-metrics {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
}

.offer-item-mini-action,
.offer-summary-toggle {
  border-color: rgba(197, 209, 230, 0.9);
  background: rgba(255, 255, 255, 0.92);
}

.offer-item-mini-action.is-active,
.offer-summary-toggle.is-active {
  border-color: rgba(118, 97, 255, 0.46);
  background: linear-gradient(135deg, rgba(246, 240, 255, 0.98), rgba(236, 244, 255, 0.96));
  box-shadow: 0 12px 22px rgba(123, 97, 255, 0.18);
  color: #4f46e5;
}

.offer-item-mini-action.is-active::before,
.offer-summary-toggle.is-active::before {
  background: linear-gradient(135deg, rgba(123, 97, 255, 0.18), rgba(64, 159, 255, 0.16));
  color: #4338ca;
}

.offer-item-breakdowns {
  gap: 8px;
  margin-left: -8px;
  margin-right: -2px;
  padding: 12px;
  border-radius: 16px;
  border-color: rgba(198, 210, 230, 0.72);
  border-left: 4px solid rgba(99, 102, 241, 0.42);
  background:
    radial-gradient(circle at top left, rgba(125, 105, 255, 0.07), transparent 32%),
    linear-gradient(180deg, rgba(250, 251, 255, 0.96), rgba(245, 248, 255, 0.9));
}

.offer-item-breakdowns .field {
  gap: 4px;
}

.offer-item-breakdowns .field input,
.offer-item-breakdowns .field select {
  min-height: 36px;
}

.offer-item-breakdowns-head {
  align-items: center;
}

.offer-item-breakdown-list {
  gap: 7px;
}

.offer-item-breakdown-row {
  padding: 9px;
  border: 1px solid rgba(198, 210, 230, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 20px rgba(31, 45, 80, 0.06);
}

.offer-item-breakdown-row .field > span {
  color: #5f6f95;
  font-size: 0.64rem;
  letter-spacing: 0.075em;
}

.offer-item-breakdown-row .field input,
.offer-item-breakdown-row .field select {
  border-color: rgba(186, 201, 226, 0.86);
  background: rgba(255, 255, 255, 0.98);
}

.offer-service-add-menu {
  position: fixed;
  z-index: 12000;
  display: grid;
  gap: 10px;
  max-height: min(520px, calc(100vh - 32px));
  padding: 12px;
  border: 1px solid rgba(188, 205, 229, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(30, 41, 59, 0.18);
}

.offer-service-add-head,
.offer-service-add-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.offer-service-add-search {
  width: 100%;
  min-height: 38px;
}

.offer-service-add-list {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}

.offer-service-add-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed rgba(188, 205, 229, 0.92);
  border-radius: 12px;
  color: #65728b;
  font-size: 0.78rem;
}

.offer-service-add-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(207, 216, 234, 0.88);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.offer-service-add-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.offer-service-add-option small {
  color: var(--muted);
}

.offer-service-add-small {
  min-height: 34px;
  padding-inline: 12px;
}

.offer-item-total {
  min-width: 120px;
}

.offers-discount-controls {
  gap: 10px;
}

.offer-template-body {
  padding-top: 14px;
  align-content: stretch;
  min-height: 0;
  overflow-x: hidden;
}

.offer-template-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
  min-width: 0;
}

.offer-template-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(194, 208, 228, 0.82);
  background:
    radial-gradient(circle at top right, rgba(80, 142, 255, 0.05), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.94));
  box-shadow: 0 16px 32px rgba(39, 56, 87, 0.1);
  min-height: 0;
  min-width: 0;
}

.offer-template-card:last-child {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.offer-template-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.offer-template-reference-body {
  display: grid;
  gap: 14px;
}

.offer-template-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.offer-template-reference-meta {
  display: grid;
  gap: 12px;
}

.offer-template-reference-empty {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(181, 192, 211, 0.92);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.74);
}

.offer-template-reference-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(184, 206, 190, 0.82);
  background: linear-gradient(180deg, rgba(243, 251, 245, 0.98), rgba(235, 247, 239, 0.94));
}

.offer-template-copy {
  margin: 0;
}

.offer-template-placeholder-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  max-height: calc(100vh - 290px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  padding-bottom: 10px;
  align-content: start;
  scrollbar-gutter: stable;
}

.offer-template-placeholder-chip {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(194, 208, 228, 0.88);
  background: rgba(255, 255, 255, 0.94);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.offer-template-placeholder-chip:hover {
  border-color: rgba(105, 135, 201, 0.6);
  box-shadow: 0 14px 24px rgba(44, 67, 107, 0.12);
  transform: translateY(-1px);
}

.offer-template-placeholder-chip strong {
  color: #1e40af;
  font-size: 0.84rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.offer-template-placeholder-chip span {
  color: var(--text);
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.offer-template-placeholder-chip small {
  color: var(--muted);
  font-size: 0.78rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.offer-template-placeholder-preview {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(239, 244, 255, 0.92);
  color: #38507c;
  font-size: 0.76rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.contract-template-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1fr) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}

.contract-template-list {
  display: grid;
  gap: 10px;
}

.contract-template-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(194, 208, 228, 0.88);
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.contract-template-row:hover,
.contract-template-row.is-active {
  border-color: rgba(106, 122, 255, 0.45);
  box-shadow: 0 14px 24px rgba(55, 74, 122, 0.12);
  transform: translateY(-1px);
}

.contract-template-row strong {
  color: var(--text-strong);
}

.contract-template-row span,
.contract-template-row small {
  color: var(--muted);
}

.contract-offers-picker {
  display: grid;
  gap: 10px;
}

.contract-offer-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(194, 208, 228, 0.88);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
}

.contract-offer-option.is-selected {
  border-color: rgba(85, 127, 224, 0.55);
  background: linear-gradient(180deg, rgba(244, 248, 255, 0.98), rgba(236, 242, 255, 0.94));
}

.contract-offer-option input {
  margin-top: 3px;
}

.contract-offer-option-copy {
  display: grid;
  gap: 4px;
}

.contract-offer-option-copy span {
  color: var(--muted);
  font-size: 0.88rem;
}

.contract-annex-list {
  display: grid;
  gap: 12px;
}

.contract-annex-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(194, 208, 228, 0.82);
  background: rgba(255, 255, 255, 0.88);
}

.contract-annex-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 26px;
}

.contract-list-card.is-active,
.contract-list-card:hover {
  border-color: rgba(106, 122, 255, 0.42);
}

@media (min-width: 1121px) {
  .offer-template-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    overflow-y: hidden;
  }

  .offer-template-layout {
    height: 100%;
    align-items: stretch;
  }

  .offer-template-card:last-child {
    height: 100%;
  }

  .offer-template-placeholder-list {
    height: 100%;
    max-height: none;
  }
}

@media (max-width: 1120px) {
  .offers-editor-panel.is-modal-open,
  .offers-template-panel.is-modal-open {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    top: 10px;
  }

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

  .offer-item-main-grid,
  .offer-template-layout,
  .contract-template-layout {
    grid-template-columns: 1fr;
  }

  .offer-template-body {
    overflow-y: auto;
  }

  .offer-template-placeholder-list {
    max-height: min(52vh, 520px);
  }

  .contract-annex-row {
    grid-template-columns: 1fr 1fr;
  }

  .contract-annex-actions {
    padding-top: 0;
  }
}

@media (max-width: 760px) {
  .offers-panel-actions,
  .offer-location-actions,
  .offer-list-card-actions,
  .offer-template-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .offers-editor-meta,
  .offer-template-placeholder-list,
  .offers-form-grid,
  .offers-filters,
  .offer-item-main-grid,
  .offer-text-blocks,
  .offer-item-metrics {
    grid-template-columns: 1fr;
  }

  .offers-template-panel.is-modal-open,
  .offers-editor-panel.is-modal-open {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    top: 8px;
    border-radius: 22px;
  }

  .offers-editor-meta-actions {
    justify-content: flex-start;
  }

  .contract-annex-row {
    grid-template-columns: 1fr;
  }

  .contract-annex-actions {
    justify-content: flex-start;
  }

  .offer-fixed-included-section {
    align-items: stretch;
    flex-direction: column;
  }
}

.drawing-studio-shell-panel {
  padding: 10px 12px;
}

.drawing-studio-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  min-height: 0;
}

.drawing-studio-list-panel,
.drawing-studio-workspace-panel {
  min-width: 0;
}

.drawing-studio-list-panel {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: end;
  min-height: 0;
  padding: 0 0 10px;
  border-right: 0;
  border-bottom: 1px solid rgba(116, 148, 210, 0.22);
}

.drawing-studio-workspace-panel {
  min-height: 0;
  padding-left: 0;
}

.drawing-project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 1 / -1;
  min-height: 0;
  max-height: 126px;
  overflow: auto;
  padding: 2px 4px 0 0;
}

#drawing-empty.helper-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  min-height: 68px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 22px;
  border: 1px dashed rgba(117, 144, 206, 0.22);
  background: rgba(248, 251, 255, 0.84);
  text-align: center;
}

.drawing-studio-list-panel > .section-heading {
  margin: 0;
}

.drawing-studio-list-panel > .drawing-studio-filters {
  margin: 0;
}

.drawing-studio-filters {
  grid-template-columns: minmax(0, 1.75fr) repeat(2, minmax(150px, 0.5fr));
  gap: 8px;
}

.drawing-studio-list-heading {
  align-items: center;
}

.drawing-project-card {
  border: 1px solid rgba(115, 152, 212, 0.32);
  border-radius: 22px;
  padding: 10px 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.92));
  box-shadow: 0 14px 36px rgba(69, 92, 146, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.drawing-project-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(69, 92, 146, 0.12);
}

.drawing-project-card.is-active {
  border-color: rgba(73, 106, 214, 0.55);
  box-shadow: 0 0 0 1px rgba(73, 106, 214, 0.24), 0 20px 44px rgba(69, 92, 146, 0.16);
}

.drawing-project-card-head,
.drawing-project-card-meta,
.drawing-reference-card-head,
.drawing-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawing-project-card-head h4,
.drawing-reference-card-head strong,
.drawing-layer-row strong {
  margin: 0;
  font-size: 1rem;
  color: #1f2c4a;
}

.drawing-project-card p,
.drawing-project-card span,
.drawing-reference-card p,
.drawing-layer-row span {
  color: #5e6c8f;
}

.drawing-project-card-meta {
  margin-top: 10px;
  flex-wrap: wrap;
}

.drawing-project-card-kicker,
.drawing-project-card-badge,
.drawing-reference-type,
.drawing-layer-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(236, 243, 255, 0.9);
  color: #5270af;
}

.drawing-project-card-badge.is-active {
  background: rgba(229, 249, 239, 0.95);
  color: #25825f;
}

.drawing-project-card-badge.is-archived {
  background: rgba(241, 241, 247, 0.92);
  color: #6d7084;
}

.drawing-studio-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drawing-studio-meta-grid {
  grid-template-columns: minmax(230px, 1.7fr) repeat(5, minmax(108px, 0.78fr));
  gap: 8px;
  align-items: start;
}

.drawing-field-note {
  grid-column: 1 / -1;
}

.drawing-field-note textarea {
  min-height: 64px;
}

.drawing-studio-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(236px, 282px);
  gap: 10px;
  align-items: start;
}

.drawing-studio-shell.is-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.drawing-studio-sidebar,
.drawing-studio-canvas-column {
  min-width: 0;
}

.drawing-studio-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.drawing-studio-shell.is-sidebar-collapsed .drawing-studio-sidebar {
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
}

.drawing-studio-sidebar.is-right {
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 136px);
  overflow: auto;
  padding-right: 2px;
}

.drawing-sidebar-tab {
  position: sticky;
  top: 8px;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-height: 148px;
  padding: 10px 0;
  border-radius: 18px;
  border: 1px solid rgba(108, 132, 193, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.94));
  box-shadow: 0 16px 34px rgba(64, 86, 140, 0.12);
  color: #2d3b5d;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  cursor: pointer;
}

.drawing-studio-shell.is-sidebar-collapsed .drawing-sidebar-tab {
  background: linear-gradient(180deg, rgba(73, 106, 214, 0.14), rgba(95, 168, 255, 0.12));
  border-color: rgba(73, 106, 214, 0.34);
}

.drawing-sidebar-head {
  display: grid;
  gap: 10px;
}

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

.drawing-sidebar-tab-button {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(111, 136, 196, 0.2);
  background: rgba(248, 251, 255, 0.92);
  color: #52607e;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.drawing-sidebar-tab-button.is-active {
  border-color: rgba(73, 106, 214, 0.45);
  background: linear-gradient(135deg, rgba(73, 106, 214, 0.12), rgba(99, 189, 255, 0.12));
  color: #2444a0;
  box-shadow: 0 10px 20px rgba(73, 106, 214, 0.12);
}

.drawing-sidebar-panel[hidden] {
  display: none !important;
}

.drawing-studio-card {
  border: 1px solid rgba(115, 152, 212, 0.28);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.93));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.drawing-studio-card-head,
.drawing-studio-workspace-heading,
.drawing-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.drawing-studio-card-head h4 {
  margin: 0;
  font-size: 1.08rem;
  color: #202d4c;
}

.drawing-tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

.drawing-top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.drawing-top-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.drawing-tool-tabs {
  flex: 1 1 680px;
}

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

.drawing-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  min-height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(109, 132, 196, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.95));
  color: #2b3858;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.drawing-tool-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  font-size: 0.88rem;
  color: #4e67b2;
}

.drawing-tool-button-label {
  white-space: nowrap;
  font-size: 0.9rem;
}

.drawing-tool-button:hover,
.drawing-tool-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(73, 106, 214, 0.45);
  box-shadow: 0 14px 32px rgba(73, 106, 214, 0.12);
}

.drawing-tool-button.is-active {
  border-color: rgba(73, 106, 214, 0.55);
  background: linear-gradient(135deg, rgba(73, 106, 214, 0.12), rgba(99, 189, 255, 0.16));
  color: #2444a0;
  box-shadow: 0 16px 36px rgba(73, 106, 214, 0.16);
}

.drawing-view-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(110, 136, 197, 0.2);
  background: rgba(248, 251, 255, 0.92);
}

.drawing-view-mode-switch .ghost-button {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 12px;
}

.drawing-view-mode-switch .ghost-button.is-active {
  border-color: rgba(73, 106, 214, 0.45);
  background: linear-gradient(135deg, rgba(73, 106, 214, 0.12), rgba(99, 189, 255, 0.12));
  color: #2444a0;
}

.drawing-reference-list,
.drawing-layer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 36vh;
  overflow: auto;
  padding-right: 2px;
}

.drawing-reference-card,
.drawing-layer-row {
  border: 1px solid rgba(120, 151, 212, 0.24);
  border-radius: 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
}

.drawing-reference-card.is-active {
  border-color: rgba(73, 106, 214, 0.45);
  box-shadow: 0 0 0 1px rgba(73, 106, 214, 0.18);
}

.drawing-reference-card p,
.drawing-layer-row p {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.drawing-reference-card-actions,
.drawing-layer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drawing-layer-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.drawing-layer-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(48, 68, 108, 0.15);
  flex-shrink: 0;
}

.drawing-layer-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.drawing-layer-toggle {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(114, 137, 191, 0.28);
  background: rgba(247, 250, 255, 0.95);
  cursor: pointer;
}

.drawing-zoom-field,
.drawing-grid-field,
.drawing-canvas-field {
  min-width: 120px;
}

.drawing-stage-scroll {
  overflow: auto;
  min-height: clamp(780px, calc(100vh - 286px), 1180px);
  max-height: calc(100vh - 232px);
  border-radius: 24px;
  border: 1px solid rgba(115, 152, 212, 0.3);
  padding: 10px;
  background:
    radial-gradient(circle at top, rgba(95, 144, 255, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.94));
}

.drawing-stage {
  position: relative;
  width: 2400px;
  height: 1500px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 255, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(133, 164, 224, 0.22),
    0 24px 48px rgba(76, 100, 154, 0.12);
  transform-origin: top left;
}

.drawing-stage-reference,
.drawing-stage-cad-canvas,
.drawing-stage-svg {
  position: absolute;
  inset: 0;
}

.drawing-stage-reference {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(240, 245, 255, 0.72), rgba(255, 255, 255, 0.35));
}

.drawing-stage-reference.is-cad-reference {
  place-items: stretch;
  background:
    linear-gradient(180deg, rgba(227, 237, 255, 0.8), rgba(243, 248, 255, 0.58)),
    repeating-linear-gradient(
      90deg,
      rgba(71, 95, 158, 0.07) 0,
      rgba(71, 95, 158, 0.07) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(71, 95, 158, 0.07) 0,
      rgba(71, 95, 158, 0.07) 1px,
      transparent 1px,
      transparent 34px
    );
}

.drawing-stage-reference object,
.drawing-stage-reference iframe,
.drawing-stage-reference img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.drawing-stage-reference-empty,
.drawing-stage-reference-unsupported {
  width: min(560px, calc(100% - 64px));
  padding: 24px;
  border-radius: 24px;
  border: 1px dashed rgba(91, 126, 190, 0.34);
  background: rgba(255, 255, 255, 0.82);
  color: #52607f;
  text-align: center;
  line-height: 1.6;
}

.drawing-stage-cad-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: grid;
  gap: 4px;
  max-width: min(360px, calc(100% - 28px));
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(85, 116, 188, 0.2);
  background: rgba(255, 255, 255, 0.88);
  color: #2b3d63;
  box-shadow: 0 12px 28px rgba(72, 92, 141, 0.1);
}

.drawing-stage-cad-badge span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(64, 108, 205, 0.1);
  color: #3155a4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drawing-stage-cad-badge strong {
  font-size: 0.96rem;
}

.drawing-stage-cad-badge small {
  color: #617092;
  font-size: 0.78rem;
}

.drawing-stage-cad-canvas {
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}

.drawing-stage-cad-canvas[hidden] {
  display: none !important;
}

.drawing-stage-cad-status {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 8;
  max-width: min(540px, calc(100% - 40px));
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(99, 129, 189, 0.24);
  background: rgba(255, 255, 255, 0.92);
  color: #30415f;
  box-shadow: 0 18px 32px rgba(74, 94, 141, 0.12);
}

.drawing-stage-cad-status[data-tone="error"] {
  border-color: rgba(203, 74, 74, 0.24);
  background: rgba(255, 244, 244, 0.94);
  color: #8e3434;
}

.drawing-stage-cad-status[data-tone="success"] {
  border-color: rgba(50, 148, 102, 0.24);
  background: rgba(242, 255, 248, 0.94);
  color: #256a4d;
}

.drawing-stage-cad-status[hidden] {
  display: none !important;
}

.drawing-stage-dwg-reference {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.drawing-stage-dwg-reference::before,
.drawing-stage-dwg-reference::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.drawing-stage-dwg-reference::before {
  background:
    linear-gradient(90deg, rgba(56, 91, 167, 0.08) 0 2px, transparent 2px 100%),
    linear-gradient(rgba(56, 91, 167, 0.08) 0 2px, transparent 2px 100%);
  background-size: 120px 120px;
  opacity: 0.35;
}

.drawing-stage-dwg-reference::after {
  background:
    radial-gradient(circle at 18% 20%, rgba(70, 116, 212, 0.16), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(70, 116, 212, 0.12), transparent 22%);
}

.drawing-stage-dwg-preview {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: grid;
  gap: 10px;
  max-width: 880px;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(55, 93, 172, 0.18);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(237, 244, 255, 0.78));
  box-shadow: 0 22px 56px rgba(70, 93, 152, 0.12);
  color: #31415f;
  text-align: left;
  z-index: 2;
}

.drawing-stage-dwg-preview strong {
  font-size: 1.08rem;
  color: #1f3158;
}

.drawing-stage-dwg-preview p {
  margin: 0;
  line-height: 1.65;
}

.drawing-stage-dwg-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 54px;
  z-index: 1;
  pointer-events: none;
}

.drawing-stage-dwg-watermark span {
  display: block;
  font-size: clamp(3.8rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(43, 70, 129, 0.12);
  transform: rotate(-12deg);
  user-select: none;
}

.drawing-stage-dwg-watermark small {
  display: block;
  margin-top: 18px;
  font-size: clamp(1rem, 1.9vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(43, 70, 129, 0.18);
}

.drawing-stage-dwg-chip {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(56, 97, 181, 0.22);
  background: rgba(61, 113, 212, 0.1);
  color: #3155a4;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drawing-stage-svg {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  z-index: 2;
}

.drawing-stage-svg.is-tool-select {
  cursor: default;
}

.drawing-stage.is-reference-mode .drawing-stage-svg {
  opacity: 0;
  pointer-events: none;
}

.drawing-stage-helper {
  margin-top: 6px;
  line-height: 1.4;
  font-size: 0.92rem;
}

.drawing-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 18px;
  border: 1px solid rgba(115, 152, 212, 0.24);
  background: rgba(255, 255, 255, 0.9);
}

.drawing-status-bar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drawing-status-bar-group-meta {
  margin-left: auto;
}

.drawing-status-pill {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(111, 135, 196, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.92));
  color: #2a395c;
  font-weight: 700;
}

button.drawing-status-pill {
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

button.drawing-status-pill:hover,
button.drawing-status-pill:focus-visible,
button.drawing-status-pill.is-active {
  border-color: rgba(73, 106, 214, 0.46);
  box-shadow: 0 14px 28px rgba(73, 106, 214, 0.12);
}

.drawing-status-value {
  display: inline-flex;
  align-items: center;
}

.drawing-status-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(111, 135, 196, 0.24);
  background: rgba(249, 251, 255, 0.95);
}

.drawing-status-checkbox span {
  font-weight: 700;
  color: #2d3c61;
}

.drawing-inspector-grid {
  row-gap: 10px;
}

.drawing-symbol-button {
  justify-content: flex-start;
  align-items: center;
  min-height: 72px;
  text-align: left;
}

.drawing-symbol-preview {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  overflow: visible;
}

.drawing-symbol-preview rect,
.drawing-symbol-preview circle,
.drawing-symbol-preview path,
.drawing-symbol-preview ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drawing-symbol-preview text {
  fill: currentColor;
  font-size: 20px;
  font-weight: 800;
  font-family: inherit;
}

.drawing-element-selected {
  filter: drop-shadow(0 0 12px rgba(73, 106, 214, 0.26));
}

.drawing-resize-handle {
  cursor: nwse-resize;
}

.drawing-stage-selection-box {
  fill: rgba(78, 118, 219, 0.08);
  stroke: rgba(78, 118, 219, 0.9);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.drawing-stage-grid-line {
  stroke: rgba(90, 112, 162, 0.13);
  stroke-width: 1;
}

.drawing-stage-grid-line.is-major {
  stroke: rgba(90, 112, 162, 0.22);
}

.drawing-stage-label {
  font-size: 17px;
  font-weight: 700;
  fill: #23324f;
  pointer-events: none;
}

@media (max-width: 1580px) {
  .drawing-studio-shell {
    grid-template-columns: minmax(0, 1fr) 34px minmax(216px, 252px);
  }
}

@media (max-width: 1220px) {
  .drawing-studio-layout,
  .drawing-studio-shell {
    grid-template-columns: 1fr;
  }

  .drawing-studio-list-panel {
    grid-template-columns: 1fr;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(116, 148, 210, 0.22);
  }

  .drawing-studio-filters,
  .drawing-studio-meta-grid {
    grid-template-columns: 1fr;
  }

  .drawing-field-note {
    grid-column: auto;
  }

  .drawing-studio-workspace-panel {
    padding-left: 0;
  }

  .drawing-project-list {
    max-height: none;
  }

  .drawing-sidebar-tab {
    display: none;
  }

  .drawing-stage {
    width: 1280px;
    height: 860px;
  }

  .drawing-status-bar-group-meta {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .drawing-tool-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .drawing-stage-scroll {
    min-height: 560px;
    padding: 14px;
  }

  .drawing-stage {
    width: 1080px;
    height: 760px;
  }

  .drawing-block-buttons {
    grid-template-columns: 1fr;
  }
}

.auth-story-line {
  margin: 0;
  min-height: 2.6em;
  line-height: 1.42;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    filter 220ms ease;
}

.auth-story-byline {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f5ea8;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    filter 220ms ease;
}

.auth-story-floating {
  position: absolute;
  right: clamp(28px, 4.2vw, 86px);
  bottom: clamp(34px, 5.8vh, 84px);
  z-index: 1;
  width: min(42vw, 540px);
  display: grid;
  justify-items: stretch;
  gap: 6px;
  transform: none;
  pointer-events: none;
}

.auth-story-floating .auth-story-line,
.auth-story-floating .auth-story-byline {
  min-height: 0;
}

.auth-story-floating-quote {
  width: 100%;
  color: rgba(236, 247, 255, 0.96);
  text-align: right;
  font-size: clamp(1rem, 1.72vw, 1.42rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  text-shadow: 0 12px 30px rgba(6, 34, 85, 0.42);
}

.auth-story-floating-author {
  width: 100%;
  text-align: right;
  padding-right: 2px;
  color: rgba(223, 240, 255, 0.96);
  text-shadow: 0 10px 24px rgba(6, 34, 85, 0.34);
}

.auth-story-line.is-story-leaving,
.auth-story-byline.is-story-leaving {
  opacity: 0;
  transform: translateY(-8px);
  filter: blur(2px);
}

.auth-story-line.is-story-entering,
.auth-story-byline.is-story-entering {
  animation: auth-story-enter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes auth-story-enter {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 980px) {
  .auth-story-floating {
    right: 16px;
    left: 16px;
    width: auto;
    bottom: 14px;
    justify-items: stretch;
  }

  .auth-story-floating-quote,
  .auth-story-floating-author {
    text-align: center;
    text-shadow: 0 8px 18px rgba(6, 34, 85, 0.28);
  }
}

.auth-minimal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.auth-minimal-card::before {
  content: "";
  position: absolute;
  inset: -56% -26%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 28% 28%, rgba(130, 200, 255, 0.42), rgba(130, 200, 255, 0) 44%),
    radial-gradient(circle at 74% 72%, rgba(22, 122, 255, 0.35), rgba(22, 122, 255, 0) 48%);
  transform: translate3d(0, 28px, 0) scale(0.95);
}

.auth-minimal-card > * {
  position: relative;
  z-index: 1;
}

.auth-page .auth-minimal-card {
  transform-origin: 50% 62%;
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.968);
  filter: blur(12px);
}

.auth-page.is-auth-ready .auth-minimal-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  animation:
    auth-card-in-strong 860ms cubic-bezier(0.2, 1, 0.3, 1) forwards,
    auth-card-breathe 7.8s ease-in-out 1s infinite;
}

.auth-page.is-auth-ready .auth-minimal-card::before {
  animation:
    auth-card-glow-in 980ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both,
    auth-card-glow-drift 10.5s linear 1.12s infinite;
}

.auth-page .auth-screen .auth-brand-mark,
.auth-page .auth-screen .auth-brand-wordmark {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

.auth-page.is-auth-ready .auth-screen .auth-brand-mark {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation:
    auth-logo-pop 620ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both,
    auth-logo-hover 6.8s ease-in-out 920ms infinite;
}

.auth-page.is-auth-ready .auth-screen .auth-brand-wordmark {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: auth-wordmark-in 580ms 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-login-copy h1 {
  position: relative;
}

.auth-login-copy h1::after {
  content: "";
  display: block;
  width: min(78px, 26%);
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(19, 97, 223, 0.22), rgba(41, 166, 255, 0.95), rgba(19, 97, 223, 0.22));
  opacity: 0.32;
  transform: scaleX(0.55);
  transform-origin: 50% 50%;
}

.auth-page.is-auth-ready .auth-login-copy h1::after {
  opacity: 0.9;
  transform: scaleX(1);
  transition: transform 460ms 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 360ms 300ms ease;
}

.auth-page.is-auth-ready .auth-form-tenant .field .auth-input-shell {
  animation: auth-input-focus-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(1) .auth-input-shell {
  animation-delay: 300ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(2) .auth-input-shell {
  animation-delay: 360ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(3) .auth-input-shell {
  animation-delay: 420ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(4) .auth-input-shell {
  animation-delay: 480ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(5) .auth-input-shell {
  animation-delay: 540ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(6) .auth-input-shell {
  animation-delay: 600ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(7) .auth-input-shell {
  animation-delay: 660ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(8) .auth-input-shell {
  animation-delay: 720ms;
}

.auth-page.is-auth-ready .auth-form-tenant .field:nth-of-type(9) .auth-input-shell {
  animation-delay: 780ms;
}

.auth-submit-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.auth-submit-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0.62) 48%,
    rgba(255, 255, 255, 0) 76%
  );
  transform: translateX(-136%);
  opacity: 0;
}

.auth-page.is-auth-ready .auth-submit-button::after {
  animation: auth-button-sheen 980ms 760ms ease-out both;
}

.auth-submit-button:hover::after,
.auth-submit-button:focus-visible::after {
  animation: auth-button-sheen 980ms ease-out;
}

.auth-page .auth-story-floating {
  opacity: 0;
  transform: translate3d(20px, 16px, 0);
  filter: blur(6px);
}

.auth-page.is-auth-ready .auth-story-floating {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none;
  transition:
    opacity 560ms 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 560ms 420ms ease;
}

.auth-page.is-auth-leaving .auth-story-floating {
  opacity: 0;
  transform: translate3d(14px, -10px, 0);
  filter: blur(4px);
  transition:
    opacity 180ms ease,
    transform 220ms ease,
    filter 180ms ease;
}

@keyframes auth-card-in-strong {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.968);
    filter: blur(12px);
  }

  58% {
    opacity: 1;
    transform: translate3d(0, -6px, 0) scale(1.01);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes auth-card-breathe {
  0% {
    box-shadow:
      0 30px 72px rgba(7, 33, 87, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  50% {
    box-shadow:
      0 40px 86px rgba(7, 33, 87, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  100% {
    box-shadow:
      0 30px 72px rgba(7, 33, 87, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
}

@keyframes auth-card-glow-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes auth-card-glow-drift {
  0% {
    transform: translate3d(-2%, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(3%, -2%, 0) scale(1.04);
  }

  100% {
    transform: translate3d(-2%, 0, 0) scale(1);
  }
}

@keyframes auth-logo-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    filter: blur(3px);
  }

  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes auth-logo-hover {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-2px) scale(1.015);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes auth-wordmark-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
    letter-spacing: -0.02em;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: -0.065em;
  }
}

@keyframes auth-input-focus-in {
  0% {
    border-color: rgba(127, 155, 204, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      0 0 0 0 rgba(36, 141, 255, 0);
  }

  45% {
    border-color: rgba(36, 141, 255, 0.6);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 0 0 3px rgba(36, 141, 255, 0.13);
  }

  100% {
    border-color: #d9e3f2;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 8px 18px rgba(17, 54, 124, 0.06);
  }
}

@keyframes auth-button-sheen {
  0% {
    transform: translateX(-136%);
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }

  100% {
    transform: translateX(136%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page .auth-minimal-card,
  .auth-page .auth-minimal-card::before,
  .auth-page .auth-screen .auth-brand-mark,
  .auth-page .auth-screen .auth-brand-wordmark,
  .auth-page .auth-form-tenant .field .auth-input-shell,
  .auth-page .auth-story-floating {
    animation: none !important;
    transition: none !important;
  }

  .auth-page .auth-screen .auth-brand-mark,
  .auth-page .auth-screen .auth-brand-wordmark,
  .auth-page .auth-story-floating {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .auth-page .auth-minimal-card::before {
    opacity: 0.35 !important;
    transform: none !important;
  }

  .auth-page .auth-submit-button::after {
    animation: none !important;
    opacity: 0 !important;
    transform: translateX(-136%) !important;
  }
}

.auth-form.auth-form-tenant .auth-input-shell.is-plain input,
.auth-form.auth-form-tenant .auth-input-shell.is-plain input:hover,
.auth-form.auth-form-tenant .auth-input-shell.is-plain input:focus,
.auth-form.auth-form-tenant .auth-input-shell.is-plain input:active {
  padding-left: 14px !important;
}

.document-template-editor-panel.is-modal-open.is-fill-mode {
  --document-template-runtime-nav-gutter: 76px;
  left: var(--document-template-runtime-nav-gutter) !important;
  right: var(--document-template-runtime-nav-gutter) !important;
  width: auto !important;
  transform: none !important;
}

.document-template-runtime-side-nav.is-prev {
  left: 14px !important;
}

.document-template-runtime-side-nav.is-next {
  right: 14px !important;
}

@media (max-width: 960px) {
  .document-template-editor-panel.is-modal-open.is-fill-mode {
    --document-template-runtime-nav-gutter: 58px;
    left: var(--document-template-runtime-nav-gutter) !important;
    right: var(--document-template-runtime-nav-gutter) !important;
    width: auto !important;
  }

  .document-template-runtime-side-nav.is-prev {
    left: 6px !important;
  }

  .document-template-runtime-side-nav.is-next {
    right: 6px !important;
  }
}

/* Final RN editor layout pass: keep the opening flow compact and predictable. */
.work-order-editor-form {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 12px !important;
}

.work-order-editor-section[data-work-order-section] {
  width: 100%;
  min-height: 0;
  align-self: stretch;
}

button.work-order-editor-section-head {
  min-height: 44px;
  padding: 8px 12px 8px 16px;
}

.work-order-editor-section-head h3 {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.15;
}

.work-order-editor-section-kicker {
  display: none;
}

.work-order-section-mark,
.work-order-section-toggle-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 11px;
}

.work-order-section-mark svg,
.work-order-section-toggle-icon svg {
  width: 15px;
  height: 15px;
}

.work-order-editor-section-body {
  padding: 10px 14px 12px 18px;
}

.work-order-editor-section.is-client-identity .work-order-editor-section-body {
  padding: 10px 14px 12px 18px;
}

.work-order-company-card-wrap {
  display: block;
}

.work-order-company-picker {
  min-height: 68px;
  padding: 10px 94px 10px 12px;
}

.work-order-company-picker::after {
  right: 12px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 0.74rem;
}

.work-order-company-picker .company-selection-preview-logo {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 14px;
}

.work-order-company-picker .company-selection-preview-copy {
  gap: 2px;
}

.work-order-company-picker .company-selection-preview-copy strong {
  font-size: 0.98rem;
}

.work-order-company-picker .company-selection-preview-copy span {
  font-size: 0.8rem;
}

.work-order-editor-form .field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 14px;
}

.work-order-editor-form .work-order-field-heading {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  justify-content: center;
  gap: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

.work-order-editor-form .work-order-field-label {
  display: none !important;
}

.work-order-editor-form .work-order-field-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--section-accent);
  font-size: 0.78rem;
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea,
.work-order-editor-executor-picker,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  min-width: 0;
}

.work-order-editor-form input,
.work-order-editor-form select {
  min-height: 38px;
}

.work-order-editor-form textarea,
.work-order-inline-note textarea {
  min-height: 68px;
}

.form-grid-work-order-rn {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.form-grid-location-contact {
  grid-template-columns: minmax(150px, 0.75fr) minmax(420px, 2.2fr) minmax(180px, 0.95fr) minmax(180px, 0.95fr);
}

.form-grid-executors {
  grid-template-columns: minmax(360px, 3fr) minmax(180px, 1fr);
}

.form-grid-service-main {
  grid-template-columns: minmax(180px, 0.75fr) minmax(420px, 2.25fr);
}

.form-grid-billing {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.form-grid-location-contact .field-span-3 {
  grid-column: span 2;
}

.work-order-inline-note {
  align-items: start;
}

.work-order-inline-note .work-order-field-heading {
  margin-top: 5px;
}

@media (max-width: 1180px) {
  .form-grid-work-order-rn,
  .form-grid-location-contact,
  .form-grid-executors,
  .form-grid-service-main,
  .form-grid-billing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid-location-contact .field-span-3,
  .work-order-editor-form .field-span-2,
  .work-order-editor-form .field-span-3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .form-grid-work-order-rn,
  .form-grid-location-contact,
  .form-grid-executors,
  .form-grid-service-main,
  .form-grid-billing {
    grid-template-columns: 1fr;
  }

  .work-order-company-picker {
    min-height: 62px;
    padding-right: 72px;
  }

.work-order-company-picker::after {
    content: "";
    width: 34px;
    padding: 0;
  }
}

/* RN editor linear order: client, dates, status, location. */
.work-order-company-preview-inline {
  display: none !important;
}

.work-order-editor-section.is-work-order-basics {
  --section-accent: #2fb06f;
  --section-accent-soft: rgba(47, 176, 111, 0.11);
  --section-accent-line: rgba(47, 176, 111, 0.38);
}

.work-order-editor-section.is-work-order-basics .work-order-editor-section-body {
  gap: 8px;
}

.form-grid-work-order-client {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-grid-work-order-dates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid-work-order-status {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid-location-contact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.form-grid-location-contact .field-span-3 {
  grid-column: span 3;
}

.form-grid-location-contact .field-span-2,
.form-grid-work-order-client .field-span-2 {
  grid-column: span 2;
}

.work-order-editor-form .field > input[readonly] {
  background: linear-gradient(180deg, #fbfdff, #f2f7f4);
  color: #27384d;
}

.work-order-editor-form .entity-link-actions {
  margin: 0;
  padding: 0 2px;
}

@media (max-width: 1180px) {
  .form-grid-work-order-client,
  .form-grid-work-order-dates,
  .form-grid-work-order-status,
  .form-grid-location-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid-work-order-client .field-span-2,
  .form-grid-location-contact .field-span-2,
  .form-grid-location-contact .field-span-3 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .form-grid-work-order-client,
  .form-grid-work-order-dates,
  .form-grid-work-order-status,
  .form-grid-location-contact {
    grid-template-columns: 1fr;
  }
}

/* RN editor requested order: status, client, location, contact, executors, services, billing. */
.work-order-editor-section.is-work-order-status {
  --section-accent: #3478f6;
  --section-accent-soft: rgba(52, 120, 246, 0.12);
  --section-accent-line: rgba(52, 120, 246, 0.4);
}

.work-order-editor-section.is-work-order-location {
  --section-accent: #18a77b;
  --section-accent-soft: rgba(24, 167, 123, 0.12);
  --section-accent-line: rgba(24, 167, 123, 0.38);
}

.work-order-editor-section.is-work-order-contact {
  --section-accent: #7b61ff;
  --section-accent-soft: rgba(123, 97, 255, 0.12);
  --section-accent-line: rgba(123, 97, 255, 0.38);
}

.form-grid-work-order-status-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-grid-work-order-note {
  grid-template-columns: minmax(180px, 0.72fr) minmax(360px, 2.28fr);
}

.form-grid-work-order-client {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-grid-location-contact {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.form-grid-work-order-contact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid-executors {
  grid-template-columns: 1fr;
}

.form-grid-service-main {
  grid-template-columns: minmax(180px, 0.8fr) minmax(420px, 2.2fr);
}

.form-grid-billing {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-grid-service-main .work-order-service-selection-field {
  grid-column: 1 / -1;
}

.form-grid-billing .field {
  min-width: 0;
}

.form-grid-billing textarea {
  min-height: 38px !important;
  resize: vertical;
}

.form-grid-work-order-contact .field-span-2,
.form-grid-location-contact .field-span-2,
.form-grid-work-order-client .field-span-2 {
  grid-column: span 2;
}

.form-grid-location-contact .field-span-3 {
  grid-column: span 3;
}

@media (max-width: 1180px) {
  .form-grid-work-order-status-row,
  .form-grid-work-order-note,
  .form-grid-work-order-client,
  .form-grid-location-contact,
  .form-grid-work-order-contact,
  .form-grid-service-main,
  .form-grid-billing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid-work-order-note .work-order-inline-note,
  .form-grid-work-order-client .field-span-2,
  .form-grid-location-contact .field-span-2,
  .form-grid-location-contact .field-span-3,
  .form-grid-work-order-contact .field-span-2,
  .form-grid-service-main .work-order-service-selection-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .form-grid-work-order-status-row,
  .form-grid-work-order-note,
  .form-grid-work-order-client,
  .form-grid-location-contact,
  .form-grid-work-order-contact,
  .form-grid-service-main,
  .form-grid-billing {
    grid-template-columns: 1fr;
  }
}

/* RN editor compact labels above fields, no empty rows. */
.work-order-editor-form .field {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch;
  gap: 5px;
  padding: 7px 8px;
}

.work-order-editor-form .work-order-field-heading {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  justify-content: flex-start;
  gap: 6px !important;
  color: #50617d !important;
  font-size: 0.62rem !important;
  font-weight: 900;
  letter-spacing: 0.07em !important;
  line-height: 1;
  text-transform: uppercase;
}

.work-order-editor-form .work-order-field-label {
  display: inline-flex !important;
}

.work-order-editor-form .work-order-field-icon {
  width: 18px;
  height: 18px;
  border-radius: 8px;
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  min-height: 38px;
}

.form-grid-work-order-status-row {
  grid-template-columns:
    minmax(142px, 1fr)
    minmax(148px, 1fr)
    minmax(148px, 1fr)
    minmax(126px, 0.9fr)
    minmax(130px, 0.95fr)
    minmax(190px, 1.28fr);
}

.form-grid-work-order-client {
  grid-template-columns: minmax(300px, 2fr) minmax(300px, 2fr) minmax(180px, 1fr);
}

.form-grid-work-order-client .field-span-2 {
  grid-column: auto;
}

.form-grid-location-contact {
  grid-template-columns: minmax(380px, 2.2fr) minmax(220px, 1.15fr) minmax(180px, 0.9fr);
}

.form-grid-location-contact .field-span-2,
.form-grid-location-contact .field-span-3 {
  grid-column: auto;
}

.form-grid-work-order-contact {
  grid-template-columns: minmax(260px, 1.35fr) minmax(190px, 0.95fr) minmax(320px, 1.7fr);
}

.form-grid-work-order-contact .field-span-2 {
  grid-column: auto;
}

.form-grid-service-main {
  grid-template-columns: minmax(340px, 1fr);
}

.form-grid-service-main .work-order-services-field,
.form-grid-service-main .work-order-service-selection-field {
  grid-column: 1 / -1;
}

.form-grid-billing {
  grid-template-columns:
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    minmax(170px, 0.9fr);
}

.work-order-service-type-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 6px;
}

.work-order-service-type-tab {
  min-height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(191, 207, 235, 0.9);
  background: linear-gradient(180deg, #ffffff, #f5f8fd);
  color: #263653;
  font-weight: 850;
  cursor: pointer;
}

.work-order-service-type-tab.is-active {
  border-color: rgba(38, 123, 246, 0.55);
  background: linear-gradient(180deg, #eaf2ff, #dfeaff);
  color: #174ea6;
}

.work-order-service-type-tab:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 1180px) {
  .form-grid-work-order-status-row,
  .form-grid-work-order-client,
  .form-grid-location-contact,
  .form-grid-work-order-contact,
  .form-grid-billing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .form-grid-work-order-status-row,
  .form-grid-work-order-client,
  .form-grid-location-contact,
  .form-grid-work-order-contact,
  .form-grid-billing,
  .work-order-service-type-tabs {
    grid-template-columns: 1fr;
  }
}

/* RN editor final polish: visible labels, required-field blink and PDF action. */
.work-order-editor-form .field > span,
.work-order-editor-form .work-order-field-heading {
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: #44556f !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.work-order-editor-form .work-order-field-label {
  display: inline-flex !important;
}

.work-order-editor-form .field.has-required-attention {
  border-color: rgba(213, 71, 113, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 251, 0.98)),
    linear-gradient(135deg, rgba(247, 68, 143, 0.14), rgba(79, 135, 255, 0.08)) !important;
  box-shadow:
    0 0 0 3px rgba(238, 85, 150, 0.13),
    0 14px 24px rgba(215, 72, 128, 0.13) !important;
  animation: workOrderRequiredBlink 1.35s ease-in-out infinite;
}

.work-order-editor-form .field.has-required-attention .work-order-field-heading,
.work-order-editor-form .field.has-required-attention > span {
  color: #b92862 !important;
}

.work-order-download-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  min-height: 36px;
  padding: 0 !important;
  border-color: rgba(61, 139, 96, 0.42) !important;
  background: linear-gradient(180deg, #f4fff8, #e7f8ee) !important;
  color: #1f6f43 !important;
  font-size: 0;
  font-weight: 900;
}

.work-order-download-pdf svg {
  width: 17px;
  height: 17px;
}

.work-order-download-pdf:not(:disabled) {
  box-shadow: 0 10px 20px rgba(38, 130, 77, 0.14);
}

.work-order-download-pdf.is-loading {
  opacity: 0.72;
  cursor: wait;
}

.work-order-service-item-title-row .work-order-service-code-badge,
.work-order-service-template-hint {
  display: none !important;
}

/* Premium RN modal pass: top summary cards stay visible and the editor reads like one polished workspace. */
.work-order-editor-panel.is-modal-open {
  width: min(1780px, calc(100vw - 18px));
  height: calc(100vh - 24px);
  top: 12px;
  border-radius: 24px;
  border-color: rgba(183, 197, 222, 0.82);
  background: #f6f8fb;
  box-shadow:
    0 34px 88px rgba(26, 39, 68, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.work-order-editor-main,
.work-order-editor-panel {
  background:
    linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 246, 251, 0.98));
}

.work-order-editor-fixed-head {
  gap: 12px;
  padding: 14px 16px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.96));
  border-bottom: 1px solid rgba(213, 223, 239, 0.86);
}

.work-order-editor-topbar {
  min-height: 42px;
}

.work-order-editor-type-mark {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #1fa46f, #3478f6);
  box-shadow: 0 12px 24px rgba(52, 120, 246, 0.18);
}

.work-order-editor-hero {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.34fr);
  gap: 14px;
  padding: 12px;
  border-radius: 20px;
  border-color: rgba(203, 216, 238, 0.94);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96));
  box-shadow:
    0 16px 34px rgba(42, 58, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-order-editor-hero-copy {
  min-width: 0;
  padding: 4px 2px 2px 4px;
}

.work-order-editor-hero-copy h2 {
  font-size: 1.12rem;
  line-height: 1.15;
}

.work-order-editor-company-primary {
  font-size: 0.94rem;
}

.work-order-editor-company-line,
.work-order-editor-subtitle {
  font-size: 0.76rem;
}

.work-order-editor-meta {
  gap: 10px;
}

.work-order-editor-chip-row {
  gap: 8px;
}

.work-order-editor-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.work-order-editor-meta-item {
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 16px;
  border-color: rgba(205, 218, 238, 0.96);
  background:
    linear-gradient(180deg, #ffffff, #f7faff);
  box-shadow:
    0 10px 24px rgba(38, 54, 86, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-order-editor-meta-icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: #eef6f3;
  color: #1f8a62;
}

.work-order-editor-meta-icon svg {
  width: 16px;
  height: 16px;
}

.work-order-editor-meta-label {
  color: #71809b;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.work-order-editor-meta-value {
  color: #17243b;
  font-size: 0.74rem;
}

.work-order-editor-body {
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.96), rgba(243, 247, 251, 0.98));
}

.work-order-editor-section[data-work-order-section] {
  border-radius: 18px;
  border-color: rgba(203, 216, 238, 0.86);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 14px 34px rgba(36, 51, 84, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

button.work-order-editor-section-head {
  min-height: 48px;
}

.work-order-editor-form .field {
  border-color: rgba(205, 218, 238, 0.92);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  border-color: rgba(190, 205, 230, 0.9);
  background: #ffffff;
  color: #18243a;
}

.work-order-editor-heading-actions .helper-copy,
.work-order-save-state {
  font-size: 0.74rem;
}

@media (max-width: 1180px) {
  .work-order-editor-hero {
    grid-template-columns: 1fr;
  }

  .work-order-editor-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .work-order-editor-panel.is-modal-open {
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    top: 4px;
    border-radius: 18px;
  }

  .work-order-editor-fixed-head {
    padding: 10px;
  }

  .work-order-editor-facts {
    grid-template-columns: 1fr;
  }
}

/* RN editor workspace layout: phase cards on top, compact summary left, form on the right. */
.work-order-editor-panel.is-modal-open {
  top: 6px;
  width: min(1920px, calc(100vw - 8px));
  height: calc(100vh - 12px);
  border-radius: 22px;
}

.work-order-editor-shell {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 18vw, 360px);
}

.work-order-editor-hero {
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1.66fr);
  align-items: stretch;
  gap: 12px;
  padding: 10px;
}

.work-order-editor-meta {
  display: grid;
  align-content: stretch;
}

.work-order-editor-stage-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  gap: 8px;
  min-width: 0;
}

.work-order-editor-stage-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(198, 213, 237, 0.92);
  border-radius: 16px;
  background:
    linear-gradient(180deg, #ffffff, #f7fbff);
  color: #17243b;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(35, 54, 87, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.work-order-editor-stage-card:hover,
.work-order-editor-stage-card:focus-visible {
  border-color: rgba(52, 120, 246, 0.46);
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(43, 77, 128, 0.13),
    0 0 0 3px rgba(52, 120, 246, 0.1);
}

.work-order-editor-stage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #eef6f3;
  color: #16845f;
}

.work-order-editor-stage-icon svg {
  width: 17px;
  height: 17px;
}

.work-order-editor-stage-card.is-status .work-order-editor-stage-icon {
  background: #eef4ff;
  color: #2f68c8;
}

.work-order-editor-stage-card.is-service .work-order-editor-stage-icon {
  background: #f1f0ff;
  color: #6554d8;
}

.work-order-editor-stage-card.is-billing .work-order-editor-stage-icon {
  background: #fff7e6;
  color: #9a6a14;
}

.work-order-editor-stage-card.is-upload .work-order-editor-stage-icon {
  background: #fff0f3;
  color: #c53655;
}

.work-order-editor-stage-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.work-order-editor-stage-copy strong {
  color: #15223a;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.15;
}

.work-order-editor-stage-copy span {
  min-width: 0;
  color: #65738f;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-editor-body {
  grid-template-columns: minmax(230px, 272px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px;
}

.work-order-editor-form-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.work-order-editor-side-summary {
  position: sticky;
  top: 0;
  min-width: 0;
  display: grid;
  gap: 12px;
  max-height: calc(100dvh - 170px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(196, 212, 237, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow:
    0 16px 34px rgba(31, 48, 82, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.work-order-side-summary-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(216, 225, 241, 0.9);
}

.work-order-side-summary-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1fa46f, #3478f6);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(52, 120, 246, 0.16);
}

.work-order-side-summary-title {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.work-order-side-summary-title strong {
  min-width: 0;
  color: #15223a;
  font-size: 0.98rem;
  line-height: 1.16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-side-summary-title span {
  color: #65738f;
  font-size: 0.74rem;
  font-weight: 750;
}

.work-order-side-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.work-order-side-summary-list {
  display: grid;
  gap: 8px;
}

.work-order-side-summary-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(219, 228, 243, 0.88);
  border-radius: 14px;
  background: rgba(251, 253, 255, 0.94);
}

.work-order-side-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #eef6f3;
  color: #1f8a62;
}

.work-order-side-summary-icon svg {
  width: 15px;
  height: 15px;
}

.work-order-side-summary-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.work-order-side-summary-label {
  color: #71809b;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.work-order-side-summary-value {
  min-width: 0;
  color: #1b2941;
  font-size: 0.77rem;
  line-height: 1.26;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-editor-section.is-editor-focus-pulse {
  animation: workOrderSectionFocusPulse 1.1s ease-out;
}

@keyframes workOrderSectionFocusPulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(52, 120, 246, 0.28),
      0 14px 34px rgba(36, 51, 84, 0.07);
  }

  100% {
    box-shadow:
      0 0 0 10px rgba(52, 120, 246, 0),
      0 14px 34px rgba(36, 51, 84, 0.07);
  }
}

@media (max-width: 1480px) {
  .work-order-editor-stage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .work-order-editor-shell,
  .work-order-editor-hero,
  .work-order-editor-body {
    grid-template-columns: 1fr;
  }

  .work-order-editor-side-summary {
    position: static;
    max-height: none;
  }

  .work-order-editor-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .work-order-editor-panel.is-modal-open {
    top: 4px;
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
  }

  .work-order-editor-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* RN editor compact pass: larger canvas, smaller controls, less textbox-heavy. */
.work-order-editor-panel.is-modal-open {
  top: 3px;
  width: min(1980px, calc(100vw - 4px));
  height: calc(100vh - 6px);
  border-radius: 18px;
}

.work-order-editor-shell {
  grid-template-columns: minmax(0, 1fr) clamp(280px, 16vw, 340px);
}

.work-order-editor-fixed-head {
  gap: 8px;
  padding: 8px 10px;
}

.work-order-editor-topbar {
  min-height: 34px;
}

.work-order-editor-type-mark {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 10px;
  font-size: 0.68rem;
}

.work-order-editor-breadcrumb {
  gap: 8px;
  font-size: 0.78rem;
}

.work-order-editor-heading-actions {
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(520px, 46vw);
}

.work-order-editor-heading-actions .helper-copy,
.work-order-save-state {
  font-size: 0.68rem;
}

.work-order-editor-hero {
  grid-template-columns: minmax(210px, 0.3fr) minmax(0, 1.7fr);
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  box-shadow: none;
}

.work-order-editor-hero-copy {
  gap: 4px;
  padding: 2px;
}

.work-order-editor-hero-copy h2 {
  font-size: 1rem;
}

.work-order-editor-company-primary {
  font-size: 0.82rem;
}

.work-order-editor-company-line,
.work-order-editor-subtitle {
  font-size: 0.68rem;
}

.work-order-editor-stage-grid {
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  gap: 6px;
}

.work-order-editor-stage-card {
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 54px;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 11px;
  box-shadow: none;
}

.work-order-editor-stage-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.work-order-editor-stage-icon svg {
  width: 15px;
  height: 15px;
}

.work-order-editor-stage-copy {
  gap: 2px;
}

.work-order-editor-stage-copy strong {
  font-size: 0.72rem;
}

.work-order-editor-stage-copy span {
  font-size: 0.62rem;
}

.work-order-editor-body {
  grid-template-columns: minmax(216px, 248px) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px 10px;
}

.work-order-editor-side-summary {
  gap: 8px;
  max-height: calc(100dvh - 118px);
  padding: 8px;
  border-radius: 13px;
  box-shadow: none;
}

.work-order-side-summary-head {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding-bottom: 8px;
}

.work-order-side-summary-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 0.7rem;
}

.work-order-side-summary-title strong {
  font-size: 0.84rem;
}

.work-order-side-summary-title span {
  font-size: 0.66rem;
}

.work-order-side-summary-chips {
  gap: 5px;
}

.work-order-side-summary-list {
  gap: 6px;
}

.work-order-side-summary-item {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  padding: 7px;
  border-radius: 10px;
}

.work-order-side-summary-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.work-order-side-summary-icon svg {
  width: 13px;
  height: 13px;
}

.work-order-side-summary-label {
  font-size: 0.52rem;
}

.work-order-side-summary-value {
  font-size: 0.68rem;
}

.work-order-editor-form {
  gap: 7px !important;
}

.work-order-editor-section[data-work-order-section] {
  border-radius: 11px;
  box-shadow: none;
}

button.work-order-editor-section-head {
  min-height: 34px;
  padding: 5px 8px;
}

.work-order-section-mark,
.work-order-section-toggle-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 8px;
}

.work-order-section-mark svg,
.work-order-section-toggle-icon svg {
  width: 13px;
  height: 13px;
}

.work-order-editor-section-head h3 {
  font-size: 0.78rem;
}

.work-order-editor-section-body,
.work-order-editor-section.is-client-identity .work-order-editor-section-body {
  gap: 6px;
  padding: 6px 8px 8px !important;
}

.work-order-editor-form .field {
  grid-template-columns: minmax(108px, 0.34fr) minmax(0, 1fr) !important;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 7px !important;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none !important;
}

.work-order-editor-form .field > span,
.work-order-editor-form .work-order-field-heading {
  margin: 0 !important;
  color: #677086 !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.045em !important;
  line-height: 1.15 !important;
}

.work-order-editor-form .work-order-field-icon {
  width: 15px;
  height: 15px;
  border-radius: 6px;
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  min-height: 28px !important;
  padding: 3px 7px !important;
  border-radius: 7px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #17233a;
  font-size: 0.78rem;
}

.work-order-editor-form select,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  background: #f6f8fb !important;
  border-color: rgba(216, 224, 238, 0.8) !important;
}

.work-order-editor-form input:focus,
.work-order-editor-form select:focus,
.work-order-editor-form textarea:focus {
  border-color: rgba(52, 120, 246, 0.5) !important;
  background: #ffffff !important;
  outline: none;
}

.work-order-editor-form textarea,
.work-order-inline-note textarea {
  min-height: 44px !important;
}

.work-order-company-picker {
  min-height: 48px;
  padding: 7px 76px 7px 9px;
  border-radius: 10px;
  box-shadow: none;
}

.work-order-company-picker::after {
  right: 8px;
  min-height: 26px;
  padding: 0 9px;
  font-size: 0.64rem;
}

.work-order-company-picker .company-selection-preview-logo {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
}

.work-order-company-picker .company-selection-preview-copy strong {
  font-size: 0.8rem;
}

.work-order-company-picker .company-selection-preview-copy span {
  font-size: 0.66rem;
}

.work-order-service-type-tabs {
  gap: 5px;
  margin: 5px 0;
}

.work-order-service-type-tab {
  min-height: 28px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.work-order-service-picker-selection,
.work-order-calendar-executor-selection {
  max-height: 54px;
}

.work-order-editor-form .field.has-required-attention {
  position: relative;
  border-color: rgba(224, 57, 73, 0.82) !important;
  background: #fff7f8 !important;
  box-shadow: inset 3px 0 0 #e03949 !important;
  animation: none !important;
}

.work-order-editor-form .field.has-required-attention > span,
.work-order-editor-form .field.has-required-attention .work-order-field-heading {
  color: #b42334 !important;
}

.work-order-editor-form .field.has-required-attention > span::after,
.work-order-editor-form .field.has-required-attention .work-order-field-heading::after {
  content: "OBAVEZNO";
  display: inline-flex;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(224, 57, 73, 0.1);
  color: #b42334;
  font-size: 0.5rem;
  font-weight: 950;
  letter-spacing: 0.05em;
}

.work-order-editor-form .field.has-required-attention input,
.work-order-editor-form .field.has-required-attention select,
.work-order-editor-form .field.has-required-attention textarea,
.work-order-editor-form .field.has-required-attention .work-order-inline-executor-picker,
.work-order-editor-form .field.has-required-attention .work-order-inline-service-picker {
  border-color: rgba(224, 57, 73, 0.5) !important;
  background: #ffffff !important;
}

@media (max-width: 1480px) {
  .work-order-editor-stage-grid {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
  }

  .work-order-editor-stage-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-editor-stage-icon {
    display: none;
  }
}

@media (max-width: 1180px) {
  .work-order-editor-body {
    grid-template-columns: 1fr;
  }

  .work-order-editor-form .field {
    grid-template-columns: minmax(92px, 0.3fr) minmax(0, 1fr) !important;
  }
}

/* RN editor ClickUp-style task view: clean title, detail rows, borderless content blocks. */
.work-order-editor-panel.is-modal-open {
  top: 10px;
  width: min(1760px, calc(100vw - 28px));
  height: calc(100vh - 20px);
  border: 1px solid rgba(218, 223, 232, 0.95);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.work-order-editor-panel,
.work-order-editor-main {
  background: #ffffff !important;
}

.work-order-editor-shell {
  grid-template-columns: minmax(760px, 1fr) minmax(360px, 33vw);
  background: #ffffff;
}

.work-order-editor-fixed-head {
  gap: 10px;
  padding: 16px 28px 10px;
  border-bottom: 1px solid rgba(232, 234, 239, 0.95);
  background: #ffffff !important;
}

.work-order-editor-topbar {
  min-height: 28px;
  color: #667085;
}

.work-order-editor-breadcrumb {
  gap: 7px;
  color: #667085;
  font-size: 0.76rem;
  font-weight: 650;
}

.work-order-editor-type-mark {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 6px;
  background: #f04438;
  color: #ffffff;
  box-shadow: none;
  font-size: 0.52rem;
  line-height: 1;
}

.work-order-editor-heading-actions {
  gap: 8px;
}

.work-order-editor-heading-stack {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: min(460px, 46vw);
}

.work-order-editor-top-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 5px;
  min-height: 30px;
}

.work-order-editor-top-action {
  display: inline-grid !important;
  grid-template-columns: 18px !important;
  place-items: center;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #667085 !important;
  box-shadow: none !important;
}

.work-order-editor-top-action:hover,
.work-order-editor-top-action:focus-visible {
  border-color: #e6e9ef !important;
  background: #f7f8fa !important;
  color: #1f2937 !important;
  outline: none;
}

.work-order-editor-top-action .work-order-action-label {
  display: none;
}

.work-order-editor-top-action .work-order-action-icon {
  width: 17px;
  height: 17px;
}

.work-order-editor-top-action .work-order-action-icon svg {
  width: 17px;
  height: 17px;
}

#work-order-number-preview {
  display: none !important;
}

.work-order-save-state {
  max-width: 260px;
  overflow: hidden;
  padding: 5px 9px;
  border-radius: 999px;
  color: #7a8496;
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-save-state[data-state="blocked"] {
  border: 1px solid #fedf89;
  background: #fffaeb;
  color: #93370d;
}

.work-order-download-pdf,
.work-order-editor-close {
  min-height: 28px !important;
  border-radius: 7px !important;
}

.work-order-editor-hero {
  display: block !important;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.work-order-editor-hero-copy {
  display: grid;
  gap: 8px;
  padding: 0;
}

.work-order-editor-hero-copy h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  color: #111827;
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
  font-weight: 760;
  letter-spacing: 0 !important;
  line-height: 1.16;
}

.work-order-editor-title-number,
.work-order-editor-title-meta {
  min-width: 0;
}

.work-order-editor-title-meta {
  color: #4b5565;
  font-size: clamp(0.86rem, 1vw, 1rem);
  font-weight: 650;
  line-height: 1.25;
}

.work-order-editor-company-summary {
  gap: 4px;
}

.work-order-editor-company-summary:empty,
.work-order-editor-subtitle:empty {
  display: none;
}

.work-order-editor-company-primary {
  color: #485267;
  font-size: 0.82rem;
  font-weight: 740;
}

.work-order-editor-company-line,
.work-order-editor-subtitle {
  color: #687386;
  font-size: 0.76rem;
  font-weight: 520;
  line-height: 1.38;
}

.work-order-editor-meta {
  display: block;
  width: min(1180px, 100%);
  margin-top: 14px;
}

.work-order-editor-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 42px;
  row-gap: 2px;
}

.work-order-editor-detail-grid.is-clickup-table {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 42px;
  align-items: start;
}

.work-order-editor-detail-column {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: start;
}

.work-order-editor-detail-row {
  display: grid;
  grid-template-columns: 24px 142px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 36px;
  padding: 3px 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #273142;
  text-align: left;
  cursor: pointer;
}

.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row {
  min-height: 34px;
  padding: 2px 0;
  cursor: default;
}

.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-company,
.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-location,
.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-contact,
.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-assignees,
.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-service {
  grid-column: 1 / -1;
}

.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-company {
  min-height: 42px;
}

.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row.is-company .work-order-editor-field-trigger {
  min-height: 40px;
}

.work-order-editor-detail-row.has-required-attention {
  border-radius: 8px;
  background: #fff7f8;
  box-shadow: inset 3px 0 0 #e5484d;
}

.work-order-editor-detail-row.has-required-attention .work-order-editor-detail-label {
  color: #b42334;
}

.work-order-editor-detail-row:hover,
.work-order-editor-detail-row:focus-visible {
  background: #f7f8fa;
  outline: none;
}

.work-order-editor-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #7f8795;
}

.work-order-editor-detail-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.work-order-editor-detail-label {
  min-width: 0;
  color: #6f7787;
  font-size: 0.86rem;
  font-weight: 560;
  line-height: 1.2;
}

.work-order-editor-detail-content {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  width: 100%;
  color: #202838;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
}

.work-order-editor-field-picker,
.work-order-editor-multi-picker,
.work-order-editor-text-control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.work-order-editor-field-picker {
  width: min(100%, 460px);
}

.work-order-editor-detail-row.is-status .work-order-editor-field-picker,
.work-order-editor-detail-row.is-priority .work-order-editor-field-picker,
.work-order-editor-detail-row.is-contract .work-order-editor-text-control,
.work-order-editor-detail-row.is-tags .work-order-editor-text-control,
.work-order-editor-detail-row.is-tags .work-order-tag-picker,
.work-order-editor-detail-row.is-dates .work-order-editor-date-wrap,
.work-order-editor-detail-row.is-billing .work-order-editor-date-wrap {
  width: 100%;
}

.work-order-editor-detail-row.is-company .work-order-editor-field-picker,
.work-order-editor-detail-row.is-location .work-order-editor-field-picker,
.work-order-editor-detail-row.is-contact .work-order-editor-field-picker,
.work-order-editor-detail-row.is-assignees .work-order-editor-field-picker,
.work-order-editor-detail-row.is-service .work-order-editor-field-picker,
.work-order-editor-detail-row.is-company .work-order-editor-multi-picker,
.work-order-editor-detail-row.is-location .work-order-editor-multi-picker,
.work-order-editor-detail-row.is-contact .work-order-editor-multi-picker,
.work-order-editor-detail-row.is-assignees .work-order-editor-multi-picker,
.work-order-editor-detail-row.is-service .work-order-editor-multi-picker {
  width: 100%;
}

.work-order-editor-field-trigger,
.work-order-editor-inline-action {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f7f8fa;
  color: #1f2937;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 680;
  text-align: left;
  box-shadow: none;
}

.work-order-editor-field-trigger:hover,
.work-order-editor-field-trigger:focus-visible,
.work-order-editor-inline-action:hover,
.work-order-editor-inline-action:focus-visible {
  border-color: #dde3ec;
  background: #ffffff;
  outline: none;
}

.work-order-editor-field-trigger:disabled {
  color: #98a2b3;
  cursor: not-allowed;
  opacity: 0.75;
}

.work-order-editor-field-trigger-copy,
.work-order-editor-inline-action-label,
.work-order-editor-inline-action-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-editor-field-trigger-copy {
  display: grid;
  gap: 1px;
}

.work-order-editor-field-trigger-label.is-empty,
.work-order-editor-inline-action.is-empty .work-order-editor-inline-action-label {
  color: #98a2b3;
  font-weight: 560;
}

.work-order-editor-field-trigger-meta,
.work-order-editor-inline-action-summary {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 560;
}

.work-order-editor-field-caret {
  color: #98a2b3;
  font-size: 0.75rem;
  line-height: 1;
  text-align: center;
}

.work-order-editor-date-control,
.work-order-editor-text-input {
  width: min(100%, 220px);
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f7f8fa;
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 680;
  box-shadow: none;
}

.work-order-editor-date-wrap {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  width: min(100%, 220px);
  min-width: 0;
}

.work-order-editor-date-wrap .work-order-editor-date-control {
  width: 100%;
  padding-right: 34px;
}

.work-order-editor-date-picker-button {
  position: absolute;
  right: 3px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7b8496;
  transform: translateY(-50%);
  cursor: pointer;
}

.work-order-editor-date-picker-button:hover,
.work-order-editor-date-picker-button:focus-visible {
  background: #eef2f7;
  color: #344054;
  outline: none;
}

.work-order-editor-date-picker-button svg {
  width: 15px;
  height: 15px;
}

.work-order-editor-native-date {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.work-order-editor-date-control:hover,
.work-order-editor-text-input:hover,
.work-order-editor-date-control:focus,
.work-order-editor-text-input:focus {
  border-color: #dde3ec;
  background: #ffffff;
  outline: none;
}

.work-order-editor-text-control,
.work-order-editor-text-input {
  width: 100%;
}

.work-order-editor-static-value {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 680;
}

.work-order-editor-static-value.is-empty {
  color: #98a2b3;
  font-weight: 560;
}

.work-order-editor-field-menu-portal {
  position: fixed;
  z-index: 4600;
  max-width: min(520px, calc(100vw - 24px));
  max-height: min(430px, calc(100dvh - 24px));
  overflow: hidden;
  padding: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  contain: layout paint;
}

.work-order-editor-field-search {
  padding: 2px 2px 7px;
}

.work-order-editor-field-search-input {
  width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #f9fafb;
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 560;
  outline: none;
}

.work-order-editor-field-search-input:focus {
  border-color: rgba(47, 110, 225, 0.45);
  background: #ffffff;
}

.work-order-editor-field-options {
  display: grid;
  gap: 2px;
  max-height: min(320px, 42dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.work-order-editor-field-option {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  text-align: left;
}

.work-order-editor-field-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.work-order-editor-field-option-copy strong,
.work-order-editor-field-option-copy span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-editor-field-option-copy strong {
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 720;
}

.work-order-editor-field-option-copy span {
  color: #667085;
  font-size: 0.69rem;
  font-weight: 560;
}

.work-order-editor-field-option-marker {
  color: #16a34a;
  font-size: 0.9rem;
  font-weight: 820;
  text-align: center;
}

.work-order-editor-field-empty {
  margin: 0;
  padding: 8px;
  color: #667085;
  font-size: 0.8rem;
}

.work-order-editor-multi-menu-portal {
  display: grid;
  gap: 8px;
  min-width: min(520px, calc(100vw - 24px));
}

.work-order-editor-menu-selection,
.work-order-editor-multi-menu-portal .work-order-service-picker-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 92px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 8px;
  background: #f8fafc;
}

.work-order-editor-people-options,
.work-order-editor-multi-menu-portal .work-order-service-picker-options {
  max-height: min(320px, 45dvh);
}

.work-order-editor-menu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding-top: 2px;
}

.work-order-editor-trigger-people,
.work-order-editor-trigger-services {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-order-editor-trigger-services {
  display: grid;
  gap: 1px;
}

.work-order-editor-trigger-people-label,
.work-order-editor-trigger-service-summary {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 0.7rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-editor-trigger-service-label {
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 720;
}

.work-order-editor-location-control {
  display: grid;
  gap: 7px;
  width: 100%;
}

.work-order-editor-location-missing {
  display: grid;
  grid-template-columns: minmax(108px, 0.75fr) minmax(126px, 0.95fr) minmax(132px, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px;
  border-radius: 9px;
  background: #fff7ed;
}

.work-order-editor-location-missing-copy {
  color: #9a3412;
  font-size: 0.74rem;
  font-weight: 720;
}

.work-order-editor-location-region,
.work-order-editor-location-coordinates {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #fed7aa;
  border-radius: 7px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.78rem;
  font-weight: 620;
}

.work-order-editor-location-save {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid #fb923c;
  border-radius: 7px;
  background: #ffffff;
  color: #9a3412;
  font-size: 0.76rem;
  font-weight: 760;
}

.work-order-editor-detail-value.is-muted,
.work-order-editor-detail-dates .is-muted {
  color: #98a1b1;
  font-weight: 520;
}

.work-order-editor-detail-status-pill,
.work-order-editor-detail-priority-pill,
.work-order-editor-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

.work-order-editor-detail-status-pill {
  color: #5a6373;
  background: #eef1f4;
}

.work-order-editor-detail-status-pill[data-status="gotov-rn"] {
  color: #075e45;
  background: #29c3a6;
}

.work-order-editor-detail-status-pill[data-status="ovjeren-rn"] {
  color: #674500;
  background: #f4cf62;
}

.work-order-editor-detail-status-pill[data-status="fakturiran-rn"] {
  color: #14532d;
  background: #bbf7d0;
}

.work-order-editor-detail-status-pill[data-status="storno-rn"] {
  color: #495565;
  background: #dce2ea;
}

.work-order-editor-detail-priority-pill {
  position: relative;
  gap: 7px;
  color: #d92d20;
  background: transparent;
  padding-left: 0;
  font-weight: 760;
}

.work-order-editor-detail-priority-pill::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px 2px 5px 2px;
  background: #ef4444;
  transform: skew(-8deg);
}

.work-order-editor-detail-priority-pill[data-priority="normal"] {
  color: #475467;
}

.work-order-editor-detail-priority-pill[data-priority="normal"]::before,
.work-order-editor-detail-priority-pill[data-priority="niski-prioritet"]::before,
.work-order-editor-detail-priority-pill[data-priority="bez-prioriteta"]::before {
  background: #98a2b3;
}

.work-order-editor-detail-dates {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.work-order-editor-detail-date-arrow {
  color: #98a1b1;
  font-weight: 650;
}

.work-order-editor-detail-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.work-order-editor-detail-tag {
  color: var(--work-order-tag-color, #ffffff);
  background: var(--work-order-tag-bg, #ef4565);
  border: 1px solid var(--work-order-tag-border, transparent);
}

.work-order-editor-detail-assignees {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.work-order-editor-detail-avatar-stack {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.work-order-editor-detail-avatar {
  width: 25px;
  height: 25px;
  min-width: 25px;
  margin-right: -7px;
  border: 2px solid #ffffff;
  box-shadow: none;
}

.work-order-editor-detail-avatar:last-child {
  margin-right: 0;
}

.work-order-editor-detail-assignee-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-editor-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 14px 28px 28px;
  background: #ffffff !important;
}

.work-order-editor-side-summary {
  display: none !important;
}

.work-order-editor-form-panel {
  gap: 12px;
  width: min(1180px, 100%);
}

.work-order-editor-form {
  gap: 0 !important;
}

.work-order-editor-actions {
  display: none !important;
}

.work-order-editor-section[data-work-order-section] {
  border: 0 !important;
  border-top: 1px solid #eceef3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.work-order-editor-section[data-work-order-section="status"],
.work-order-editor-section[data-work-order-section="client"],
.work-order-editor-section[data-work-order-section="location"],
.work-order-editor-section[data-work-order-section="contact"],
.work-order-editor-section[data-work-order-section="executors"],
.work-order-editor-section[data-work-order-section="billing"] {
  display: none !important;
}

.work-order-editor-section[data-work-order-section="services"] .work-order-services-field {
  display: none !important;
}

#work-order-training-section {
  display: none !important;
}

.work-order-editor-section[data-work-order-section="services"] {
  margin-top: 14px;
}

.work-order-editor-section[data-work-order-section="services"] .work-order-editor-section-head h3 {
  font-size: 0.88rem;
}

.work-order-editor-section.is-documents > .work-order-editor-section-head {
  display: none !important;
}

.work-order-editor-section.is-documents {
  margin-top: 12px;
  border-top: 0 !important;
}

.work-order-editor-section.is-documents .work-order-editor-section-body {
  padding-top: 4px !important;
}

.work-order-editor-section[data-work-order-section]::before {
  display: none !important;
}

.work-order-editor-section[data-work-order-section]:first-of-type {
  border-top: 0 !important;
}

button.work-order-editor-section-head {
  grid-template-columns: 18px minmax(0, 1fr) 24px !important;
  min-height: 42px;
  padding: 10px 0 8px;
  border-bottom: 0 !important;
  border-radius: 7px;
  background: transparent !important;
  color: #1f2937;
}

button.work-order-editor-section-head:hover,
button.work-order-editor-section-head:focus-visible {
  background: #f7f8fa;
  outline: none;
}

.work-order-editor-section-head > div {
  gap: 1px;
}

.work-order-editor-section-kicker {
  display: none;
}

.work-order-editor-section-head h3 {
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 760;
  letter-spacing: 0 !important;
}

.work-order-section-toggle-icon {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #98a1b1;
  box-shadow: none;
}

.work-order-section-mark {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #8a94a6 !important;
  box-shadow: none !important;
}

.work-order-section-mark svg,
.work-order-section-toggle-icon svg {
  width: 16px;
  height: 16px;
}

.work-order-editor-section-body,
.work-order-editor-section.is-client-identity .work-order-editor-section-body {
  gap: 8px;
  padding: 0 0 14px !important;
}

.work-order-editor-form .form-grid {
  gap: 5px 22px;
}

.work-order-editor-form .field {
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center;
  min-height: 34px;
  gap: 12px;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
}

.work-order-editor-form .field > span,
.work-order-editor-form .work-order-field-heading {
  gap: 8px !important;
  margin: 0 !important;
  color: #687386 !important;
  font-size: 0.8rem !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

.work-order-editor-form .work-order-field-icon {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #858e9f;
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  min-height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #1f2937;
  font-size: 0.86rem;
  font-weight: 580;
  box-shadow: none !important;
}

.work-order-editor-form select,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  background: #f7f8fa !important;
  border-color: transparent !important;
}

.work-order-editor-form input[readonly] {
  color: #4b5565;
}

.work-order-editor-form input:hover,
.work-order-editor-form select:hover,
.work-order-editor-form textarea:hover,
.work-order-inline-executor-picker:hover,
.work-order-inline-service-picker:hover {
  background: #f7f8fa !important;
}

.work-order-editor-form input:focus,
.work-order-editor-form select:focus,
.work-order-editor-form textarea:focus {
  border-color: rgba(47, 110, 225, 0.4) !important;
  background: #ffffff !important;
  outline: none;
}

.work-order-company-picker {
  min-height: 40px;
  padding: 6px 70px 6px 8px;
  border: 0;
  background: #f7f8fa;
}

.work-order-company-picker::after {
  min-height: 22px;
  font-size: 0.62rem;
}

.work-order-service-type-tabs {
  display: inline-grid;
  width: min(520px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 4px 0 8px;
  padding: 2px;
  border-radius: 8px;
  background: #f3f4f6;
}

.work-order-service-type-tab {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  font-size: 0.75rem;
  font-weight: 720;
}

.work-order-service-type-tab.is-active {
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.work-order-editor-form .field.has-required-attention {
  border: 0 !important;
  background: #fff6f7 !important;
  box-shadow: inset 3px 0 0 #e5484d !important;
  padding-inline: 8px !important;
  animation: none !important;
}

.work-order-editor-form .field.has-required-attention > span,
.work-order-editor-form .field.has-required-attention .work-order-field-heading {
  color: #b42334 !important;
}

.work-order-editor-form .field.has-required-attention > span::after,
.work-order-editor-form .field.has-required-attention .work-order-field-heading::after {
  content: "OBAVEZNO";
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #fee4e2;
  color: #b42334;
  font-size: 0.52rem;
  font-weight: 820;
  letter-spacing: 0.04em;
}

.work-order-activity-panel {
  padding: 16px 18px;
  border-left: 1px solid #eceef3;
  background: #fbfbfc !important;
  gap: 12px;
}

.work-order-activity-head {
  min-height: 42px;
}

.work-order-activity-head h3 {
  color: #1f2937;
  font-size: 0.96rem;
  font-weight: 760;
}

.work-order-activity-documents-panel,
.work-order-activity-comment-panel {
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #edf0f5;
}

.work-order-activity-comment-head span {
  color: #6b7280;
}

.work-order-activity-comment-panel textarea {
  min-height: 72px;
  border-radius: 9px;
  background: #ffffff;
}

.work-order-activity-comment-actions {
  grid-template-columns: auto;
  justify-content: end;
}

.work-order-activity-comment-actions select {
  display: none;
}

.work-order-activity-list {
  gap: 10px;
  padding-left: 0;
}

.work-order-activity-item {
  position: relative;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
}

.work-order-activity-item::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  bottom: -12px;
  width: 1px;
  background: #e5e7eb;
}

.work-order-activity-item:last-child::before {
  display: none;
}

.work-order-activity-avatar {
  width: 28px;
  height: 28px;
  background: #f1f4fb;
  color: #4f46e5;
  font-size: 0.65rem;
}

.work-order-activity-item-body {
  border-radius: 9px;
  border-color: #e5e7eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.work-order-activity-item.is-comment .work-order-activity-item-body {
  border-color: #dfe5ee;
  background: #ffffff;
}

.work-order-activity-description {
  font-size: 0.83rem;
  font-weight: 720;
}

.work-order-activity-time {
  color: #6b7280;
  font-size: 0.7rem;
}

.work-order-activity-actor,
.work-order-activity-field,
.work-order-activity-old,
.work-order-activity-new {
  min-height: 19px;
  border-radius: 6px;
}

.work-order-activity-mention {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  border-radius: 6px;
  background: #eef4ff;
  color: #2f5fb8;
  font-weight: 760;
}

.work-order-open-documentation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 0;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1) !important;
}

.work-order-open-documentation[hidden],
.work-order-download-pdf[hidden],
.work-order-editor-close[hidden] {
  display: none !important;
}

.work-order-open-documentation:hover,
.work-order-open-documentation:focus-visible {
  border-color: rgba(37, 99, 235, 0.34) !important;
  background: #dbeafe !important;
  color: #1e40af !important;
  outline: none;
}

.work-order-open-documentation svg,
.work-order-download-pdf svg,
.work-order-editor-close svg {
  width: 16px;
  height: 16px;
}

.work-order-open-documentation span {
  white-space: nowrap;
}

.work-order-activity-close {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #667085 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.work-order-activity-close:hover,
.work-order-activity-close:focus-visible {
  background: #eef2f7 !important;
  color: #111827 !important;
  outline: none;
}

#work-order-document-count,
#work-order-activity-document-count {
  display: none !important;
}

.work-order-editor-detail-grid.is-clickup-table .work-order-editor-detail-row {
  min-height: 38px;
}

.work-order-editor-field-trigger,
.work-order-editor-date-control,
.work-order-editor-text-input,
.work-order-editor-static-value {
  min-height: 34px;
}

.work-order-editor-date-wrap {
  min-height: 34px;
}

.work-order-editor-form input,
.work-order-editor-form select,
.work-order-editor-form textarea,
.work-order-inline-executor-picker,
.work-order-inline-service-picker {
  min-height: 34px !important;
}

.work-order-service-selection {
  gap: 8px;
}

.work-order-service-item {
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  min-height: 46px;
  padding: 8px 10px 8px 12px;
}

.work-order-service-item-actions {
  justify-content: end;
}

.work-order-service-progress-select {
  min-width: 132px;
  min-height: 34px;
  padding: 0 32px 0 10px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #f8fafc;
  color: #344054;
  font-size: 0.76rem;
  font-weight: 780;
}

.work-order-service-progress-select.is-pending {
  border-color: #f4b8c3;
  background: #fff4f6;
  color: #9f273a;
}

.work-order-service-progress-select.is-progress {
  border-color: #e8c36d;
  background: #fff6db;
  color: #8a5b00;
}

.work-order-service-progress-select.is-completed {
  border-color: #a8d9b6;
  background: #ecfdf3;
  color: #12633d;
}

.work-order-contact-menu-portal {
  min-width: min(520px, calc(100vw - 24px));
}

.work-order-contact-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 6px;
}

.work-order-contact-menu-title {
  color: #475467;
  font-size: 0.74rem;
  font-weight: 780;
}

.work-order-contact-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.work-order-contact-add-button:hover,
.work-order-contact-add-button:focus-visible {
  border-color: #bcd2ff;
  background: #eef4ff;
  outline: none;
}

.work-order-contact-add-form {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #e6eaf1;
  border-radius: 10px;
  background: #f8fafc;
}

.work-order-contact-add-form[hidden] {
  display: none !important;
}

.work-order-contact-add-form input {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 560;
}

.work-order-contact-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.work-order-contact-add-error {
  margin: 0;
}

.work-order-activity-item:not(.is-expanded):not(.is-comment) .work-order-activity-meta,
.work-order-activity-item:not(.is-expanded):not(.is-comment) .work-order-activity-diff,
.work-order-activity-expanded-summary {
  display: none;
}

.work-order-activity-item.is-expanded .work-order-activity-expanded-summary {
  display: block;
  margin: 2px 0 0;
  color: #344054;
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .work-order-editor-shell {
    grid-template-columns: 1fr;
  }

  .work-order-editor-detail-grid {
    grid-template-columns: 1fr;
  }

  .work-order-editor-body,
  .work-order-editor-fixed-head {
    padding-inline: 18px;
  }
}

@media (max-width: 760px) {
  .work-order-editor-panel.is-modal-open {
    top: 4px;
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    border-radius: 12px;
  }

  .work-order-editor-form .field {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }

  .work-order-editor-topbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .work-order-editor-heading-stack {
    width: 100%;
    min-width: 0;
    justify-items: start;
  }

  .work-order-editor-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .work-order-save-state {
    max-width: min(100%, 340px);
  }

  .work-order-editor-top-actions {
    justify-content: flex-start;
  }

  .work-order-editor-detail-row {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px 10px;
    padding: 6px 2px;
  }

  .work-order-editor-detail-grid.is-clickup-table {
    grid-template-columns: 1fr;
  }

  .work-order-editor-detail-content {
    grid-column: 2;
  }

  .work-order-editor-field-picker,
  .work-order-editor-inline-action,
  .work-order-editor-date-wrap,
  .work-order-editor-date-control,
  .work-order-editor-text-input {
    width: 100%;
  }

  .work-order-editor-location-missing {
    grid-template-columns: 1fr;
  }
}

.work-order-calendar-executor-menu-portal,
.work-order-service-picker-menu-portal {
  position: fixed;
  max-height: min(420px, calc(100dvh - 24px)) !important;
  overflow: hidden !important;
  contain: layout paint;
  overscroll-behavior: contain;
}

.work-order-calendar-executor-options,
.work-order-service-picker-options {
  min-height: 0;
  max-height: min(260px, 42dvh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.work-order-service-picker-selection,
.work-order-calendar-executor-selection {
  max-height: 72px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@keyframes workOrderRequiredBlink {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(238, 85, 150, 0.11),
      0 14px 24px rgba(215, 72, 128, 0.11);
  }

  50% {
    box-shadow:
      0 0 0 5px rgba(238, 85, 150, 0.2),
      0 18px 30px rgba(215, 72, 128, 0.18);
  }
}

.people-training-certificate-progress-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  place-items: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  flex: 0 0 16px;
}

.people-training-certificate-pill {
  flex-basis: 78px;
  width: 78px;
  min-width: 78px;
  max-width: 78px;
}

.people-training-certificate-progress-icon svg {
  width: 11px;
  height: 11px;
}

.people-training-certificate-progress-icon.is-in_progress {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
  animation: periodicsPulseWarningDot 1.25s ease-out infinite;
}

.people-training-bulk-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
}

.people-training-bulk-preview-modal {
  width: min(1120px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(248, 251, 255, 0.98);
  border: 1px solid rgba(147, 197, 253, 0.7);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.people-training-bulk-preview-head,
.people-training-bulk-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
}

.people-training-bulk-preview-head {
  border-bottom: 1px solid rgba(191, 219, 254, 0.75);
}

.people-training-bulk-preview-head h3 {
  margin: 2px 0;
  font-size: 22px;
}

.people-training-bulk-preview-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  padding: 14px;
}

.people-training-bulk-preview-actions {
  border-top: 1px solid rgba(191, 219, 254, 0.75);
  justify-content: flex-end;
}

.people-training-import-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2210;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(9px);
}

.people-training-import-modal {
  width: calc(100vw - 28px);
  height: calc(100vh - 28px);
  max-height: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at top left, rgba(219, 234, 254, 0.72), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
  border: 1px solid rgba(147, 197, 253, 0.72);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28);
}

.people-training-import-head,
.people-training-import-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
}

.people-training-import-head {
  border-bottom: 1px solid rgba(191, 219, 254, 0.7);
}

.people-training-import-head h3 {
  margin: 2px 0;
  color: #17213a;
  font-size: 22px;
}

.people-training-import-head span {
  color: #60708c;
  font-size: 0.86rem;
}

.people-training-import-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px 22px 20px;
}

.people-training-import-actions {
  border-top: 1px solid rgba(191, 219, 254, 0.72);
  justify-content: flex-end;
}

.people-training-import-mode-menu {
  position: fixed;
  top: var(--menu-top);
  right: var(--menu-right);
  z-index: 2220;
  width: min(340px, calc(100vw - 24px));
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(191, 219, 254, 0.88);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(30, 41, 59, 0.18);
}

.people-training-import-mode-menu-item {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #1f2d48;
  text-align: left;
  cursor: pointer;
}

.people-training-import-mode-menu-item:hover,
.people-training-import-mode-menu-item:focus-visible {
  border-color: rgba(74, 118, 223, 0.34);
  background: rgba(239, 246, 255, 0.92);
  outline: none;
}

.people-training-import-mode-menu-item strong {
  font-size: 0.88rem;
}

.people-training-import-mode-menu-item span {
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.3;
}

.people-training-import-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.people-training-import-mode {
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  text-align: left;
  color: #1e2b46;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.people-training-import-mode:hover,
.people-training-import-mode.is-active {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.62);
  background: rgba(239, 246, 255, 0.96);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
}

.people-training-import-mode span {
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.people-training-import-mode strong {
  font-size: 0.98rem;
}

.people-training-import-mode small {
  color: #64748b;
  line-height: 1.35;
}

.people-training-import-upload {
  width: 100%;
  min-height: 78px;
  display: grid;
  gap: 4px;
  place-items: center;
  padding: 16px;
  border: 1px dashed rgba(74, 118, 223, 0.48);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.84), rgba(255, 247, 251, 0.82));
  color: #1f2d48;
  cursor: pointer;
}

.people-training-import-upload:hover,
.people-training-import-upload.is-drag-over {
  border-color: rgba(37, 99, 235, 0.72);
  background: rgba(239, 246, 255, 0.98);
}

.people-training-import-upload strong {
  font-size: 0.98rem;
}

.people-training-import-upload span {
  color: #64748b;
  font-size: 0.82rem;
}

.people-training-import-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 12px;
}

.people-training-import-empty {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid rgba(213, 222, 238, 0.82);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  color: #61708a;
}

.people-training-import-empty strong {
  color: #1e2b46;
}

.people-training-import-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-self: start;
  gap: 6px;
}

.people-training-import-stat {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(213, 222, 238, 0.84);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.people-training-import-stat strong {
  color: #17213a;
  font-size: 1.05rem;
  line-height: 1;
}

.people-training-import-stat span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.people-training-import-stat.is-create {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(240, 253, 244, 0.88);
}

.people-training-import-stat.is-update {
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(239, 246, 255, 0.9);
}

.people-training-import-stat.is-departure {
  border-color: rgba(251, 113, 133, 0.44);
  background: rgba(255, 241, 242, 0.9);
}

.people-training-import-table {
  min-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.people-training-import-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.16fr) minmax(340px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: inset 0 0 0 0 transparent;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.people-training-import-row:first-child {
  border-top: 0;
}

.people-training-import-row.is-head {
  background: rgba(239, 246, 255, 0.96);
  color: #41516e;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.people-training-import-row.is-create {
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.13), rgba(255, 255, 255, 0.96) 42%);
  box-shadow: inset 5px 0 0 rgba(34, 197, 94, 0.82);
}

.people-training-import-row.is-update {
  background:
    linear-gradient(90deg, rgba(34, 197, 94, 0.16), rgba(248, 253, 250, 0.98) 44%);
  box-shadow:
    inset 5px 0 0 rgba(22, 163, 74, 0.9),
    0 8px 22px rgba(22, 163, 74, 0.08);
}

.people-training-import-row.is-departure {
  background:
    linear-gradient(90deg, rgba(244, 63, 94, 0.14), rgba(255, 247, 249, 0.98) 44%);
  box-shadow: inset 5px 0 0 rgba(225, 29, 72, 0.82);
}

.people-training-import-row.is-unchanged,
.people-training-import-row.is-skipped {
  background: rgba(248, 250, 252, 0.72);
  box-shadow: inset 5px 0 0 rgba(203, 213, 225, 0.78);
}

.people-training-import-row.is-decision.is-skipped {
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.15), rgba(255, 251, 235, 0.96) 44%);
  box-shadow:
    inset 5px 0 0 rgba(245, 158, 11, 0.86),
    0 8px 22px rgba(245, 158, 11, 0.08);
}

.people-training-import-row:not(.is-head):hover {
  transform: translateY(-1px);
}

.people-training-import-status-cell {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 6px;
}

.people-training-import-row-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.75rem;
  font-weight: 900;
}

.people-training-import-row.is-create .people-training-import-row-status {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(220, 252, 231, 0.88);
  color: #166534;
}

.people-training-import-row.is-update .people-training-import-row-status {
  border-color: rgba(248, 113, 113, 0.56);
  background: rgba(254, 226, 226, 0.9);
  color: #b91c1c;
}

.people-training-import-row.is-departure .people-training-import-row-status {
  border-color: rgba(251, 113, 133, 0.55);
  background: rgba(255, 228, 230, 0.9);
  color: #be123c;
}

.people-training-import-row.is-decision.is-skipped .people-training-import-row-status {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

.people-training-import-row-choice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
}

.people-training-import-row-choice-button {
  min-height: 24px;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 900;
  cursor: pointer;
}

.people-training-import-row-choice-button:hover,
.people-training-import-row-choice-button:focus-visible {
  background: rgba(226, 232, 240, 0.82);
  color: #1e293b;
}

.people-training-import-row-choice-button.is-active {
  background: linear-gradient(135deg, #2f80ed, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.people-training-import-person,
.people-training-import-changes {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.people-training-import-person strong {
  color: #17213a;
}

.people-training-import-person span,
.people-training-import-row-message {
  min-width: 0;
  color: #64748b;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-import-changes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.people-training-import-change {
  max-width: min(320px, 100%);
  min-width: 170px;
  display: inline-grid;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(203, 213, 225, 0.75);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.94);
  color: #475569;
  font-size: 0.72rem;
}

.people-training-import-row.is-update .people-training-import-change:not(.is-more),
.people-training-import-row.is-departure .people-training-import-change:not(.is-more) {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(240, 253, 244, 0.62);
  color: #14532d;
}

.people-training-import-row.is-update .people-training-import-change:not(.is-more) strong,
.people-training-import-row.is-departure .people-training-import-change:not(.is-more) strong {
  color: #14532d;
}

.people-training-import-row.is-create .people-training-import-row-message {
  color: #15803d;
  font-weight: 800;
}

.people-training-import-change-label {
  color: #1f2d48;
  font-size: 0.7rem;
  line-height: 1;
  text-transform: uppercase;
}

.people-training-import-change-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}

.people-training-import-change-value {
  min-width: 0;
  display: block;
  padding: 5px 7px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(226, 232, 240, 0.72);
  color: #475569;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-import-change-value.is-after {
  border-color: rgba(22, 163, 74, 0.55);
  background: rgba(34, 197, 94, 0.88);
  color: #ffffff;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.36);
  animation: peopleTrainingImportPulse 1.7s ease-in-out infinite;
}

.people-training-import-change-arrow {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 950;
}

.people-training-import-change.is-more {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  font-weight: 800;
}

@keyframes peopleTrainingImportPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.36);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-training-import-change-value.is-after {
    animation: none;
  }
}

.people-training-bulk-preview-table-wrap,
.people-training-rn-tracking-table-wrap {
  overflow: auto;
}

.people-training-bulk-preview-table,
.people-training-rn-tracking-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}

.people-training-bulk-preview-table th,
.people-training-bulk-preview-table td,
.people-training-rn-tracking-table th,
.people-training-rn-tracking-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.78);
  text-align: left;
  vertical-align: top;
}

.people-training-bulk-preview-table th,
.people-training-rn-tracking-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef6ff;
  color: #475569;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.people-training-bulk-preview-table td strong,
.people-training-rn-tracking-table td strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.people-training-bulk-preview-table td span,
.people-training-rn-tracking-table td span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.people-training-rn-tracking-table tr.is-pending {
  background: rgba(250, 204, 21, 0.08);
}

.people-training-rn-tracking-table tr.is-in_progress {
  background: rgba(59, 130, 246, 0.08);
}

.people-training-rn-tracking-table tr.is-completed {
  background: rgba(34, 197, 94, 0.08);
}

.people-training-rn-tracking-table tr.is-failed {
  background: rgba(239, 68, 68, 0.08);
}

.people-training-progress-pill {
  display: inline-flex !important;
  width: max-content;
  min-width: 104px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700;
}

.people-training-progress-pill.is-pending {
  border-color: #facc15;
  background: #fef9c3;
  color: #854d0e !important;
}

.people-training-progress-pill.is-in_progress {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1d4ed8 !important;
}

.people-training-progress-pill.is-completed {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534 !important;
}

.people-training-progress-pill.is-failed {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #991b1b !important;
}

.people-training-progress-pill.is-missing {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c !important;
}

.people-training-exam-overview-card {
  width: 100%;
  padding: 16px 18px;
}

.people-training-exam-overview-card #people-training-exam-summary {
  width: 100%;
  max-width: none;
}

.people-training-exam-list.is-rn-tracking {
  display: block;
  width: 100%;
}

.people-training-rn-tracking-groups,
.people-training-bulk-preview-groups {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-groups {
  width: 100%;
}

.people-training-rn-card,
.people-training-bulk-group-card {
  overflow: hidden;
  border: 1px solid rgba(121, 145, 185, 0.76);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(238, 244, 252, 0.98), rgba(249, 251, 255, 0.94)),
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.12), transparent 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 16px 34px rgba(35, 54, 98, 0.11);
}

.people-training-rn-card.is-pending,
.people-training-bulk-group-card {
  border-color: rgba(202, 138, 4, 0.5);
}

.people-training-rn-card.is-in_progress {
  border-color: rgba(37, 99, 235, 0.54);
}

.people-training-rn-card.is-completed {
  border-color: rgba(22, 163, 74, 0.5);
}

.people-training-rn-card.is-missing,
.people-training-bulk-group-card.is-blocked {
  border-color: rgba(225, 29, 72, 0.48);
}

.people-training-rn-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(226, 235, 248, 0.96), rgba(243, 247, 252, 0.82));
  border-bottom: 1px solid rgba(190, 204, 232, 0.78);
  cursor: pointer;
  list-style: none;
}

.people-training-rn-card-head::-webkit-details-marker {
  display: none;
}

.people-training-rn-card-head::marker {
  content: "";
}

.people-training-rn-card-head::after {
  content: ">";
  transform: rotate(90deg);
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(178, 198, 230, 0.78);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #244a8f;
  font-size: 0.72rem;
  transition: transform 0.16s ease;
}

.people-training-rn-card:not([open]) .people-training-rn-card-head::after,
.people-training-bulk-group-card:not([open]) .people-training-rn-card-head::after {
  transform: rotate(0deg);
}

.people-training-rn-card-title,
.people-training-rn-person-identity,
.people-training-bulk-person-plan {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-rn-card-title strong,
.people-training-rn-person-identity strong,
.people-training-bulk-person-plan strong {
  color: #0b1730;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-rn-card-title span,
.people-training-rn-person-identity span,
.people-training-bulk-person-plan span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-rn-card-chips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 220px;
  padding-right: 30px;
}

.people-training-rn-card-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px 14px;
  background: rgba(232, 239, 249, 0.38);
}

.people-training-rn-meta-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.people-training-rn-meta-item span {
  color: #718096;
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.people-training-rn-meta-item strong {
  color: #172743;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.people-training-rn-person-list {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(210, 220, 238, 0.78);
}

.people-training-rn-person-row,
.people-training-bulk-person-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(160px, 0.6fr) minmax(260px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.people-training-rn-person-row:last-child,
.people-training-bulk-person-row:last-child {
  border-bottom: 0;
}

.people-training-rn-person-statuses {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.people-training-rn-person-details {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.people-training-rn-person-exam {
  display: grid;
  grid-template-columns: minmax(48px, 0.24fr) minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(218, 225, 239, 0.72);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

.people-training-rn-person-exam strong,
.people-training-rn-person-exam span:not(.people-training-progress-pill) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-rn-person-exam strong {
  color: #172743;
  font-size: 0.78rem;
}

.people-training-rn-person-exam span:not(.people-training-progress-pill) {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 720;
}

.people-training-rn-card.is-compact .people-training-rn-card-head {
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(215, 228, 246, 0.98), rgba(239, 245, 253, 0.9));
}

.people-training-rn-card.is-compact .people-training-rn-card-chips {
  min-width: min(680px, 56vw);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: thin;
}

.people-training-rn-card.is-compact .people-training-rn-card-chips .soft-pill,
.people-training-rn-card.is-compact .people-training-rn-service-summary {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  max-width: 220px;
  padding: 4px 9px;
  border: 1px solid rgba(177, 194, 224, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #263955;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-rn-card.is-compact .people-training-rn-service-summary {
  max-width: 260px;
}

.people-training-rn-pdf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(37, 99, 235, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.9));
  color: #1d4ed8;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.people-training-rn-pdf-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.68);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);
}

.people-training-rn-pdf-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.people-training-rn-pdf-button svg {
  width: 14px;
  height: 14px;
}

.people-training-rn-card.is-compact .people-training-rn-person-row {
  grid-template-columns: minmax(220px, 0.38fr) minmax(320px, 1fr);
  min-height: 52px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.66);
}

.people-training-rn-card.is-compact .people-training-rn-person-identity {
  gap: 2px;
}

.people-training-rn-assignments {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.people-training-person-tracking-list {
  display: grid;
  gap: 8px;
  width: 100%;
}

.people-training-person-tracking-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.36fr) minmax(320px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(121, 145, 185, 0.58);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.9)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 36%);
  box-shadow: 0 10px 24px rgba(35, 54, 98, 0.08);
}

.people-training-person-tracking-identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-person-tracking-identity strong {
  color: #0b1730;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-person-tracking-identity span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-person-tracking-assignments {
  justify-content: flex-end;
}

.people-training-rn-assignment {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 136px;
  max-width: 220px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.88);
  color: #334155;
  line-height: 1;
}

.people-training-rn-assignment strong,
.people-training-rn-assignment span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-rn-assignment strong {
  color: #0f172a;
  font-size: 0.74rem;
  font-weight: 950;
}

.people-training-rn-assignment span {
  color: #52637a;
  font-size: 0.68rem;
  font-weight: 850;
}

.people-training-rn-assignment.is-completed {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(240, 253, 244, 0.86);
}

.people-training-rn-assignment.is-failed {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(254, 226, 226, 0.86);
}

.people-training-rn-assignment.is-in_progress {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(239, 246, 255, 0.88);
}

.people-training-rn-assignment.is-pending {
  border-color: rgba(250, 204, 21, 0.62);
  background: rgba(254, 249, 195, 0.84);
}

.people-training-rn-assignment.is-missing {
  border-color: rgba(251, 113, 133, 0.56);
  background: rgba(255, 241, 242, 0.86);
}

.people-training-bulk-preview-modal {
  width: min(1280px, 100%);
}

.people-training-bulk-preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.2fr) auto;
  align-items: center;
}

.people-training-bulk-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.people-training-bulk-flow span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  color: #1f2d48;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.people-training-bulk-flow strong {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
}

.people-training-bulk-flow small {
  overflow: hidden;
  color: #42526d;
  font-size: 0.76rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-bulk-mode-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.48fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.78);
}

.people-training-bulk-mode-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.people-training-bulk-mode-copy strong {
  color: #17213a;
  font-size: 0.9rem;
  font-weight: 950;
}

.people-training-bulk-mode-copy span {
  color: #60708c;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.people-training-bulk-mode-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.people-training-bulk-mode-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(178, 198, 230, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #1f2d48;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.people-training-bulk-mode-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.people-training-bulk-mode-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-bulk-mode-button:hover,
.people-training-bulk-mode-button:focus-visible,
.people-training-bulk-mode-button.is-active {
  border-color: rgba(37, 99, 235, 0.64);
  background: rgba(239, 246, 255, 0.96);
  color: #1d4ed8;
  outline: none;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
}

.people-training-bulk-quick-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.people-training-bulk-quick-actions > span {
  flex: 0 0 100%;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.people-training-bulk-quick-button {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
}

.people-training-bulk-preview-groups {
  overflow: auto;
  padding: 0 2px 2px;
}

.people-training-bulk-person-plan {
  padding: 8px 10px;
  border: 1px solid rgba(218, 225, 239, 0.72);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

.people-training-bulk-matrix-head,
.people-training-bulk-person-row {
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(360px, 1fr);
  align-items: stretch;
}

.people-training-bulk-matrix-head {
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid rgba(210, 220, 238, 0.78);
  background: rgba(219, 229, 244, 0.56);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.people-training-bulk-person-row {
  grid-template-columns: minmax(250px, 0.62fr) minmax(360px, 1fr);
}

.people-training-bulk-service-header,
.people-training-bulk-service-cells {
  display: grid;
  grid-template-columns: repeat(var(--bulk-service-count), minmax(76px, 1fr));
  gap: 6px;
  min-width: 0;
}

.people-training-bulk-service-header span {
  display: grid;
  place-items: center;
  min-height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: #1d3157;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-bulk-service-cell {
  position: relative;
  display: grid;
  gap: 2px;
  place-items: center;
  min-height: 48px;
  min-width: 0;
  padding: 6px 6px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 11px;
  background: rgba(248, 250, 252, 0.9);
  color: #334155;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.people-training-bulk-service-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(35, 54, 98, 0.12);
}

.people-training-bulk-service-cell input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.people-training-bulk-service-cell strong {
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.people-training-bulk-service-cell span {
  max-width: 100%;
  overflow: hidden;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 780;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-training-bulk-service-cell.is-valid {
  border-color: rgba(34, 197, 94, 0.48);
  background: rgba(240, 253, 244, 0.72);
}

.people-training-bulk-service-cell.is-expiring {
  border-color: rgba(250, 204, 21, 0.58);
  background: rgba(254, 249, 195, 0.72);
}

.people-training-bulk-service-cell.is-expired,
.people-training-bulk-service-cell.is-missing {
  border-color: rgba(251, 113, 133, 0.5);
  background: rgba(255, 241, 242, 0.72);
}

.people-training-bulk-service-cell.is-recommended {
  border-color: rgba(14, 165, 233, 0.62);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 254, 255, 0.86));
}

.people-training-bulk-service-cell.is-recommended span {
  color: #0369a1;
}

.people-training-bulk-service-cell.is-selected {
  border-color: rgba(37, 99, 235, 0.78);
  background: rgba(219, 234, 254, 0.94);
  box-shadow:
    inset 0 0 0 2px rgba(37, 99, 235, 0.16),
    0 8px 18px rgba(37, 99, 235, 0.16);
}

.people-training-bulk-service-cell.is-selected::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 5px;
  color: #1d4ed8;
  font-size: 0.55rem;
  font-weight: 950;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table-wrap {
  width: 100%;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table {
  min-width: 100%;
  table-layout: fixed;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table th:nth-child(1),
.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td:nth-child(1) {
  width: 12%;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table th:nth-child(2),
.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td:nth-child(2) {
  width: 15%;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table th:nth-child(3),
.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td:nth-child(3) {
  width: 17%;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table th:nth-child(4),
.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td:nth-child(4) {
  width: 18%;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table th:nth-child(5),
.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td:nth-child(5) {
  width: 25%;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table th:nth-child(6),
.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td:nth-child(6) {
  width: 13%;
}

.people-training-exam-list.is-rn-tracking .people-training-rn-tracking-table td {
  overflow-wrap: anywhere;
}

@media (max-width: 780px) {
  .people-training-bulk-preview-backdrop,
  .people-training-import-backdrop {
    padding: 12px;
    place-items: stretch;
  }

  .people-training-bulk-preview-modal,
  .people-training-import-modal {
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  .people-training-bulk-preview-head,
  .people-training-bulk-preview-actions,
  .people-training-import-head,
  .people-training-import-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .people-training-bulk-preview-head,
  .people-training-bulk-flow,
  .people-training-bulk-mode-panel,
  .people-training-rn-card-head,
  .people-training-rn-card-meta,
  .people-training-rn-person-row,
  .people-training-person-tracking-card,
  .people-training-bulk-person-row,
  .people-training-bulk-matrix-head,
  .people-training-rn-person-exam {
    grid-template-columns: minmax(0, 1fr);
  }

  .people-training-bulk-service-header,
  .people-training-bulk-service-cells,
  .people-training-service-launch-choices,
  .people-training-bulk-mode-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .people-training-rn-card-chips {
    justify-content: flex-start;
    min-width: 0;
    padding-right: 0;
  }

  .people-training-rn-card.is-compact .people-training-rn-card-chips {
    min-width: 0;
    flex-wrap: wrap;
    overflow: visible;
    padding-right: 30px;
  }

  .people-training-rn-card.is-compact .people-training-rn-person-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .people-training-rn-assignments {
    justify-content: flex-start;
  }

  .people-training-person-tracking-assignments {
    justify-content: flex-start;
  }

  .people-training-rn-assignment {
    min-width: min(150px, 100%);
  }

  .people-training-rn-card-head::after {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }

  .people-training-import-modes,
  .people-training-import-stats,
  .people-training-import-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .people-training-import-table {
    min-width: 0;
  }
}

.jobs-module {
  display: grid;
  gap: 16px;
}

.jobs-list-panel {
  display: grid;
  gap: 16px;
  border-color: rgba(184, 201, 236, 0.72);
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.10), transparent 34%),
    radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.94));
}

.jobs-hero-heading .module-copy {
  margin: 4px 0 0;
  max-width: 620px;
}

.jobs-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.32fr);
}

.job-list {
  display: grid;
  gap: 10px;
}

.job-card {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 104px;
  padding: 15px 16px;
  border: 1px solid rgba(184, 201, 236, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.9));
  box-shadow: 0 14px 32px rgba(40, 55, 92, 0.08);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.job-card:hover,
.job-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(109, 40, 217, 0.42);
  box-shadow: 0 20px 42px rgba(69, 56, 135, 0.14);
  outline: none;
}

.job-card-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 5px rgba(148, 163, 184, 0.14);
}

.job-card.is-active .job-card-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

.job-card.is-draft .job-card-status-dot {
  background: #7c3aed;
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.14);
}

.job-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.job-card-main strong {
  overflow: hidden;
  color: #121a34;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-card-main p {
  display: -webkit-box;
  max-width: 900px;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 0.84rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.job-card-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.job-card-metrics span {
  padding: 6px 9px;
  border: 1px solid rgba(199, 210, 254, 0.75);
  border-radius: 999px;
  background: rgba(245, 247, 255, 0.92);
  color: #34416a;
  font-size: 0.72rem;
  font-weight: 800;
}

.job-editor-backdrop.offer-editor-backdrop {
  z-index: 1810;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(2px);
}

.job-editor-panel:not([hidden]) {
  position: fixed;
  inset: 18px;
  z-index: 1811;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: auto;
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(172, 187, 223, 0.85);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 255, 0.95));
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.22);
}

.job-editor-fixed-head {
  display: grid;
  gap: 12px;
  padding: 18px 22px 0;
  border-bottom: 1px solid rgba(199, 210, 254, 0.72);
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.96);
}

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

.job-sheet-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(199, 210, 254, 0.78);
  border-radius: 16px 16px 0 0;
  background: rgba(248, 250, 252, 0.86);
  color: #334155;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.job-sheet-tabs button span,
.jobs-sheet-icon,
.jobs-nexai-badge {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  font-size: 0.72rem;
  font-weight: 900;
}

.jobs-nexai-badge {
  width: auto;
  min-width: 58px;
  padding: 0 10px;
}

.jobs-sheet-icon.is-danger {
  background: rgba(244, 63, 94, 0.12);
  color: #be123c;
}

.jobs-sheet-icon.is-ppe {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

.job-sheet-tabs button.is-active {
  border-color: rgba(109, 40, 217, 0.46);
  background: linear-gradient(145deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.92));
  color: #1e1b4b;
  box-shadow: inset 0 -3px 0 #6d28d9;
}

.job-editor-body {
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 92px;
}

.job-sheet-panel {
  display: grid;
  gap: 16px;
  animation: jobSheetIn 150ms ease-out;
}

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

@keyframes jobSheetIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.job-sheet-intro {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(199, 210, 254, 0.7);
  border-radius: 18px;
  background: rgba(248, 250, 255, 0.82);
}

.job-sheet-intro strong {
  color: #111936;
}

.job-sheet-intro p {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 0.82rem;
}

.jobs-textarea-shell {
  position: relative;
  display: grid;
}

.jobs-textarea-shell textarea {
  padding-top: 44px;
}

.jobs-nexai-button {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(245, 243, 255, 0.92);
  color: #4c1d95;
  font-weight: 900;
}

.job-nexai-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.jobs-textarea-shell .job-nexai-actions {
  position: absolute;
  top: 8px;
  right: 8px;
}

.job-smart-grid,
.job-condition-layout {
  display: grid;
  gap: 14px;
}

.job-smart-card,
.job-condition-card,
.job-hazard-catalog-panel,
.job-hazard-selected-panel,
.job-ppe-catalog-panel,
.job-ppe-selected-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.88));
  box-shadow: 0 14px 34px rgba(36, 51, 91, 0.07);
}

.job-smart-card.is-enabled,
.job-condition-toggle.is-enabled {
  border-color: rgba(34, 197, 94, 0.34);
  background: linear-gradient(145deg, rgba(240, 253, 244, 0.92), rgba(255, 255, 255, 0.9));
}

.job-smart-card-head,
.job-condition-toggle,
.job-selected-hazard-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.job-smart-card-head strong,
.job-condition-card-head strong,
.job-selected-hazard-head strong {
  color: #111936;
}

.job-smart-card-head small,
.job-selected-hazard-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
}

.job-switch-line {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 900;
  color: #1f2a44;
}

.job-switch-line input {
  width: 18px;
  height: 18px;
  accent-color: #7c3aed;
}

.job-toggle-control {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 7px;
  align-items: center;
  width: max-content;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
}

.job-toggle-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.job-toggle-control em {
  min-width: 20px;
  font-style: normal;
  line-height: 1;
}

.job-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.52);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(226, 232, 240, 0.95), rgba(248, 250, 252, 0.98));
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.12);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.job-toggle-track span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
  transform: translateX(0);
  transition: transform 160ms ease, background 160ms ease;
}

.job-toggle-control input:checked + .job-toggle-track {
  border-color: rgba(124, 58, 237, 0.48);
  background: linear-gradient(135deg, #6d28d9, #22c55e);
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
}

.job-toggle-control input:checked + .job-toggle-track span {
  transform: translateX(18px);
}

.job-toggle-control:focus-within .job-toggle-track {
  outline: 3px solid rgba(124, 58, 237, 0.16);
  outline-offset: 2px;
}

.job-suggestion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.job-suggestion-row button {
  padding: 6px 10px;
  border: 1px solid rgba(199, 210, 254, 0.76);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #405071;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.job-suggestion-row button:hover,
.job-suggestion-row button:focus-visible {
  border-color: rgba(124, 58, 237, 0.36);
  background: rgba(245, 243, 255, 0.92);
  box-shadow: 0 8px 18px rgba(76, 29, 149, 0.09);
  transform: translateY(-1px);
  outline: none;
}

.job-suggestion-row button.is-selected {
  border-color: rgba(124, 58, 237, 0.52);
  background: rgba(237, 233, 254, 0.95);
  color: #4c1d95;
}

.job-work-profile-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.job-work-profile-presets button,
.risk-assessment-job-preset-strip button {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92));
  color: #172033;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(43, 64, 111, 0.05);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.job-work-profile-presets button:hover,
.job-work-profile-presets button:focus-visible,
.risk-assessment-job-preset-strip button:hover,
.risk-assessment-job-preset-strip button:focus-visible {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.job-work-profile-presets button strong,
.risk-assessment-job-preset-strip button strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-work-profile-presets button span,
.risk-assessment-job-preset-strip button span {
  overflow: hidden;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-pur-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(250, 204, 21, 0.38);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.9), rgba(255, 255, 255, 0.92));
}

.job-pur-panel-head,
.risk-assessment-job-pur-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.job-pur-panel-head > div {
  display: grid;
  gap: 3px;
}

.job-pur-panel-head strong,
.risk-assessment-job-pur-head strong {
  color: #172033;
  font-size: 0.9rem;
}

.job-pur-panel-head small {
  color: #64748b;
  font-size: 0.74rem;
  line-height: 1.35;
}

.job-pur-panel-head > span,
.risk-assessment-job-pur-head > span {
  max-width: 42%;
  padding: 6px 10px;
  border: 1px solid rgba(250, 204, 21, 0.52);
  border-radius: 999px;
  background: rgba(254, 249, 195, 0.9);
  color: #713f12;
  font-size: 0.72rem;
  font-weight: 900;
  text-align: right;
}

.job-pur-dropdown {
  display: grid;
  gap: 8px;
}

.job-pur-dropdown summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(250, 204, 21, 0.52);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  list-style: none;
}

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

.job-pur-dropdown summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-pur-dropdown summary strong {
  color: #172033;
  font-size: 0.84rem;
  font-weight: 950;
}

.job-pur-dropdown summary small,
.job-pur-selected-summary {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.job-pur-dropdown summary em {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(254, 249, 195, 0.96);
  color: #713f12;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.job-pur-selected-summary {
  padding: 0 4px;
}

.job-pur-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: min(420px, 52vh);
  overflow: auto;
  padding-right: 3px;
}

.job-pur-multiselect .job-pur-picker {
  gap: 10px;
}

.job-pur-group {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
}

.job-pur-group.is-selected {
  border-color: rgba(250, 204, 21, 0.64);
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.58), rgba(255, 255, 255, 0.88));
}

.job-pur-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.job-pur-group-head > em {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #64748b;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.job-pur-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px;
  padding-left: 10px;
  border-left: 2px solid rgba(250, 204, 21, 0.34);
}

.job-pur-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.job-pur-option span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
}

.job-pur-option strong {
  color: #172033;
  font-size: 0.76rem;
  line-height: 1.25;
}

.job-pur-option small {
  grid-column: 2;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 740;
  line-height: 1.3;
}

.job-pur-option:hover,
.job-pur-option:focus-visible {
  border-color: rgba(250, 204, 21, 0.78);
  box-shadow: 0 12px 22px rgba(113, 63, 18, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.job-pur-option.is-selected {
  border-color: rgba(250, 204, 21, 0.9);
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.98), rgba(255, 255, 255, 0.95));
  box-shadow: 0 14px 24px rgba(113, 63, 18, 0.12);
}

.job-pur-option.is-subpoint {
  border-style: dashed;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
}

.job-pur-option.is-subpoint span {
  background: rgba(120, 113, 108, 0.96);
  font-size: 0.66rem;
}

.job-pur-option.is-subpoint strong::before {
  content: "Razrada / ";
  color: #64748b;
  font-weight: 820;
}

.job-pur-option.is-subpoint.is-selected {
  border-style: solid;
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.98), rgba(255, 255, 255, 0.95));
}

.job-pur-option.is-subpoint strong::before {
  content: "Razrada / ";
}

.job-organization-grid,
.job-hazard-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.job-organization-panel {
  display: grid;
  gap: 12px;
}

.job-organization-stage,
.job-organization-field-group,
.job-organization-check-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.job-organization-stage-head,
.job-organization-field-group > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.job-organization-stage-head strong,
.job-organization-field-group strong,
.job-organization-check-card strong {
  color: #172033;
  font-size: 0.86rem;
  font-weight: 950;
}

.job-organization-stage-head small,
.job-organization-field-group small,
.job-organization-check-card small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.job-organization-field-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.job-organization-field-group .job-organization-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.job-organization-check-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  cursor: pointer;
}

.job-organization-check-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #4f46e5;
}

.job-organization-grid label {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
}

.job-organization-sentence-list {
  display: grid;
  gap: 8px;
}

.job-organization-sentence-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(199, 210, 254, 0.72);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.9));
}

.job-organization-sentence-item span {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.job-smart-card .job-organization-sentence-item textarea {
  min-height: 42px;
  resize: vertical;
}

.job-condition-card-head,
.job-hazard-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.job-condition-card-head span,
.job-hazard-selected-head span:not(.section-kicker) {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(237, 233, 254, 0.9);
  color: #5b21b6;
  font-size: 0.72rem;
  font-weight: 900;
}

.job-condition-toggle-list {
  display: grid;
  gap: 10px;
}

.job-condition-toggle {
  padding: 10px;
  border: 1px solid rgba(212, 221, 238, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
}

.job-condition-toggle-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.job-condition-toggle-copy small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 740;
  line-height: 1.35;
}

.job-condition-toggle textarea,
.job-multichoice-block textarea,
.job-smart-card textarea {
  min-height: 72px;
  resize: vertical;
}

.job-multichoice-block {
  --job-choice-accent: #7c3aed;
  --job-choice-soft: rgba(245, 243, 255, 0.72);
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--job-choice-accent) 22%, rgba(212, 221, 238, 0.82));
  border-left: 4px solid var(--job-choice-accent);
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--job-choice-soft), rgba(255, 255, 255, 0.92));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

.job-multichoice-block.is-violet {
  --job-choice-accent: #7c3aed;
  --job-choice-soft: rgba(237, 233, 254, 0.72);
}

.job-multichoice-block.is-emerald {
  --job-choice-accent: #059669;
  --job-choice-soft: rgba(220, 252, 231, 0.68);
}

.job-multichoice-block.is-amber {
  --job-choice-accent: #d97706;
  --job-choice-soft: rgba(254, 243, 199, 0.72);
}

.job-multichoice-block.is-enabled {
  border-color: color-mix(in srgb, var(--job-choice-accent) 44%, rgba(34, 197, 94, 0.32));
}

.job-multichoice-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.job-multichoice-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--job-choice-accent);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--job-choice-accent) 12%, transparent);
}

.job-multichoice-head strong {
  color: #172033;
  font-size: 0.86rem;
  font-weight: 950;
}

.job-multichoice-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}

.job-psychosocial-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(196, 181, 253, 0.72);
  border-left: 4px solid #7c3aed;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245, 243, 255, 0.8), rgba(255, 255, 255, 0.94));
  box-shadow: 0 16px 34px rgba(91, 33, 182, 0.07);
}

.job-psychosocial-panel.is-enabled {
  border-color: rgba(124, 58, 237, 0.48);
}

.job-psychosocial-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.job-psychosocial-head strong {
  color: #172033;
  font-size: 0.92rem;
  font-weight: 950;
}

.job-psychosocial-head small,
.job-psychosocial-text span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.job-psychosocial-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

.job-psychosocial-level {
  display: grid;
  gap: 5px;
  min-height: 116px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #172033;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.job-psychosocial-level:hover,
.job-psychosocial-level:focus-visible {
  border-color: rgba(124, 58, 237, 0.38);
  box-shadow: 0 14px 24px rgba(91, 33, 182, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.job-psychosocial-level > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #22c55e;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 950;
}

.job-psychosocial-level.is-moderate > span {
  background: #84cc16;
}

.job-psychosocial-level.is-elevated > span {
  background: #eab308;
}

.job-psychosocial-level.is-high > span {
  background: #f97316;
}

.job-psychosocial-level.is-critical > span {
  background: #ef4444;
}

.job-psychosocial-level strong {
  color: #172033;
  font-size: 0.82rem;
  font-weight: 950;
}

.job-psychosocial-level small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.32;
}

.job-psychosocial-level.is-selected {
  border-color: rgba(34, 197, 94, 0.74);
  background: rgba(240, 253, 244, 0.9);
  box-shadow: 0 16px 30px rgba(34, 197, 94, 0.12);
}

.job-psychosocial-text {
  display: grid;
  gap: 6px;
}

@media (max-width: 980px) {
  .job-psychosocial-scale {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

.job-hazard-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.38fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: calc(100vh - 250px);
}

.job-ppe-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.36fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: calc(100vh - 250px);
}

.job-hazard-catalog-panel {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 124px);
  overflow: hidden;
}

.job-ppe-catalog-panel {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 124px);
  overflow: hidden;
}

.job-hazard-catalog {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 4px;
}

.job-ppe-catalog {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 4px;
}

.job-hazard-catalog-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(199, 210, 254, 0.75);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: #1f2a44;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.job-hazard-catalog-item span {
  grid-row: span 2;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(219, 234, 254, 0.82);
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
}

.job-ppe-catalog-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(199, 210, 254, 0.75);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #1f2a44;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.job-ppe-catalog-item:hover,
.job-ppe-catalog-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(14, 165, 233, 0.42);
  background: #ffffff;
  outline: none;
}

.job-ppe-catalog-item.is-selected {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(240, 253, 244, 0.9);
}

.job-ppe-catalog-icon,
.job-selected-ppe-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 12px;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
}

.job-ppe-catalog-icon img,
.job-selected-ppe-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.job-ppe-catalog-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-ppe-catalog-copy strong {
  overflow: hidden;
  color: #10172f;
  font-size: 0.86rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-ppe-catalog-copy small {
  color: #2563eb;
  font-size: 0.73rem;
  font-weight: 900;
}

.job-ppe-catalog-copy em {
  overflow: hidden;
  color: #64748b;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.job-ppe-catalog-item > b {
  display: inline-grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.86);
  color: #1d4ed8;
  font-size: 0.8rem;
  font-weight: 950;
}

.job-ppe-catalog-item.is-selected > b {
  background: rgba(220, 252, 231, 0.92);
  color: #166534;
}

.job-hazard-catalog-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-hazard-catalog-item small {
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-hazard-catalog-item.is-selected {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(240, 253, 244, 0.88);
}

.job-selected-hazards {
  display: grid;
  gap: 10px;
}

.job-selected-ppe {
  display: grid;
  gap: 10px;
}

.job-ppe-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.job-ppe-selected-head strong {
  color: #10172f;
}

.job-selected-ppe-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(217, 226, 240, 0.94);
  border-left: 4px solid #0ea5e9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.job-selected-ppe-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.4fr);
  gap: 9px;
  min-width: 0;
}

.job-selected-ppe-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.job-selected-ppe-fields label > span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.job-selected-ppe-fields .field-span-full {
  grid-column: 1 / -1;
}

.job-selected-ppe-fields input,
.job-selected-ppe-fields textarea {
  min-width: 0;
  width: 100%;
  border-color: rgba(217, 226, 240, 0.96);
  border-radius: 9px;
  background: #ffffff;
}

.job-selected-ppe-fields textarea {
  min-height: 62px;
  resize: vertical;
}

.job-selected-ppe-required {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(217, 226, 240, 0.96);
  border-radius: 9px;
  background: rgba(248, 250, 252, 0.92);
}

.job-selected-ppe-required input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

.job-selected-ppe-fields .job-selected-ppe-required span {
  color: #334155;
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}

.job-ppe-remove-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #ef4444;
  cursor: pointer;
}

.job-ppe-remove-button:hover,
.job-ppe-remove-button:focus-visible {
  border-color: rgba(239, 68, 68, 0.72);
  background: rgba(254, 242, 242, 0.98);
  color: #dc2626;
  outline: none;
}

.job-ppe-remove-button .risk-assessment-risk-icon {
  width: 17px;
  height: 17px;
}

.job-selected-hazard-card {
  display: grid;
  gap: 10px;
  padding: 12px 12px 14px;
  border: 1px solid rgba(190, 204, 232, 0.82);
  border-left: 5px solid rgba(148, 163, 184, 0.64);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
}

.job-selected-hazard-card.is-low {
  border-left-color: #22c55e;
}

.job-selected-hazard-card.is-medium {
  border-left-color: #f59e0b;
}

.job-selected-hazard-card.is-high {
  border-left-color: #ef4444;
}

.job-selected-hazard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid rgba(199, 210, 254, 0.58);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.88));
}

.job-selected-hazard-card.is-low .job-selected-hazard-head {
  border-color: rgba(34, 197, 94, 0.24);
  background: linear-gradient(135deg, rgba(220, 252, 231, 0.88), rgba(255, 255, 255, 0.9));
}

.job-selected-hazard-card.is-medium .job-selected-hazard-head {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.92), rgba(255, 255, 255, 0.9));
}

.job-selected-hazard-card.is-high .job-selected-hazard-head {
  border-color: rgba(239, 68, 68, 0.26);
  background: linear-gradient(135deg, rgba(254, 226, 226, 0.92), rgba(255, 255, 255, 0.9));
}

.job-selected-hazard-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.job-selected-hazard-title > div {
  min-width: 0;
}

.job-selected-hazard-title strong {
  display: block;
  overflow: hidden;
  color: #10172f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-selected-hazard-title small {
  display: block;
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-hazard-code {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(254, 226, 226, 0.9);
  color: #be123c;
  font-size: 0.74rem;
  font-weight: 900;
}

.job-selected-hazard-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  align-items: center;
}

.job-hazard-risk-pill,
.job-hazard-summary-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(199, 210, 254, 0.7);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #334155;
  font-size: 0.72rem;
  font-weight: 900;
}

.job-hazard-risk-pill.is-low {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(220, 252, 231, 0.86);
  color: #166534;
}

.job-hazard-risk-pill.is-medium {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(254, 243, 199, 0.9);
  color: #92400e;
}

.job-hazard-risk-pill.is-high {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(254, 226, 226, 0.94);
  color: #991b1b;
}

.job-hazard-remove-button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #94a3b8;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.job-hazard-remove-button:hover,
.job-hazard-remove-button:focus-visible {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(255, 241, 242, 0.88);
  color: #be123c;
  outline: none;
}

.job-hazard-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.job-hazard-summary-strip strong {
  margin-right: 5px;
  color: #64748b;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.job-hazard-compact-textarea textarea {
  min-height: 44px;
  max-height: none;
  resize: vertical;
}

.job-risk-output-field {
  align-content: start;
}

.job-risk-output {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  padding: 9px 12px;
  border: 1px solid rgba(199, 210, 254, 0.72);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.94);
  color: #334155;
  font-weight: 900;
}

.job-risk-output.is-low {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(220, 252, 231, 0.86);
  color: #166534;
}

.job-risk-output.is-medium {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

.job-risk-output.is-high {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(254, 226, 226, 0.94);
  color: #991b1b;
}

.job-selected-hazard-card {
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(217, 226, 240, 0.94);
  border-left: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.job-selected-hazard-card.is-low {
  border-color: rgba(74, 222, 128, 0.34);
}

.job-selected-hazard-card.is-medium {
  border-color: rgba(245, 158, 11, 0.38);
}

.job-selected-hazard-card.is-high {
  border-color: rgba(248, 113, 113, 0.48);
}

.job-selected-hazard-card.is-neutral {
  border-color: rgba(203, 213, 225, 0.94);
}

.job-selected-hazard-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(250, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.job-selected-hazard-card.is-low .job-selected-hazard-head,
.job-selected-hazard-card.is-medium .job-selected-hazard-head,
.job-selected-hazard-card.is-high .job-selected-hazard-head {
  border-color: rgba(226, 232, 240, 0.92);
  background:
    linear-gradient(135deg, rgba(250, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.job-hazard-back-indicator {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.job-hazard-back-indicator .risk-assessment-risk-icon,
.job-hazard-remove-button .risk-assessment-risk-icon,
.job-hazard-save-button .risk-assessment-risk-icon,
.job-hazard-panel-icon .risk-assessment-risk-icon {
  width: 17px;
  height: 17px;
}

.job-selected-hazard-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.job-hazard-title-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.job-hazard-code {
  display: inline-grid;
  width: 58px;
  min-width: 58px;
  min-height: 31px;
  padding: 0 7px;
  border: 0;
  border-right: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 7px;
  background: rgba(238, 242, 255, 0.94);
  color: #2563eb;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  box-shadow: none;
}

.job-hazard-title-input {
  min-width: 0;
  width: min(560px, 58vw);
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.2;
  box-shadow: none;
}

.job-hazard-code:focus,
.job-hazard-title-input:focus {
  outline: 2px solid rgba(99, 102, 241, 0.22);
  outline-offset: 2px;
}

.job-hazard-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 800;
}

.job-hazard-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid rgba(99, 102, 241, 0.16);
  border-radius: 999px;
  background: rgba(238, 242, 255, 0.9);
  color: #3730a3;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
}

.job-hazard-type-pill.is-hazard {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(219, 234, 254, 0.82);
  color: #1d4ed8;
}

.job-hazard-type-pill.is-harm {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(254, 226, 226, 0.84);
  color: #b91c1c;
}

.job-hazard-type-pill.is-effort {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(254, 243, 199, 0.9);
  color: #92400e;
}

.job-selected-hazard-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
}

.job-hazard-remove-button,
.job-hazard-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.job-hazard-remove-button {
  width: 38px;
  min-width: 38px;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.42);
  background: rgba(255, 255, 255, 0.92);
  color: #ef4444;
}

.job-hazard-remove-button:hover,
.job-hazard-remove-button:focus-visible {
  border-color: rgba(239, 68, 68, 0.72);
  background: rgba(254, 242, 242, 0.98);
  color: #dc2626;
}

.job-hazard-save-button {
  border: 1px solid rgba(79, 70, 229, 0.82);
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: #fff;
  box-shadow: 0 14px 26px rgba(79, 70, 229, 0.25);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.job-hazard-save-button:hover,
.job-hazard-save-button:focus-visible {
  background: linear-gradient(135deg, #4338ca, #1d4ed8);
  box-shadow: 0 18px 34px rgba(79, 70, 229, 0.32);
  transform: translateY(-1px);
  outline: none;
}

.job-hazard-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.55fr) minmax(420px, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  background: #f8fafc;
}

.job-hazard-assessment-panel,
.job-hazard-large-field {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.job-hazard-panel-title,
.job-hazard-large-field > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
}

.job-hazard-large-field > div:first-child > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-hazard-large-field > div:first-child small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 740;
  line-height: 1.35;
}

.job-hazard-panel-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: rgba(238, 242, 255, 0.96);
  color: #4f46e5;
}

.job-hazard-risk-grid {
  display: grid;
  gap: 11px;
}

.job-hazard-score-panel {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.job-hazard-score-panel > span {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.job-hazard-score-panel > span small {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(148, 163, 184, 0.58);
  border-radius: 50%;
  color: #94a3b8;
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1;
  text-transform: none;
}

.job-hazard-select-shell,
.job-risk-output {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(217, 226, 240, 0.96);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.job-hazard-select-shell::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.job-hazard-select-shell i,
.job-risk-output i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.job-hazard-select-shell select {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  appearance: none;
  box-shadow: none;
}

.job-hazard-select-shell select:focus {
  outline: none;
}

.job-hazard-select-shell:focus-within {
  border-color: rgba(79, 70, 229, 0.42);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.11);
}

.job-risk-output {
  min-height: 47px;
  font-size: 0.88rem;
  font-weight: 950;
}

.job-risk-output strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-risk-output em {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: currentColor;
  color: #fff;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
}

.job-hazard-select-shell.is-low i,
.job-risk-output.is-low i {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.13);
}

.job-hazard-select-shell.is-medium i,
.job-risk-output.is-medium i {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.job-hazard-select-shell.is-high i,
.job-risk-output.is-high i {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

.job-risk-output.is-low {
  border-color: rgba(34, 197, 94, 0.32);
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.96));
  color: #166534;
}

.job-risk-output.is-medium {
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
  color: #92400e;
}

.job-risk-output.is-high {
  border-color: rgba(248, 113, 113, 0.52);
  background: linear-gradient(135deg, rgba(255, 228, 230, 0.98), rgba(255, 255, 255, 0.96));
  color: #dc2626;
}

.job-hazard-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.job-hazard-large-field {
  position: relative;
  min-height: 132px;
}

.job-hazard-large-field textarea {
  min-height: 74px;
  padding: 12px 13px 28px;
  border: 1px solid rgba(217, 226, 240, 0.96);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}

.job-hazard-large-field textarea:focus {
  border-color: rgba(79, 70, 229, 0.42);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.job-hazard-character-count {
  position: absolute;
  right: 28px;
  bottom: 24px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

@media (max-width: 980px) {
  .job-organization-field-groups,
  .job-hazard-layout,
  .job-ppe-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-hazard-catalog-panel,
  .job-ppe-catalog-panel {
    position: static;
    max-height: none;
  }

  .job-hazard-catalog,
  .job-ppe-catalog {
    max-height: 360px;
  }

  .job-hazard-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .job-organization-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .job-selected-hazard-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .job-selected-hazard-actions {
    grid-column: auto;
    justify-content: flex-start;
  }

  .job-hazard-title-row {
    gap: 8px;
  }

  .job-hazard-title-input {
    width: 100%;
  }

  .job-selected-ppe-card,
  .job-selected-ppe-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .job-selected-ppe-icon,
  .job-ppe-remove-button {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .job-hazard-body {
    padding: 10px;
  }

  .job-hazard-assessment-panel,
  .job-hazard-large-field {
    padding: 14px;
  }

  .job-hazard-large-field textarea {
    min-height: 118px;
  }

  .job-hazard-character-count {
    right: 24px;
    bottom: 24px;
  }
}

.job-editor-footer {
  position: fixed;
  right: 19px;
  bottom: 19px;
  left: 19px;
  z-index: 1812;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px;
  border-top: 1px solid rgba(199, 210, 254, 0.78);
  border-radius: 0 0 22px 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -18px 42px rgba(36, 51, 91, 0.09);
}

.risk-assessment-module {
  display: grid;
  gap: 16px;
}

.risk-assessment-list-panel {
  display: grid;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(219, 234, 254, 0.62), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 248, 0.94));
}

.risk-assessment-filters {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.5fr) minmax(180px, 0.4fr);
}

.risk-assessment-list {
  display: grid;
  gap: 10px;
}

.risk-assessment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(176, 196, 232, 0.74);
  border-left: 5px solid rgba(88, 115, 180, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 26px rgba(49, 69, 105, 0.08);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.risk-assessment-card:hover,
.risk-assessment-card:focus-visible {
  border-color: rgba(68, 112, 221, 0.5);
  box-shadow: 0 18px 34px rgba(49, 69, 105, 0.14);
  transform: translateY(-1px);
  outline: none;
}

.risk-assessment-card.is-active {
  border-left-color: #2fb36d;
}

.risk-assessment-card.is-in_review {
  border-left-color: #f0b429;
}

.risk-assessment-card.is-archived {
  border-left-color: #94a3b8;
}

.risk-assessment-card-main,
.risk-assessment-card-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-card-main strong,
.risk-assessment-card-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-card-main strong {
  color: #17233f;
  font-size: 0.96rem;
}

.risk-assessment-card-main span:not(.section-kicker) {
  color: #64748b;
  font-size: 0.82rem;
}

.risk-assessment-card-meta {
  grid-auto-flow: column;
  align-items: center;
  justify-content: end;
}

.risk-assessment-editor-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  min-height: 0;
  padding: 0;
  contain: layout paint;
  isolation: isolate;
}

.risk-assessment-editor-panel > .offers-editor-fixed-head {
  grid-row: 1;
}

.risk-assessment-editor-panel > .risk-assessment-dock {
  grid-row: 2;
}

.risk-assessment-editor-panel > .risk-assessment-editor-body {
  grid-row: 3;
}

#risk-assessment-editor-backdrop.offer-editor-backdrop {
  background: rgba(17, 21, 31, 0.18);
  backdrop-filter: none;
  z-index: 2180;
}

.risk-assessment-editor-panel.is-modal-open,
.risk-assessment-editor-panel:not([hidden]) {
  position: fixed;
  inset: 14px;
  z-index: 2190;
  width: auto;
  height: calc(100vh - 28px);
  height: calc(100dvh - 28px);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  max-width: none;
  overflow: hidden;
  border-radius: 22px;
  transform: translateZ(0);
  overscroll-behavior: contain;
}

.risk-assessment-editor-body {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
  scrollbar-gutter: stable;
  transform: translateZ(0);
  will-change: scroll-position;
}

.risk-assessment-editor-body > .entity-form {
  min-height: max-content;
}

.risk-assessment-export-status {
  min-height: 0;
  margin: 0;
  padding: 0 20px 10px;
  font-size: 0.78rem;
  font-weight: 760;
}

.risk-assessment-export-status:empty {
  display: none;
}

.risk-assessment-export-status.is-success {
  color: #047857;
}

.risk-assessment-editor-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(199, 210, 254, 0.62);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.86));
  box-shadow: 0 12px 34px rgba(76, 90, 130, 0.06);
  scroll-margin-top: 18px;
}

.risk-assessment-editor-section[hidden] {
  display: none;
}

.risk-assessment-editor-section.is-active {
  animation: riskAssessmentPaneIn 0.16s ease-out;
}

@keyframes riskAssessmentPaneIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes safenexus-logo-fill {
  0% {
    height: 12%;
    opacity: 0.32;
  }
  45% {
    height: 82%;
    opacity: 0.58;
  }
  100% {
    height: 18%;
    opacity: 0.36;
  }
}

@keyframes safenexus-loader-shine {
  0%,
  18% {
    transform: translateX(-130%);
  }
  52% {
    transform: translateX(130%);
  }
  100% {
    transform: translateX(130%);
  }
}

.risk-assessment-editor-section + .risk-assessment-editor-section {
  margin-top: 12px;
}

.risk-assessment-editor-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: stretch;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.9)),
    #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.risk-assessment-editor-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.risk-assessment-editor-section-head span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.88);
  color: #1e40af;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-editor-section-head strong {
  color: #172033;
  font-size: 0.96rem;
}

.risk-assessment-editor-section-head p {
  margin: 0;
  max-width: 78ch;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.45;
  text-align: left;
  padding-left: 38px;
}

.risk-assessment-editor-section-head > p {
  grid-column: 1;
}

.risk-assessment-basic-shell {
  display: grid;
  gap: 12px;
}

.risk-assessment-basic-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(214, 224, 242, 0.92);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  box-shadow: 0 12px 28px rgba(35, 49, 84, 0.055);
}

.risk-assessment-basic-card.is-identity,
.risk-assessment-basic-card.is-core {
  border-color: rgba(250, 204, 21, 0.34);
}

.risk-assessment-basic-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 0.75fr);
  gap: 12px;
  align-items: flex-start;
}

.risk-assessment-basic-card-icon {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, 0.45);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 253, 245, 0.92));
  color: #2563eb;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
}

.risk-assessment-basic-card-icon .icon-svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.1;
}

.risk-assessment-basic-card.is-core .risk-assessment-basic-card-icon {
  border-color: rgba(250, 204, 21, 0.56);
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(239, 246, 255, 0.88));
  color: #b45309;
}

.risk-assessment-basic-card.is-znr .risk-assessment-basic-card-icon {
  border-color: rgba(34, 197, 94, 0.4);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(239, 246, 255, 0.9));
  color: #047857;
}

.risk-assessment-basic-card.is-team .risk-assessment-basic-card-icon {
  border-color: rgba(124, 58, 237, 0.32);
  background:
    linear-gradient(135deg, rgba(245, 243, 255, 0.98), rgba(239, 246, 255, 0.92));
  color: #6d28d9;
}

.risk-assessment-basic-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-basic-card-head strong {
  color: #111827;
  font-size: 0.98rem;
}

.risk-assessment-basic-card-head p {
  margin: 0;
  max-width: 42ch;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.45;
  text-align: right;
}

.risk-assessment-basic-card {
  position: relative;
}

.risk-assessment-basic-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.55), rgba(14, 165, 233, 0.16));
}

.risk-assessment-basic-card.is-core::before {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.8), rgba(37, 99, 235, 0.16));
}

.risk-assessment-basic-card.is-znr::before {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.76), rgba(37, 99, 235, 0.14));
}

.risk-assessment-basic-card.is-team::before {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.72), rgba(37, 99, 235, 0.14));
}

.risk-assessment-basic-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.risk-assessment-basic-summary article {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.risk-assessment-basic-summary article.is-wide {
  grid-column: span 2;
}

.risk-assessment-basic-summary span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risk-assessment-basic-summary strong {
  display: block;
  overflow: hidden;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-basic-grid {
  align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.risk-assessment-basic-grid > .field > span:first-child {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.risk-assessment-basic-grid > .field > span:first-child::before {
  content: "";
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid rgba(191, 219, 254, 0.76);
  border-radius: 8px;
  background:
    var(--risk-basic-field-icon, none) center / 13px 13px no-repeat,
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.92));
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}

.risk-assessment-field-company { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232563eb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='18'%20rx='2'/%3E%3Cpath%20d='M9%208h1M14%208h1M9%2012h1M14%2012h1M9%2016h1M14%2016h1'/%3E%3C/svg%3E"); }
.risk-assessment-field-work-order { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232563eb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202h9l5%205v15H6z'/%3E%3Cpath%20d='M14%202v6h6M9%2013h6M9%2017h4'/%3E%3C/svg%3E"); }
.risk-assessment-field-number { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23b45309'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%209h16M4%2015h16M10%203L8%2021M16%203l-2%2018'/%3E%3C/svg%3E"); }
.risk-assessment-field-status { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23047857'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2012l2%202%204-5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3C/svg%3E"); }
.risk-assessment-field-date { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232563eb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'/%3E%3Cpath%20d='M16%202v4M8%202v4M3%2010h18'/%3E%3C/svg%3E"); }
.risk-assessment-field-nkd { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237c3aed'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h16M4%2012h16M4%2017h10'/%3E%3Cpath%20d='M6%204v16'/%3E%3C/svg%3E"); }
.risk-assessment-field-employees { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232563eb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H7a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9.5'%20cy='7'%20r='4'/%3E%3Cpath%20d='M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E"); }
.risk-assessment-location-field { --risk-basic-field-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232563eb'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2010c0%206-8%2012-8%2012S4%2016%204%2010a8%208%200%201%201%2016%200Z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E"); }

.risk-assessment-basic-grid.is-core {
  grid-template-columns: minmax(240px, 1.35fr) minmax(220px, 1.1fr) minmax(112px, 0.48fr) minmax(170px, 0.75fr);
}

.risk-assessment-field-company,
.risk-assessment-field-nkd,
.risk-assessment-field-work-order {
  grid-column: span 2;
}

.risk-assessment-location-field {
  grid-column: 1 / -1;
}

.risk-assessment-field-number,
.risk-assessment-field-date {
  max-width: 190px;
}

.risk-assessment-field-status,
.risk-assessment-field-employees {
  grid-column: span 1;
}

.risk-assessment-compact-field select,
.risk-assessment-compact-field input {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.risk-assessment-basic-grid input[readonly] {
  color: #0f172a;
  border-color: rgba(250, 204, 21, 0.55);
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.78), rgba(255, 255, 255, 0.9));
  font-weight: 850;
}

.risk-assessment-location-field {
  align-self: stretch;
}

.risk-assessment-location-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 7px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.risk-assessment-location-chip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.risk-assessment-location-chip:hover,
.risk-assessment-location-chip:focus-visible {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.risk-assessment-location-chip.is-selected {
  border-color: rgba(250, 204, 21, 0.72);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.96));
}

.risk-assessment-location-chip.is-all-scope {
  opacity: 0.82;
}

.risk-assessment-location-chip-icon,
.risk-assessment-location-chip-check {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
}

.risk-assessment-location-chip-icon {
  width: 30px;
  height: 30px;
  background: rgba(219, 234, 254, 0.82);
  color: #2563eb;
}

.risk-assessment-location-chip-icon .risk-assessment-risk-icon {
  width: 15px;
  height: 15px;
}

.risk-assessment-location-chip-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  align-content: center;
}

.risk-assessment-location-chip-copy strong,
.risk-assessment-location-chip-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-location-chip-copy strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 880;
}

.risk-assessment-location-chip-copy small {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 740;
}

.risk-assessment-location-chip-check {
  width: 24px;
  height: 24px;
  background: rgba(226, 232, 240, 0.75);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 950;
}

.risk-assessment-location-chip.is-selected .risk-assessment-location-chip-check {
  background: #facc15;
  color: #0f172a;
}

.risk-assessment-checkbox-line.is-location-scope {
  margin-top: 7px;
}

@media (max-width: 760px) {
  .risk-assessment-location-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

.risk-assessment-basic-grid .field-span-2 {
  grid-column: span 2;
}

.risk-assessment-basic-stack {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 1120px);
  justify-self: start;
  align-items: start;
}

.risk-assessment-basic-textbox.is-znr-third {
  grid-column: span 2;
}

.risk-assessment-basic-textbox.is-znr-half {
  grid-column: span 3;
}

.risk-assessment-basic-textbox.is-znr-service {
  grid-column: 1 / span 3;
  grid-row: 1;
}

.risk-assessment-basic-textbox.is-znr-experts {
  grid-column: 4 / span 3;
  grid-row: 1;
}

.risk-assessment-basic-textbox.is-znr-authorized {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.risk-assessment-basic-textbox.is-znr-representatives {
  grid-column: 3 / span 2;
  grid-row: 2;
}

.risk-assessment-basic-textbox.is-znr-committee {
  grid-column: 5 / span 2;
  grid-row: 2;
}

.risk-assessment-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.risk-assessment-template-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 5px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.06);
}

.risk-assessment-template-inline::before {
  content: "Predložak";
  flex: 0 0 auto;
  padding-left: 8px;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risk-assessment-template-inline select {
  min-width: 150px;
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-color: transparent;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.96);
  font-size: 0.74rem;
  font-weight: 850;
}

.risk-assessment-template-inline .ghost-button,
.risk-assessment-file-control .ghost-button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.risk-assessment-template-inline .ghost-button {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
}

.risk-assessment-basic-stack textarea {
  min-height: 108px;
  resize: vertical;
}

.risk-assessment-basic-textbox .risk-assessment-field-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.risk-assessment-basic-textbox .risk-assessment-template-inline {
  width: 100%;
}

.risk-assessment-basic-textbox .risk-assessment-template-inline select {
  min-width: 0;
  width: 100%;
}

@media (max-width: 1180px) {
  .risk-assessment-basic-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .risk-assessment-basic-textbox.is-znr-third,
  .risk-assessment-basic-textbox.is-znr-half {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .risk-assessment-basic-stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

.risk-assessment-authorization-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(280px, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.94));
}

.risk-assessment-authorization-company-field {
  margin: 0;
}

.risk-assessment-file-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.risk-assessment-file-control span {
  overflow: hidden;
  max-width: 280px;
  color: #52627a;
  font-size: 0.74rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-card-subhead {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(226, 232, 240, 0.86);
}

.risk-assessment-basic-grid .field small,
.risk-assessment-people-field small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.35;
}

.risk-assessment-people-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.risk-assessment-team-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.risk-assessment-team-picker-grid .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-compact-list {
  display: grid;
  gap: 10px;
}

.risk-assessment-compact-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(120px, 0.7fr) minmax(170px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.risk-assessment-compact-row.is-workplace-job {
  grid-template-columns: minmax(220px, 1.4fr) minmax(80px, 0.45fr) minmax(80px, 0.45fr) minmax(180px, 1fr) auto;
}

.risk-assessment-compact-row.is-company-collaborator {
  grid-template-columns: minmax(180px, 1.15fr) minmax(110px, 0.72fr) minmax(170px, 1fr) minmax(110px, 0.68fr) auto;
}

.risk-assessment-compact-row.is-authorized-person {
  grid-template-columns: minmax(120px, 0.55fr) minmax(210px, 1.1fr) minmax(180px, 1fr) minmax(110px, 0.55fr) minmax(170px, 0.9fr) auto;
}

.risk-assessment-compact-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-compact-row label span {
  color: #52627a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.risk-assessment-compact-row input {
  min-height: 38px;
}

.risk-assessment-compact-row select {
  min-height: 38px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.risk-assessment-appendix-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.risk-assessment-appendix-cards article {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.94));
}

.risk-assessment-appendix-cards span,
.risk-assessment-appendix-cards strong {
  display: block;
}

.risk-assessment-appendix-cards span {
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risk-assessment-appendix-cards strong {
  margin-top: 5px;
  color: #0f172a;
  font-size: 0.82rem;
  line-height: 1.35;
}

.risk-assessment-linked-appendix {
  display: grid;
  min-width: 0;
}

.risk-assessment-linked-appendix-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 12% 0%, rgba(250, 204, 21, 0.13), transparent 30%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.risk-assessment-linked-appendix-panel.is-empty {
  border-style: dashed;
  box-shadow: none;
}

.risk-assessment-linked-appendix-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.risk-assessment-linked-appendix-head span {
  display: block;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.risk-assessment-linked-appendix-head strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
}

.risk-assessment-linked-appendix-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
}

.risk-assessment-linked-appendix-kpis {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-linked-appendix-kpis em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.risk-assessment-linked-appendix-kpis b {
  color: #0f172a;
  font-size: 0.88rem;
}

.risk-assessment-linked-appendix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.risk-assessment-linked-appendix-grid article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.risk-assessment-linked-appendix-grid h4 {
  margin: 0;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 950;
}

.risk-assessment-linked-table {
  display: grid;
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 14px;
  background: #ffffff;
}

.risk-assessment-linked-table > div {
  display: grid;
  align-items: stretch;
  min-width: 720px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

.risk-assessment-linked-table > div:last-child {
  border-bottom: 0;
}

.risk-assessment-linked-table.is-equipment > div {
  grid-template-columns: 0.42fr 0.95fr 1.2fr 0.58fr 1.35fr 0.76fr;
}

.risk-assessment-linked-table.is-inspections > div {
  grid-template-columns: 0.42fr 0.9fr 0.72fr 1.18fr 1.1fr 1.05fr;
}

.risk-assessment-linked-table.is-inspections.is-grouped > div {
  grid-template-columns: 0.85fr 1.2fr 1.05fr 1.05fr;
  min-width: 0;
}

.risk-assessment-linked-table.is-work-environment > div {
  grid-template-columns: 1fr 0.86fr 1fr 1.2fr 1.05fr;
}

.risk-assessment-linked-table.is-ppe-by-job > div {
  grid-template-columns: 1.05fr 0.95fr 0.42fr 1.5fr 1.05fr 1.3fr;
  min-width: 920px;
}

.risk-assessment-linked-table span {
  min-width: 0;
  padding: 8px 9px;
  color: #334155;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.risk-assessment-linked-table .is-head {
  position: sticky;
  top: 0;
  z-index: 1;
}

.risk-assessment-linked-table .is-head span {
  background: #0f172a;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-assessment-linked-table .is-missing-ppe span:nth-child(4) {
  color: #b45309;
  font-style: italic;
}

.risk-assessment-linked-table .has-ppe span:nth-child(4) {
  color: #0f5132;
  font-weight: 850;
}

.risk-assessment-inspection-location-groups {
  display: grid;
  gap: 12px;
}

.risk-assessment-inspection-location-group {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
}

.risk-assessment-inspection-location-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.risk-assessment-inspection-location-group header strong {
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 930;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-inspection-location-group header span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.82);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 900;
}

.risk-assessment-overview-table-section {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  min-width: 0;
}

.risk-assessment-overview-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.risk-assessment-overview-section-head strong {
  color: #0f172a;
  font-size: 0.96rem;
  font-weight: 950;
}

.risk-assessment-people-field {
  position: relative;
}

.risk-assessment-people-search {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.78rem;
}

.risk-assessment-people-picker {
  display: grid;
  gap: 8px;
  max-height: 270px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(214, 224, 242, 0.96);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
}

.risk-assessment-person-chip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.risk-assessment-person-chip:hover,
.risk-assessment-person-chip:focus-visible {
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 12px 24px rgba(35, 49, 84, 0.08);
  transform: translateY(-1px);
}

.risk-assessment-person-chip.is-selected {
  border-color: rgba(250, 204, 21, 0.72);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 12px 28px rgba(250, 204, 21, 0.13);
}

.risk-assessment-person-avatar,
.risk-assessment-person-check {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
}

.risk-assessment-person-avatar {
  width: 34px;
  height: 34px;
  background: #0f172a;
  color: #facc15;
  font-size: 0.72rem;
}

.risk-assessment-person-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-person-copy strong,
.risk-assessment-person-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-person-copy strong {
  color: #111827;
  font-size: 0.8rem;
}

.risk-assessment-person-copy small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.risk-assessment-person-check {
  width: 26px;
  height: 26px;
  background: rgba(226, 232, 240, 0.7);
  color: #475569;
}

.risk-assessment-person-chip.is-selected .risk-assessment-person-check {
  background: #facc15;
  color: #0f172a;
}

.risk-assessment-employer-card {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.risk-assessment-employer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  cursor: pointer;
  list-style: none;
}

.risk-assessment-employer-head::-webkit-details-marker {
  display: none;
}

.risk-assessment-employer-head::after {
  content: "Otvori";
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 900;
}

.risk-assessment-employer-card[open] .risk-assessment-employer-head::after {
  content: "Sakrij";
}

.risk-assessment-employer-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-employer-head span {
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.risk-assessment-employer-head strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.risk-assessment-employer-head p {
  margin: 0;
  max-width: 42ch;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.45;
  text-align: right;
}

.risk-assessment-employer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.risk-assessment-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.risk-assessment-rich-field {
  align-content: start;
}

.risk-assessment-rich-editor {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.risk-assessment-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.9);
}

.risk-assessment-rich-toolbar button {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(191, 203, 226, 0.95);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #1e293b;
  font-size: 0.74rem;
  font-weight: 820;
  cursor: pointer;
}

.risk-assessment-rich-toolbar button:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(239, 246, 255, 0.98);
}

.risk-assessment-rich-toolbar [data-risk-rich-template-save],
.risk-assessment-rich-toolbar [data-risk-rich-template-select] {
  margin-left: auto;
}

.risk-assessment-rich-toolbar [data-risk-rich-template-select] + [data-risk-rich-template-save] {
  margin-left: 0;
}

.risk-assessment-rich-toolbar [data-risk-rich-template-save] {
  border-color: rgba(250, 204, 21, 0.62);
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.92), rgba(255, 255, 255, 0.94));
  color: #854d0e;
}

.risk-assessment-rich-toolbar select {
  min-height: 30px;
  max-width: 210px;
  padding: 5px 28px 5px 10px;
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  font-size: 0.74rem;
  font-weight: 860;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.05);
}

.risk-assessment-linked-section {
  border-color: rgba(191, 219, 254, 0.76);
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.94));
}

.risk-assessment-linked-section .risk-assessment-editor-section-head span {
  background: rgba(254, 249, 195, 0.92);
  color: #854d0e;
}

.risk-assessment-rich-surface {
  min-height: 260px;
  padding: 16px 18px;
  border: 1px solid rgba(216, 180, 254, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #172033;
  font-size: 0.96rem;
  line-height: 1.6;
  outline: none;
  overflow: auto;
  word-break: normal;
}

.risk-assessment-rich-surface:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

.risk-assessment-rich-surface:empty::before {
  content: "Upiši tekst, dodaj listu ili umetni sliku...";
  color: #94a3b8;
  font-weight: 700;
}

.risk-assessment-rich-surface:empty::before {
  content: "Upisi tekst, zalijepi iz Worda ili umetni sliku...";
}

.risk-assessment-section-grid .risk-assessment-rich-surface {
  min-height: 220px;
}

.risk-assessment-rich-surface h1,
.risk-assessment-rich-surface h2,
.risk-assessment-rich-surface h3,
.risk-assessment-rich-surface h4,
.risk-assessment-rich-surface h5,
.risk-assessment-rich-surface h6,
.risk-assessment-rich-surface p,
.risk-assessment-rich-surface div,
.risk-assessment-rich-surface ul,
.risk-assessment-rich-surface ol,
.risk-assessment-rich-surface blockquote,
.risk-assessment-rich-surface pre {
  margin: 0 0 10px;
}

.risk-assessment-rich-surface h1,
.risk-assessment-rich-surface h2,
.risk-assessment-rich-surface h3 {
  color: #172033;
  font-size: 1.08rem;
}

.risk-assessment-rich-surface h4 {
  color: #334155;
  font-size: 0.98rem;
}

.risk-assessment-rich-surface ul,
.risk-assessment-rich-surface ol {
  padding-left: 22px;
}

.risk-assessment-rich-surface blockquote {
  padding: 10px 12px;
  border-left: 4px solid rgba(37, 99, 235, 0.25);
  background: rgba(239, 246, 255, 0.7);
}

.risk-assessment-rich-surface pre {
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  white-space: pre-wrap;
}

.risk-assessment-rich-surface table {
  width: auto;
  max-width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  background: #ffffff;
}

.risk-assessment-rich-surface th,
.risk-assessment-rich-surface td {
  min-width: 44px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.72);
  vertical-align: top;
}

.risk-assessment-rich-surface th {
  background: rgba(241, 245, 249, 0.9);
  font-weight: 800;
}

.risk-assessment-rich-surface a {
  color: #1d4ed8;
  text-decoration: underline;
}

.risk-assessment-rich-surface img {
  display: block;
  width: min(100%, 720px);
  height: auto;
  max-height: 420px;
  object-fit: contain;
  margin: 12px 0;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 12px;
  background: #fff;
}

.risk-assessment-subpanel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(190, 204, 232, 0.78);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.7);
  contain: layout paint;
}

.risk-assessment-editor-section.risk-assessment-subpanel {
  padding: 14px;
}

#risk-assessment-block-jobs.risk-assessment-subpanel {
  gap: 9px;
  padding: 10px 12px 12px;
}

#risk-assessment-block-jobs .risk-assessment-editor-section-head {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 14px;
  box-shadow: none;
}

#risk-assessment-block-jobs .risk-assessment-editor-section-head span {
  width: 24px;
  height: 24px;
  font-size: 0.66rem;
}

#risk-assessment-block-jobs .risk-assessment-editor-section-head strong {
  font-size: 0.9rem;
}

#risk-assessment-block-jobs .offers-items-head {
  min-height: 34px;
  padding-inline: 2px;
}

#risk-assessment-block-jobs .offers-items-head strong {
  margin: 0;
  font-size: 0.86rem;
}

.risk-assessment-repeat-list {
  display: grid;
  gap: 10px;
}

.risk-assessment-repeat-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.risk-assessment-repeat-row.is-measure {
  grid-template-columns: minmax(240px, 1.5fr) minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
}

.risk-assessment-repeat-row.is-job {
  contain: layout paint;
}

.risk-assessment-repeat-row.is-job.is-collapsed {
  gap: 7px;
  padding: 9px 12px;
  border-color: rgba(191, 219, 254, 0.9);
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.95));
}

.risk-assessment-repeat-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-repeat-row label span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.risk-assessment-job-head,
.risk-assessment-risk-line {
  display: grid;
  gap: 10px;
}

.risk-assessment-job-head {
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72);
}

.risk-assessment-job-head[data-risk-job-toggle-head] {
  cursor: pointer;
  border-radius: 10px;
}

.risk-assessment-job-head[data-risk-job-toggle-head]:hover {
  background: rgba(239, 246, 255, 0.62);
}

.risk-assessment-repeat-row.is-job.is-collapsed .risk-assessment-job-head {
  align-items: center;
  padding: 2px 0 0;
  border-bottom: 0;
}

.risk-assessment-job-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-job-head strong {
  color: #172033;
  font-size: 1rem;
}

.risk-assessment-job-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.risk-assessment-job-head small {
  color: #64748b;
  font-weight: 750;
}

.risk-assessment-job-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(16, 185, 129, 0.34);
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.92);
  color: #047857;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.risk-assessment-job-complete-badge span {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  font-size: 0.66rem;
  line-height: 1;
}

.risk-assessment-job-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-job-collapse-marker {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.96);
  color: #1d4ed8;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
}

.risk-assessment-job-tools .ghost-button,
.risk-assessment-job-tools .primary-button,
.risk-assessment-armor-row .ghost-button {
  min-height: 34px;
  padding: 7px 11px;
}

.risk-assessment-job-collapsed-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  cursor: pointer;
}

.risk-assessment-job-collapsed-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 850;
}

.risk-assessment-jobs-collapse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.92);
}

.risk-assessment-jobs-collapse-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.risk-assessment-jobs-collapse-toolbar strong {
  color: #172033;
  font-size: 0.84rem;
  font-weight: 950;
}

.risk-assessment-jobs-collapse-toolbar span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
}

.risk-assessment-jobs-collapse-toolbar .ghost-button {
  min-height: 30px;
  padding: 6px 10px;
}

.risk-assessment-job-tools .primary-button.risk-assessment-nexai-button {
  border-color: rgba(250, 204, 21, 0.72) !important;
  background: linear-gradient(135deg, #facc15, #fde68a) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 26px rgba(250, 204, 21, 0.2);
}

.risk-assessment-job-import-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
}

.risk-assessment-job-import-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  gap: 10px;
  align-items: center;
}

.risk-assessment-job-import-head > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-job-import-head strong {
  color: #172033;
  font-size: 0.98rem;
}

.risk-assessment-job-catalog-stats {
  display: grid;
  min-width: 0;
}

.risk-assessment-job-catalog-stats span {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.risk-assessment-job-catalog-stats span.is-active {
  border-color: rgba(250, 204, 21, 0.72);
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.96), rgba(255, 255, 255, 0.86));
}

.risk-assessment-job-catalog-stats span.is-target {
  min-height: 42px;
  border-color: rgba(96, 165, 250, 0.44);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.88));
}

.risk-assessment-job-catalog-stats span.is-target.is-missing {
  border-color: rgba(251, 146, 60, 0.46);
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.88));
}

.risk-assessment-job-catalog-stats span.is-target strong {
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-catalog-stats strong {
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1;
}

.risk-assessment-job-catalog-stats small {
  color: #64748b;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.risk-assessment-job-catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.risk-assessment-job-catalog-dropdown {
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.88);
  overflow: hidden;
}

.risk-assessment-job-catalog-dropdown > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  color: #172033;
  cursor: pointer;
  list-style: none;
}

.risk-assessment-job-catalog-dropdown > summary::-webkit-details-marker {
  display: none;
}

.risk-assessment-job-catalog-dropdown > summary span {
  font-size: 0.82rem;
  font-weight: 920;
}

.risk-assessment-job-catalog-dropdown > summary strong {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 999px;
  background: #ffffff;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 900;
}

.risk-assessment-job-catalog-dropdown-body {
  display: grid;
  gap: 9px;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(219, 234, 254, 0.86);
}

.risk-assessment-job-catalog-search {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.risk-assessment-job-catalog-search span {
  color: #52627a;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.risk-assessment-job-catalog-search input {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font: inherit;
  font-size: 0.9rem;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.risk-assessment-job-catalog-search input:focus {
  border-color: rgba(37, 99, 235, 0.48);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.risk-assessment-job-catalog-quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-job-catalog-quick-actions .ghost-button {
  min-height: 42px;
  border-radius: 10px;
}

.risk-assessment-job-catalog-ai {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.risk-assessment-job-catalog-ai label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.risk-assessment-job-catalog-ai label > span {
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.risk-assessment-job-catalog-ai textarea {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(147, 197, 253, 0.88);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.35;
  resize: vertical;
}

.risk-assessment-job-catalog-ai textarea:focus {
  border-color: rgba(37, 99, 235, 0.56);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.risk-assessment-job-catalog-ai-actions {
  display: grid;
  gap: 7px;
  min-width: 170px;
}

.risk-assessment-job-catalog-ai-actions .ghost-button,
.risk-assessment-job-catalog-ai-actions .secondary-button {
  min-height: 38px;
  border-radius: 10px;
}

.risk-assessment-job-catalog-ai .inline-help {
  grid-column: 1 / -1;
  margin: -3px 0 0;
}

.risk-assessment-job-catalog-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  max-height: 190px;
  overflow: auto;
  padding: 2px 4px 4px 2px;
  scrollbar-gutter: stable;
}

.risk-assessment-job-catalog-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font: inherit;
  text-align: left;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.055);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.risk-assessment-job-catalog-card:hover,
.risk-assessment-job-catalog-card:focus-visible {
  border-color: rgba(37, 99, 235, 0.46);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
  outline: none;
}

.risk-assessment-job-catalog-card.is-selected {
  border-color: rgba(250, 204, 21, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.94));
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.2), 0 18px 34px rgba(250, 204, 21, 0.14);
}

.risk-assessment-job-catalog-card.is-ai-suggested:not(.is-selected) {
  border-color: rgba(37, 99, 235, 0.42);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.92));
}

.risk-assessment-job-catalog-card:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

.risk-assessment-job-catalog-check {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: 9px;
  background: rgba(239, 246, 255, 0.92);
  color: #2563eb;
}

.risk-assessment-job-catalog-card.is-selected .risk-assessment-job-catalog-check {
  border-color: rgba(250, 204, 21, 0.8);
  background: #facc15;
  color: #0f172a;
}

.risk-assessment-job-catalog-check .risk-assessment-risk-icon {
  width: 15px;
  height: 15px;
}

.risk-assessment-job-catalog-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-job-catalog-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.risk-assessment-job-catalog-title-row strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-catalog-title-row em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 6px;
  border: 1px solid rgba(203, 213, 225, 0.84);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.risk-assessment-job-catalog-description {
  display: -webkit-box;
  overflow: hidden;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.risk-assessment-job-catalog-metrics,
.risk-assessment-job-catalog-hazards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-assessment-job-catalog-metrics span,
.risk-assessment-job-catalog-hazards small {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.risk-assessment-job-catalog-metrics span {
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(248, 250, 252, 0.88);
  color: #334155;
}

.risk-assessment-job-catalog-metrics span.is-ai-score {
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(219, 234, 254, 0.86);
  color: #1d4ed8;
}

.risk-assessment-job-catalog-ai-reason {
  display: block;
  overflow: hidden;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-catalog-hazards small {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.78);
  color: #0f766e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-catalog-empty {
  display: grid;
  gap: 5px;
  min-height: 128px;
  align-content: center;
  justify-items: center;
  padding: 20px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  text-align: center;
}

.risk-assessment-job-catalog-empty strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.risk-assessment-job-import-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  padding-top: 2px;
}

.risk-assessment-job-import-actions .primary-button,
.risk-assessment-job-import-actions .ghost-button {
  min-height: 42px;
  min-width: 180px;
}

.risk-assessment-toolbar-icon-button {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  padding: 0;
  border-radius: 12px;
}

.risk-assessment-toolbar-icon-button span[aria-hidden="true"] {
  font-size: 1.2rem;
  font-weight: 950;
  line-height: 1;
}

.risk-assessment-job-analysis-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.28fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.risk-assessment-job-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.risk-assessment-job-analysis-shell.is-armor-focus {
  grid-template-columns: minmax(260px, 0.28fr) minmax(0, 1fr);
}

.risk-assessment-job-tree {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 8px;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 12px 28px rgba(15, 23, 42, 0.045);
}

.risk-assessment-job-analysis-shell.is-armor-focus .risk-assessment-job-tree {
  display: grid;
}

.risk-assessment-job-tree-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.risk-assessment-job-tree-block + .risk-assessment-job-tree-block {
  padding-top: 10px;
  border-top: 1px solid rgba(203, 213, 225, 0.82);
}

.risk-assessment-job-tree-block.is-catalog {
  gap: 10px;
}

.risk-assessment-job-tree-head,
.risk-assessment-job-tree-empty {
  display: grid;
  gap: 2px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.risk-assessment-job-tree-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.risk-assessment-job-tree-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-job-tree-add {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
}

.risk-assessment-job-tree-add .risk-assessment-risk-icon {
  width: 14px;
  height: 14px;
}

.risk-assessment-job-tree-head strong,
.risk-assessment-job-tree-empty strong {
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 920;
}

.risk-assessment-job-tree-head span,
.risk-assessment-job-tree-empty span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 780;
}

.risk-assessment-job-tree-section {
  display: grid;
  gap: 5px;
  padding-left: calc(var(--unit-depth, 0) * 10px);
}

.risk-assessment-job-tree-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-job-tree-group-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-tree-group-head span {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.66rem;
}

.risk-assessment-job-tree-button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.risk-assessment-job-tree-button:hover,
.risk-assessment-job-tree-button:focus-visible {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.risk-assessment-job-tree-button.is-active {
  border-color: rgba(37, 99, 235, 0.48);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.42);
}

.risk-assessment-job-tree-button.is-required-complete {
  border-color: rgba(16, 185, 129, 0.42);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: inset 4px 0 0 rgba(16, 185, 129, 0.36);
}

.risk-assessment-job-tree-button.is-active.is-required-complete {
  border-color: rgba(16, 185, 129, 0.52);
  box-shadow: inset 4px 0 0 rgba(16, 185, 129, 0.52), 0 8px 18px rgba(15, 23, 42, 0.08);
}

.risk-assessment-job-tree-button.is-empty-workplace {
  border-style: dashed;
  color: #475569;
  background: rgba(248, 250, 252, 0.88);
}

.risk-assessment-job-tree-button.is-empty-workplace:not(:disabled):hover,
.risk-assessment-job-tree-button.is-empty-workplace:not(:disabled):focus-visible {
  border-color: rgba(37, 99, 235, 0.42);
  color: #1d4ed8;
}

.risk-assessment-job-tree-button.is-empty-workplace:disabled {
  cursor: default;
  opacity: 0.68;
}

.risk-assessment-job-tree-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.risk-assessment-job-tree-button span {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-tree-button b {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #10b981;
  color: #ffffff;
  font-size: 0.68rem;
  line-height: 1;
}

.risk-assessment-job-tree-button small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-tree-nodes {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-job-tree-node {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-job-tree-node.is-folder > .risk-assessment-job-tree-row {
  color: #475569;
  cursor: default;
}

.risk-assessment-job-tree-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 7px 6px calc(7px + var(--unit-depth, 0) * 12px);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  text-align: left;
}

.risk-assessment-job-tree-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}

.risk-assessment-job-tree-node.is-folder > .risk-assessment-job-tree-row:hover .risk-assessment-job-tree-actions,
.risk-assessment-job-tree-node.is-folder > .risk-assessment-job-tree-row:focus-within .risk-assessment-job-tree-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.risk-assessment-job-tree-actions button {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #2563eb;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
}

.risk-assessment-job-tree-actions button:hover,
.risk-assessment-job-tree-actions button:focus-visible {
  border-color: rgba(37, 99, 235, 0.62);
  background: #eff6ff;
  outline: none;
}

.risk-assessment-job-tree-actions .risk-assessment-risk-icon {
  width: 11px;
  height: 11px;
}

.risk-assessment-job-tree-quick-form {
  display: grid;
  gap: 7px;
  margin: 2px 0 6px calc(30px + var(--unit-depth, 0) * 12px);
  padding: 9px;
  border: 1px solid rgba(147, 197, 253, 0.82);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.94));
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
}

.risk-assessment-job-tree-quick-form label {
  display: grid;
  gap: 5px;
}

.risk-assessment-job-tree-quick-form label span {
  color: #2563eb;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risk-assessment-job-tree-quick-form input {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
}

.risk-assessment-job-tree-quick-form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.risk-assessment-job-tree-quick-form button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 0.68rem;
}

button.risk-assessment-job-tree-row {
  cursor: pointer;
}

button.risk-assessment-job-tree-row:hover,
button.risk-assessment-job-tree-row:focus-visible,
.risk-assessment-job-tree-node.is-active > button.risk-assessment-job-tree-row {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(239, 246, 255, 0.96);
  outline: none;
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.5);
}

.risk-assessment-job-tree-node.is-complete > button.risk-assessment-job-tree-row {
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(236, 253, 245, 0.7);
}

.risk-assessment-job-tree-node.is-active.is-complete > button.risk-assessment-job-tree-row {
  border-color: rgba(16, 185, 129, 0.52);
  box-shadow: inset 3px 0 0 rgba(16, 185, 129, 0.66);
}

.risk-assessment-job-tree-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: rgba(226, 232, 240, 0.76);
  color: #475569;
}

.risk-assessment-job-tree-node.is-workplace .risk-assessment-job-tree-icon {
  background: rgba(219, 234, 254, 0.9);
  color: #2563eb;
}

.risk-assessment-job-tree-node.is-complete .risk-assessment-job-tree-icon {
  background: rgba(209, 250, 229, 0.96);
  color: #059669;
}

.risk-assessment-job-tree-icon .risk-assessment-risk-icon {
  width: 13px;
  height: 13px;
}

.risk-assessment-job-tree-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.risk-assessment-job-tree-copy strong,
.risk-assessment-job-tree-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-job-tree-copy strong {
  color: #172033;
  font-size: 0.74rem;
  font-weight: 900;
}

.risk-assessment-job-tree-copy small {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 780;
}

.risk-assessment-job-tree-state {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  background: #ffffff;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 950;
}

.risk-assessment-job-tree-state.is-done {
  border-color: rgba(16, 185, 129, 0.34);
  background: #10b981;
}

.risk-assessment-job-tree-children {
  position: relative;
  display: grid;
  gap: 2px;
}

.risk-assessment-job-tree-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 4px;
  left: calc(18px + var(--unit-depth, 0) * 12px);
  border-left: 1px solid rgba(203, 213, 225, 0.82);
  pointer-events: none;
}

.risk-assessment-job-tree .risk-assessment-catalog-picker {
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 10px;
  border-radius: 12px;
  contain: layout paint;
}

.risk-assessment-job-tree .risk-assessment-catalog-intro {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: -10px -10px 0;
  padding: 10px;
}

.risk-assessment-job-tree .risk-assessment-catalog-actions,
.risk-assessment-job-tree .risk-assessment-catalog-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.risk-assessment-job-tree .risk-assessment-catalog-items {
  grid-template-columns: minmax(0, 1fr);
}

.risk-assessment-job-tree .risk-assessment-catalog-section > summary,
.risk-assessment-job-tree .risk-assessment-catalog-family > summary,
.risk-assessment-job-tree .risk-assessment-catalog-group > summary {
  gap: 8px;
  padding: 9px 10px;
}

.risk-assessment-job-tree .risk-assessment-catalog-families,
.risk-assessment-job-tree .risk-assessment-catalog-groups,
.risk-assessment-job-tree .risk-assessment-catalog-items {
  margin-left: 8px;
  padding-left: 8px;
}

.risk-assessment-job-tree .risk-assessment-catalog-item {
  min-height: 52px;
}

.risk-assessment-repeat-row.is-job {
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
}

.risk-assessment-repeat-row.is-job.is-required-complete {
  border-color: rgba(16, 185, 129, 0.42);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.42), rgba(255, 255, 255, 0.94));
}

.risk-assessment-repeat-row.is-job.is-required-complete .risk-assessment-job-head {
  border-bottom-color: rgba(16, 185, 129, 0.28);
}

.risk-assessment-repeat-row.is-job.is-tree-focus {
  border-color: rgba(37, 99, 235, 0.58);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.risk-assessment-repeat-row.is-job .risk-assessment-job-head {
  gap: 8px;
  padding-bottom: 6px;
}

.risk-assessment-manual-list {
  display: grid;
  gap: 14px;
}

.risk-assessment-manual-scope {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(147, 197, 253, 0.72);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.15), transparent 32%),
    radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.12), transparent 34%);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.risk-assessment-manual-scope-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.risk-assessment-manual-scope-hero > div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.risk-assessment-manual-scope-hero strong {
  color: #0f172a;
  font-size: 1.02rem;
  font-weight: 900;
}

.risk-assessment-manual-scope-hero p,
.risk-assessment-manual-scope-title span {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.45;
}

.risk-assessment-manual-scope-count {
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 20px;
  background: rgba(239, 246, 255, 0.92);
  color: #1d4ed8;
}

.risk-assessment-manual-scope-count strong {
  font-size: 1.85rem;
  line-height: 1;
}

.risk-assessment-manual-scope-count span {
  color: #475569;
  font-size: 0.68rem;
  font-weight: 850;
}

.risk-assessment-manual-scope-summary {
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.45;
}

.risk-assessment-manual-scope-group {
  display: grid;
  gap: 9px;
}

.risk-assessment-manual-scope-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.risk-assessment-manual-scope-title strong {
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 900;
}

.risk-assessment-manual-scope-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
}

.risk-assessment-manual-scope-chip {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.risk-assessment-manual-scope-chip:hover {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.risk-assessment-manual-scope-chip.is-selected {
  border-color: rgba(37, 99, 235, 0.65);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(240, 253, 250, 0.9));
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12), 0 12px 28px rgba(15, 23, 42, 0.07);
}

.risk-assessment-manual-scope-chip.is-inherited {
  border-style: dashed;
}

.risk-assessment-manual-scope-chip strong {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-manual-scope-chip span {
  overflow: hidden;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-manual-scope-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.risk-assessment-manual-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-left: 5px solid #93c5fd;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.95)),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.risk-assessment-manual-card[data-risk-tone="success"] {
  border-left-color: #22c55e;
}

.risk-assessment-manual-card[data-risk-tone="warning"] {
  border-left-color: #facc15;
}

.risk-assessment-manual-card[data-risk-tone="danger"] {
  border-left-color: #f97316;
}

.risk-assessment-manual-card[data-risk-tone="critical"] {
  border-left-color: #ef4444;
}

.risk-assessment-manual-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.risk-assessment-manual-head > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-manual-head strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-manual-head small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.45;
}

.risk-assessment-manual-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.risk-assessment-manual-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 850;
}

.risk-assessment-manual-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.78);
}

.risk-assessment-manual-flow span,
.risk-assessment-manual-flow strong {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 13px;
  background: #fff;
}

.risk-assessment-manual-flow span {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-manual-flow strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-manual-result.is-success {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(220, 252, 231, 0.9);
  color: #166534;
}

.risk-assessment-manual-result.is-warning {
  border-color: rgba(250, 204, 21, 0.48);
  background: rgba(254, 249, 195, 0.95);
  color: #854d0e;
}

.risk-assessment-manual-result.is-danger {
  border-color: rgba(249, 115, 22, 0.36);
  background: rgba(255, 237, 213, 0.95);
  color: #9a3412;
}

.risk-assessment-manual-result.is-critical {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(254, 226, 226, 0.95);
  color: #991b1b;
}

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

.risk-assessment-manual-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-manual-grid label span {
  color: #52627a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.risk-assessment-manual-grid .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-manual-actions {
  display: flex;
  justify-content: flex-end;
}

.risk-assessment-template-manual-scope {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(147, 197, 253, 0.65);
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.8);
}

.risk-assessment-template-manual-scope strong {
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 900;
}

.risk-assessment-template-manual-scope span {
  color: #334155;
  font-size: 0.76rem;
  line-height: 1.45;
}

.risk-assessment-chemical-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.risk-assessment-hazard-stack {
  display: grid;
  gap: 14px;
  width: min(100%, 1120px);
  justify-self: center;
}

.risk-assessment-hazard-panel {
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at 96% 0%, rgba(59, 130, 246, 0.12), transparent 34%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.07);
}

.risk-assessment-hazard-panel.is-text {
  width: min(100%, 940px);
  justify-self: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96)),
    radial-gradient(circle at 10% 0%, rgba(124, 58, 237, 0.1), transparent 32%);
}

.risk-assessment-hazard-panel.is-register {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 32%);
}

.risk-assessment-hazard-panel summary {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.risk-assessment-hazard-panel summary::-webkit-details-marker {
  display: none;
}

.risk-assessment-hazard-panel summary::after {
  content: "+";
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #2563eb;
  font-size: 1rem;
  font-weight: 950;
}

.risk-assessment-hazard-panel[open] summary::after {
  content: "-";
  color: #0f766e;
}

.risk-assessment-hazard-panel summary > span:not(.risk-assessment-hazard-panel-icon) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-hazard-panel summary strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 950;
}

.risk-assessment-hazard-panel summary small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.42;
}

.risk-assessment-hazard-panel-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(147, 197, 253, 0.52);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 253, 245, 0.9));
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
}

.risk-assessment-hazard-panel-body {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

.risk-assessment-hazard-text-body {
  display: grid;
  padding: 0 16px 16px;
}

.risk-assessment-hazard-text-body > .field {
  width: min(100%, 780px);
  justify-self: center;
}

.risk-assessment-hazard-text-body textarea {
  min-height: 140px;
  padding: 14px 16px;
  border-radius: 18px;
  line-height: 1.52;
}

.risk-assessment-chemical-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(147, 197, 253, 0.62);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.16), transparent 34%);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.risk-assessment-chemical-panel.is-import {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.12), transparent 36%);
  border-color: rgba(59, 130, 246, 0.34);
}

.risk-assessment-chemical-panel.is-official {
  margin-top: 12px;
  border-color: rgba(250, 204, 21, 0.54);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95)),
    radial-gradient(circle at top right, rgba(250, 204, 21, 0.16), transparent 30%);
}

.risk-assessment-chemical-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.risk-assessment-chemical-panel strong {
  color: #0f172a;
  font-size: 1rem;
}

.risk-assessment-stl-assistant-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.risk-assessment-stl-ai-badge {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.74);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.92), rgba(255, 255, 255, 0.9));
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 16px 30px rgba(250, 204, 21, 0.24);
}

.risk-assessment-stl-dropzone {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(59, 130, 246, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at 12% 0%, rgba(250, 204, 21, 0.16), transparent 28%);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.risk-assessment-stl-dropzone::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px;
  height: 3px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.86);
}

.risk-assessment-stl-dropzone[data-stl-phase="reading"]::after,
.risk-assessment-stl-dropzone[data-stl-phase="review"]::after {
  background: linear-gradient(90deg, #2563eb, #facc15, #22c55e);
  animation: risk-assessment-stl-progress 1.3s ease-in-out infinite;
}

.risk-assessment-stl-dropzone[data-stl-phase="complete"]::after {
  background: linear-gradient(90deg, #22c55e, #facc15);
}

.risk-assessment-stl-dropzone.is-dragging,
.risk-assessment-stl-dropzone.has-file {
  border-color: rgba(250, 204, 21, 0.86);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

@keyframes risk-assessment-stl-progress {
  0% {
    transform: translateX(-16%);
  }
  50% {
    transform: translateX(16%);
  }
  100% {
    transform: translateX(-16%);
  }
}

.risk-assessment-stl-dropzone-label {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  cursor: pointer;
}

.risk-assessment-stl-dropzone-label > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-stl-dropzone-label strong {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 900;
}

.risk-assessment-stl-dropzone-label small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.45;
}

.risk-assessment-stl-dropzone-icon {
  display: inline-grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.9));
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
}

.risk-assessment-stl-file-meta {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 9px 11px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  color: #475569;
  font-size: 0.75rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.risk-assessment-stl-workflow li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: #64748b;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.risk-assessment-stl-workflow li span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
}

.risk-assessment-stl-workflow li strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-workflow li small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-workflow li.is-active {
  border-color: rgba(250, 204, 21, 0.86);
  background: rgba(254, 249, 195, 0.74);
  color: #0f172a;
  transform: translateY(-1px);
}

.risk-assessment-stl-workflow li.is-complete {
  border-color: rgba(34, 197, 94, 0.36);
  background: rgba(240, 253, 244, 0.78);
  color: #14532d;
}

.risk-assessment-stl-workflow li.is-complete span {
  background: #dcfce7;
  color: #166534;
}

.risk-assessment-stl-extract-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.risk-assessment-stl-extract-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.88);
}

.risk-assessment-stl-extract-grid strong {
  color: #0f172a;
  font-size: 0.74rem;
  font-weight: 900;
}

.risk-assessment-stl-extract-grid small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-chemical-search,
.risk-assessment-chemical-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.risk-assessment-chemical-upload {
  grid-template-columns: minmax(0, 1fr);
}

.risk-assessment-chemical-upload .primary-button {
  width: 100%;
  min-height: 46px;
}

.risk-assessment-chemical-results,
.risk-assessment-chemical-list {
  display: grid;
  gap: 10px;
}

.risk-assessment-official-substance-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.25fr) auto;
  gap: 10px;
  align-items: center;
}

.risk-assessment-official-substance-toolbar select {
  min-height: 42px;
}

.risk-assessment-official-substances {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.risk-assessment-official-substance {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.risk-assessment-official-substance:hover {
  border-color: rgba(250, 204, 21, 0.88);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.risk-assessment-official-substance > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-official-substance strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-official-substance small {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.risk-assessment-official-substance-badge {
  display: inline-grid;
  min-width: 70px;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.7);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.18);
  color: #0f172a;
  font-size: 0.7rem;
  font-weight: 900;
}

.risk-assessment-chemical-stl-preview {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 34%);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.075);
}

.risk-assessment-chemical-stl-preview[hidden] {
  display: none;
}

.risk-assessment-stl-preview-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.risk-assessment-stl-preview-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-stl-preview-head strong {
  color: #0f172a;
  font-size: 0.96rem;
  font-weight: 900;
}

.risk-assessment-stl-preview-head small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-preview-status {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(255, 255, 255, 0.92));
  color: #166534;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-stl-preview-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.34fr);
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
}

.risk-assessment-stl-preview-score > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-stl-preview-score strong {
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 900;
}

.risk-assessment-stl-preview-score small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.risk-assessment-stl-preview-score > span {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.96);
}

.risk-assessment-stl-preview-score i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
}

.risk-assessment-stl-preview-score.is-good i {
  background: #facc15;
}

.risk-assessment-stl-preview-score.is-warning i {
  background: #f97316;
}

.risk-assessment-stl-preview-list {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
  padding-right: 3px;
}

.risk-assessment-stl-preview-file {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.84);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
}

.risk-assessment-stl-preview-file.is-warning {
  border-color: rgba(249, 115, 22, 0.38);
  background:
    linear-gradient(145deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.92));
}

.risk-assessment-stl-preview-file-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 4px 2px 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

.risk-assessment-stl-preview-file-head > span:first-child {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.9));
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 950;
}

.risk-assessment-stl-preview-file-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-stl-preview-file-head strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-preview-file-head small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-file-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: 170px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 999px;
  background: rgba(240, 253, 244, 0.86);
  color: #166534;
  font-size: 0.66rem;
  font-weight: 900;
  text-align: center;
}

.risk-assessment-stl-file-score.is-good {
  border-color: rgba(250, 204, 21, 0.48);
  background: rgba(254, 249, 195, 0.86);
  color: #854d0e;
}

.risk-assessment-stl-file-score.is-warning {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(255, 237, 213, 0.88);
  color: #9a3412;
}

.risk-assessment-stl-preview-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.risk-assessment-stl-preview-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.risk-assessment-stl-preview-card-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.risk-assessment-stl-preview-card strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-stl-quality {
  display: grid;
  gap: 2px;
  min-width: 96px;
  padding: 8px 10px;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 13px;
  background: rgba(240, 253, 244, 0.82);
  color: #166534;
  font-size: 0.66rem;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.risk-assessment-stl-quality b {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 950;
}

.risk-assessment-stl-quality.is-good {
  border-color: rgba(250, 204, 21, 0.46);
  background: rgba(254, 249, 195, 0.82);
  color: #854d0e;
}

.risk-assessment-stl-quality.is-warning {
  border-color: rgba(249, 115, 22, 0.42);
  background: rgba(255, 237, 213, 0.86);
  color: #9a3412;
}

.risk-assessment-stl-preview-card small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.risk-assessment-stl-preview-card em {
  display: inline-flex;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
}

.risk-assessment-stl-preview-field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.risk-assessment-stl-preview-field-tags em {
  border-color: rgba(187, 247, 208, 0.92);
  background: rgba(240, 253, 244, 0.86);
  color: #166534;
}

.risk-assessment-stl-preview-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.risk-assessment-stl-preview-details span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(226, 232, 240, 0.74);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.9);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.35;
}

.risk-assessment-stl-preview-details b {
  color: #0f172a;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

body.is-risk-stl-review-open {
  overflow: hidden;
}

.risk-assessment-stl-review-backdrop {
  z-index: 1420;
}

.risk-assessment-stl-review-dialog {
  position: fixed;
  inset: 4vh 3vw auto;
  z-index: 1430;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.risk-assessment-stl-review-dialog[hidden] {
  display: none;
}

.risk-assessment-stl-review-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.72);
}

.risk-assessment-stl-review-head h3 {
  margin: 2px 0 4px;
  color: #0f172a;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 950;
  letter-spacing: 0;
}

.risk-assessment-stl-review-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 18px 24px 24px;
}

.risk-assessment-stl-review-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.risk-assessment-stl-review-kpis article {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.risk-assessment-stl-review-kpis span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-stl-review-kpis strong {
  color: #0f172a;
  font-size: 1.22rem;
  font-weight: 950;
}

.risk-assessment-stl-review-scroll {
  overflow: auto;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.risk-assessment-stl-review-table {
  width: 100%;
  min-width: 1280px;
  border-collapse: separate;
  border-spacing: 0;
  color: #0f172a;
  font-size: 0.78rem;
}

.risk-assessment-stl-review-table th,
.risk-assessment-stl-review-table td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.96);
  border-right: 1px solid rgba(226, 232, 240, 0.74);
  vertical-align: top;
}

.risk-assessment-stl-review-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
}

.risk-assessment-stl-review-table td:last-child,
.risk-assessment-stl-review-table th:last-child {
  border-right: 0;
}

.risk-assessment-stl-file-cell,
.risk-assessment-stl-identity,
.risk-assessment-stl-limit-lines,
.risk-assessment-stl-protection-cell {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.risk-assessment-stl-file-cell strong,
.risk-assessment-stl-identity strong {
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 950;
}

.risk-assessment-stl-file-cell span,
.risk-assessment-stl-identity small,
.risk-assessment-stl-review-table td small {
  color: #64748b;
  font-size: 0.69rem;
  font-weight: 760;
  line-height: 1.35;
}

.risk-assessment-stl-code-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.risk-assessment-stl-code-chips span,
.risk-assessment-stl-empty,
.risk-assessment-stl-limit-lines span,
.risk-assessment-stl-protection-cell span {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(203, 213, 225, 0.84);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.25;
}

.risk-assessment-stl-code-chips.is-cas span {
  border-color: rgba(14, 165, 233, 0.35);
  background: rgba(240, 249, 255, 0.92);
  color: #075985;
}

.risk-assessment-stl-code-chips.is-ghs span {
  border-color: rgba(15, 23, 42, 0.18);
  background: #0f172a;
  color: #ffffff;
}

.risk-assessment-stl-code-chips.is-h span {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
}

.risk-assessment-stl-code-chips.is-p span {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
}

.risk-assessment-stl-empty {
  border-style: dashed;
  color: #94a3b8;
}

.risk-assessment-stl-limit-lines span {
  justify-self: start;
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(240, 253, 244, 0.92);
  color: #166534;
}

.risk-assessment-stl-protection-cell span {
  display: grid;
  justify-items: start;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.96);
  white-space: normal;
}

.risk-assessment-stl-protection-cell b {
  color: #0f172a;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.risk-assessment-stl-review-quality {
  display: grid;
  gap: 3px;
  min-width: 96px;
  padding: 8px 10px;
  border: 1px solid rgba(249, 115, 22, 0.38);
  border-radius: 14px;
  background: rgba(255, 247, 237, 0.92);
  color: #9a3412;
}

.risk-assessment-stl-review-quality.is-strong {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(240, 253, 244, 0.9);
  color: #166534;
}

.risk-assessment-stl-review-quality.is-good {
  border-color: rgba(250, 204, 21, 0.46);
  background: rgba(254, 249, 195, 0.88);
  color: #854d0e;
}

.risk-assessment-stl-review-quality strong {
  color: inherit;
  font-size: 0.94rem;
  font-weight: 950;
}

.risk-assessment-stl-review-quality span {
  color: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-stl-review-failures {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(249, 115, 22, 0.34);
  border-radius: 18px;
  background: rgba(255, 247, 237, 0.9);
}

.risk-assessment-stl-review-failures > strong {
  color: #9a3412;
  font-weight: 950;
}

.risk-assessment-stl-review-failures p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #7c2d12;
  font-size: 0.78rem;
}

.risk-assessment-chemical-result {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.risk-assessment-chemical-result img {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 14px;
  background: #fff;
  object-fit: contain;
}

.risk-assessment-chemical-result div,
.risk-assessment-chemical-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-chemical-result strong,
.risk-assessment-chemical-card-head strong {
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-chemical-result span,
.risk-assessment-chemical-card-head small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-chemical-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-left: 5px solid #facc15;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.94));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.risk-assessment-chemical-register {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(191, 219, 254, 0.94);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
}

.risk-assessment-chemical-register-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.risk-assessment-chemical-register-head > div {
  display: grid;
  gap: 3px;
}

.risk-assessment-chemical-register-head strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
}

.risk-assessment-chemical-register-head small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
}

.risk-assessment-chemical-register-head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(250, 204, 21, 0.75);
  border-radius: 999px;
  background: rgba(254, 249, 195, 0.78);
  color: #713f12;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-biological-risk-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.risk-assessment-biological-risk-actions > span {
  padding: 7px 10px;
  border: 1px solid rgba(34, 197, 94, 0.38);
  border-radius: 999px;
  background: #f0fdf4;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-chemical-register-scroll {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 14px;
  background: #fff;
}

.risk-assessment-chemical-register-table {
  width: 100%;
  min-width: 1480px;
  border-collapse: collapse;
  color: #0f172a;
  font-size: 0.72rem;
  line-height: 1.35;
}

.risk-assessment-chemical-register-table th,
.risk-assessment-chemical-register-table td {
  vertical-align: top;
  border: 1px solid rgba(15, 23, 42, 0.32);
  padding: 8px;
}

.risk-assessment-chemical-register-table th {
  background: #e5e7eb;
  color: #111827;
  font-weight: 900;
  text-align: left;
}

.risk-assessment-chemical-register-table th small {
  color: #374151;
  font-weight: 760;
}

.risk-assessment-chemical-register-table tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.82);
}

.risk-assessment-chemical-register-table td strong {
  color: #0f172a;
  font-weight: 900;
}

.risk-assessment-chemical-register-table td span,
.risk-assessment-chemical-register-table td small {
  display: block;
}

.risk-assessment-chemical-editor-table th,
.risk-assessment-chemical-editor-table td {
  min-width: 104px;
  vertical-align: top;
}

.risk-assessment-chemical-editor-table .is-index {
  min-width: 48px;
}

.risk-assessment-chemical-editor-table .is-chemical-name {
  min-width: 210px;
}

.risk-assessment-biological-risk-table .is-biological-name {
  min-width: 260px;
}

.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) input,
.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) textarea,
.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) select {
  min-height: 0;
  margin: 0 0 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) textarea {
  min-height: 0;
  overflow: hidden;
  resize: vertical;
}

.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) select[multiple] {
  min-height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
}

.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) input:focus,
.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) textarea:focus,
.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) select:focus {
  border: 0;
  background: rgba(240, 253, 244, 0.58);
  box-shadow: inset 0 -1px 0 rgba(34, 197, 94, 0.46);
  outline: none;
}

.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) input::placeholder,
.risk-assessment-biological-risk-table td:not(.is-score-control):not(.is-risk) textarea::placeholder {
  color: #94a3b8;
  font-weight: 650;
}

.risk-assessment-chemical-editor-table .is-limit-cell,
.risk-assessment-chemical-editor-table .is-note-cell,
.risk-assessment-chemical-editor-table .is-prilog-cell,
.risk-assessment-chemical-editor-table .is-list-cell {
  min-width: 142px;
}

.risk-assessment-chemical-editor-table input,
.risk-assessment-chemical-editor-table textarea,
.risk-assessment-chemical-editor-table select {
  width: 100%;
  min-height: 24px;
  margin: 0 0 4px;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.3;
}

.risk-assessment-chemical-editor-table select[multiple] {
  min-height: 86px;
  padding: 6px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 8px;
  background: #ffffff;
}

.risk-assessment-chemical-editor-table textarea {
  min-height: 48px;
  resize: vertical;
}

.risk-assessment-chemical-editor-table input:focus,
.risk-assessment-chemical-editor-table textarea:focus,
.risk-assessment-chemical-editor-table select:focus {
  border-bottom-color: rgba(37, 99, 235, 0.72);
  background: rgba(239, 246, 255, 0.42);
  box-shadow: 0 2px 0 rgba(37, 99, 235, 0.14);
  outline: none;
}

.risk-assessment-chemical-editor-table input::placeholder,
.risk-assessment-chemical-editor-table textarea::placeholder {
  color: #94a3b8;
  font-weight: 680;
}

.risk-assessment-chemical-editor-table .is-score-control {
  min-width: 124px;
  vertical-align: middle;
}

.risk-assessment-chemical-score-select-shell {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 7px;
}

.risk-assessment-chemical-score-select-shell select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #172554;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 920;
  appearance: none;
  outline: none;
}

.risk-assessment-chemical-risk-result {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 7px;
}

.risk-assessment-chemical-risk-result strong {
  font-size: 0.76rem;
  line-height: 1.15;
}

.risk-assessment-chemical-editor-table td small {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 740;
  line-height: 1.35;
}

.risk-assessment-chemical-editor-table .is-row-actions {
  min-width: 96px;
}

.risk-assessment-chemical-editor-table .is-row-actions .ghost-button {
  width: 100%;
  min-height: 30px;
  margin-bottom: 6px;
  padding: 6px 8px;
  font-size: 0.68rem;
}

.risk-assessment-substance-job-status {
  margin: -2px 0 7px;
  color: #94a3b8;
  font-size: 0.63rem;
  font-weight: 820;
  line-height: 1.25;
}

.risk-assessment-substance-job-status.is-linked {
  color: #047857;
}

.risk-assessment-substance-job-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(8px);
}

.risk-assessment-substance-job-picker-backdrop[hidden] {
  display: none;
}

.risk-assessment-substance-job-picker-dialog {
  display: grid;
  gap: 14px;
  width: min(720px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
  box-shadow: 0 28px 76px rgba(15, 23, 42, 0.22);
}

.risk-assessment-substance-job-picker-head,
.risk-assessment-substance-job-picker-actions,
.risk-assessment-substance-job-picker-toolbar {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.risk-assessment-substance-job-picker-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-substance-job-picker-head strong {
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 950;
}

.risk-assessment-substance-job-picker-head small {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
}

.risk-assessment-substance-job-picker-toolbar {
  justify-content: flex-start;
}

.risk-assessment-substance-job-picker-body {
  display: grid;
  gap: 8px;
  max-height: min(460px, 52vh);
  overflow: auto;
  padding: 4px 3px 4px 0;
}

.risk-assessment-substance-job-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.risk-assessment-substance-job-option:has(input:checked) {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(240, 253, 244, 0.88);
}

.risk-assessment-substance-job-option input {
  width: 16px;
  height: 16px;
  accent-color: #16a34a;
}

.risk-assessment-substance-job-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-substance-job-option strong,
.risk-assessment-substance-job-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-substance-job-option strong {
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 900;
}

.risk-assessment-substance-job-option small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 740;
}

.risk-assessment-substance-job-picker-feedback:empty {
  display: none;
}

.risk-assessment-substance-job-picker-actions {
  align-items: center;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid rgba(226, 232, 240, 0.86);
}

.risk-assessment-chemical-editor-table .is-empty-row {
  padding: 18px;
  color: #64748b;
  font-weight: 820;
  text-align: center;
}

.risk-assessment-chemical-register-table .is-index {
  width: 48px;
  text-align: center;
  font-weight: 850;
}

.risk-assessment-chemical-register-table .is-vertical {
  width: 54px;
  text-align: center;
  vertical-align: middle;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.risk-assessment-chemical-register-table .is-score {
  text-align: center;
  vertical-align: middle;
  font-weight: 850;
}

.risk-assessment-chemical-register-table .is-score small {
  display: inline-flex;
  justify-content: center;
  min-width: 24px;
  margin-top: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-weight: 950;
}

.risk-assessment-chemical-register-table .is-risk {
  text-align: center;
  vertical-align: middle;
}

.risk-assessment-chemical-register-table .is-risk strong {
  display: inline-flex;
  justify-content: center;
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
}

.risk-assessment-chemical-register-table .is-risk.is-low strong {
  background: #dcfce7;
  color: #166534;
}

.risk-assessment-chemical-register-table .is-risk.is-medium strong {
  background: #fef3c7;
  color: #92400e;
}

.risk-assessment-chemical-register-table .is-risk.is-high strong {
  background: #fee2e2;
  color: #b91c1c;
}

.risk-assessment-chemical-register-table .is-risk span {
  margin-top: 5px;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 850;
}

.risk-assessment-chemical-register-table .is-risk .risk-assessment-chemical-risk-result {
  display: grid;
  margin: 0 auto;
  text-align: left;
}

.risk-assessment-chemical-register-table .is-risk .risk-assessment-chemical-risk-result strong,
.risk-assessment-chemical-register-table .is-risk.is-low .risk-assessment-chemical-risk-result strong,
.risk-assessment-chemical-register-table .is-risk.is-medium .risk-assessment-chemical-risk-result strong,
.risk-assessment-chemical-register-table .is-risk.is-high .risk-assessment-chemical-risk-result strong {
  display: block;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.risk-assessment-chemical-risk-output {
  display: flex;
  min-height: 42px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 13px;
  background: #fff;
}

.risk-assessment-chemical-risk-output strong {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  font-size: 0.78rem;
  font-weight: 950;
}

.risk-assessment-chemical-risk-output em {
  color: #475569;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.risk-assessment-chemical-risk-output.is-low strong {
  background: #dcfce7;
  color: #166534;
}

.risk-assessment-chemical-risk-output.is-medium strong {
  background: #fef3c7;
  color: #92400e;
}

.risk-assessment-chemical-risk-output.is-high strong {
  background: #fee2e2;
  color: #b91c1c;
}

.risk-assessment-chemical-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
}

.risk-assessment-chemical-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-chemical-card-actions .ghost-button {
  min-height: 34px;
  padding: 7px 11px;
}

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

.risk-assessment-chemical-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-content: start;
}

.risk-assessment-chemical-grid label span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.risk-assessment-chemical-grid textarea {
  min-height: 0;
  resize: vertical;
}

.risk-assessment-chemical-grid select[multiple] {
  min-height: 102px;
  padding: 8px;
}

.risk-assessment-chemical-grid .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-biological-rule-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(34, 197, 94, 0.24);
  border-radius: 10px;
  background: #f8fafc;
}

.risk-assessment-biological-rule-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.risk-assessment-biological-rule-head > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-biological-rule-head strong {
  color: #0f172a;
  font-size: 0.98rem;
}

.risk-assessment-biological-rule-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-biological-rule-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.risk-assessment-biological-rule-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.risk-assessment-biological-rule-kpis article {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 8px;
  background: #ffffff;
}

.risk-assessment-biological-rule-kpis strong {
  color: #0f172a;
  font-size: 0.84rem;
}

.risk-assessment-biological-rule-kpis small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.35;
}

.risk-assessment-biological-catalog-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.48fr) minmax(130px, 0.32fr);
  gap: 8px;
  align-items: end;
}

.risk-assessment-biological-picker {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 0.45fr) minmax(130px, 0.3fr) auto;
  gap: 8px;
  align-items: end;
}

.risk-assessment-biological-picker .secondary-button {
  min-height: 42px;
  white-space: nowrap;
}

.risk-assessment-biological-suggestions {
  display: grid;
  gap: 8px;
}

.risk-assessment-biological-suggestions-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.risk-assessment-biological-suggestions-head strong {
  color: #0f172a;
  font-size: 0.82rem;
}

.risk-assessment-biological-suggestions-head span {
  color: #047857;
}

.risk-assessment-biological-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(187, 247, 208, 0.86);
  border-radius: 8px;
  background: #ffffff;
}

.risk-assessment-biological-suggestion div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-biological-suggestion strong {
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 900;
}

.risk-assessment-biological-suggestion small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.risk-assessment-biological-agent-table {
  display: grid;
  gap: 0;
  max-height: 380px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 10px;
  background: #ffffff;
}

.risk-assessment-biological-agent-head,
.risk-assessment-biological-agent-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) minmax(170px, 0.55fr) minmax(120px, 0.35fr) minmax(240px, 0.9fr);
  gap: 10px;
  align-items: center;
}

.risk-assessment-biological-agent-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.8);
  background: #f8fafc;
}

.risk-assessment-biological-agent-head strong {
  color: #0f172a;
  font-size: 0.86rem;
}

.risk-assessment-biological-agent-head a {
  justify-self: end;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 850;
  text-decoration: none;
}

.risk-assessment-biological-agent-row {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  color: #334155;
  font-size: 0.72rem;
  line-height: 1.3;
}

.risk-assessment-biological-agent-row.is-header {
  position: sticky;
  top: 42px;
  z-index: 2;
  background: #eef6ff;
  color: #0f172a;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-biological-agent-name {
  color: #0f172a;
  font-weight: 850;
}

.risk-assessment-biological-group-pill {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 900;
}

.risk-assessment-biological-agent-table > .inline-help {
  padding: 9px 12px;
}

.risk-assessment-risk-line {
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.45fr) minmax(180px, 1fr);
}

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

.risk-assessment-detail-grid label {
  align-content: start;
}

.risk-assessment-detail-grid textarea,
.risk-assessment-armor-row textarea {
  min-height: 0;
  resize: vertical;
}

.risk-assessment-detail-grid .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-job-document {
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(248, 250, 255, 0.96), rgba(255, 255, 255, 0.92));
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.08);
}

.risk-assessment-job-document summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.risk-assessment-job-document summary::-webkit-details-marker {
  display: none;
}

.risk-assessment-job-document summary strong {
  color: #111936;
  font-size: 0.95rem;
}

.risk-assessment-job-document summary small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-weight: 760;
}

.risk-assessment-document-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(236, 253, 245, 0.92));
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
}

.risk-assessment-document-paper {
  display: grid;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 16px;
  background: #ffffff;
}

.risk-assessment-document-title {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(49, 46, 129, 0.92));
  color: #ffffff;
}

.risk-assessment-document-title span {
  color: rgba(191, 219, 254, 0.96);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.risk-assessment-document-title h4 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.risk-assessment-document-title p {
  margin: 0;
  color: rgba(226, 232, 240, 0.92);
  font-weight: 800;
}

.risk-assessment-document-section,
.risk-assessment-document-grid article {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.95));
}

.risk-assessment-document-section-head {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #172033;
  font-weight: 900;
}

.risk-assessment-document-section-head span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 9px;
  background: rgba(237, 233, 254, 0.92);
  color: #5b21b6;
  font-size: 0.7rem;
}

.risk-assessment-document-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.risk-assessment-document-facts > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(199, 210, 254, 0.68);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.risk-assessment-document-facts span,
.risk-assessment-document-grid article > span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.risk-assessment-document-facts strong {
  overflow-wrap: anywhere;
  color: #111936;
  font-size: 0.9rem;
}

.risk-assessment-document-content ul,
.risk-assessment-document-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.risk-assessment-document-content li,
.risk-assessment-document-grid li {
  color: #1f2a44;
  font-weight: 780;
}

.risk-assessment-document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.risk-assessment-document-grid article.is-wide {
  grid-column: 1 / -1;
}

.risk-assessment-document-grid p,
.risk-assessment-document-risk-table p,
.risk-assessment-document-ppe-table p {
  margin: 0 0 6px;
  color: #1f2a44;
  font-size: 0.82rem;
  line-height: 1.45;
}

.risk-assessment-document-grid p:last-child,
.risk-assessment-document-risk-table p:last-child,
.risk-assessment-document-ppe-table p:last-child {
  margin-bottom: 0;
}

.risk-assessment-document-grid .is-muted,
.risk-assessment-document-risk-table .is-muted,
.risk-assessment-document-ppe-table .is-muted {
  color: #94a3b8;
  font-style: italic;
}

.risk-assessment-document-yesno,
.risk-assessment-document-risk-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-document-yesno.is-yes,
.risk-assessment-document-risk-pill.is-low {
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: rgba(220, 252, 231, 0.9);
  color: #166534;
}

.risk-assessment-document-yesno.is-no {
  border: 1px solid rgba(59, 130, 246, 0.22);
  background: rgba(219, 234, 254, 0.92);
  color: #1d4ed8;
}

.risk-assessment-document-yesno.is-np {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(241, 245, 249, 0.92);
  color: #64748b;
}

.risk-assessment-document-risk-pill.is-medium {
  border: 1px solid rgba(245, 158, 11, 0.34);
  background: rgba(254, 243, 199, 0.92);
  color: #92400e;
}

.risk-assessment-document-risk-pill.is-high {
  border: 1px solid rgba(239, 68, 68, 0.32);
  background: rgba(254, 226, 226, 0.94);
  color: #991b1b;
}

.risk-assessment-document-eligibility,
.risk-assessment-document-risk-table,
.risk-assessment-document-ppe-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 14px;
}

.risk-assessment-document-eligibility > div,
.risk-assessment-document-risk-table > div,
.risk-assessment-document-ppe-table > div {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

.risk-assessment-document-eligibility > div {
  grid-template-columns: minmax(190px, 1fr) minmax(90px, 0.25fr) minmax(160px, 0.8fr);
}

.risk-assessment-document-risk-table > div {
  grid-template-columns: minmax(220px, 1fr) minmax(130px, 0.45fr) minmax(180px, 0.8fr) minmax(240px, 1.1fr);
  align-items: center;
}

.risk-assessment-document-ppe-table > div {
  grid-template-columns: minmax(190px, 0.9fr) minmax(130px, 0.45fr) minmax(240px, 1fr) minmax(100px, 0.32fr);
}

.risk-assessment-document-eligibility > div:last-child,
.risk-assessment-document-risk-table > div:last-child,
.risk-assessment-document-ppe-table > div:last-child {
  border-bottom: 0;
}

.risk-assessment-document-eligibility .is-head,
.risk-assessment-document-risk-table .is-head,
.risk-assessment-document-ppe-table .is-head {
  background: rgba(241, 245, 249, 0.96);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-assessment-document-risk-table strong,
.risk-assessment-document-ppe-table strong {
  display: block;
  color: #111936;
  font-size: 0.82rem;
}

.risk-assessment-document-risk-table small,
.risk-assessment-document-ppe-table small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.risk-assessment-document-risk-table .is-empty,
.risk-assessment-document-ppe-table .is-empty {
  grid-template-columns: 1fr;
  color: #64748b;
  font-weight: 800;
}

.risk-assessment-eligibility-block,
.risk-assessment-armor-table {
  display: grid;
  gap: 8px;
}

.risk-assessment-mini-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.risk-assessment-mini-title strong {
  color: #172033;
  font-size: 0.86rem;
}

.risk-assessment-mini-title span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
}

.risk-assessment-jobs-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.risk-assessment-catalog-picker {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: min(540px, calc(100vh - 250px));
  max-height: calc(100vh - 180px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.94);
  contain: layout paint;
  scrollbar-gutter: stable;
}

.risk-assessment-catalog-intro {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -12px -12px 0;
  padding: 12px;
  border-bottom: 1px solid rgba(191, 219, 254, 0.72);
  background: rgba(248, 251, 255, 0.96);
}

.risk-assessment-catalog-intro,
.risk-assessment-catalog-section > summary,
.risk-assessment-catalog-family > summary,
.risk-assessment-catalog-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.risk-assessment-catalog-intro > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-catalog-intro strong,
.risk-assessment-catalog-section summary strong,
.risk-assessment-catalog-family summary strong,
.risk-assessment-catalog-group summary strong {
  color: #172033;
  font-size: 0.86rem;
}

.risk-assessment-catalog-intro span:not(.soft-pill),
.risk-assessment-catalog-section summary span,
.risk-assessment-catalog-family summary span {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 760;
}

.risk-assessment-catalog-section,
.risk-assessment-catalog-family,
.risk-assessment-catalog-group {
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  contain: layout paint;
}

.risk-assessment-catalog-section {
  border-color: rgba(147, 197, 253, 0.74);
  box-shadow: inset 2px 0 0 rgba(37, 99, 235, 0.18);
}

.risk-assessment-catalog-section > summary,
.risk-assessment-catalog-family > summary,
.risk-assessment-catalog-group > summary {
  cursor: pointer;
  padding: 10px 12px;
  list-style: none;
}

.risk-assessment-catalog-section > summary::-webkit-details-marker,
.risk-assessment-catalog-family > summary::-webkit-details-marker,
.risk-assessment-catalog-group > summary::-webkit-details-marker {
  display: none;
}

.risk-assessment-catalog-families,
.risk-assessment-catalog-groups {
  display: grid;
  gap: 7px;
  margin-left: 8px;
  padding: 0 0 8px 8px;
  border-left: 1px solid rgba(147, 197, 253, 0.42);
}

.risk-assessment-catalog-family {
  border-color: rgba(191, 219, 254, 0.82);
  background: rgba(239, 246, 255, 0.66);
  box-shadow: none;
}

.risk-assessment-catalog-group {
  border-color: rgba(203, 213, 225, 0.82);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.risk-assessment-catalog-group > summary {
  background: rgba(248, 250, 252, 0.86);
}

.risk-assessment-catalog-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 7px;
  margin-left: 8px;
  padding: 0 0 8px 8px;
  border-left: 1px solid rgba(203, 213, 225, 0.72);
}

.risk-assessment-catalog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.94);
  color: #172033;
  text-align: left;
  cursor: default;
}

.risk-assessment-catalog-item:hover {
  border-color: rgba(37, 99, 235, 0.45);
  background: rgba(239, 246, 255, 0.96);
}

.risk-assessment-catalog-item.is-selected {
  border-color: rgba(52, 211, 153, 0.62);
  background: rgba(236, 253, 245, 0.96);
  cursor: default;
}

.risk-assessment-catalog-item-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.risk-assessment-catalog-code {
  display: inline-grid;
  min-width: 44px;
  min-height: 28px;
  place-items: center;
  padding: 4px 7px;
  border: 1px solid rgba(147, 197, 253, 0.78);
  border-radius: 9px;
  background: rgba(239, 246, 255, 0.92);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.risk-assessment-catalog-item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-catalog-item strong {
  font-size: 0.78rem;
}

.risk-assessment-catalog-item small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 760;
}

.risk-assessment-catalog-item em {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.72);
  color: #475569;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.risk-assessment-catalog-added {
  display: inline-grid;
  min-height: 28px;
  place-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(187, 247, 208, 0.82);
  color: #047857;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.risk-assessment-eligibility-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.risk-assessment-eligibility-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 92px minmax(160px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(191, 219, 254, 0.88);
  border-radius: 10px;
  background: rgba(248, 251, 255, 0.9);
}

.risk-assessment-eligibility-row > span {
  min-width: 0;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
}

.risk-assessment-armor-table {
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(191, 219, 254, 0.88);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.92));
}

.risk-assessment-armor-head,
.risk-assessment-armor-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.15fr) minmax(170px, 0.55fr) minmax(220px, 0.95fr) minmax(280px, 1.1fr) 44px;
  gap: 8px;
  min-width: 1080px;
  align-items: start;
}

.risk-assessment-armor-head {
  align-items: center;
  padding: 7px 9px;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 9px;
  background: rgba(226, 232, 240, 0.74);
}

.risk-assessment-armor-row {
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, 0.68);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  contain: layout paint;
}

.risk-assessment-risk-identity {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.72);
}

.risk-assessment-risk-heading {
  display: grid;
  gap: 3px;
  grid-column: 1 / -1;
  padding: 8px 10px;
  border-left: 4px solid rgba(37, 99, 235, 0.58);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.92));
}

.risk-assessment-risk-heading span {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 920;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.risk-assessment-risk-heading strong {
  color: #172033;
  font-size: 0.86rem;
  line-height: 1.22;
}

.risk-assessment-risk-heading small {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.3;
}

.risk-assessment-risk-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-risk-field > span {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.risk-assessment-risk-field.is-title,
.risk-assessment-risk-field.is-subtitle,
.risk-assessment-risk-field.is-item {
  grid-column: 1 / -1;
}

.risk-assessment-risk-rating {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.risk-assessment-risk-rating select:last-child {
  grid-column: 1 / -1;
}

.risk-assessment-org-list {
  display: grid;
  gap: 6px;
  position: relative;
  padding-left: 10px;
}

.risk-assessment-org-list::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 2px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.34), rgba(16, 185, 129, 0.2));
}

.risk-assessment-structure-ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.96));
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.06);
}

.risk-assessment-structure-ai-panel > div:first-child {
  display: grid;
  gap: 4px;
}

.risk-assessment-structure-ai-panel strong {
  color: #0f172a;
  font-size: 0.98rem;
}

.risk-assessment-structure-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px dashed rgba(147, 197, 253, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.risk-assessment-structure-upload.has-file,
.risk-assessment-structure-upload.is-drop-target {
  border-color: rgba(37, 99, 235, 0.74);
  background: rgba(239, 246, 255, 0.92);
}

.risk-assessment-structure-upload span {
  flex: 1 1 100%;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 780;
  text-align: right;
  overflow-wrap: anywhere;
}

.risk-assessment-structure-ai-panel > .inline-help {
  grid-column: 1 / -1;
}

.risk-assessment-org-card {
  position: relative;
  display: grid;
  gap: 4px;
  margin-left: calc(var(--org-depth, 0) * 22px);
  padding: 6px 8px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-left: 4px solid rgba(37, 99, 235, 0.72);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.84));
  box-shadow: none;
}

.risk-assessment-org-card:not(.is-depth-0)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -22px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.72);
}

.risk-assessment-org-card:not(.is-depth-0)::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: 50%;
  left: -22px;
  width: 2px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.42);
}

.risk-assessment-org-card.is-subunit {
  border-left-color: rgba(124, 58, 237, 0.72);
}

.risk-assessment-org-card.is-workplace {
  border-left-color: rgba(22, 163, 74, 0.72);
  background:
    linear-gradient(135deg, rgba(240, 253, 244, 0.78), rgba(255, 255, 255, 0.96));
}

.risk-assessment-org-card.is-workplace.is-required-complete {
  border-color: rgba(16, 185, 129, 0.38);
  border-left-color: rgba(16, 185, 129, 0.86);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.98));
}

.risk-assessment-org-card.is-drop-target {
  border-color: rgba(34, 197, 94, 0.78);
  background: rgba(236, 253, 245, 0.96);
}

.risk-assessment-org-card-head {
  display: grid;
  grid-template-columns: 24px minmax(280px, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  min-height: 30px;
}

.risk-assessment-org-card-head > div,
.risk-assessment-org-mainline {
  min-width: 0;
}

.risk-assessment-org-mainline {
  display: grid;
  grid-template-columns: auto auto minmax(150px, 0.9fr) minmax(150px, 1fr);
  gap: 6px;
  align-items: center;
}

.risk-assessment-org-node-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(239, 246, 255, 0.96);
  color: #2563eb;
}

.risk-assessment-org-card.is-subunit .risk-assessment-org-node-icon {
  background: rgba(245, 243, 255, 0.96);
  color: #7c3aed;
}

.risk-assessment-org-card.is-workplace .risk-assessment-org-node-icon {
  background: rgba(240, 253, 244, 0.96);
  color: #16a34a;
}

.risk-assessment-org-node-icon .risk-assessment-risk-icon {
  width: 13px;
  height: 13px;
}

.risk-assessment-org-card-head strong {
  overflow: hidden;
  color: #172033;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-org-type-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.88);
  color: #1d4ed8;
  font-size: 0.6rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.risk-assessment-org-level {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  font-size: 0.6rem;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.risk-assessment-org-card.is-subunit .risk-assessment-org-level {
  border-color: rgba(124, 58, 237, 0.22);
  color: #6d28d9;
}

.risk-assessment-org-card.is-workplace .risk-assessment-org-level {
  border-color: rgba(22, 163, 74, 0.24);
  color: #15803d;
}

.risk-assessment-org-card.is-subunit .risk-assessment-org-type-badge {
  border-color: rgba(196, 181, 253, 0.78);
  background: rgba(245, 243, 255, 0.9);
  color: #6d28d9;
}

.risk-assessment-org-card.is-workplace .risk-assessment-org-type-badge {
  border-color: rgba(187, 247, 208, 0.88);
  background: rgba(240, 253, 244, 0.92);
  color: #15803d;
}

.risk-assessment-org-mainline small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.63rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-org-lineage {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-org-lineage span {
  display: inline-flex;
  max-width: 180px;
  min-height: 19px;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.86);
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-org-lineage span + span::before {
  content: "/";
  margin-right: 4px;
  color: #94a3b8;
}

.risk-assessment-org-lineage span.is-current {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(239, 246, 255, 0.9);
  color: #1d4ed8;
}

.risk-assessment-org-card-head small,
.risk-assessment-linked-jobs .is-empty {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.risk-assessment-detail-grid.is-structure {
  grid-template-columns: minmax(180px, 1.35fr) minmax(112px, 0.55fr) minmax(150px, 0.9fr) minmax(132px, 0.68fr) minmax(76px, 0.36fr) minmax(62px, 0.28fr) minmax(62px, 0.28fr);
  gap: 6px;
}

.risk-assessment-detail-grid.is-structure label {
  gap: 3px;
}

.risk-assessment-detail-grid.is-structure input,
.risk-assessment-detail-grid.is-structure select {
  min-height: 30px;
  padding-block: 5px;
  font-size: 0.78rem;
}

.risk-assessment-org-summary,
.risk-assessment-org-actions,
.risk-assessment-org-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

.risk-assessment-org-summary span {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.88);
  color: #475569;
  font-size: 0.6rem;
  font-weight: 860;
}

.risk-assessment-org-summary span.is-complete {
  border-color: rgba(16, 185, 129, 0.36);
  background: rgba(236, 253, 245, 0.94);
  color: #047857;
}

.risk-assessment-org-summary .risk-assessment-risk-icon {
  width: 11px;
  height: 11px;
}

.risk-assessment-icon-button,
.risk-assessment-org-actions .card-danger.risk-assessment-icon-button {
  position: relative;
  display: inline-grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  padding-inline: 0;
  border-radius: 8px;
}

.risk-assessment-icon-button .risk-assessment-risk-icon {
  width: 14px;
  height: 14px;
}

.risk-assessment-icon-button .risk-assessment-risk-icon + .risk-assessment-risk-icon {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  stroke-width: 2.6;
}

.risk-assessment-icon-button.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(239, 246, 255, 0.96);
  color: #1d4ed8;
}

.risk-assessment-org-inline-editor {
  margin-top: 2px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.76);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
  overflow: hidden;
}

.risk-assessment-org-inline-editor > .risk-assessment-detail-grid,
.risk-assessment-org-inline-editor > .risk-assessment-linked-jobs {
  margin-inline: 0;
}

.risk-assessment-org-actions .card-danger .risk-assessment-risk-icon {
  width: 14px;
  height: 14px;
}

.risk-assessment-org-advanced {
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 9px;
  background: rgba(248, 250, 252, 0.58);
  overflow: hidden;
}

.risk-assessment-org-advanced summary {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 5px 7px;
  cursor: pointer;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 920;
}

.risk-assessment-org-advanced summary small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
}

.risk-assessment-org-advanced[open] {
  padding-bottom: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.risk-assessment-org-advanced[open] summary {
  border-bottom: 1px solid rgba(226, 232, 240, 0.86);
  margin-bottom: 8px;
}

.risk-assessment-org-ai-actions {
  justify-content: flex-start;
  padding: 0 8px 6px;
}

.risk-assessment-detail-grid.is-structure.is-hidden-copy {
  padding: 0 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.risk-assessment-linked-jobs,
.risk-assessment-template-strip,
.risk-assessment-work-flags,
.risk-assessment-ppe-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-assessment-linked-jobs span,
.risk-assessment-template-strip span,
.risk-assessment-work-flags label,
.risk-assessment-ppe-filters button {
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.92);
  color: #334155;
  font-size: 0.7rem;
  font-weight: 820;
}

.risk-assessment-job-profile {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.risk-assessment-job-profile.is-compact {
  gap: 10px;
  padding: 10px;
}

.risk-assessment-job-start-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.84);
  border-left: 4px solid #2563eb;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.98));
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.06);
}

.risk-assessment-job-start-card.is-workplace-hero {
  border-color: rgba(147, 197, 253, 0.92);
  border-left-color: #1d4ed8;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.88), rgba(255, 255, 255, 0.98));
}

.risk-assessment-job-start-card.is-workplace-hero .risk-assessment-job-profile-card-head strong {
  font-size: 1.02rem;
}

.risk-assessment-job-start-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(140px, 0.45fr) auto;
  gap: 10px;
  align-items: end;
}

.risk-assessment-job-start-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-job-start-grid label span {
  color: #475569;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.risk-assessment-job-hero-description {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.risk-assessment-job-hero-description span {
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-assessment-linked-source-jobs {
  display: grid;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 12px;
  background: rgba(239, 246, 255, 0.58);
}

.risk-assessment-linked-source-jobs > span {
  color: #2563eb;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.risk-assessment-linked-source-jobs > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-assessment-linked-source-jobs b,
.risk-assessment-linked-source-jobs em {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1;
}

.risk-assessment-linked-source-jobs b {
  border: 1px solid rgba(37, 99, 235, 0.24);
  background: rgba(255, 255, 255, 0.86);
  color: #1e40af;
  font-weight: 900;
}

.risk-assessment-linked-source-jobs em {
  border: 1px dashed rgba(148, 163, 184, 0.48);
  background: rgba(248, 250, 252, 0.82);
  color: #64748b;
  font-style: normal;
  font-weight: 780;
}

.risk-assessment-job-profile-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.risk-assessment-job-profile-top > div:first-child {
  display: grid;
  gap: 4px;
}

.risk-assessment-job-profile-top strong {
  color: #0f172a;
  font-size: 1rem;
}

.risk-assessment-job-profile-top small {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 760;
}

.risk-assessment-job-preset-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.risk-assessment-job-core-grid,
.risk-assessment-job-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.risk-assessment-job-profile-grid {
  grid-template-columns: minmax(0, 1fr);
}

.risk-assessment-job-profile-grid.is-compact-text {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.risk-assessment-job-core-grid label,
.risk-assessment-job-profile-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-job-core-grid label span,
.risk-assessment-job-profile-grid label span,
.risk-assessment-job-choice-block > span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.risk-assessment-job-profile-grid .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-job-profile-grid textarea {
  min-height: 68px;
  resize: vertical;
}

.risk-assessment-required-field {
  position: relative;
  padding: 7px;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 12px;
  background: rgba(255, 251, 235, 0.52);
}

.risk-assessment-required-field.is-filled {
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(236, 253, 245, 0.48);
}

.risk-assessment-required-field > span::after {
  content: "obavezno";
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  color: #92400e;
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.risk-assessment-required-field.is-filled > span::after {
  content: "OK";
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

.risk-assessment-short-description-field textarea {
  min-height: 54px;
  border-color: rgba(191, 219, 254, 0.92);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.62), rgba(255, 255, 255, 0.98));
}

.risk-assessment-organization-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.94));
}

.risk-assessment-organization-panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.risk-assessment-organization-panel-head > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(238, 242, 255, 0.96);
  color: #4f46e5;
}

.risk-assessment-organization-panel-head strong {
  color: #172033;
  font-size: 0.9rem;
  font-weight: 950;
}

.risk-assessment-organization-panel-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.risk-assessment-job-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.risk-assessment-job-profile-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(203, 213, 225, 0.68);
  border-left-width: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

.risk-assessment-job-profile-card.is-basic {
  border-color: rgba(148, 163, 184, 0.42);
  border-left-color: #64748b;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96));
}

.risk-assessment-job-profile-card.is-referral {
  border-color: rgba(250, 204, 21, 0.42);
  border-left-color: #facc15;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.82), rgba(255, 255, 255, 0.92));
}

.risk-assessment-job-profile-card.is-uputnica {
  border-color: rgba(37, 99, 235, 0.26);
  border-left-color: #2563eb;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.96));
  box-shadow: none;
}

.risk-assessment-job-profile-card.is-resources {
  border-color: rgba(16, 185, 129, 0.26);
  border-left-color: #10b981;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.78), rgba(255, 255, 255, 0.96));
  box-shadow: none;
}

.risk-assessment-job-profile-card.is-ppe {
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border-color: rgba(14, 165, 233, 0.42);
  border-left-color: #0284c7;
  background:
    linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(255, 255, 255, 0.98) 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(16, 185, 129, 0.08));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.065);
}

.risk-assessment-job-profile-card.is-ppe.is-final-step {
  border-top-color: rgba(14, 165, 233, 0.58);
}

.risk-assessment-job-profile-card.is-ppe .risk-assessment-job-profile-card-head {
  align-items: center;
}

.risk-assessment-job-profile-card.is-ppe .risk-assessment-job-profile-card-head > span {
  background: linear-gradient(135deg, #e0f2fe, #ffffff);
  color: #0284c7;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18);
}

.risk-assessment-job-profile-card.is-psychosocial {
  border-color: rgba(124, 58, 237, 0.3);
  border-left-color: #7c3aed;
  background:
    linear-gradient(135deg, rgba(245, 243, 255, 0.84), rgba(255, 255, 255, 0.96));
  box-shadow: none;
}

.risk-assessment-job-profile-card.is-armor {
  border-color: rgba(244, 63, 94, 0.3);
  border-left-color: #f43f5e;
  background:
    linear-gradient(135deg, rgba(255, 241, 242, 0.7), rgba(255, 255, 255, 0.96));
  box-shadow: none;
}

.risk-assessment-job-profile-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.risk-assessment-job-profile-card-head > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: rgba(237, 233, 254, 0.94);
  color: #4f46e5;
}

.risk-assessment-job-profile-card-head strong {
  color: #172033;
  font-size: 0.9rem;
}

.risk-assessment-job-profile-card-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
}

.risk-assessment-armor-quickbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(254, 205, 211, 0.76);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.risk-assessment-armor-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.risk-assessment-armor-explorer {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.risk-assessment-armor-explorer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.risk-assessment-armor-explorer-head strong {
  overflow: hidden;
  color: #172033;
  font-size: 0.78rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-armor-explorer-head span {
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 850;
  white-space: nowrap;
}

.risk-assessment-armor-tree-nodes,
.risk-assessment-armor-tree-node,
.risk-assessment-armor-tree-children {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-armor-tree-children {
  position: relative;
}

.risk-assessment-armor-tree-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 4px;
  left: calc(18px + var(--unit-depth, 0) * 12px);
  border-left: 1px solid rgba(203, 213, 225, 0.82);
  pointer-events: none;
}

.risk-assessment-armor-tree-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 7px 6px calc(7px + var(--unit-depth, 0) * 12px);
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  text-align: left;
}

.risk-assessment-armor-tree-node.is-hazards {
  --armor-accent: #ef4444;
  --armor-accent-soft: rgba(254, 226, 226, 0.86);
  --armor-accent-border: rgba(248, 113, 113, 0.44);
  --armor-accent-text: #7f1d1d;
}

.risk-assessment-armor-tree-node.is-harms {
  --armor-accent: #d97706;
  --armor-accent-soft: rgba(254, 243, 199, 0.9);
  --armor-accent-border: rgba(245, 158, 11, 0.46);
  --armor-accent-text: #78350f;
}

.risk-assessment-armor-tree-node.is-efforts {
  --armor-accent: #4f46e5;
  --armor-accent-soft: rgba(238, 242, 255, 0.92);
  --armor-accent-border: rgba(129, 140, 248, 0.46);
  --armor-accent-text: #312e81;
}

.risk-assessment-armor-tree-node.is-neutral {
  --armor-accent: #64748b;
  --armor-accent-soft: rgba(241, 245, 249, 0.92);
  --armor-accent-border: rgba(148, 163, 184, 0.42);
  --armor-accent-text: #334155;
}

.risk-assessment-armor-tree-row.is-title {
  cursor: default;
  user-select: none;
}

.risk-assessment-armor-tree-row.is-section-title {
  min-height: 34px;
  border-color: var(--armor-accent-border);
  background: linear-gradient(135deg, var(--armor-accent-soft), rgba(255, 255, 255, 0.96));
  box-shadow: inset 3px 0 0 var(--armor-accent);
}

.risk-assessment-armor-tree-row.is-section-title .risk-assessment-job-tree-icon {
  background: var(--armor-accent);
  color: #ffffff;
}

.risk-assessment-armor-tree-row.is-section-title .risk-assessment-job-tree-copy strong {
  color: var(--armor-accent-text);
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.risk-assessment-armor-tree-row.is-family-title {
  min-height: 32px;
  border-color: rgba(203, 213, 225, 0.72);
  background: rgba(248, 250, 252, 0.98);
  box-shadow: inset 2px 0 0 var(--armor-accent-border);
}

.risk-assessment-armor-tree-row.is-family-title .risk-assessment-job-tree-copy strong {
  color: #172033;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.risk-assessment-armor-tree-row.is-subgroup-title {
  min-height: 30px;
  border-color: rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.9);
}

.risk-assessment-armor-tree-row.is-subgroup-title .risk-assessment-job-tree-copy strong {
  color: var(--armor-accent-text);
  font-size: 0.68rem;
  font-weight: 900;
}

button.risk-assessment-armor-tree-row {
  cursor: pointer;
}

button.risk-assessment-armor-tree-row:hover,
button.risk-assessment-armor-tree-row:focus-visible,
.risk-assessment-armor-tree-node.is-active > button.risk-assessment-armor-tree-row {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(239, 246, 255, 0.96);
  outline: none;
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.5);
}

.risk-assessment-armor-tree-node.is-complete > button.risk-assessment-armor-tree-row {
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(236, 253, 245, 0.7);
}

.risk-assessment-armor-risk-dot {
  display: inline-grid;
  width: 13px;
  height: 13px;
  place-self: center;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.risk-assessment-armor-risk-dot.is-low {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.risk-assessment-armor-risk-dot.is-medium {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.risk-assessment-armor-risk-dot.is-high {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.risk-assessment-armor-workspace {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.risk-assessment-armor-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(254, 205, 211, 0.74);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 241, 242, 0.72), rgba(255, 255, 255, 0.94));
}

.risk-assessment-armor-workspace-head strong {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 950;
}

.risk-assessment-armor-workspace-head small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
}

.risk-assessment-armor-workspace-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.risk-assessment-ppe-compact {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.risk-assessment-ppe-compact-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.26fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.risk-assessment-ppe-worker-column,
.risk-assessment-ppe-picker-column {
  min-width: 0;
}

.risk-assessment-ppe-worker-column {
  position: sticky;
  top: 12px;
  align-self: start;
  max-width: 360px;
}

.risk-assessment-ppe-picker-column {
  display: grid;
  gap: 10px;
}

.risk-assessment-ppe-compact-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.risk-assessment-ppe-compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.risk-assessment-ppe-compact .risk-assessment-ppe-filters {
  gap: 7px;
}

.risk-assessment-ppe-compact .risk-assessment-ppe-filters button {
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.risk-assessment-ppe-compact .risk-assessment-ppe-filters button.is-active {
  border-color: rgba(250, 204, 21, 0.78);
  background: #facc15;
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(250, 204, 21, 0.18);
}

.risk-assessment-ppe-new-form.is-compact {
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(240, 249, 255, 0.82);
}

.risk-assessment-ppe-compact-body {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(300px, 1.1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.risk-assessment-ppe-compact-pane {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.risk-assessment-ppe-compact-pane.is-selected {
  border-color: rgba(250, 204, 21, 0.52);
  background: rgba(255, 251, 235, 0.58);
}

.risk-assessment-ppe-compact-pane-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.risk-assessment-ppe-compact-pane-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-ppe-compact-pane-head strong {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
}

.risk-assessment-ppe-compact-pane-head small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 820;
}

.risk-assessment-ppe-compact-pane-head a,
.risk-assessment-ppe-compact-pane-head > span {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(20, 184, 166, 0.26);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.86);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.risk-assessment-ppe-compact-pane-head > span {
  min-width: 34px;
  border-color: rgba(250, 204, 21, 0.5);
  background: #fef9c3;
  color: #854d0e;
}

.risk-assessment-ppe-compact-list {
  display: grid;
  gap: 6px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.risk-assessment-ppe-compact-option {
  display: grid;
  grid-template-columns: 16px 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 7px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 9px;
  background: rgba(248, 250, 252, 0.86);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.risk-assessment-ppe-compact-option:hover {
  border-color: rgba(14, 165, 233, 0.46);
  background: #fff;
}

.risk-assessment-ppe-compact-option.is-selected,
.risk-assessment-ppe-compact-option:has(input:checked) {
  border-color: rgba(250, 204, 21, 0.78);
  background: rgba(254, 249, 195, 0.72);
  box-shadow: inset 3px 0 0 #facc15;
}

.risk-assessment-ppe-compact-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #facc15;
}

.risk-assessment-ppe-compact-icon,
.risk-assessment-ppe-selected-compact-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 12px;
  background: #fff;
}

/* 20260606-risk-rich-textbox-v1 */
.risk-assessment-rich-editor.is-word-enhanced {
  gap: 8px;
  width: min(100%, 1160px);
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar {
  position: sticky;
  top: 0;
  z-index: 9;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  max-width: 100%;
  padding: 8px;
  border-color: rgba(191, 219, 254, 0.74);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.98);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar [data-risk-rich-template-save],
.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar [data-risk-rich-template-select] {
  margin-left: 0;
}

.risk-assessment-rich-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}

.risk-assessment-rich-toolbar-group + .risk-assessment-rich-toolbar-group {
  padding-left: 7px;
  border-left: 1px solid rgba(203, 213, 225, 0.84);
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar button,
.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar select {
  line-height: 1;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar button {
  min-width: 30px;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar select {
  max-width: 170px;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar [data-risk-rich-template-select] {
  max-width: 230px;
}

.risk-assessment-rich-swatch {
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.risk-assessment-rich-swatch::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 3px;
  background: var(--risk-rich-swatch, #111827);
}

.risk-assessment-rich-toolbar-separator {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: rgba(203, 213, 225, 0.9);
}

.risk-assessment-rich-ruler {
  display: none;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-surface {
  width: 100%;
}

#risk-assessment-block-intro .risk-assessment-rich-editor.is-word-enhanced,
#risk-assessment-block-process .risk-assessment-rich-editor.is-word-enhanced,
#risk-assessment-block-sensitive .risk-assessment-rich-editor.is-word-enhanced,
#risk-assessment-block-rules .risk-assessment-rich-editor.is-word-enhanced {
  width: min(100%, 1120px);
}

#risk-assessment-block-process .offers-items-head,
#risk-assessment-workplace-jobs,
#risk-assessment-block-sensitive,
#risk-assessment-block-rules {
  max-width: 1120px;
}

#risk-assessment-block-process {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.86));
}

#risk-assessment-block-process .risk-assessment-section-grid {
  gap: 14px;
}

#risk-assessment-block-process .offers-items-head {
  border: 1px solid rgba(191, 219, 254, 0.68);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
}

.risk-assessment-compact-row.is-workplace-job {
  grid-template-columns: minmax(210px, 1.35fr) minmax(76px, 0.38fr) minmax(76px, 0.38fr) minmax(200px, 1fr) auto;
  max-width: 1120px;
  border-color: rgba(191, 219, 254, 0.76);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.risk-assessment-rich-editor.is-word-enhanced.is-focus-mode {
  margin-inline: 0;
  background: transparent;
}

.risk-assessment-rich-editor.is-word-enhanced.is-focus-mode .risk-assessment-rich-surface {
  min-height: min(70vh, 680px);
}

@media (max-width: 900px) {
  .risk-assessment-rich-editor.is-word-enhanced,
  #risk-assessment-block-intro .risk-assessment-rich-editor.is-word-enhanced,
  #risk-assessment-block-process .risk-assessment-rich-editor.is-word-enhanced,
  #risk-assessment-block-sensitive .risk-assessment-rich-editor.is-word-enhanced,
  #risk-assessment-block-rules .risk-assessment-rich-editor.is-word-enhanced {
    width: 100%;
  }

  .risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar [data-risk-rich-template-save],
  .risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar [data-risk-rich-template-select] {
    margin-left: 0;
  }

  .risk-assessment-rich-toolbar-group + .risk-assessment-rich-toolbar-group {
    padding-left: 0;
    border-left: 0;
  }
}

/* 20260617-risk-rich-word-editor-v2 */
.risk-assessment-rich-editor.is-word-enhanced {
  width: min(100%, 1220px);
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar {
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-color: rgba(191, 219, 254, 0.86);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
}

.risk-assessment-rich-toolbar-group {
  align-items: stretch;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(219, 234, 254, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.risk-assessment-rich-toolbar-group + .risk-assessment-rich-toolbar-group {
  padding-left: 5px;
  border-left: 1px solid rgba(219, 234, 254, 0.92);
}

.risk-assessment-rich-toolbar-group-label {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar button,
.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar select {
  min-height: 34px;
  border-radius: 10px;
  font-size: 0.76rem;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar button {
  min-width: 34px;
  padding: 7px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar button:hover,
.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar button:focus-visible {
  border-color: rgba(37, 99, 235, 0.56);
  background: rgba(239, 246, 255, 0.98);
  outline: none;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar .is-bold {
  font-weight: 950;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar .is-italic {
  font-style: italic;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar .is-underline {
  text-decoration: underline;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-toolbar .is-strike {
  text-decoration: line-through;
}

.risk-assessment-rich-toolbar-group.is-template {
  flex: 1 1 320px;
  justify-content: flex-end;
}

.risk-assessment-rich-toolbar-group.is-template [data-risk-rich-template-select] {
  min-width: 220px;
}

.risk-assessment-rich-toolbar-group.is-style select {
  min-width: 118px;
}

.risk-assessment-rich-toolbar-group.is-color {
  align-items: center;
}

.risk-assessment-rich-editor.is-word-enhanced .risk-assessment-rich-surface {
  min-height: 430px;
  padding: 32px 38px;
  border-color: rgba(203, 213, 225, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(191, 219, 254, 0.62), rgba(216, 180, 254, 0.46)) border-box;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.risk-assessment-rich-surface:empty::before {
  content: attr(data-placeholder);
}

.risk-assessment-rich-surface table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  table-layout: auto;
}

.risk-assessment-rich-surface th,
.risk-assessment-rich-surface td {
  min-width: 64px;
  padding: 9px 11px;
  border: 1px solid rgba(100, 116, 139, 0.72);
}

.risk-assessment-rich-surface th {
  background: rgba(226, 232, 240, 0.95);
}

.risk-assessment-rich-surface ul,
.risk-assessment-rich-surface ol {
  display: grid;
  gap: 4px;
  padding-left: 28px;
}

.risk-assessment-rich-surface li {
  padding-left: 2px;
}

#risk-assessment-block-intro .risk-assessment-rich-field {
  justify-self: center;
  width: min(100%, 1040px);
}

#risk-assessment-block-intro .risk-assessment-rich-editor.is-word-enhanced {
  width: 100%;
}

#risk-assessment-block-intro .risk-assessment-rich-surface {
  min-height: min(70vh, 780px);
  padding: 46px 54px;
}

/* 20260617-risk-assessment-premium-workspace */
.risk-assessment-editor-panel:not(.is-overview-active) #risk-assessment-export-docx,
.risk-assessment-editor-panel:not(.is-overview-active) #risk-assessment-export-pdf,
.risk-assessment-editor-panel:not(.is-overview-active) #risk-assessment-send-signature,
.risk-assessment-editor-panel #risk-assessment-reset {
  display: none !important;
}

.risk-assessment-editor-panel.is-overview-active #risk-assessment-export-docx,
.risk-assessment-editor-panel.is-overview-active #risk-assessment-export-pdf,
.risk-assessment-editor-panel.is-overview-active #risk-assessment-send-signature {
  display: inline-flex;
}

.risk-assessment-editor-body {
  background:
    radial-gradient(circle at 18% 0%, rgba(219, 234, 254, 0.42), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(241, 245, 249, 0.78));
}

.risk-assessment-editor-section {
  border-color: rgba(191, 219, 254, 0.7);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.9));
}

.risk-assessment-basic-shell {
  width: 100%;
  max-width: none;
}

.risk-assessment-basic-card {
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.risk-assessment-basic-card-head {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.74);
}

.risk-assessment-basic-card-head strong {
  font-size: 1.06rem;
}

.risk-assessment-basic-card-head p {
  max-width: 56ch;
}

.risk-assessment-basic-grid,
.risk-assessment-basic-grid.is-core,
.risk-assessment-basic-stack {
  width: 100%;
  max-width: none;
}

.risk-assessment-basic-grid.is-core {
  grid-template-columns: minmax(280px, 1.35fr) minmax(240px, 1.12fr) minmax(150px, 0.58fr) minmax(180px, 0.78fr);
  gap: 14px;
}

.risk-assessment-basic-stack {
  justify-self: stretch;
  gap: 16px;
}

.risk-assessment-basic-textbox .risk-assessment-field-head {
  gap: 8px;
}

.risk-assessment-basic-stack textarea,
.risk-assessment-authorization-company-field textarea {
  min-height: 142px;
  padding: 14px 16px;
  line-height: 1.55;
}

.risk-assessment-authorization-panel {
  grid-template-columns: minmax(240px, 0.45fr) minmax(360px, 0.8fr) minmax(420px, 1.35fr);
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.risk-assessment-authorization-document {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.8);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.risk-assessment-authorization-document > div:first-of-type {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-authorization-document strong {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 900;
}

.risk-assessment-authorization-document span {
  overflow: hidden;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#risk-assessment-block-intro,
#risk-assessment-block-process,
#risk-assessment-block-sensitive,
#risk-assessment-block-rules,
#risk-assessment-block-findings {
  justify-items: center;
}

#risk-assessment-block-intro > *,
#risk-assessment-block-process > *,
#risk-assessment-block-sensitive > *,
#risk-assessment-block-rules > *,
#risk-assessment-block-findings > * {
  width: min(100%, 1180px);
}

#risk-assessment-block-intro .risk-assessment-editor-section-head {
  width: min(100%, 980px);
}

#risk-assessment-block-intro .risk-assessment-rich-field {
  width: min(100%, 980px);
}

#risk-assessment-block-intro .risk-assessment-rich-editor {
  padding: 18px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.09);
}

#risk-assessment-block-intro .risk-assessment-rich-toolbar,
#risk-assessment-block-process .risk-assessment-rich-toolbar,
#risk-assessment-block-sensitive .risk-assessment-rich-toolbar,
#risk-assessment-block-rules .risk-assessment-rich-toolbar,
#risk-assessment-block-findings .risk-assessment-rich-toolbar {
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.98);
}

#risk-assessment-block-intro .risk-assessment-rich-surface {
  min-height: min(64vh, 720px);
  padding: 42px 48px;
  border-color: rgba(203, 213, 225, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(180deg, #ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(191, 219, 254, 0.65), rgba(216, 180, 254, 0.45)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#risk-assessment-block-process .risk-assessment-section-grid,
#risk-assessment-block-sensitive .risk-assessment-rich-field,
#risk-assessment-block-rules .risk-assessment-section-grid,
#risk-assessment-block-findings .risk-assessment-section-grid,
#risk-assessment-workplace-jobs {
  width: min(100%, 1120px);
  justify-self: center;
}

#risk-assessment-block-process .risk-assessment-rich-editor,
#risk-assessment-block-sensitive .risk-assessment-rich-editor,
#risk-assessment-block-rules .risk-assessment-rich-editor,
#risk-assessment-block-findings .risk-assessment-rich-editor {
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.065);
}

#risk-assessment-block-process .risk-assessment-rich-surface,
#risk-assessment-block-sensitive .risk-assessment-rich-surface,
#risk-assessment-block-rules .risk-assessment-rich-surface,
#risk-assessment-block-findings .risk-assessment-rich-surface {
  min-height: 340px;
  padding: 24px 28px;
  border-color: rgba(203, 213, 225, 0.9);
}

#risk-assessment-block-findings textarea[data-risk-autogrow] {
  min-height: 168px;
  padding: 14px 16px;
  line-height: 1.55;
}

#risk-assessment-block-chemicals,
#risk-assessment-block-biological {
  justify-items: center;
}

#risk-assessment-block-chemicals > *,
#risk-assessment-block-biological > * {
  width: min(100%, 1120px);
}

#risk-assessment-block-chemicals .risk-assessment-editor-section-head,
#risk-assessment-block-biological .risk-assessment-editor-section-head {
  width: min(100%, 980px);
}

.risk-assessment-hazard-text-body .risk-assessment-rich-field {
  width: min(100%, 820px);
  justify-self: center;
}

.risk-assessment-hazard-text-body .risk-assessment-rich-editor {
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.risk-assessment-hazard-text-body .risk-assessment-rich-surface {
  min-height: 210px;
  padding: 18px 20px;
  border-radius: 16px;
}

/* 20260618-risk-assessment-places-alignment */
#risk-assessment-block-process {
  align-content: start;
}

#risk-assessment-block-process .risk-assessment-editor-section-head,
#risk-assessment-block-process .risk-assessment-section-grid,
#risk-assessment-block-process .offers-items-head,
#risk-assessment-workplace-jobs,
#risk-assessment-block-sensitive,
#risk-assessment-block-rules {
  width: min(100%, 1120px);
  max-width: 1120px;
  justify-self: center;
  box-sizing: border-box;
}

#risk-assessment-block-process .risk-assessment-section-grid,
#risk-assessment-block-rules .risk-assessment-section-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

#risk-assessment-block-process .risk-assessment-rich-field,
#risk-assessment-block-sensitive .risk-assessment-rich-field,
#risk-assessment-block-rules .risk-assessment-rich-field {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

#risk-assessment-block-process .risk-assessment-rich-editor,
#risk-assessment-block-sensitive .risk-assessment-rich-editor,
#risk-assessment-block-rules .risk-assessment-rich-editor {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  box-sizing: border-box;
}

#risk-assessment-block-process .risk-assessment-rich-toolbar,
#risk-assessment-block-sensitive .risk-assessment-rich-toolbar,
#risk-assessment-block-rules .risk-assessment-rich-toolbar {
  width: 100%;
  min-height: 58px;
  align-items: center;
  box-sizing: border-box;
}

#risk-assessment-block-process .risk-assessment-rich-toolbar [data-risk-rich-template-select],
#risk-assessment-block-sensitive .risk-assessment-rich-toolbar [data-risk-rich-template-select],
#risk-assessment-block-rules .risk-assessment-rich-toolbar [data-risk-rich-template-select] {
  flex: 1 1 240px;
  max-width: none;
}

#risk-assessment-block-process .risk-assessment-rich-surface,
#risk-assessment-block-sensitive .risk-assessment-rich-surface,
#risk-assessment-block-rules .risk-assessment-rich-surface {
  width: 100%;
  box-sizing: border-box;
}

#risk-assessment-workplace-jobs {
  display: grid;
  gap: 10px;
}

#risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(260px, 1.45fr) minmax(84px, 0.4fr) minmax(84px, 0.4fr) minmax(240px, 1fr) 42px;
  gap: 10px;
  align-items: end;
  box-sizing: border-box;
}

#risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job label {
  align-self: stretch;
  grid-template-rows: 18px 42px;
  gap: 6px;
}

#risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job label span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job input,
#risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job select {
  width: 100%;
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
}

#risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job button {
  align-self: end;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
}

@media (max-width: 1180px) {
  .risk-assessment-authorization-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-authorization-document {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .risk-assessment-basic-card {
    padding: 14px;
  }

  #risk-assessment-block-intro .risk-assessment-rich-editor,
  #risk-assessment-block-process .risk-assessment-rich-editor,
  #risk-assessment-block-sensitive .risk-assessment-rich-editor,
  #risk-assessment-block-rules .risk-assessment-rich-editor,
  #risk-assessment-block-findings .risk-assessment-rich-editor {
    padding: 10px;
  }

  #risk-assessment-block-intro .risk-assessment-rich-surface,
  #risk-assessment-block-process .risk-assessment-rich-surface,
  #risk-assessment-block-sensitive .risk-assessment-rich-surface,
  #risk-assessment-block-rules .risk-assessment-rich-surface,
  #risk-assessment-block-findings .risk-assessment-rich-surface {
    min-height: 300px;
    padding: 18px;
  }

  #risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job {
    grid-template-columns: minmax(0, 1fr);
  }

  #risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job label {
    grid-template-rows: auto 42px;
  }

  #risk-assessment-workplace-jobs .risk-assessment-compact-row.is-workplace-job button {
    width: auto;
    min-width: 120px;
    padding-inline: 14px;
    justify-self: start;
  }
}

.risk-assessment-ppe-compact-icon img,
.risk-assessment-ppe-selected-compact-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.risk-assessment-ppe-selected-compact-icon {
  align-self: end;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.risk-assessment-ppe-selected-compact-icon img {
  width: 22px;
  height: 22px;
}

.risk-assessment-ppe-compact-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-ppe-compact-copy strong {
  overflow: hidden;
  color: #172033;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-ppe-compact-copy small {
  color: #0b58b4;
  font-size: 0.71rem;
  font-weight: 900;
  line-height: 1.1;
}

.risk-assessment-ppe-compact-copy em {
  overflow: hidden;
  color: #64748b;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-ppe-selected-compact-list {
  display: grid;
  gap: 6px;
}

.risk-assessment-ppe-selected-compact-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 7px 8px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.risk-assessment-ppe-selected-compact-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 6px;
  align-items: end;
  min-width: 0;
}

.risk-assessment-ppe-name-norm-fields {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(96px, 0.42fr);
  gap: 6px;
  min-width: 0;
}

.risk-assessment-ppe-selected-compact-grid label,
.risk-assessment-ppe-summary-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-ppe-selected-compact-grid label span,
.risk-assessment-ppe-summary-field span {
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-ppe-selected-compact-grid input {
  min-height: 34px;
  padding: 0 10px;
}

.risk-assessment-ppe-selected-compact-row > button {
  min-height: 32px;
  padding: 0 10px;
}

.risk-assessment-ppe-summary-field textarea {
  min-height: 68px;
}

.ozo-premium-step {
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(14, 165, 233, 0.1), transparent 31%),
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.072);
}

.ozo-step-header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-bottom: 16px;
}

.ozo-step-icon,
.ozo-catalog-icon,
.ozo-selected-icon,
.ozo-empty-state > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef2ff, #ffffff);
  color: #315bff;
}

.ozo-step-icon {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(199, 210, 254, 0.72);
  box-shadow: 0 12px 26px rgba(49, 91, 255, 0.12);
}

.ozo-step-icon .risk-assessment-risk-icon {
  width: 24px;
  height: 24px;
}

.ozo-step-header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ozo-step-header div > span,
.ozo-worker-card-head > span {
  color: #315bff;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ozo-step-header strong {
  color: #101828;
  font-size: 1.36rem;
  font-weight: 950;
  line-height: 1.08;
}

.ozo-step-header small,
.ozo-worker-card-head small,
.ozo-card-head small,
.ozo-system-advice p {
  color: #667085;
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.ozo-primary-action,
.ozo-save-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(49, 91, 255, 0.72);
  border-radius: 14px;
  background: linear-gradient(135deg, #315bff, #4f46e5);
  color: #ffffff;
  font-weight: 950;
  box-shadow: 0 16px 30px rgba(49, 91, 255, 0.22);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.ozo-primary-action:hover,
.ozo-primary-action:focus-visible,
.ozo-save-continue:hover,
.ozo-save-continue:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.05);
  outline: none;
  box-shadow: 0 20px 38px rgba(49, 91, 255, 0.28);
}

.ozo-new-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(191, 219, 254, 0.84);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 36px rgba(49, 91, 255, 0.08);
}

.ozo-new-form[hidden] {
  display: none;
}

.ozo-new-form label,
.ozo-selected-fields label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ozo-new-form label > span,
.ozo-selected-fields label > span {
  color: #667085;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ozo-new-form input,
.ozo-new-form select,
.ozo-new-form textarea,
.ozo-selected-fields input {
  min-height: 38px;
  border-color: #d7deea;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
}

.ozo-new-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

.ozo-new-form-actions span {
  color: #667085;
  font-size: 0.76rem;
  font-weight: 780;
}

.ozo-premium-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.32fr) minmax(410px, 1fr) minmax(290px, 0.34fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.ozo-worker-card,
.ozo-filter-shell,
.ozo-catalog-card,
.ozo-selected-card,
.ozo-quick-summary,
.ozo-system-advice {
  border: 1px solid #e5eaf3;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.07);
}

.ozo-worker-card,
.ozo-selected-column {
  position: sticky;
  top: 14px;
}

.ozo-worker-card {
  display: grid;
  overflow: hidden;
}

.ozo-worker-card-head {
  display: grid;
  gap: 5px;
  padding: 18px 18px 14px;
}

.ozo-worker-card-head strong {
  color: #101828;
  font-size: 1.08rem;
  font-weight: 950;
}

.ozo-worker-card-head em {
  justify-self: start;
  margin-top: 5px;
  padding: 7px 11px;
  border: 1px solid rgba(199, 210, 254, 0.72);
  border-radius: 999px;
  background: rgba(248, 250, 255, 0.94);
  color: #101828;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.ozo-worker-visual {
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.58), rgba(241, 245, 249, 0.9)),
    #f8fbff;
}

.ozo-worker-visual img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center bottom;
}

.ozo-worker-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px;
  padding: 14px;
  border: 1px solid #e5eaf3;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.ozo-worker-status div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ozo-worker-status dt,
.ozo-worker-status dd {
  margin: 0;
  min-width: 0;
}

.ozo-worker-status dt {
  color: #7b8aa5;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ozo-worker-status dd {
  color: #101828;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.25;
}

.ozo-system-advice {
  display: grid;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.92);
}

.ozo-system-advice > span {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: #eef2ff;
  color: #4f46e5;
}

.ozo-system-advice strong {
  color: #101828;
  font-size: 0.94rem;
  font-weight: 950;
}

.ozo-system-advice p {
  margin: 0;
}

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

.ozo-filter-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.32fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
}

.ozo-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.ozo-category-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #e5eaf3;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.96);
  color: #344054;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.04);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.ozo-category-chip small {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 950;
}

.ozo-category-chip:hover,
.ozo-category-chip:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(49, 91, 255, 0.42);
  outline: none;
  box-shadow: 0 14px 26px rgba(49, 91, 255, 0.1);
}

.ozo-category-chip.is-active {
  border-color: rgba(49, 91, 255, 0.8);
  background: linear-gradient(135deg, #315bff, #4f46e5);
  color: #ffffff;
  box-shadow: 0 18px 34px rgba(49, 91, 255, 0.24);
}

.ozo-category-chip.is-active small {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.ozo-search-field {
  position: relative;
  display: grid;
  gap: 6px;
}

.ozo-search-field span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.ozo-search-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 44px 0 16px;
  border: 1px solid #e5eaf3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #101828;
  box-shadow: 0 12px 26px rgba(16, 24, 40, 0.04);
}

.ozo-search-field i {
  position: absolute;
  right: 14px;
  bottom: 13px;
  color: #667085;
}

.ozo-catalog-card,
.ozo-selected-card,
.ozo-quick-summary {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ozo-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.ozo-card-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ozo-card-head strong,
.ozo-quick-summary > strong {
  color: #101828;
  font-size: 1rem;
  font-weight: 950;
}

.ozo-card-head b {
  font-weight: 950;
}

.ozo-card-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ozo-card-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.92);
  color: #047857;
  font-size: 0.74rem;
  font-weight: 950;
  text-decoration: none;
}

.ozo-card-actions select {
  min-height: 36px;
  padding: 0 30px 0 12px;
  border-radius: 12px;
  border-color: #e5eaf3;
  color: #344054;
  font-weight: 850;
}

.ozo-catalog-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding: 2px 5px 2px 0;
  scrollbar-gutter: stable;
}

.ozo-catalog-item {
  display: grid;
  grid-template-columns: 20px 48px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #e5eaf3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: #101828;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(16, 24, 40, 0.04);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.ozo-catalog-item:hover,
.ozo-catalog-item:focus-within {
  transform: translateY(-2px);
  border-color: rgba(49, 91, 255, 0.38);
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(16, 24, 40, 0.09);
}

.ozo-catalog-item.is-selected,
.ozo-catalog-item:has(input:checked) {
  border-color: rgba(49, 91, 255, 0.54);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), #ffffff);
  box-shadow: inset 4px 0 0 #315bff, 0 18px 34px rgba(49, 91, 255, 0.1);
}

.ozo-catalog-item input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #315bff;
}

.ozo-catalog-icon,
.ozo-selected-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  background: linear-gradient(135deg, #42a5f5, #315bff);
}

.ozo-catalog-icon img,
.ozo-selected-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.ozo-catalog-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ozo-catalog-copy strong {
  overflow: hidden;
  color: #101828;
  font-size: 0.84rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozo-catalog-copy small {
  color: #315bff;
  font-size: 0.74rem;
  font-weight: 950;
}

.ozo-catalog-copy em {
  overflow: hidden;
  color: #667085;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 820;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ozo-catalog-chevron {
  color: #667085;
  font-size: 1.4rem;
  font-weight: 500;
}

.ozo-load-more {
  display: flex;
  justify-content: center;
}

.ozo-load-more .ghost-button {
  min-height: 42px;
  border-radius: 14px;
}

.ozo-selected-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ozo-selected-card.is-empty {
  min-height: 280px;
  border-color: rgba(250, 204, 21, 0.38);
  background:
    radial-gradient(circle at 50% 34%, rgba(250, 204, 21, 0.18), transparent 34%),
    rgba(255, 251, 235, 0.72);
}

.ozo-selected-count {
  display: inline-grid;
  min-width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(250, 204, 21, 0.46);
  border-radius: 999px;
  background: #fde68a;
  color: #854d0e;
  font-size: 0.86rem;
  font-weight: 950;
}

.ozo-empty-state {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 190px;
  text-align: center;
}

.ozo-empty-state > span {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(250, 204, 21, 0.4);
  background: rgba(255, 255, 255, 0.74);
  color: #d97706;
}

.ozo-empty-state strong {
  max-width: 260px;
  color: #667085;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.45;
}

.ozo-selected-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.ozo-selected-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5eaf3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
}

.ozo-selected-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
}

.ozo-selected-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.6fr);
  gap: 8px;
  min-width: 0;
}

.ozo-selected-item > button {
  grid-column: 2;
  justify-self: start;
  min-height: 32px;
  border-radius: 10px;
}

.ozo-selected-required {
  display: inline-flex !important;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  align-self: end;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #e5eaf3;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
}

.ozo-selected-required input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #315bff;
}

.ozo-selected-fields .ozo-selected-required span {
  color: #344054;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
}

.ozo-quick-summary dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.ozo-quick-summary dl div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.ozo-quick-summary dt,
.ozo-quick-summary dd {
  margin: 0;
}

.ozo-quick-summary dt {
  color: #344054;
}

.ozo-quick-summary dd {
  color: #344054;
  font-size: 0.84rem;
  font-weight: 820;
}

.ozo-quick-summary dd b {
  color: #101828;
  font-weight: 950;
}

.ozo-save-continue {
  position: sticky;
  bottom: 12px;
  width: 100%;
  min-height: 48px;
  border-radius: 16px;
}

@media (max-width: 980px) {
  .risk-assessment-armor-workbench,
  .risk-assessment-armor-workspace-head,
  .risk-assessment-ppe-compact-layout,
  .risk-assessment-ppe-compact-toolbar,
  .risk-assessment-ppe-compact-body,
  .risk-assessment-ppe-selected-compact-row,
  .risk-assessment-ppe-selected-compact-grid,
  .risk-assessment-ppe-name-norm-fields,
  .risk-assessment-load-weight-grid,
  .ozo-step-header,
  .ozo-new-form,
  .ozo-premium-grid,
  .ozo-filter-shell,
  .ozo-selected-fields {
    grid-template-columns: 1fr;
  }

  .risk-assessment-ppe-worker-column,
  .ozo-worker-card,
  .ozo-selected-column,
  .ozo-save-continue {
    position: static;
  }

  .risk-assessment-ppe-compact-actions {
    justify-content: flex-start;
  }

  .risk-assessment-ppe-compact-list {
    max-height: 340px;
  }

  .risk-assessment-ppe-selected-compact-row > button {
    justify-self: start;
  }

  .ozo-step-header {
    align-items: start;
  }

  .ozo-primary-action {
    justify-self: start;
  }

  .ozo-worker-visual img {
    height: 220px;
  }

  .ozo-worker-status {
    grid-template-columns: 1fr;
  }

  .ozo-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ozo-card-actions {
    justify-content: flex-start;
  }

  .ozo-catalog-list,
  .ozo-selected-list {
    max-height: 420px;
  }
}

.risk-assessment-job-visibility {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.9));
}

.risk-assessment-job-visibility > span {
  margin-right: 4px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.risk-assessment-job-visibility button {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(191, 219, 254, 0.82);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.86);
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.risk-assessment-job-visibility button.is-hidden {
  border-color: rgba(203, 213, 225, 0.9);
  background: rgba(248, 250, 252, 0.92);
  color: #64748b;
}

.risk-assessment-work-flags.is-profile,
.risk-assessment-job-referral-toggles {
  gap: 7px;
}

.risk-assessment-work-flags.is-profile label,
.risk-assessment-job-referral-toggles label {
  position: relative;
  min-height: 34px;
  cursor: pointer;
}

.risk-assessment-work-flags.is-profile input,
.risk-assessment-job-referral-toggles input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.risk-assessment-work-flags.is-profile label.is-selected,
.risk-assessment-job-referral-toggles label.is-selected {
  border-color: rgba(34, 197, 94, 0.44);
  background: rgba(240, 253, 244, 0.94);
  color: #166534;
}

.risk-assessment-job-referral-toggles {
  display: flex;
  flex-wrap: wrap;
}

.risk-assessment-job-referral-toggles label {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.94);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 900;
}

.risk-assessment-psychosocial-toggle {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(196, 181, 253, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.risk-assessment-psychosocial-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #7c3aed;
}

.risk-assessment-psychosocial-toggle.is-selected {
  border-color: rgba(124, 58, 237, 0.48);
  background: rgba(245, 243, 255, 0.94);
  color: #5b21b6;
}

.job-psychosocial-scale.is-risk-assessment {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.risk-assessment-client-input-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-left: 4px solid #2563eb;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.07);
}

.risk-assessment-client-input-card.is-locked {
  border-color: rgba(148, 163, 184, 0.48);
  border-left-color: #64748b;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.risk-assessment-client-input-card.is-locked .risk-assessment-client-input-head > span {
  background: #e2e8f0;
  color: #475569;
}

.risk-assessment-client-input-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.risk-assessment-client-input-head > span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  background: #dbeafe;
  color: #1d4ed8;
}

.risk-assessment-client-input-head strong {
  color: #0f172a;
  font-size: 0.94rem;
  font-weight: 950;
}

.risk-assessment-client-input-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
}

.risk-assessment-job-preset-strip.is-client {
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.risk-assessment-client-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.risk-assessment-client-input-grid label,
.risk-assessment-client-input-note {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.risk-assessment-client-input-grid label > span,
.risk-assessment-client-input-note > span {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.risk-assessment-client-input-grid input,
.risk-assessment-client-input-grid textarea,
.risk-assessment-client-input-note textarea {
  width: 100%;
}

.risk-assessment-client-input-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.risk-assessment-client-input-section .job-pur-dropdown summary {
  border-color: rgba(37, 99, 235, 0.28);
}

.risk-assessment-client-portal-permission {
  padding: 14px;
  border: 1px solid rgba(250, 204, 21, 0.38);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(254, 252, 232, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 16px 34px rgba(202, 138, 4, 0.08);
}

.risk-assessment-client-portal-permission.is-company-setting {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: none;
}

.company-client-risk-toggle {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 14px;
  background: rgba(239, 246, 255, 0.72);
}

.risk-assessment-checkbox-line.is-portal-toggle {
  align-items: flex-start;
  gap: 11px;
  width: 100%;
}

.risk-assessment-checkbox-line.is-portal-toggle input {
  margin-top: 3px;
  accent-color: #facc15;
}

.risk-assessment-checkbox-line.is-portal-toggle span {
  display: grid;
  gap: 3px;
}

.risk-assessment-checkbox-line.is-portal-toggle strong {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 950;
}

.risk-assessment-checkbox-line.is-portal-toggle small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.45;
}

.risk-assessment-job-pur {
  display: grid;
  gap: 9px;
}

.risk-assessment-job-pur .job-pur-picker {
  max-height: 220px;
  grid-template-columns: minmax(0, 1fr);
}

.risk-assessment-job-choice-grid {
  display: grid;
  gap: 12px;
}

.risk-assessment-job-choice-block {
  --risk-choice-accent: #4f46e5;
  --risk-choice-soft: rgba(238, 242, 255, 0.96);
  --risk-choice-border: rgba(199, 210, 254, 0.76);
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--risk-choice-border);
  border-left: 4px solid var(--risk-choice-accent);
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--risk-choice-soft), rgba(255, 255, 255, 0.96));
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

.risk-assessment-job-choice-block.is-sky {
  --risk-choice-accent: #0284c7;
  --risk-choice-soft: rgba(224, 242, 254, 0.72);
  --risk-choice-border: rgba(125, 211, 252, 0.74);
}

.risk-assessment-job-choice-block.is-indigo {
  --risk-choice-accent: #4f46e5;
  --risk-choice-soft: rgba(238, 242, 255, 0.74);
  --risk-choice-border: rgba(165, 180, 252, 0.78);
}

.risk-assessment-job-choice-block.is-violet {
  --risk-choice-accent: #7c3aed;
  --risk-choice-soft: rgba(237, 233, 254, 0.74);
  --risk-choice-border: rgba(196, 181, 253, 0.78);
}

.risk-assessment-job-choice-block.is-emerald {
  --risk-choice-accent: #059669;
  --risk-choice-soft: rgba(220, 252, 231, 0.68);
  --risk-choice-border: rgba(134, 239, 172, 0.72);
}

.risk-assessment-job-choice-block.is-amber {
  --risk-choice-accent: #d97706;
  --risk-choice-soft: rgba(254, 243, 199, 0.72);
  --risk-choice-border: rgba(252, 211, 77, 0.72);
}

.risk-assessment-job-choice-block-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.risk-assessment-job-choice-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--risk-choice-accent) 24%, transparent);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--risk-choice-accent);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--risk-choice-accent) 12%, transparent);
}

.risk-assessment-job-choice-block-head strong {
  display: block;
  color: #172033;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.2;
}

.risk-assessment-job-choice-block-head small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 740;
  line-height: 1.35;
}

.risk-assessment-job-choice-block > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.risk-assessment-choice-option {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.risk-assessment-choice-option.has-inline-weight {
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--risk-choice-accent) 28%, rgba(203, 213, 225, 0.82));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.risk-assessment-job-choice-grid.is-ra1 {
  gap: 10px;
}

.risk-assessment-job-choice-grid > .risk-assessment-load-weight-panel {
  grid-column: 1 / -1;
}

.risk-assessment-job-choice-block button {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.risk-assessment-job-choice-block button:hover,
.risk-assessment-job-choice-block button:focus-visible {
  border-color: color-mix(in srgb, var(--risk-choice-accent) 34%, rgba(203, 213, 225, 0.88));
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--risk-choice-accent) 10%, transparent);
  transform: translateY(-1px);
  outline: none;
}

.risk-assessment-job-choice-block button.is-selected {
  border-color: color-mix(in srgb, var(--risk-choice-accent) 52%, rgba(203, 213, 225, 0.88));
  background: color-mix(in srgb, var(--risk-choice-accent) 10%, white);
  color: color-mix(in srgb, var(--risk-choice-accent) 74%, #0f172a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--risk-choice-accent) 12%, transparent);
}

.risk-assessment-inline-load-weight {
  width: 106px;
  min-height: 30px;
  padding: 4px 24px 4px 9px;
  border: 1px solid color-mix(in srgb, var(--risk-choice-accent) 32%, #cbd5e1);
  border-radius: 999px;
  background-color: #ffffff;
  color: #172033;
  font-size: 0.72rem;
  font-weight: 850;
}

.risk-assessment-load-weight-panel {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(167, 139, 250, 0.42);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(245, 243, 255, 0.82), rgba(255, 255, 255, 0.96));
  box-shadow: 0 10px 22px rgba(91, 33, 182, 0.055);
}

.risk-assessment-load-weight-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.risk-assessment-load-weight-head > span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: rgba(237, 233, 254, 0.95);
  color: #6d28d9;
}

.risk-assessment-load-weight-head strong {
  display: block;
  color: #172033;
  font-size: 0.82rem;
  font-weight: 950;
}

.risk-assessment-load-weight-head small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.risk-assessment-load-weight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.risk-assessment-load-weight-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-load-weight-grid label span {
  color: #475569;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.risk-assessment-job-resource-field {
  --risk-resource-accent: #475569;
  --risk-resource-soft: rgba(248, 250, 252, 0.98);
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--risk-resource-accent) 22%, #e2e8f0);
  border-top: 3px solid var(--risk-resource-accent);
  border-radius: 16px;
  background:
    linear-gradient(145deg, var(--risk-resource-soft), rgba(255, 255, 255, 0.98));
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

.risk-assessment-job-resource-field.is-sky {
  --risk-resource-accent: #0284c7;
  --risk-resource-soft: rgba(224, 242, 254, 0.62);
}

.risk-assessment-job-resource-field.is-indigo {
  --risk-resource-accent: #4f46e5;
  --risk-resource-soft: rgba(238, 242, 255, 0.68);
}

.risk-assessment-job-resource-field.is-amber {
  --risk-resource-accent: #d97706;
  --risk-resource-soft: rgba(254, 243, 199, 0.62);
}

.risk-assessment-job-resource-field.is-emerald {
  --risk-resource-accent: #059669;
  --risk-resource-soft: rgba(220, 252, 231, 0.62);
}

.risk-assessment-job-resource-field.is-violet {
  --risk-resource-accent: #7c3aed;
  --risk-resource-soft: rgba(237, 233, 254, 0.66);
}

.risk-assessment-job-resource-field.is-rose {
  --risk-resource-accent: #e11d48;
  --risk-resource-soft: rgba(255, 228, 230, 0.62);
}

.risk-assessment-job-resource-field.is-yellow {
  --risk-resource-accent: #ca8a04;
  --risk-resource-soft: rgba(254, 249, 195, 0.66);
}

.risk-assessment-job-profile-grid .risk-assessment-job-resource-head {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #172033;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-transform: none;
}

.risk-assessment-job-profile-grid .risk-assessment-job-resource-head i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--risk-resource-accent);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--risk-resource-accent) 10%, transparent);
}

.risk-assessment-job-profile-grid .risk-assessment-job-resource-head strong {
  color: #172033;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1.2;
}

.risk-assessment-job-resource-field textarea {
  border-color: color-mix(in srgb, var(--risk-resource-accent) 28%, #e2e8f0);
  background: rgba(255, 255, 255, 0.9);
}

.risk-assessment-word-template-panel {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
}

.risk-assessment-word-template-panel > .inline-help {
  width: fit-content;
  max-width: 100%;
  padding: 7px 11px;
  border: 1px solid rgba(226, 232, 240, 0.86);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  color: #475569;
  font-weight: 760;
}

.risk-assessment-word-template-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.risk-assessment-word-template-top strong {
  display: block;
  margin-top: 3px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
}

.risk-assessment-word-template-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-template-placeholder-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.risk-assessment-template-placeholder-cta strong {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
}

.risk-assessment-placeholder-backdrop {
  z-index: 2800;
}

.risk-assessment-placeholder-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2810;
  display: grid;
  gap: 14px;
  width: min(980px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(191, 219, 254, 0.88);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97));
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);
  transform: translate(-50%, -50%);
}

.risk-assessment-placeholder-dialog[hidden] {
  display: none;
}

.risk-assessment-placeholder-dialog.is-open {
  animation: riskPlaceholderDialogIn 0.18s ease-out;
}

@keyframes riskPlaceholderDialogIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px)) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.risk-assessment-section-document-menu {
  display: inline-grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(190px, 24vw);
  min-width: 0;
  gap: 4px;
  justify-self: end;
  align-self: start;
  margin-top: 0;
  padding: 5px;
  border: 1px solid rgba(203, 213, 225, 0.56);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.62), rgba(255, 255, 255, 0.82)),
    #fff;
  box-shadow: none;
  opacity: 0.78;
  transition: opacity 0.16s ease, border-color 0.16s ease;
}

.risk-assessment-section-document-menu:hover,
.risk-assessment-section-document-menu:focus-within {
  border-color: rgba(148, 163, 184, 0.72);
  opacity: 1;
}

.risk-assessment-section-document-menu-head {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.risk-assessment-section-document-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.risk-assessment-section-document-icon .risk-assessment-risk-icon {
  width: 13px;
  height: 13px;
}

.risk-assessment-section-document-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-section-document-copy strong {
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-section-document-copy small {
  display: none;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.35;
}

.risk-assessment-section-document-menu select {
  width: 100%;
  min-height: 28px;
  padding: 4px 26px 4px 8px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 9px;
  background: #fff;
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 850;
}

.risk-assessment-section-document-menu em {
  display: none;
  width: 100%;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(248, 250, 252, 0.94);
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.risk-assessment-template-placeholder-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}

.risk-assessment-template-placeholder-chip {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.risk-assessment-template-placeholder-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(250, 204, 21, 0.88);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.risk-assessment-template-placeholder-chip strong {
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.73rem;
}

.risk-assessment-template-placeholder-chip span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.risk-assessment-template-placeholder-chip.is-muted {
  opacity: 0.58;
}

.risk-assessment-template-builder {
  display: grid;
  gap: 14px;
}

.risk-assessment-template-settings {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr) minmax(190px, 0.42fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
}

.risk-assessment-template-sections {
  display: grid;
  gap: 10px;
}

.risk-assessment-template-section-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.risk-assessment-template-section-order {
  display: grid;
  gap: 6px;
  align-content: start;
}

.risk-assessment-template-section-order strong {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: #0f172a;
  color: #facc15;
  font-size: 0.95rem;
}

.risk-assessment-template-section-order span,
.risk-assessment-template-token {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(250, 204, 21, 0.56);
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.14);
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 850;
}

.risk-assessment-template-section-main {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.risk-assessment-template-section-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(240px, 0.58fr);
  gap: 9px;
}

.risk-assessment-template-section-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-template-section-grid label span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.risk-assessment-template-section-grid .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-template-section-flags,
.risk-assessment-template-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.risk-assessment-template-section-flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 820;
}

.risk-assessment-template-section-actions {
  justify-content: flex-end;
}

.risk-assessment-template-section-actions .ghost-button {
  min-height: 32px;
  padding: 6px 9px;
}

.risk-assessment-template-preview {
  display: grid;
  gap: 12px;
}

.risk-assessment-template-document {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.risk-assessment-template-document > header {
  display: grid;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.risk-assessment-template-document h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.25rem;
}

.risk-assessment-template-document header p {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 720;
}

.risk-assessment-template-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.risk-assessment-template-toc span {
  padding: 6px 9px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 820;
}

.risk-assessment-template-preview-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
}

.risk-assessment-template-preview-section.has-page-break {
  border-top: 4px solid rgba(250, 204, 21, 0.76);
}

.risk-assessment-template-section-body {
  display: grid;
  gap: 10px;
}

.risk-assessment-template-rich {
  display: grid;
  gap: 7px;
}

.risk-assessment-template-rich :where(p, ul, ol, table) {
  margin: 0;
}

.risk-assessment-template-cover {
  display: grid;
  gap: 11px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
  color: #fff;
}

.risk-assessment-template-cover span {
  color: #facc15;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.risk-assessment-template-cover h3 {
  margin: 0;
  color: #fff;
  font-size: 1.45rem;
}

.risk-assessment-template-cover p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 780;
}

.risk-assessment-template-facts,
.risk-assessment-template-card-grid,
.risk-assessment-template-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
}

.risk-assessment-template-facts > div,
.risk-assessment-template-card-grid article,
.risk-assessment-template-metrics span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
}

.risk-assessment-template-facts span,
.risk-assessment-template-card-grid article > span,
.risk-assessment-template-metrics span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.risk-assessment-template-facts strong,
.risk-assessment-template-card-grid strong,
.risk-assessment-template-metrics strong {
  color: #0f172a;
  font-size: 0.9rem;
}

.risk-assessment-template-card-grid p {
  margin: 0;
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.42;
}

.risk-assessment-template-card-grid div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.risk-assessment-template-card-grid em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.82);
  color: #1e40af;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 820;
}

.risk-assessment-template-table {
  display: grid;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 14px;
  overflow: hidden;
}

.risk-assessment-template-table > div {
  display: grid;
  grid-template-columns: 1.2fr 0.55fr 0.7fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.risk-assessment-template-table.is-ppe-by-job > div {
  grid-template-columns: 1.04fr 0.94fr 0.38fr 1.42fr 1.04fr 1.25fr;
}

.risk-assessment-template-table.is-equipment-list > div {
  grid-template-columns: 0.42fr 1.15fr 0.92fr 0.55fr 1.45fr;
}

.risk-assessment-template-table.is-inspection-list > div {
  grid-template-columns: 0.42fr 1.12fr 0.85fr 0.8fr 1fr 1.05fr;
}

.risk-assessment-template-table > div:last-child {
  border-bottom: 0;
}

.risk-assessment-template-table span {
  padding: 8px;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.35;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.risk-assessment-template-table .is-head span {
  background: #0f172a;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-template-table.is-ppe-by-job .is-missing-ppe span:nth-child(4) {
  color: #b45309;
  font-style: italic;
}

.risk-assessment-template-table.is-ppe-by-job .has-ppe span:nth-child(4) {
  color: #0f5132;
  font-weight: 850;
}

.risk-assessment-work-flags label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.risk-assessment-work-flags input,
.risk-assessment-ppe-option input,
.risk-assessment-checkbox-line input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: #2563eb;
}

.risk-assessment-nexai-button,
.risk-assessment-nexai-badge {
  border-color: rgba(168, 85, 247, 0.44) !important;
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.96), rgba(239, 246, 255, 0.92)) !important;
  color: #5b21b6 !important;
}

.risk-assessment-ai-proposal {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(168, 85, 247, 0.36);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(250, 245, 255, 0.95), rgba(239, 246, 255, 0.9));
}

.risk-assessment-ai-proposal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.risk-assessment-nexai-badge {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(168, 85, 247, 0.42);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 930;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-assessment-ai-proposal-head strong {
  color: #1f2937;
  font-size: 0.88rem;
}

.risk-assessment-ai-proposal-head small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 780;
}

.risk-assessment-ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-ai-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.risk-assessment-ai-split > div {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.risk-assessment-ai-split span {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 760;
}

.risk-assessment-ai-split.is-full {
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.55fr);
}

.risk-assessment-ai-split span b {
  display: block;
  margin-bottom: 2px;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-ai-risk-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 8px;
}

.risk-assessment-ai-risk-preview article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.82);
}

.risk-assessment-ai-risk-preview article.is-low {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(240, 253, 244, 0.82);
}

.risk-assessment-ai-risk-preview article.is-medium {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(255, 251, 235, 0.86);
}

.risk-assessment-ai-risk-preview article.is-high {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(254, 242, 242, 0.86);
}

.risk-assessment-ai-risk-preview article > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-ai-risk-preview strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-ai-risk-preview small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-ai-risk-preview dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.risk-assessment-ai-risk-preview dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.risk-assessment-ai-risk-preview dt,
.risk-assessment-ai-risk-preview dd {
  min-width: 0;
  margin: 0;
}

.risk-assessment-ai-risk-preview dt {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-ai-risk-preview dd {
  overflow: hidden;
  color: #172033;
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-catalog-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 0.35fr);
  gap: 10px;
}

.risk-assessment-catalog-controls label {
  display: grid;
  gap: 5px;
}

.risk-assessment-catalog-controls span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-catalog-item .icon-button {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 9px;
}

.risk-assessment-risk-cards {
  display: grid;
  gap: 12px;
}

.risk-assessment-risk-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.risk-assessment-risk-card.is-low {
  border-color: rgba(34, 197, 94, 0.18);
  box-shadow: 0 16px 34px rgba(34, 197, 94, 0.08);
}

.risk-assessment-risk-card.is-medium {
  border-color: rgba(245, 158, 11, 0.22);
  box-shadow: 0 16px 34px rgba(245, 158, 11, 0.08);
}

.risk-assessment-risk-card.is-high {
  border-color: rgba(239, 68, 68, 0.26);
  box-shadow: 0 16px 34px rgba(239, 68, 68, 0.09);
}

.risk-assessment-risk-card.is-active {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.12);
}

.risk-assessment-risk-card.is-collapsed {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.risk-assessment-risk-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
  background:
    linear-gradient(180deg, #fbfbff 0%, #ffffff 100%);
}

.risk-assessment-risk-title-shell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.risk-assessment-risk-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.risk-assessment-risk-back-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.risk-assessment-risk-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.risk-assessment-risk-code-input,
.risk-assessment-risk-title-input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #172554;
  box-shadow: none;
  font-weight: 950;
  letter-spacing: 0;
}

.risk-assessment-risk-code-input {
  width: 52px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(238, 242, 255, 0.92);
  color: #2563eb;
  font-size: 0.98rem;
  text-align: center;
}

.risk-assessment-risk-title-input {
  width: min(520px, 58vw);
  padding: 0;
  color: #0f172a;
  font-size: 0.98rem;
}

.risk-assessment-risk-code-input:focus,
.risk-assessment-risk-title-input:focus {
  outline: none;
  box-shadow: none;
}

.risk-assessment-risk-head-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.risk-assessment-risk-collapse-icon,
.risk-assessment-risk-remove-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.risk-assessment-risk-collapse-icon {
  border: 1px solid rgba(37, 99, 235, 0.26);
  border-radius: 10px;
  background: rgba(239, 246, 255, 0.92);
  color: #1d4ed8;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.08);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.risk-assessment-risk-collapse-icon:hover,
.risk-assessment-risk-collapse-icon:focus-visible {
  border-color: rgba(37, 99, 235, 0.62);
  background: rgba(219, 234, 254, 0.96);
  transform: translateY(-1px);
  outline: none;
}

.risk-assessment-risk-remove-icon {
  border: 1px solid rgba(248, 113, 113, 0.44);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #ef4444;
  box-shadow: 0 10px 20px rgba(239, 68, 68, 0.08);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.risk-assessment-risk-remove-icon:hover,
.risk-assessment-risk-remove-icon:focus-visible {
  border-color: rgba(239, 68, 68, 0.72);
  background: rgba(254, 242, 242, 0.98);
  transform: translateY(-1px);
  outline: none;
}

.risk-assessment-risk-primary-action,
.risk-assessment-risk-secondary-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 930;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.risk-assessment-risk-secondary-action {
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.risk-assessment-risk-secondary-action .risk-assessment-risk-icon {
  color: #ef4444;
}

.risk-assessment-risk-primary-action {
  border: 1px solid rgba(49, 46, 129, 0.86);
  background: linear-gradient(135deg, #312e81, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(49, 46, 129, 0.22);
}

.risk-assessment-risk-primary-action:hover,
.risk-assessment-risk-secondary-action:hover {
  transform: translateY(-1px);
}

.risk-assessment-risk-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 18px;
  margin: 0;
}

.risk-assessment-risk-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 999px;
  background: rgba(238, 242, 255, 0.92);
  color: #3730a3;
  font-size: 0.6rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.risk-assessment-risk-type-pill.is-hazard {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(254, 242, 242, 0.95);
  color: #991b1b;
}

.risk-assessment-risk-type-pill.is-harm {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.95);
  color: #92400e;
}

.risk-assessment-risk-type-pill.is-effort {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(239, 246, 255, 0.96);
  color: #1d4ed8;
}

.risk-assessment-risk-classification {
  color: #475569;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.015em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: pre-line;
}

.risk-assessment-risk-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 6px;
  background: #ffffff;
}

.risk-assessment-risk-score-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  min-height: 96px;
  align-content: center;
  padding: 16px 18px;
  border-right: 1px solid rgba(226, 232, 240, 0.95);
}

.risk-assessment-risk-score-panel:last-child {
  border-right: 0;
}

.risk-assessment-risk-score-panel > span {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.risk-assessment-risk-select-shell,
.risk-assessment-risk-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 5px;
  background: #ffffff;
  color: #0f172a;
}

.risk-assessment-risk-select-shell::after {
  content: "⌄";
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

.risk-assessment-risk-select-shell::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  font-size: 0;
  font-weight: 900;
  transform: rotate(45deg) translateY(-2px);
}

.risk-assessment-risk-select-shell i,
.risk-assessment-risk-result i {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.risk-assessment-risk-select-shell select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #172554;
  font-size: 0.84rem;
  font-weight: 900;
  appearance: none;
  box-shadow: none;
}

.risk-assessment-risk-select-shell select:focus {
  outline: none;
  box-shadow: none;
}

.risk-assessment-risk-result {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-color: rgba(203, 213, 225, 0.92);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.9));
  color: #334155;
}

.risk-assessment-risk-result strong {
  font-size: 0.86rem;
  font-weight: 950;
}

.risk-assessment-risk-result em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: inherit;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.risk-assessment-risk-select-shell.is-low i,
.risk-assessment-risk-result.is-low i {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.risk-assessment-risk-result.is-low {
  border-color: rgba(16, 185, 129, 0.26);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(240, 253, 244, 0.9));
  color: #166534;
}

.risk-assessment-risk-select-shell.is-medium i,
.risk-assessment-risk-result.is-medium i {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.risk-assessment-risk-result.is-medium {
  border-color: rgba(245, 158, 11, 0.32);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(254, 243, 199, 0.88));
  color: #92400e;
}

.risk-assessment-risk-select-shell.is-high i,
.risk-assessment-risk-result.is-high i {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.risk-assessment-risk-result.is-high {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.88));
  color: #991b1b;
}

.risk-assessment-risk-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.risk-assessment-risk-large-field {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 6px;
  background: #ffffff;
}

.risk-assessment-risk-large-field > div {
  display: grid;
  gap: 5px;
}

.risk-assessment-risk-large-field strong {
  color: #334155;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.risk-assessment-risk-large-field span {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
}

.risk-assessment-risk-large-field textarea {
  min-height: 176px;
  resize: vertical;
  border-radius: 5px;
  font-size: 0.82rem;
  line-height: 1.55;
}

.risk-assessment-risk-pur-field {
  display: grid;
  gap: 6px;
  grid-column: auto;
  min-width: 0;
  margin-top: 0;
  padding: 8px;
  border: 1px solid rgba(191, 219, 254, 0.72);
  border-radius: 9px;
  background: rgba(248, 250, 252, 0.92);
}

.risk-assessment-risk-pur-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.risk-assessment-risk-pur-head > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.risk-assessment-risk-pur-head strong {
  color: #1e3a8a;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.risk-assessment-risk-pur-head small {
  display: none;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
}

.risk-assessment-risk-pur-head em {
  padding: 3px 6px;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.risk-assessment-risk-pur-dropdown {
  display: grid;
  gap: 8px;
}

.risk-assessment-risk-pur-dropdown summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 7px;
  background: #ffffff;
  cursor: pointer;
  list-style: none;
}

.risk-assessment-risk-pur-dropdown summary::-webkit-details-marker {
  display: none;
}

.risk-assessment-risk-pur-dropdown summary span {
  overflow: hidden;
  color: #334155;
  font-size: 0.66rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-risk-pur-dropdown summary strong {
  color: #2563eb;
  font-size: 0.64rem;
  font-weight: 950;
}

.risk-assessment-risk-pur-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  max-height: 220px;
  overflow: auto;
}

.risk-assessment-risk-pur-options button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 7px;
  background: #ffffff;
  color: #334155;
  text-align: left;
}

.risk-assessment-risk-pur-options button span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
  font-size: 0.66rem;
  font-weight: 950;
}

.risk-assessment-risk-pur-options button strong {
  overflow: hidden;
  color: #172033;
  font-size: 0.66rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-risk-pur-options button small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-risk-pur-options button.is-selected {
  border-color: rgba(37, 99, 235, 0.46);
  background: rgba(219, 234, 254, 0.92);
}

.risk-assessment-risk-pur-options.job-pur-picker {
  gap: 8px;
  max-height: 320px;
  padding-right: 4px;
}

.risk-assessment-risk-pur-options .job-pur-group {
  padding: 6px;
  border-radius: 12px;
}

.risk-assessment-risk-pur-options .job-pur-subgrid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.risk-assessment-risk-pur-options .job-pur-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px 8px;
  min-height: 40px;
  padding: 7px 8px;
  border-radius: 11px;
}

.risk-assessment-risk-pur-options .job-pur-option span {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
}

.risk-assessment-risk-pur-options .job-pur-option strong {
  overflow: visible;
  font-size: 0.68rem;
  white-space: normal;
}

.risk-assessment-risk-pur-options .job-pur-option small {
  grid-column: 2;
  overflow: visible;
  font-size: 0.58rem;
  line-height: 1.28;
  white-space: normal;
}

.risk-assessment-risk-pur-options .job-pur-option.is-selected {
  border-color: rgba(250, 204, 21, 0.9);
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.98), rgba(255, 255, 255, 0.95));
}

.risk-assessment-ppe-selected-row label span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .risk-assessment-risk-card-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 12px 12px;
  }

  .risk-assessment-risk-head-actions {
    justify-content: flex-start;
  }

  .risk-assessment-risk-title-shell {
    width: 100%;
    padding: 12px;
    border-right: 0;
    border-bottom-left-radius: 8px;
  }

  .risk-assessment-risk-code-input {
    width: 66px;
  }

  .risk-assessment-risk-title-input {
    width: 100%;
  }

  .risk-assessment-risk-score-grid,
  .risk-assessment-risk-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-risk-score-panel {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  }

  .risk-assessment-risk-score-panel:last-child {
    border-bottom: 0;
  }
}

.risk-assessment-risk-body {
  display: grid;
  grid-template-columns: minmax(235px, 0.36fr) minmax(420px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  background: #f8fafc;
}

.risk-assessment-risk-body[hidden] {
  display: none;
}

.risk-assessment-risk-assessment-panel {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.risk-assessment-risk-panel-title {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(199, 210, 254, 0.58);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.92);
  min-width: 0;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 950;
}

.risk-assessment-risk-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: #f1f0ff;
  color: #4f46e5;
}

.risk-assessment-risk-panel-icon .risk-assessment-risk-icon {
  width: 14px;
  height: 14px;
}

.risk-assessment-risk-body .risk-assessment-risk-score-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.risk-assessment-risk-body .risk-assessment-risk-score-panel {
  gap: 5px;
  min-height: auto;
  align-content: center;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
}

.risk-assessment-risk-body .risk-assessment-risk-score-panel > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: none;
}

.risk-assessment-risk-score-panel > span small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(100, 116, 139, 0.34);
  border-radius: 999px;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 900;
}

.risk-assessment-risk-body .risk-assessment-risk-select-shell,
.risk-assessment-risk-body .risk-assessment-risk-result {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
}

.risk-assessment-risk-body .risk-assessment-risk-select-shell i,
.risk-assessment-risk-body .risk-assessment-risk-result i {
  width: 12px;
  height: 12px;
}

.risk-assessment-risk-body .risk-assessment-risk-select-shell select {
  font-size: 0.8rem;
}

.risk-assessment-risk-body .risk-assessment-risk-result {
  min-height: 38px;
}

.risk-assessment-risk-body .risk-assessment-risk-result strong {
  font-size: 0.82rem;
}

.risk-assessment-risk-body .risk-assessment-risk-result.is-high {
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.98), rgba(254, 205, 211, 0.72));
}

.risk-assessment-risk-body .risk-assessment-risk-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 0;
}

.risk-assessment-risk-body .risk-assessment-risk-large-field {
  position: relative;
  gap: 7px;
  min-height: 0;
  padding: 10px;
  border-radius: 9px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.risk-assessment-risk-body .risk-assessment-risk-large-field > div {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.risk-assessment-risk-body .risk-assessment-risk-large-field > div > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.risk-assessment-risk-body .risk-assessment-risk-large-field strong {
  color: #0f172a;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
}

.risk-assessment-risk-body .risk-assessment-risk-large-field small:not(.risk-assessment-risk-character-count) {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 740;
  line-height: 1.35;
}

.risk-assessment-risk-body .risk-assessment-risk-large-field textarea {
  min-height: 50px;
  padding: 9px 10px 22px;
  border-radius: 7px;
  font-size: 0.8rem;
  line-height: 1.38;
}

.risk-assessment-risk-character-count {
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: #475569;
  font-size: 0.64rem;
  font-weight: 850;
}

@media (max-width: 980px) {
  .risk-assessment-risk-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .risk-assessment-risk-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  .risk-assessment-risk-head-actions {
    grid-column: auto;
    justify-content: flex-end;
  }

  .risk-assessment-risk-title-row {
    gap: 8px;
  }

  .risk-assessment-risk-back-indicator {
    width: 36px;
    height: 36px;
  }

  .risk-assessment-risk-code-input {
    width: 54px;
  }

  .risk-assessment-risk-title-input {
    width: 100%;
  }
}

.risk-assessment-ppe-panel {
  position: relative;
  display: grid;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.46);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.72)),
    radial-gradient(circle at 15% 22%, rgba(250, 204, 21, 0.18), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.12), transparent 20%),
    linear-gradient(135deg, #f8fafc, #edf2f7 48%, #f9fbfd);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

.risk-assessment-ppe-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(180deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(15, 23, 42, 0.04), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.04));
  opacity: 0.62;
  pointer-events: none;
}

.risk-assessment-ppe-panel > * {
  position: relative;
  z-index: 1;
}

.risk-assessment-ppe-title {
  justify-items: center;
  text-align: center;
}

.risk-assessment-ppe-title strong {
  color: #08192b;
  font-size: clamp(1.5rem, 2.4vw, 2.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.risk-assessment-ppe-title span {
  max-width: 720px;
  color: #172033;
  font-size: 0.86rem;
  font-weight: 850;
  text-transform: uppercase;
}

.risk-assessment-ppe-title::after {
  content: "";
  width: 86px;
  height: 4px;
  border-radius: 999px;
  background: #facc15;
  box-shadow: 0 8px 18px rgba(250, 204, 21, 0.28);
}

.risk-assessment-ppe-filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.risk-assessment-ppe-filters button small {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.86);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 900;
}

.risk-assessment-ppe-filters button:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.risk-assessment-ppe-filters button.is-active {
  border-color: rgba(37, 99, 235, 0.58);
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.98), rgba(239, 246, 255, 0.94));
  color: #1d4ed8;
  box-shadow: inset 0 -2px 0 rgba(37, 99, 235, 0.22), 0 12px 26px rgba(37, 99, 235, 0.1);
}

.risk-assessment-ppe-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.risk-assessment-ppe-search {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-ppe-search span,
.risk-assessment-ppe-new-form label span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.risk-assessment-ppe-source {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 10px;
  background: rgba(240, 253, 250, 0.86);
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.risk-assessment-ppe-new-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, 0.26);
  border-radius: 12px;
  background: rgba(240, 253, 250, 0.72);
}

.risk-assessment-ppe-new-form[hidden] {
  display: none;
}

.risk-assessment-ppe-new-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-ppe-new-form .field-span-full {
  grid-column: 1 / -1;
}

.risk-assessment-ppe-new-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.risk-assessment-ppe-new-actions span {
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 780;
}

.risk-assessment-ppe-layout {
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.risk-assessment-worker-preview {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.52)),
    radial-gradient(ellipse at 50% 84%, rgba(15, 23, 42, 0.16), transparent 34%),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.98), transparent 27%),
    linear-gradient(160deg, rgba(241, 245, 249, 0.96), rgba(255, 255, 255, 0.94) 46%, rgba(229, 236, 245, 0.96));
  perspective: 900px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -34px 74px rgba(15, 23, 42, 0.08);
}

.risk-assessment-worker-preview::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 76%;
  height: 70px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(30, 41, 59, 0.18), rgba(59, 130, 246, 0.08) 44%, transparent 70%);
  transform: translateX(-50%) rotateX(68deg);
  z-index: 0;
  pointer-events: none;
}

.risk-assessment-worker-preview::after {
  content: "";
  position: absolute;
  inset: 26px 24px auto;
  height: 74px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.74), transparent);
  filter: blur(4px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.risk-assessment-worker-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.risk-assessment-worker-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.risk-assessment-worker-preview.is-webgl-ready .risk-assessment-worker-canvas {
  opacity: 1;
}

.risk-assessment-worker-preview.is-webgl-ready .risk-assessment-worker-figure {
  opacity: 0;
  transform: rotateX(5deg) rotateY(-7deg) scale(0.94);
}

.risk-assessment-worker-preview:not(.is-webgl-ready) .risk-assessment-worker-figure {
  animation: risk-assessment-worker-fallback-spin 8s linear infinite;
}

.risk-assessment-ppe-callouts {
  position: absolute;
  inset: 16px 14px auto;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  pointer-events: none;
}

.risk-assessment-ppe-callout {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #0f172a;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  transform: translateZ(34px);
  animation: risk-ppe-callout-forward 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--ppe-callout-index, 0) * 45ms);
  backdrop-filter: blur(10px);
}

.risk-assessment-ppe-callout img {
  display: block;
  width: 34px;
  height: 34px;
  padding: 5px;
  border-radius: 50%;
  background: #07192d;
  object-fit: contain;
}

.risk-assessment-ppe-callout b {
  min-width: 0;
  overflow: hidden;
  color: #08192b;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes risk-ppe-callout-forward {
  0% {
    opacity: 0;
    transform: translateY(10px) translateZ(-80px) scale(0.72);
  }

  62% {
    opacity: 1;
    transform: translateY(-4px) translateZ(48px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) translateZ(34px) scale(1);
  }
}

.risk-assessment-worker-preview-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(191, 219, 254, 0.68);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: #334155;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.08);
  backdrop-filter: blur(8px);
}

.risk-assessment-worker-preview-meta strong {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  border-radius: 8px;
  background: rgba(219, 234, 254, 0.92);
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 950;
}

.risk-assessment-worker-preview-meta span {
  min-width: 0;
  overflow: hidden;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-worker-figure {
  position: relative;
  z-index: 1;
  width: 220px;
  height: 370px;
  transform: rotateX(5deg) rotateY(-7deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 26px 32px rgba(15, 23, 42, 0.18));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes risk-assessment-worker-fallback-spin {
  0% {
    transform: rotateX(5deg) rotateY(-7deg);
  }

  100% {
    transform: rotateX(5deg) rotateY(353deg);
  }
}

.risk-assessment-worker-figure span {
  position: absolute;
  display: block;
}

.risk-assessment-worker-figure span::before,
.risk-assessment-worker-figure span::after {
  box-sizing: border-box;
}

.worker-shadow {
  left: 28px;
  bottom: 13px;
  width: 166px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.3), rgba(15, 23, 42, 0.08) 58%, transparent 72%);
  transform: rotateX(70deg);
  z-index: 0;
}

.worker-head {
  top: 36px;
  left: 83px;
  width: 55px;
  height: 62px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 48% 48% 44% 44%;
  background:
    radial-gradient(circle at 66% 27%, rgba(255, 255, 255, 0.72), transparent 13%),
    linear-gradient(145deg, #eef3fb 0%, #ccd7e8 52%, #b4c2d4 100%);
  box-shadow:
    inset -11px -7px 15px rgba(15, 23, 42, 0.12),
    inset 9px 5px 14px rgba(255, 255, 255, 0.86),
    0 10px 18px rgba(15, 23, 42, 0.12);
  z-index: 8;
}

.worker-face {
  top: 58px;
  left: 98px;
  width: 24px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(51, 65, 85, 0.46) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 30%, rgba(51, 65, 85, 0.46) 0 2px, transparent 3px),
    linear-gradient(180deg, transparent 67%, rgba(51, 65, 85, 0.28) 68% 72%, transparent 73%);
  opacity: 0.62;
  z-index: 9;
}

.worker-neck {
  top: 94px;
  left: 101px;
  width: 18px;
  height: 26px;
  border-radius: 10px;
  background: linear-gradient(135deg, #d9e3ef, #aebdce);
  box-shadow: inset -4px 0 6px rgba(15, 23, 42, 0.1);
  z-index: 4;
}

.worker-body {
  top: 112px;
  left: 69px;
  width: 84px;
  height: 130px;
  border-radius: 34px 34px 24px 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 14%, transparent 17% 76%, rgba(15, 23, 42, 0.13) 100%),
    linear-gradient(160deg, #475569, #334155 56%, #1f2937);
  box-shadow:
    inset 11px 0 16px rgba(255, 255, 255, 0.16),
    inset -12px -8px 18px rgba(15, 23, 42, 0.2),
    0 14px 24px rgba(15, 23, 42, 0.14);
  z-index: 3;
}

.worker-body::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 40px;
  width: 4px;
  height: 98px;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.58);
}

.worker-body::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 13px;
  width: 58px;
  height: 28px;
  border-radius: 999px 999px 15px 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent);
}

.worker-arm {
  top: 119px;
  width: 34px;
  height: 132px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 38%, rgba(15, 23, 42, 0.16)),
    linear-gradient(180deg, #d5dfeb, #b8c7d8);
  box-shadow: inset -7px -4px 12px rgba(15, 23, 42, 0.12), 0 10px 18px rgba(15, 23, 42, 0.08);
  z-index: 2;
}

.worker-arm.is-left {
  left: 39px;
  transform: rotate(8deg);
  transform-origin: top right;
}

.worker-arm.is-right {
  right: 39px;
  transform: rotate(-8deg);
  transform-origin: top left;
}

.worker-leg {
  top: 231px;
  width: 36px;
  height: 106px;
  border-radius: 999px 999px 18px 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 42%, rgba(15, 23, 42, 0.18)),
    linear-gradient(180deg, #cbd5e1, #aebdce);
  box-shadow: inset -7px -7px 13px rgba(15, 23, 42, 0.13), 0 12px 20px rgba(15, 23, 42, 0.1);
  z-index: 2;
}

.worker-leg::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 43px;
  width: 20px;
  height: 7px;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.12);
}

.worker-leg.is-left {
  left: 75px;
}

.worker-leg.is-right {
  right: 75px;
}

.ppe-layer {
  z-index: 20;
  pointer-events: none;
  animation: risk-ppe-layer-forward 520ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

@keyframes risk-ppe-layer-forward {
  0% {
    opacity: 0;
    transform: translateZ(-70px) scale(0.72);
    filter: blur(1px);
  }

  58% {
    opacity: 1;
    transform: translateZ(46px) scale(1.08);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateZ(0) scale(1);
    filter: none;
  }
}

.ppe-helmet {
  top: 22px;
  left: 74px;
  width: 72px;
  height: 36px;
  border-radius: 38px 38px 13px 13px;
  background:
    radial-gradient(circle at 35% 16%, rgba(255, 255, 255, 0.7), transparent 12%),
    linear-gradient(150deg, #fde68a 0%, #facc15 46%, #eab308 100%);
  border: 1px solid rgba(161, 98, 7, 0.22);
  box-shadow: inset 0 -8px 0 rgba(161, 98, 7, 0.16), 0 9px 16px rgba(146, 64, 14, 0.18);
  z-index: 32;
}

.ppe-helmet::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -5px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fbbf24, #ca8a04);
  box-shadow: 0 4px 8px rgba(146, 64, 14, 0.18);
}

.ppe-helmet::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 31px;
  width: 10px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(161, 98, 7, 0.12));
}

.ppe-glasses {
  top: 63px;
  left: 81px;
  width: 58px;
  height: 22px;
  border: 3px solid #0f172a;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(186, 230, 253, 0.78), rgba(14, 165, 233, 0.22));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 5px 10px rgba(15, 23, 42, 0.12);
  z-index: 34;
}

.ppe-glasses::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -2px;
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: #0f172a;
}

.ppe-glasses::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
}

.ppe-earmuffs {
  top: 50px;
  left: 68px;
  width: 84px;
  height: 58px;
  border-top: 5px solid #2563eb;
  border-radius: 48px 48px 20px 20px;
  z-index: 30;
}

.ppe-earmuffs::before,
.ppe-earmuffs::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 17px;
  height: 33px;
  border-radius: 12px;
  background: linear-gradient(135deg, #60a5fa, #1d4ed8);
  box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.35), 0 5px 10px rgba(37, 99, 235, 0.2);
}

.ppe-earmuffs::before {
  left: -5px;
}

.ppe-earmuffs::after {
  right: -5px;
}

.ppe-mask {
  top: 81px;
  left: 91px;
  width: 39px;
  height: 28px;
  border: 2px solid rgba(71, 85, 105, 0.72);
  border-radius: 9px 9px 18px 18px;
  background:
    radial-gradient(circle at 50% 62%, rgba(100, 116, 139, 0.5) 0 3px, transparent 4px),
    linear-gradient(145deg, #f8fafc, #cbd5e1);
  box-shadow: 0 5px 10px rgba(15, 23, 42, 0.13);
  z-index: 35;
}

.ppe-mask::before,
.ppe-mask::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 11px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #94a3b8, #475569);
}

.ppe-mask::before {
  left: -9px;
}

.ppe-mask::after {
  right: -9px;
}

.ppe-gloves {
  inset: 0;
  z-index: 27;
}

.ppe-gloves::before,
.ppe-gloves::after {
  content: "";
  position: absolute;
  top: 238px;
  width: 35px;
  height: 26px;
  border-radius: 15px 15px 13px 13px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.5), transparent 13%),
    linear-gradient(145deg, #4ade80, #16a34a);
  box-shadow: inset -6px -4px 8px rgba(22, 101, 52, 0.22), 0 8px 13px rgba(22, 163, 74, 0.2);
}

.ppe-gloves::before {
  left: 35px;
  transform: rotate(10deg);
}

.ppe-gloves::after {
  right: 35px;
  transform: rotate(-10deg);
}

.ppe-vest {
  top: 118px;
  left: 73px;
  width: 76px;
  height: 116px;
  border: 1px solid rgba(194, 65, 12, 0.28);
  border-radius: 26px 26px 19px 19px;
  background:
    linear-gradient(90deg, transparent 0 26%, rgba(255, 255, 255, 0.82) 27% 33%, transparent 34% 66%, rgba(255, 255, 255, 0.82) 67% 73%, transparent 74%),
    linear-gradient(180deg, transparent 0 41%, rgba(255, 255, 255, 0.82) 42% 49%, transparent 50%),
    radial-gradient(circle at 32% 14%, rgba(255, 255, 255, 0.72), transparent 14%),
    linear-gradient(145deg, #fb923c, #f97316 58%, #ea580c);
  box-shadow: inset -10px -9px 16px rgba(124, 45, 18, 0.18), 0 10px 18px rgba(249, 115, 22, 0.18);
  opacity: 0.96;
  z-index: 22;
}

.ppe-boots {
  inset: 0;
  z-index: 25;
}

.ppe-boots::before,
.ppe-boots::after {
  content: "";
  position: absolute;
  top: 323px;
  width: 47px;
  height: 23px;
  border-radius: 10px 15px 7px 7px;
  background:
    linear-gradient(180deg, #334155 0 28%, #0f172a 29% 100%);
  box-shadow: inset -6px -3px 8px rgba(255, 255, 255, 0.07), 0 9px 13px rgba(15, 23, 42, 0.2);
}

.ppe-boots::before {
  left: 59px;
  transform: skewX(-8deg);
}

.ppe-boots::after {
  right: 59px;
  transform: skewX(8deg);
}

.ppe-harness {
  top: 117px;
  left: 74px;
  width: 74px;
  height: 122px;
  border-radius: 26px 26px 17px 17px;
  background:
    linear-gradient(60deg, transparent 0 41%, #dc2626 42% 47%, transparent 48%),
    linear-gradient(120deg, transparent 0 41%, #dc2626 42% 47%, transparent 48%),
    linear-gradient(90deg, transparent 0 16%, #dc2626 17% 23%, transparent 24% 76%, #dc2626 77% 83%, transparent 84%),
    linear-gradient(180deg, transparent 0 72%, #dc2626 73% 79%, transparent 80%);
  filter: drop-shadow(0 7px 10px rgba(220, 38, 38, 0.16));
  z-index: 33;
}

.ppe-harness::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 57px;
  width: 12px;
  height: 12px;
  border: 3px solid #fef2f2;
  border-radius: 50%;
  background: #dc2626;
}

.risk-assessment-ppe-list-wrap {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.risk-assessment-ppe-list-head {
  display: flex;
  gap: 7px;
  align-items: baseline;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 780;
}

.risk-assessment-ppe-list-head strong {
  color: #172033;
  font-size: 1.02rem;
}

.risk-assessment-ppe-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  max-height: 520px;
  overflow: auto;
  overflow-x: hidden;
  padding: 2px 6px 2px 2px;
  scrollbar-gutter: stable;
}

.risk-assessment-ppe-option {
  display: grid;
  grid-template-columns: 18px 54px minmax(72px, 82px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  min-height: 104px;
  padding: 10px 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.risk-assessment-ppe-option input {
  align-self: center;
  margin-top: 0;
}

.risk-assessment-ppe-option:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.48);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.1);
}

.risk-assessment-ppe-option:has(input:checked) {
  border-color: rgba(250, 204, 21, 0.72);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: inset 4px 0 0 rgba(250, 204, 21, 0.82), 0 18px 36px rgba(15, 23, 42, 0.12);
}

.risk-assessment-ppe-option.is-selected {
  animation: risk-ppe-option-forward 560ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

.risk-assessment-ppe-option.is-selected .risk-assessment-ppe-option-symbol,
.risk-assessment-ppe-option.is-selected .risk-assessment-ppe-option-photo {
  animation: risk-ppe-media-forward 620ms cubic-bezier(0.18, 0.9, 0.22, 1) both;
}

@keyframes risk-ppe-option-forward {
  0% {
    opacity: 0.58;
    transform: perspective(900px) translateY(14px) translateZ(-120px) rotateX(14deg) scale(0.92);
  }

  60% {
    opacity: 1;
    transform: perspective(900px) translateY(-5px) translateZ(70px) rotateX(-2deg) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: perspective(900px) translateY(0) translateZ(0) rotateX(0) scale(1);
  }
}

@keyframes risk-ppe-media-forward {
  0% {
    transform: translateX(-10px) scale(0.78);
    filter: saturate(0.8) blur(1px);
  }

  58% {
    transform: translateX(4px) scale(1.12);
    filter: saturate(1.1) blur(0);
  }

  100% {
    transform: translateX(0) scale(1);
    filter: none;
  }
}

.risk-assessment-ppe-option-symbol {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(8, 25, 43, 0.08);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.32), transparent 24%),
    linear-gradient(145deg, #08192b, #0f2a44);
  box-shadow: inset -8px -8px 14px rgba(0, 0, 0, 0.18), 0 12px 20px rgba(8, 25, 43, 0.16);
}

.risk-assessment-ppe-option-symbol img {
  display: block;
  width: 39px;
  height: 39px;
  object-fit: contain;
}

.risk-assessment-ppe-option-photo {
  display: block;
  width: 82px;
  height: 62px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  background: #f8fafc;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.risk-assessment-ppe-option-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.risk-assessment-ppe-option-icon {
  display: none;
}

.risk-assessment-ppe-option-icon::before,
.risk-assessment-ppe-option-icon::after {
  content: "";
  position: absolute;
}

.risk-assessment-ppe-option-icon.is-head::before {
  left: 9px;
  top: 12px;
  width: 28px;
  height: 17px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(145deg, #fde68a, #eab308);
}

.risk-assessment-ppe-option-icon.is-head::after {
  left: 6px;
  top: 27px;
  width: 34px;
  height: 6px;
  border-radius: 999px;
  background: #ca8a04;
}

.risk-assessment-ppe-option-icon.is-eyes::before {
  left: 8px;
  top: 17px;
  width: 30px;
  height: 13px;
  border: 3px solid #0f172a;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.48);
}

.risk-assessment-ppe-option-icon.is-eyes::after {
  left: 22px;
  top: 18px;
  width: 3px;
  height: 11px;
  background: #0f172a;
}

.risk-assessment-ppe-option-icon.is-hearing::before {
  left: 11px;
  top: 11px;
  width: 24px;
  height: 25px;
  border-top: 4px solid #2563eb;
  border-radius: 999px;
}

.risk-assessment-ppe-option-icon.is-hearing::after {
  left: 8px;
  top: 23px;
  width: 9px;
  height: 14px;
  border-radius: 8px;
  background: #2563eb;
  box-shadow: 21px 0 0 #2563eb;
}

.risk-assessment-ppe-option-icon.is-respiratory::before {
  left: 13px;
  top: 15px;
  width: 20px;
  height: 18px;
  border: 2px solid #64748b;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(145deg, #f8fafc, #cbd5e1);
}

.risk-assessment-ppe-option-icon.is-respiratory::after {
  left: 8px;
  top: 22px;
  width: 8px;
  height: 9px;
  border-radius: 50%;
  background: #475569;
  box-shadow: 23px 0 0 #475569;
}

.risk-assessment-ppe-option-icon.is-hands::before {
  left: 9px;
  top: 13px;
  width: 19px;
  height: 25px;
  border-radius: 12px 12px 10px 10px;
  background: linear-gradient(145deg, #4ade80, #16a34a);
  transform: rotate(-15deg);
}

.risk-assessment-ppe-option-icon.is-hands::after {
  left: 26px;
  top: 13px;
  width: 12px;
  height: 19px;
  border-radius: 999px;
  background: #22c55e;
  transform: rotate(18deg);
}

.risk-assessment-ppe-option-icon.is-body::before {
  left: 13px;
  top: 10px;
  width: 21px;
  height: 28px;
  border-radius: 10px 10px 7px 7px;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(255, 255, 255, 0.9) 35% 45%, transparent 46% 55%, rgba(255, 255, 255, 0.9) 56% 66%, transparent 67%),
    linear-gradient(145deg, #fb923c, #ea580c);
}

.risk-assessment-ppe-option-icon.is-body::after {
  left: 12px;
  top: 24px;
  width: 23px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}

.risk-assessment-ppe-option-icon.is-feet::before {
  left: 7px;
  top: 25px;
  width: 29px;
  height: 12px;
  border-radius: 5px 10px 5px 5px;
  background: linear-gradient(180deg, #334155, #0f172a);
  transform: skewX(-10deg);
}

.risk-assessment-ppe-option-icon.is-feet::after {
  left: 18px;
  top: 16px;
  width: 17px;
  height: 14px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(145deg, #64748b, #1f2937);
}

.risk-assessment-ppe-option-icon.is-fall::before {
  left: 12px;
  top: 10px;
  width: 22px;
  height: 28px;
  border-radius: 10px;
  background:
    linear-gradient(55deg, transparent 0 39%, #dc2626 40% 48%, transparent 49%),
    linear-gradient(125deg, transparent 0 39%, #dc2626 40% 48%, transparent 49%),
    linear-gradient(90deg, transparent 0 17%, #dc2626 18% 27%, transparent 28% 72%, #dc2626 73% 82%, transparent 83%);
}

.risk-assessment-ppe-option-icon.is-fall::after {
  left: 20px;
  top: 24px;
  width: 7px;
  height: 7px;
  border: 2px solid #dc2626;
  border-radius: 50%;
  background: #fff;
}

.risk-assessment-ppe-option-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  align-self: stretch;
}

.risk-assessment-ppe-option strong {
  display: -webkit-box;
  overflow: hidden;
  color: #08192b;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.risk-assessment-ppe-option small {
  display: -webkit-box;
  overflow: hidden;
  color: #0f4ea2;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.28;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.risk-assessment-ppe-option em {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-ppe-empty[hidden] {
  display: none;
}

.risk-assessment-ppe-selected {
  display: grid;
  gap: 8px;
}

.risk-assessment-ppe-selected-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(191, 219, 254, 0.74);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
  box-shadow: 0 10px 22px rgba(30, 64, 175, 0.05);
}

.risk-assessment-ppe-selected-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-checkbox-line {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px;
  align-self: end;
}

.risk-assessment-overview {
  display: grid;
  gap: 12px;
}

.risk-assessment-overview-hero,
.risk-assessment-overview-export-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.risk-assessment-overview-hero h3 {
  margin: 4px 0;
  color: #0f172a;
  font-size: 1.22rem;
  line-height: 1.2;
}

.risk-assessment-overview-hero p,
.risk-assessment-overview-export-copy small,
.risk-assessment-overview-export-copy em {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.45;
}

.risk-assessment-overview-readiness {
  display: grid;
  justify-items: center;
  min-width: 118px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(203, 213, 225, 0.72);
}

.risk-assessment-overview-readiness strong {
  color: #0f172a;
  font-size: 1.55rem;
  line-height: 1;
}

.risk-assessment-overview-readiness span {
  margin-top: 5px;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 860;
  text-transform: uppercase;
}

.risk-assessment-overview-readiness.is-ready {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(240, 253, 244, 0.92);
}

.risk-assessment-overview-readiness.is-ready strong {
  color: #15803d;
}

.risk-assessment-overview-readiness.is-warning {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(255, 251, 235, 0.94);
}

.risk-assessment-overview-readiness.is-warning strong {
  color: #b45309;
}

.risk-assessment-overview-readiness.is-draft {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(239, 246, 255, 0.96);
}

.risk-assessment-overview-export-panel {
  border-color: rgba(203, 213, 225, 0.86);
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
}

.risk-assessment-overview-export-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.risk-assessment-overview-export-copy strong {
  color: #0f172a;
  font-size: 1rem;
}

.risk-assessment-overview-export-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.risk-assessment-overview-export-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.risk-assessment-overview-export-actions .primary-button,
.risk-assessment-overview-export-actions .secondary-button,
.risk-assessment-overview-export-actions .ghost-button {
  min-height: 42px;
  padding: 10px 16px;
  white-space: nowrap;
}

.risk-assessment-overview-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.risk-assessment-overview-checklist article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.risk-assessment-overview-checklist article > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
}

.risk-assessment-overview-checklist article.is-ok > span {
  background: #16a34a;
}

.risk-assessment-overview-checklist article.is-missing > span {
  background: #f59e0b;
}

.risk-assessment-overview-checklist strong,
.risk-assessment-overview-checklist small {
  display: block;
}

.risk-assessment-overview-checklist strong {
  color: #0f172a;
  font-size: 0.82rem;
}

.risk-assessment-overview-checklist small {
  margin-top: 3px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.risk-assessment-overview-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.risk-assessment-overview-stats span,
.risk-assessment-overview-card {
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.risk-assessment-overview-stats span {
  display: grid;
  gap: 3px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 820;
  text-transform: uppercase;
}

.risk-assessment-overview-stats strong {
  color: #172033;
  font-size: 1.35rem;
}

.risk-assessment-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.risk-assessment-overview-chemicals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.risk-assessment-overview-card {
  display: grid;
  gap: 6px;
}

.risk-assessment-overview-chemicals article {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 251, 235, 0.88), rgba(255, 255, 255, 0.92));
}

.risk-assessment-overview-chemicals strong {
  color: #0f172a;
}

.risk-assessment-overview-chemicals small {
  color: #64748b;
  font-weight: 760;
}

.risk-assessment-overview-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-assessment-overview-card div span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.78);
  color: #1e40af;
  font-size: 0.7rem;
  font-weight: 820;
}

.risk-assessment-editor-panel.is-client-note-mode .risk-assessment-subpanel,
.risk-assessment-editor-panel.is-client-note-mode .risk-assessment-editor-section,
.risk-assessment-editor-panel.is-client-note-mode .risk-assessment-section-grid,
.risk-assessment-editor-panel.is-client-note-mode .offers-form-grid {
  opacity: 0.72;
}

.risk-assessment-dock {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  width: min(calc(100% - 40px), 1320px);
  min-width: 0;
  min-height: 42px;
  margin: 8px auto 10px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(20, 18, 33, 0.98), rgba(25, 25, 42, 0.98));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.risk-assessment-dock::-webkit-scrollbar {
  height: 6px;
}

.risk-assessment-dock::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.risk-assessment-dock::-webkit-scrollbar-thumb {
  background: rgba(147, 197, 253, 0.58);
  border-radius: 999px;
}

.risk-assessment-dock button {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  flex: 0 0 102px;
  min-width: 102px;
  min-height: 31px;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.risk-assessment-dock button:hover,
.risk-assessment-dock button.is-active {
  border-color: rgba(147, 197, 253, 0.68);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.58), rgba(219, 39, 119, 0.34));
  color: #fff;
  transform: translateY(-1px);
}

.risk-assessment-dock-icon {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(191, 219, 254, 0.96);
}

.risk-assessment-dock button:hover .risk-assessment-dock-icon,
.risk-assessment-dock button.is-active .risk-assessment-dock-icon {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.risk-assessment-dock-icon svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.risk-assessment-dock-copy {
  display: block;
  min-width: 0;
}

.risk-assessment-dock strong {
  display: block;
  font-size: 0.62rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-assessment-dock-copy > span {
  display: none;
}

.client-portal-preview-row.is-risk-assessment {
  border-color: rgba(83, 149, 194, 0.34);
  background:
    linear-gradient(135deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.94));
}

.client-portal-preview-row-badge.is-risk-assessment {
  border-color: rgba(83, 149, 194, 0.44);
  background: rgba(234, 246, 253, 0.94);
  color: #245f83;
}

.client-portal-preview-row-badge.is-risk-assessment.is-active {
  border-color: rgba(57, 173, 114, 0.44);
  background: rgba(233, 250, 240, 0.94);
  color: #247a4d;
}

.client-portal-preview-row-badge.is-risk-assessment.is-in_review {
  border-color: rgba(210, 151, 33, 0.42);
  background: rgba(255, 247, 225, 0.96);
  color: #99620e;
}

.client-portal-risk-note {
  grid-column: 1 / -1;
  padding: 9px 11px;
  border: 1px solid rgba(190, 204, 232, 0.72);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
  color: #475569;
  font-size: 0.82rem;
}

.list-row.is-clickable:hover td {
  background: rgba(239, 246, 255, 0.82);
}

.list-row.is-clickable:hover td:first-child {
  box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.38);
}

@media (max-width: 980px) {
  .risk-assessment-filters,
  .risk-assessment-section-grid,
  .risk-assessment-employer-grid,
  .risk-assessment-repeat-row.is-measure,
  .risk-assessment-job-analysis-shell,
  .risk-assessment-job-head,
  .risk-assessment-org-card-head,
  .risk-assessment-detail-grid,
  .risk-assessment-detail-grid.is-structure,
  .risk-assessment-eligibility-table,
  .risk-assessment-risk-line,
  .risk-assessment-job-import-panel,
  .risk-assessment-manual-head,
  .risk-assessment-manual-grid,
  .risk-assessment-field-head,
  .risk-assessment-template-inline,
  .risk-assessment-authorization-panel,
  .risk-assessment-file-control,
  .risk-assessment-compact-row,
  .risk-assessment-compact-row.is-authorized-person,
  .risk-assessment-compact-row.is-company-collaborator,
  .risk-assessment-compact-row.is-workplace-job,
  .risk-assessment-appendix-cards,
  .risk-assessment-linked-appendix-head,
  .risk-assessment-linked-appendix-grid,
  .risk-assessment-document-facts,
  .risk-assessment-document-grid,
  .risk-assessment-document-eligibility > div,
  .risk-assessment-document-risk-table > div,
  .risk-assessment-document-ppe-table > div,
  .risk-assessment-ppe-toolbar,
  .risk-assessment-ppe-new-form,
  .risk-assessment-ppe-layout,
  .risk-assessment-ppe-selected-row,
  .risk-assessment-chemical-workspace,
  .risk-assessment-word-template-top,
  .risk-assessment-template-placeholder-cta,
  .risk-assessment-template-settings,
  .risk-assessment-basic-card-head,
  .risk-assessment-basic-summary,
  .risk-assessment-basic-grid,
  .risk-assessment-basic-grid.is-core,
  .risk-assessment-team-picker-grid,
  .risk-assessment-template-section-card,
  .risk-assessment-template-section-grid,
  .risk-assessment-template-table > div,
  .risk-assessment-chemical-search,
  .risk-assessment-chemical-upload,
  .risk-assessment-stl-assistant-head,
  .risk-assessment-stl-workflow,
  .risk-assessment-stl-extract-grid,
  .risk-assessment-chemical-result,
  .risk-assessment-official-substance-toolbar,
  .risk-assessment-official-substance,
  .risk-assessment-stl-preview-head,
  .risk-assessment-stl-preview-score,
  .risk-assessment-stl-preview-file-head,
  .risk-assessment-stl-preview-card-head,
  .risk-assessment-stl-preview-details,
  .risk-assessment-stl-review-head,
  .risk-assessment-stl-review-kpis,
  .risk-assessment-chemical-card-head,
  .risk-assessment-chemical-grid,
  .risk-assessment-biological-rule-head,
  .risk-assessment-biological-rule-content,
  .risk-assessment-biological-rule-kpis,
  .risk-assessment-biological-catalog-controls,
  .risk-assessment-biological-picker,
  .risk-assessment-biological-suggestion,
  .risk-assessment-biological-agent-head,
  .risk-assessment-biological-agent-row,
  .risk-assessment-structure-ai-panel,
  .risk-assessment-structure-upload,
  .risk-assessment-job-profile-top,
  .risk-assessment-job-profile-layout,
  .risk-assessment-job-start-grid,
  .risk-assessment-job-core-grid,
  .risk-assessment-job-profile-grid,
  .risk-assessment-job-profile-grid.is-compact-text,
  .risk-assessment-ai-split,
  .risk-assessment-catalog-controls,
  .risk-assessment-job-import-head,
  .risk-assessment-job-catalog-toolbar,
  .risk-assessment-job-catalog-ai,
  .risk-assessment-overview-hero,
  .risk-assessment-overview-export-panel,
  .risk-assessment-overview-stats,
  .risk-assessment-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-overview-export-actions {
    justify-content: flex-start;
  }

  .risk-assessment-job-tree {
    position: static;
    max-height: 260px;
  }

  .risk-assessment-biological-rule-actions {
    justify-content: flex-start;
  }

  .risk-assessment-job-catalog-ai-actions {
    min-width: 0;
  }

  .risk-assessment-biological-agent-row.is-header {
    top: 38px;
  }

  .risk-assessment-biological-agent-head a {
    justify-self: start;
  }

  .risk-assessment-org-card {
    margin-left: 0;
  }

  .risk-assessment-org-list {
    padding-left: 0;
  }

  .risk-assessment-org-list::before,
  .risk-assessment-org-card::before,
  .risk-assessment-org-card::after {
    display: none;
  }

  .risk-assessment-org-summary,
  .risk-assessment-org-actions,
  .risk-assessment-structure-upload {
    justify-content: flex-start;
  }

  .risk-assessment-detail-grid.is-structure.is-hidden-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-editor-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .risk-assessment-linked-appendix-head {
    display: grid;
  }

  .risk-assessment-linked-appendix-kpis {
    justify-content: flex-start;
  }

  .risk-assessment-editor-section-head p {
    max-width: none;
    text-align: left;
    padding-left: 0;
  }

  .risk-assessment-field-head,
  .risk-assessment-authorization-panel {
    align-items: stretch;
  }

  .risk-assessment-template-inline,
  .risk-assessment-file-control {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }

  .risk-assessment-template-inline select,
  .risk-assessment-file-control span {
    max-width: none;
    width: 100%;
  }

  .risk-assessment-section-document-menu {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    justify-self: stretch;
  }

  .risk-assessment-word-template-actions {
    justify-content: start;
  }

  .risk-assessment-stl-dropzone-label {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-stl-quality {
    min-width: 0;
    text-align: left;
  }

  .risk-assessment-stl-file-score {
    justify-content: flex-start;
    max-width: none;
  }

  .risk-assessment-chemical-register-head {
    display: grid;
  }

  .risk-assessment-biological-risk-actions {
    justify-content: flex-start;
  }

  .risk-assessment-chemical-register-table {
    min-width: 1320px;
    font-size: 0.68rem;
  }

  .risk-assessment-stl-review-dialog {
    inset: 2vh 10px auto;
    max-height: 96vh;
    border-radius: 18px;
  }

  .risk-assessment-stl-review-body,
  .risk-assessment-stl-review-head {
    padding-inline: 14px;
  }

  .risk-assessment-stl-review-table {
    min-width: 1080px;
    font-size: 0.7rem;
  }

  .risk-assessment-template-placeholder-cta {
    display: grid;
  }

  .risk-assessment-employer-head {
    display: grid;
  }

  .risk-assessment-employer-head p {
    max-width: none;
    text-align: left;
  }

  .risk-assessment-basic-summary article.is-wide,
  .risk-assessment-basic-grid .field-span-2,
  .risk-assessment-employer-grid .field-span-2 {
    grid-column: 1 / -1;
  }

  .risk-assessment-basic-card-head p {
    max-width: none;
    text-align: left;
  }

  .risk-assessment-job-tools {
    justify-content: start;
  }

  .risk-assessment-job-catalog-stats {
    min-width: 0;
  }

  .risk-assessment-job-catalog-quick-actions {
    justify-content: start;
  }

  .risk-assessment-mini-title {
    display: grid;
  }

  .risk-assessment-ppe-new-actions {
    display: grid;
    justify-items: start;
  }

  .risk-assessment-ppe-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-ppe-option {
    grid-template-columns: 18px 52px minmax(76px, 88px) minmax(0, 1fr);
  }

  .risk-assessment-ppe-option-symbol {
    width: 52px;
    height: 52px;
  }

  .risk-assessment-ppe-option-symbol img {
    width: 38px;
    height: 38px;
  }

  .risk-assessment-ppe-callouts {
    grid-template-columns: minmax(0, 1fr);
    inset-inline: 10px;
  }

  .risk-assessment-card-meta {
    grid-auto-flow: row;
    justify-content: start;
  }
}

@media (max-width: 980px) {
  .risk-assessment-org-card-head {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 5px;
  }

  .risk-assessment-org-mainline {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .risk-assessment-org-mainline small {
    grid-column: 1 / -1;
    display: none;
  }

  .risk-assessment-org-summary {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .risk-assessment-org-actions {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
  }
}

@media (max-width: 620px) {
  .risk-assessment-editor-panel.is-modal-open,
  .risk-assessment-editor-panel:not([hidden]) {
    inset: 8px;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 20px;
  }

  .risk-assessment-editor-body {
    padding-inline: 12px;
  }

  .risk-assessment-editor-section.risk-assessment-subpanel {
    padding: 12px;
  }

  .risk-assessment-repeat-row.is-job {
    padding: 10px;
  }

  .risk-assessment-job-import-panel {
    padding: 12px;
  }

  .risk-assessment-job-catalog-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-assessment-job-catalog-list {
    grid-template-columns: minmax(0, 1fr);
    max-height: 390px;
  }

  .risk-assessment-job-catalog-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 0;
    padding: 11px;
  }

  .risk-assessment-job-catalog-check {
    width: 34px;
    height: 34px;
  }

  .risk-assessment-risk-card {
    gap: 0;
  }

  .risk-assessment-risk-card-head {
    padding: 12px;
  }

  .risk-assessment-risk-meta-row {
    margin-inline: 0;
  }

  .risk-assessment-risk-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
  }

  .risk-assessment-risk-body .risk-assessment-risk-assessment-panel,
  .risk-assessment-risk-body .risk-assessment-risk-large-field {
    padding: 14px;
  }

  .risk-assessment-risk-body .risk-assessment-risk-large-field textarea {
    min-height: 118px;
  }

  .risk-assessment-risk-character-count {
    right: 24px;
    bottom: 24px;
  }

  .risk-assessment-ppe-panel {
    padding: 12px;
  }

  .risk-assessment-worker-preview {
    min-height: 420px;
  }

  .risk-assessment-ppe-option {
    grid-template-columns: 18px 50px minmax(0, 1fr);
  }

  .risk-assessment-ppe-option-photo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .risk-assessment-ppe-option.is-selected,
  .risk-assessment-ppe-option.is-selected .risk-assessment-ppe-option-symbol,
  .risk-assessment-ppe-option.is-selected .risk-assessment-ppe-option-photo,
  .risk-assessment-ppe-callout,
  .ppe-layer {
    animation: none !important;
  }
}
/* Signatures module */
.signatures-module {
  display: grid;
  gap: 16px;
}

.signatures-hero-panel,
.signatures-local-signer-panel,
.signatures-list-panel {
  border: 1px solid rgba(147, 197, 253, 0.72);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,251,255,.92));
  box-shadow: 0 18px 40px rgba(30, 64, 175, .08);
}

.signatures-hero-panel {
  padding-block: 14px;
}

.signatures-hero-panel .section-heading {
  align-items: center;
  margin: 0;
}

.signatures-hero-panel .section-heading > div {
  min-width: 0;
}

.signatures-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.signatures-stat-card {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
}

.signatures-stat-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.signatures-stat-card strong {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}

.signatures-stat-card.is-signed {
  border-color: rgba(16, 185, 129, .35);
  background: linear-gradient(135deg, rgba(236, 253, 245, .95), rgba(255,255,255,.88));
}

.signatures-stat-card.is-pending {
  border-color: rgba(245, 158, 11, .4);
  background: linear-gradient(135deg, rgba(255, 251, 235, .96), rgba(255,255,255,.88));
}

.signatures-stat-card.is-missing {
  border-color: rgba(239, 68, 68, .32);
  background: linear-gradient(135deg, rgba(254, 242, 242, .95), rgba(255,255,255,.88));
}

.signatures-local-signer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
}

.signatures-bridge-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.signatures-filter-bar {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(150px, 0.7fr) repeat(3, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.76);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.78);
}

.signatures-filter-bar .field {
  margin: 0;
}

.signatures-bridge-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
}

.signatures-bridge-status:empty,
.signatures-bridge-status[hidden] {
  display: none;
}

.signatures-bridge-status.is-loading {
  border-color: rgba(59, 130, 246, 0.34);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.82));
  color: #1d4ed8;
}

.signatures-bridge-status.is-ready {
  border-color: rgba(16, 185, 129, 0.34);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.82));
  color: #047857;
}

.signatures-bridge-status.is-warning {
  border-color: rgba(245, 158, 11, 0.34);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 0.82));
  color: #92400e;
}

.signatures-bridge-status.is-error {
  border-color: rgba(239, 68, 68, 0.32);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.95), rgba(255, 255, 255, 0.82));
  color: #b91c1c;
}

.signatures-debug-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.42);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.76);
}

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

.signatures-debug-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.signatures-debug-heading h4 {
  margin: 0;
  color: #172033;
  font-size: 14px;
}

.signatures-debug-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.signatures-debug-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.signatures-debug-grid > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.signatures-debug-grid dt {
  margin: 0 0 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.signatures-debug-grid dd {
  margin: 0;
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signatures-debug-grid dd[data-state="ok"] {
  color: #047857;
}

.signatures-debug-grid dd[data-state="error"] {
  color: #b91c1c;
}

.signatures-debug-response {
  overflow: auto;
  max-height: 160px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  font-size: 11px;
  line-height: 1.45;
}

.signatures-settings-panel,
.signatures-review-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, 0.78);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.signatures-settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 90;
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  transform: translate(-50%, -50%);
  border-color: rgba(147, 197, 253, 0.92);
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

body.is-signatures-settings-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(8px);
}

body.is-signature-review-open {
  overflow: hidden;
}

body.is-signature-review-open::before {
  display: none;
}

.signatures-review-panel:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  isolation: isolate;
  box-sizing: border-box;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  overflow: hidden;
  padding: clamp(12px, 1.3vw, 22px);
  border: 0;
  border-radius: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 46%, #eefbf5 100%);
  color: #172033;
  opacity: 1;
  box-shadow: none;
}

.signatures-review-panel:not([hidden]) > .section-heading {
  align-items: center;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72);
  background: transparent;
}

.signatures-settings-panel[hidden],
.signatures-review-panel[hidden] {
  display: none;
}

.ghost-icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #172033;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ghost-icon-button:hover {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(239, 246, 255, 0.96);
}

.signatures-settings-heading,
.signature-review-work-order-head,
.signature-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.signatures-settings-heading h4,
.signature-preview-head h3 {
  margin: 0;
  color: #172033;
}

.signatures-settings-actions,
.signatures-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.signatures-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.signatures-settings-grid .field {
  margin: 0;
}

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

.signatures-settings-fieldset {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.signatures-settings-fieldset legend {
  padding: 0 6px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.signatures-settings-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.signatures-settings-checkbox-grid label {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.signatures-settings-checkbox-grid input {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
}

.signatures-logo-upload-field {
  gap: 8px;
}

.signatures-logo-picker {
  display: grid;
  grid-template-columns: minmax(118px, 0.32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.signatures-logo-preview {
  display: grid;
  place-items: center;
  min-height: 86px;
  padding: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.82);
  border-radius: 12px;
  background:
    linear-gradient(45deg, rgba(226, 232, 240, 0.44) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(226, 232, 240, 0.44) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(226, 232, 240, 0.44) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(226, 232, 240, 0.44) 75%);
  background-color: #ffffff;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.signatures-logo-preview.has-logo {
  border-style: solid;
}

.signatures-logo-preview img {
  max-width: 100%;
  max-height: 74px;
  object-fit: contain;
}

.signatures-logo-picker-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.signatures-logo-picker-copy strong {
  color: #0f172a;
  font-size: 13px;
}

.signatures-logo-picker-copy span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.signatures-logo-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.signatures-settings-response {
  max-height: 180px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 10px;
  border-radius: 10px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 11px;
  white-space: pre-wrap;
}

.signatures-review-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.signatures-review-panel:not([hidden]) .signatures-review-actions {
  position: static;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 2px 0;
  border: 0;
  border-top: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.signatures-review-panel:not([hidden]) .signatures-review-actions .ghost-button,
.signatures-review-panel:not([hidden]) .signatures-review-actions .primary-button {
  min-height: 42px;
}

.signatures-review-panel:not([hidden]) .signatures-review-actions .primary-button {
  min-width: 172px;
}

.signatures-review-panel:not([hidden]) .ghost-icon-button {
  flex: 0 0 auto;
}

.signatures-review-panel:not([hidden]) .section-heading h3 {
  margin: 0;
}

.signatures-review-panel:not([hidden]) .section-heading .section-kicker {
  margin-top: 0;
}

@supports not (height: 100dvh) {
  .signatures-review-panel:not([hidden]) {
    height: 100vh;
  }
}

/*
  Keep the review modal inside the visible viewport. The PDF frame must not
  impose its own viewport-height minimum, otherwise it pushes the footer actions
  out of reach on smaller laptop screens.
*/
.signature-review-preview,
.signature-review-preview-body,
.signature-review-preview-stage {
  overflow: hidden;
}

.signature-review-preview-stage iframe {
  min-height: 0;
}

.signature-review-workspace {
  position: relative;
  display: grid;
  grid-row: 2;
  grid-template-columns: minmax(460px, 34vw) minmax(0, 1fr);
  gap: clamp(12px, 1.1vw, 18px);
  align-items: stretch;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
}

.signature-review-status-bar[hidden] + .signature-review-workspace {
  grid-row: 1 / -1;
}

.signature-review-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
  scrollbar-gutter: stable;
}

.signature-review-status-bar {
  display: grid;
  gap: 8px;
  max-height: clamp(68px, 18dvh, 148px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 16px;
  background: #eff6ff;
  color: #1e3a8a;
  box-shadow: 0 10px 26px rgba(30, 64, 175, 0.08);
}

.signature-review-status-bar[hidden] {
  display: none;
}

.signature-review-status-bar.is-error {
  border-color: rgba(248, 113, 113, 0.62);
  background: #fff1f2;
  color: #991b1b;
}

.signature-review-status-bar.is-loading {
  border-color: rgba(96, 165, 250, 0.72);
  background: #eff6ff;
}

.signature-review-status-bar.is-ready {
  border-color: rgba(52, 211, 153, 0.62);
  background: #ecfdf5;
  color: #047857;
}

.signature-review-status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  justify-content: space-between;
}

.signature-review-status-summary strong {
  font-size: 14px;
}

.signature-review-status-summary span {
  font-size: 12px;
  font-weight: 800;
}

.signature-review-error-list {
  display: grid;
  gap: 6px;
}

.signature-review-error-row {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(248, 113, 113, 0.38);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.signature-review-error-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: space-between;
}

.signature-review-error-heading strong {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.signature-review-error-heading span,
.signature-review-error-row p {
  margin: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
}

.signature-review-technical-details {
  font-size: 11px;
}

.signature-review-technical-details pre {
  max-height: 140px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  white-space: pre-wrap;
}

.signature-review-decision-card {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(147, 197, 253, 0.84);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  box-shadow: 0 18px 44px rgba(30, 64, 175, 0.12);
}

.signature-review-decision-card h4 {
  margin: 0;
  color: #172033;
  font-size: 17px;
}

.signature-review-decision-card .helper-copy {
  margin: 0;
  line-height: 1.35;
}

.signature-review-decision-signer {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.signature-review-decision-signer svg {
  width: 17px;
  height: 17px;
}

.signature-review-decision-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.signature-review-document-title {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-review-work-order {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.signature-review-work-order-head strong {
  color: #172033;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
}

.signature-review-work-order-head span {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.signature-review-work-order-head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: 10px;
}

.signature-review-documents {
  display: grid;
  gap: 8px;
}

.signature-review-document-group {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.78);
}

.signature-review-document-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: center;
}

.signature-review-document-group-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.signature-review-document-group-action {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.signature-review-document-group-action.is-ok {
  border-color: rgba(16, 185, 129, 0.38);
  color: #047857;
  background: rgba(236, 253, 245, 0.88);
}

.signature-review-document-group-action:hover:not(:disabled) {
  border-color: rgba(37, 99, 235, 0.42);
  color: #1d4ed8;
}

.signature-review-document-group-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.signature-review-document {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(191, 219, 254, 0.84);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.signature-review-document:hover {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 12px 26px rgba(30, 64, 175, 0.1);
  transform: translateY(-1px);
}

.signature-review-document.is-active {
  border-color: rgba(37, 99, 235, 0.52);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.signature-review-document.is-approved_for_signing {
  border-color: rgba(16, 185, 129, 0.38);
  background: rgba(236, 253, 245, 0.72);
}

.signature-review-document.is-partial {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(255, 251, 235, 0.72);
}

.signature-review-document.is-skipped_with_comment {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(255, 251, 235, 0.72);
}

.signature-review-document.is-rejected_with_comment,
.signature-review-document.is-error {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(254, 242, 242, 0.74);
}

.signature-review-document.is-locked {
  border-color: rgba(139, 92, 246, 0.34);
  background: rgba(245, 243, 255, 0.78);
}

.signature-review-document-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.signature-review-document-copy strong {
  color: #172033;
}

.signature-review-document-copy span,
.signature-review-document-copy small {
  color: #64748b;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.signature-review-document-signers {
  display: grid;
  gap: 3px;
}

.signature-review-document-signer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: baseline;
}

.signature-review-document-signer small {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.signature-review-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: center;
  justify-content: flex-end;
}

.signature-review-actions-row .ghost-button.is-active {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
}

.signature-review-choice-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 12px;
  background: #ffffff;
  color: #172033;
  font-weight: 900;
  white-space: normal;
  cursor: pointer;
  text-align: left;
}

.signature-review-choice-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.signature-review-choice-button span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.signature-review-choice-button strong,
.signature-review-choice-button small {
  display: block;
  line-height: 1.2;
}

.signature-review-choice-button small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.signature-review-choice-button.is-ok:hover,
.signature-review-choice-button.is-ok.is-active {
  border-color: rgba(16, 185, 129, 0.42);
  background: #ecfdf5;
  color: #047857;
}

.signature-review-choice-button.is-skip:hover,
.signature-review-choice-button.is-skip.is-active {
  border-color: rgba(245, 158, 11, 0.42);
  background: #fffbeb;
  color: #92400e;
}

.signature-review-choice-button.is-reject:hover,
.signature-review-choice-button.is-reject.is-active {
  border-color: rgba(239, 68, 68, 0.38);
  background: #fef2f2;
  color: #b91c1c;
}

.signature-review-choice-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.signature-review-comment {
  width: 100%;
  min-height: 60px;
  resize: none;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
}

.signature-review-comment[hidden] {
  display: none;
}

.signature-review-validation {
  margin: 0;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
}

.signature-review-validation[hidden] {
  display: none;
}

.signature-review-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #475569;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.signature-review-status.is-approved_for_signing,
.signature-review-status.is-signed {
  color: #047857;
  background: #d1fae5;
}

.signature-review-status.is-skipped_with_comment {
  color: #92400e;
  background: #fef3c7;
}

.signature-review-status.is-rejected_with_comment,
.signature-review-status.is-error {
  color: #b91c1c;
  background: #fee2e2;
}

.signature-review-status.is-locked {
  color: #5b21b6;
  background: #ede9fe;
}

.signature-review-status.is-partial {
  color: #92400e;
  background: #fef3c7;
}

.signature-review-preview {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-self: stretch;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  padding: clamp(12px, 1vw, 18px);
  border: 1px solid rgba(191, 219, 254, 0.92);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.signature-review-preview-head,
.signature-review-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.signature-review-preview-head > div {
  min-width: 0;
}

.signature-review-preview-head .module-copy {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-review-preview-head h4 {
  margin: 0;
  color: #172033;
  font-size: 19px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.signature-review-pdf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 14px;
  background: #f8fafc;
  min-width: 0;
}

.signature-review-pdf-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 10px;
  background: #ffffff;
  color: #172033;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.signature-review-pdf-control.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  background: #eff6ff;
  color: #1d4ed8;
}

.signature-review-preview-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.signature-review-preview-actions .ghost-button.is-active {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(239, 246, 255, 0.95);
  color: #1d4ed8;
}

.signature-review-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.signature-review-preview-stage {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.76);
}

.signature-review-preview-stage iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #ffffff;
}

.signature-review-field-marker {
  position: absolute;
  left: auto;
  top: auto;
  max-width: min(190px, 30%);
  min-height: 26px;
  padding: 1px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  pointer-events: none;
  box-shadow: none;
  overflow: hidden;
}

.signature-review-field-marker span,
.signature-review-field-marker strong {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-review-field-marker strong {
  margin-top: 2px;
  font-size: 9.6px;
  font-weight: 800;
}

.signature-review-field-marker.is-dense {
  font-size: 6.8px;
  line-height: 1.08;
}

.signature-review-field-marker.is-dense strong {
  margin-top: 0;
  font-size: 7.4px;
}

.signature-review-field-marker.is-very-dense {
  font-size: 5.9px;
  line-height: 1.04;
}

.signature-review-field-marker.is-very-dense strong {
  font-size: 6.5px;
}

.signature-review-field-marker.has-border,
.signature-preview-marker.has-border {
  border: 1px solid rgba(148, 163, 184, 0.6);
}

.signature-review-field-marker.has-background,
.signature-preview-marker.has-background {
  background: rgba(255, 255, 255, 0.76);
}

.signature-marker-logo {
  position: absolute !important;
  z-index: 0 !important;
  inset: 8%;
  display: block !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.signature-review-active-actions {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(420px, 1.22fr) minmax(260px, 0.9fr);
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.78);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.04), 0 14px 34px rgba(15, 23, 42, 0.05);
}

.signature-review-active-actions .signature-review-decision-signer {
  min-height: 44px;
}

.signature-review-active-actions .signature-review-comment {
  min-height: 44px;
}

.signature-review-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(248, 250, 252, 0.62);
  backdrop-filter: blur(7px);
}

.signature-review-progress-card {
  display: grid;
  gap: 10px;
  width: min(460px, 92%);
  padding: 22px;
  border: 1px solid rgba(147, 197, 253, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
  text-align: center;
}

.signature-review-progress-pulse {
  justify-self: center;
  width: 46px;
  height: 46px;
  border: 4px solid rgba(37, 99, 235, 0.16);
  border-top-color: #2563eb;
  border-radius: 999px;
  animation: signature-progress-spin 900ms linear infinite;
}

.signature-review-progress-card strong {
  color: #172033;
  font-size: 16px;
}

.signature-review-progress-card p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.signature-review-progress-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.signature-review-progress-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #10b981);
}

@keyframes signature-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-height: 760px) {
  .signatures-review-panel:not([hidden]) {
    padding: 7px 8px;
  }

  .signatures-review-panel:not([hidden]) > .section-heading {
    min-height: 38px;
    padding-bottom: 6px;
  }

  .signature-review-decision-card {
    padding: 10px;
  }

  .signature-review-comment {
    min-height: 48px;
  }

  .signature-review-preview {
    gap: 7px;
    padding: 8px;
  }

  .signature-review-preview-head .helper-copy {
    display: none;
  }

  .signature-review-status-bar {
    max-height: 112px;
    padding: 8px 10px;
  }

  .signature-review-error-row {
    padding: 6px 8px;
  }

  .signature-review-pdf-toolbar {
    padding: 5px;
  }

  .signature-review-pdf-control {
    min-height: 30px;
  }

  .signature-review-active-actions {
    grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1fr) minmax(220px, 1fr);
    padding: 8px;
  }
}

@media (max-width: 1280px) {
  .signature-review-workspace {
    grid-template-columns: minmax(420px, 36vw) minmax(0, 1fr);
    gap: 10px;
  }

  .signature-review-active-actions {
    grid-template-columns: minmax(145px, 0.72fr) minmax(250px, 1.18fr) minmax(205px, 1fr);
    gap: 8px;
  }
}

@media (max-width: 1080px) {
  .signature-review-workspace {
    grid-template-columns: minmax(360px, 38vw) minmax(0, 1fr);
  }

  .signature-review-active-actions {
    grid-template-columns: minmax(130px, 0.72fr) minmax(220px, 1.14fr) minmax(178px, 1fr);
  }

  .signature-review-status {
    min-width: 74px;
    padding-inline: 7px;
  }

  .signature-review-pdf-toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .signatures-review-panel:not([hidden]) {
    inset: 0;
  }

  .signature-review-workspace {
    grid-template-columns: 1fr;
  }

  .signature-review-active-actions {
    grid-template-columns: 1fr;
  }

  .signature-review-sidebar {
    max-height: 38dvh;
  }

  .signature-review-preview {
    min-height: 420px;
  }

  .signatures-review-panel:not([hidden]) .signatures-review-actions {
    justify-content: stretch;
  }

  .signatures-review-panel:not([hidden]) .signatures-review-actions .ghost-button,
  .signatures-review-panel:not([hidden]) .signatures-review-actions .primary-button {
    flex: 1 1 180px;
  }
}

.signature-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(10px);
}

.signature-preview-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 96vw);
  height: min(820px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.signature-preview-head {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72);
}

.signature-preview-head .helper-copy {
  margin: 4px 0 0;
}

.signature-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-height: 0;
}

.signature-preview-body.is-pdf-only {
  grid-template-columns: minmax(0, 1fr);
}

.signature-preview-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f8fafc;
}

.signature-preview-map {
  display: grid;
  place-items: center;
  padding: 18px;
  border-left: 1px solid rgba(203, 213, 225, 0.72);
  background: linear-gradient(180deg, #f8fafc, #eef6ff);
}

.signature-preview-page {
  position: relative;
  width: 190px;
  aspect-ratio: 595 / 842;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(30, 64, 175, 0.12);
}

.signature-preview-marker {
  position: absolute;
  min-height: 18px;
  padding: 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-size: 5.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
}

.signature-preview-marker span,
.signature-preview-marker strong {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-preview-marker strong {
  margin-top: 1px;
  font-size: 6px;
  font-weight: 800;
}

.signature-preview-empty {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}

.signatures-list {
  display: grid;
  gap: 10px;
}

.signatures-status-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(191, 219, 254, 0.86);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.signatures-status-group-head,
.signatures-status-document-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.signatures-status-group-head h4 {
  margin: 0;
  color: #172033;
  font-size: 17px;
}

.signatures-status-group-head p,
.signatures-status-document p {
  margin: 3px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.signatures-status-documents {
  display: grid;
  gap: 10px;
}

.signatures-status-document {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  text-align: left;
  cursor: pointer;
}

.signatures-status-document:hover {
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.1);
}

.signatures-status-document-head strong {
  color: #172033;
  overflow-wrap: anywhere;
}

.signatures-status-section {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.9);
}

.signatures-status-section > strong {
  color: #334155;
  font-size: 12px;
}

.signatures-status-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.signatures-status-section li {
  display: grid;
  gap: 2px;
}

.signatures-status-section span {
  color: #172033;
  font-size: 13px;
  font-weight: 800;
}

.signatures-status-section small {
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.signatures-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(191, 219, 254, .88);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
}

.signatures-row.is-signed {
  border-color: rgba(134, 239, 172, .75);
  background: linear-gradient(135deg, rgba(240, 253, 244, .84), rgba(255,255,255,.92));
}

.signatures-row.is-pending {
  border-color: rgba(253, 186, 116, .72);
}

.signatures-row.is-missing {
  border-color: rgba(252, 165, 165, .68);
}

.signatures-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.signatures-status.is-signed {
  color: #047857;
  background: rgba(209, 250, 229, .95);
  border: 1px solid rgba(16, 185, 129, .35);
}

.signatures-status.is-pending {
  color: #92400e;
  background: rgba(254, 243, 199, .95);
  border: 1px solid rgba(245, 158, 11, .35);
}

.signatures-status.is-missing {
  color: #b91c1c;
  background: rgba(254, 226, 226, .95);
  border: 1px solid rgba(239, 68, 68, .3);
}

.signatures-status.is-rejected {
  color: #b91c1c;
  background: rgba(254, 226, 226, 0.95);
  border: 1px solid rgba(239, 68, 68, 0.32);
}

.signatures-status.is-locked {
  color: #5b21b6;
  background: rgba(237, 233, 254, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.signatures-row-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.signatures-row-copy strong {
  color: #172033;
  font-size: 14px;
}

.signatures-row-copy span,
.signatures-row-copy small {
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signatures-row-copy small {
  color: #475569;
}

.signatures-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 900px) {
  .signatures-stats-grid,
  .signatures-row,
  .signatures-filter-bar {
    grid-template-columns: 1fr;
  }

  .signatures-local-signer-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .signatures-bridge-actions,
  .signatures-row-actions {
    justify-content: flex-start;
  }

  .signatures-debug-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .signatures-debug-grid {
    grid-template-columns: 1fr;
  }

  .signatures-settings-grid,
  .signature-review-document,
  .signature-preview-body {
    grid-template-columns: 1fr;
  }

  .signature-preview-map {
    border-left: 0;
    border-top: 1px solid rgba(203, 213, 225, 0.72);
  }
}

/* Final People directory fit: keep the premium cards readable without horizontal table scroll. */
.people-directory-wrap {
  max-width: 100%;
  overflow-x: hidden !important;
}

.people-directory-table {
  width: 100% !important;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

.people-directory-table thead tr,
.people-directory-table tbody tr {
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1.15fr) minmax(0, 0.58fr) minmax(0, 0.76fr) minmax(0, 0.62fr) !important;
  width: 100%;
  max-width: 100%;
}

.people-directory-table thead th,
.people-directory-table tbody td {
  width: auto !important;
  max-width: 100%;
  padding-left: 12px !important;
  padding-right: 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.people-directory-table tbody td {
  min-height: 74px;
}

.people-directory-table .user-cell,
.people-directory-table td > div,
.people-directory-table td > span {
  min-width: 0;
  max-width: 100%;
}

.people-directory-table .status-badge,
.people-directory-table .permission-count-pill {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 1360px) {
  .people-directory-table thead tr,
  .people-directory-table tbody tr {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 0.58fr) minmax(0, 0.72fr) !important;
  }

  .people-directory-table.is-account-access-mode thead th:last-child,
  .people-directory-table.is-account-access-mode tbody td:last-child {
    display: none;
  }
}

.people-directory-table:not(.is-account-access-mode) thead tr,
.people-directory-table:not(.is-account-access-mode) tbody tr {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.05fr) minmax(0, 0.68fr) minmax(168px, 0.98fr) !important;
}

.people-directory-table:not(.is-account-access-mode) thead th:last-child,
.people-directory-table:not(.is-account-access-mode) tbody td:last-child {
  display: block;
}

.people-directory-table td:nth-child(4) .list-meta-pill.is-success {
  width: 100%;
  border: 1px solid rgba(16, 185, 129, 0.28);
  background: linear-gradient(90deg, rgba(209, 250, 229, 0.98), rgba(236, 253, 245, 0.82));
  color: #047857;
}

.people-directory-table td:nth-child(4) .list-meta-pill.is-muted {
  width: 100%;
  border: 1px solid rgba(239, 68, 68, 0.24);
  background: linear-gradient(90deg, rgba(254, 226, 226, 0.96), rgba(255, 241, 242, 0.82));
  color: #b91c1c;
}

.people-directory-table td:nth-child(4) .people-user-sheet-action {
  white-space: normal;
  line-height: 1.15;
}

.absence-people-panel {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.97));
}

.absence-people-feedback {
  margin: 0;
  min-height: 20px;
  color: #047857;
  text-align: right;
}

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

.absence-person-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(184, 205, 236, 0.74);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.96));
  box-shadow: 0 12px 28px rgba(62, 88, 132, 0.06);
}

.absence-person-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.absence-person-avatar {
  width: 44px;
  height: 44px;
}

.absence-person-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.absence-person-copy strong,
.absence-person-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absence-person-copy span {
  color: #667896;
  font-size: 0.82rem;
}

.absence-person-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.absence-person-stat {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(187, 205, 234, 0.62);
  border-radius: 14px;
  background: rgba(241, 247, 255, 0.82);
}

.absence-person-stat small {
  color: #7284a1;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.absence-person-stat strong {
  color: #14213d;
  font-size: 1.02rem;
}

.absence-person-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.absence-person-days-field input {
  min-height: 38px;
}

.absence-person-action {
  min-height: 38px;
  white-space: nowrap;
}

.absence-people-list.is-row-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.absence-person-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.35fr) minmax(260px, 0.95fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(183, 204, 235, 0.8);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(83, 128, 218, 0.08), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.96));
  box-shadow: 0 14px 34px rgba(61, 87, 129, 0.07);
  cursor: pointer;
}

.absence-person-row:hover,
.absence-person-row:focus-visible,
.absence-person-row.is-expanded {
  border-color: rgba(73, 121, 209, 0.46);
  box-shadow:
    0 16px 38px rgba(61, 87, 129, 0.1),
    0 0 0 2px rgba(96, 165, 250, 0.12);
}

.absence-person-row.is-medical {
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(240, 253, 250, 0.94));
}

.absence-person-row-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.absence-person-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.absence-person-row-copy strong,
.absence-person-row-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absence-person-row-copy span {
  color: #657891;
  font-size: 0.78rem;
}

.absence-person-row-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.absence-person-row.is-medical .absence-person-row-metrics {
  grid-template-columns: minmax(0, 1fr);
}

.absence-person-row-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(183, 202, 232, 0.64);
  border-radius: 14px;
  background: rgba(245, 249, 255, 0.82);
}

.absence-person-row-metric span,
.absence-person-row-input span {
  color: #71839d;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.absence-person-row-metric strong {
  color: #16243d;
  font-size: 1.05rem;
  line-height: 1.05;
}

.absence-person-row-metric small {
  color: #7a8ba5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.absence-person-row-metric.is-green {
  border-color: rgba(45, 162, 107, 0.22);
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.95), rgba(220, 252, 231, 0.78));
}

.absence-person-row-metric.is-blue {
  border-color: rgba(59, 130, 246, 0.22);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.78));
}

.absence-person-row-metric.is-amber {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.8));
}

.absence-person-row-metric.is-muted {
  background: rgba(248, 250, 252, 0.9);
}

.absence-person-row-progress {
  position: relative;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(222, 232, 247, 0.95);
  box-shadow: inset 0 1px 2px rgba(37, 56, 88, 0.12);
}

.absence-person-row-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #2563eb, #a855f7);
}

.absence-person-row.is-medical .absence-person-row-progress span {
  background: linear-gradient(90deg, #34d399, #14b8a6, #0ea5e9);
}

.absence-person-row-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(74px, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.absence-person-row.is-medical .absence-person-row-controls {
  grid-template-columns: auto;
  justify-content: end;
}

.absence-person-row-input {
  margin: 0;
}

.absence-person-row-input input {
  min-height: 36px;
  padding: 8px 10px;
}

.absence-person-row-action {
  min-height: 36px;
  white-space: nowrap;
}

.absence-person-row-status {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.absence-person-row-log {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(174, 197, 231, 0.72);
  border-radius: 14px;
  background: rgba(248, 251, 255, 0.9);
}

.absence-person-row-log > strong {
  color: #1f3150;
  font-size: 0.88rem;
}

.absence-person-row-log p {
  margin: 0;
  color: #667896;
  font-size: 0.86rem;
}

.absence-person-log-list {
  display: grid;
  gap: 6px;
}

.absence-person-log-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(140px, 0.9fr) minmax(100px, 0.55fr) minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(190, 207, 235, 0.62);
}

.absence-person-log-row span,
.absence-person-log-row small {
  color: #667896;
  min-width: 0;
}

.absence-person-log-row strong {
  color: #14213d;
  white-space: nowrap;
}

.absence-report-toolbar-panel .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.absence-report-toolbar-panel .vehicle-schedule-toolbar {
  display: grid;
  grid-template-columns: 42px auto minmax(200px, 1fr) 42px minmax(180px, 0.74fr) auto;
  gap: 10px;
  align-items: end;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  border: 1px solid rgba(190, 207, 235, 0.68);
  border-radius: 18px;
  background: rgba(248, 251, 255, 0.86);
}

.absence-report-toolbar-panel .vehicle-schedule-date-input,
.absence-report-user-field select {
  min-height: 42px;
}

.absence-report-user-field {
  margin: 0;
  min-width: 0;
}

.absence-report-user-field span {
  line-height: 1.1;
}

#absence-report-export {
  min-height: 42px;
  white-space: nowrap;
}

.absence-report-card-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.absence-report-card-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid rgba(161, 184, 220, 0.72);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.94);
}

.absence-report-card-select input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.absence-report-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.absence-report-card-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.absence-report-card-download {
  min-height: 34px;
  padding-inline: 14px;
  font-weight: 850;
}

@media (max-width: 1120px) {
  .absence-person-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .absence-person-row-metrics,
  .absence-person-row-controls,
  .absence-person-row.is-medical .absence-person-row-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .absence-person-log-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .absence-person-row-status {
    justify-content: flex-start;
  }

  .absence-report-toolbar-panel .vehicle-schedule-toolbar {
    grid-template-columns: 42px auto minmax(180px, 1fr) 42px;
  }

  .absence-report-user-field,
  #absence-report-export {
    grid-column: span 2;
  }
}

.work-item-date-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.work-item-date-stack.has-inline-field-editor {
  cursor: pointer;
  border-radius: 9px;
}

.work-item-date-stack.has-inline-field-editor:hover {
  box-shadow: inset 0 0 0 1px rgba(85, 126, 205, 0.16);
}

.work-order-inline-field-control select,
.work-order-inline-field-control .work-order-tag-picker-trigger,
.work-order-inline-field-control .work-order-tag-picker-field {
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(157, 178, 214, 0.74);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(248, 251, 255, 0.98);
  color: #20283b;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
}

.work-order-inline-priority-tag-editor,
.work-order-inline-list-editor,
.work-order-inline-service-editor {
  width: min(520px, calc(100vw - 24px));
}

.work-order-inline-service-editor {
  width: min(620px, calc(100vw - 24px));
}

.work-order-inline-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 30px;
  align-items: center;
  padding: 4px 0;
}

.work-order-inline-option-list {
  display: grid;
  gap: 5px;
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}

.work-order-inline-option {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.work-order-inline-service-editor .work-order-inline-option {
  grid-template-columns: minmax(0, 1fr) auto;
}

.work-order-inline-option-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.work-order-inline-option-copy strong,
.work-order-inline-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-inline-option-copy small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 720;
}

.work-order-tag-picker,
.work-order-tag-picker-trigger-copy {
  min-width: 0;
}

.work-order-tag-picker {
  display: block;
  width: 100%;
}

.work-order-tag-picker-field {
  min-height: 34px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(246, 248, 252, 0.96);
  color: #1f2937;
  cursor: text;
}

.work-order-tag-picker-field:focus-within,
.work-order-tag-picker.is-open .work-order-tag-picker-field {
  border-color: rgba(74, 126, 255, 0.38);
  box-shadow: 0 0 0 3px rgba(74, 126, 255, 0.1);
}

.work-order-tag-picker-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.work-order-tag-picker-field-chip {
  border: 0;
  cursor: pointer;
}

.work-order-tag-picker-field-chip-remove {
  margin-left: 4px;
  font-size: 0.78rem;
  line-height: 1;
}

.work-order-tag-picker-inline-input {
  flex: 1 1 86px;
  min-width: 78px;
  height: 24px;
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: #1f2937;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  outline: none;
}

.work-order-tag-picker-inline-input::placeholder {
  color: #8b95a7;
  font-weight: 700;
}

.work-order-inline-field-control .work-order-tag-picker span {
  letter-spacing: 0;
  text-transform: none;
}

.work-order-inline-field-control .work-order-tag-picker .work-order-editor-detail-tag,
.work-order-inline-field-control .work-order-tag-picker .work-order-editor-field-caret {
  font-size: 0.7rem;
}

.work-order-tag-picker-trigger-copy {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.work-order-tag-picker-menu-portal {
  width: min(430px, calc(100vw - 24px));
}

.work-order-tag-picker-option {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.work-order-tag-picker-option.is-create span:first-child {
  display: grid;
  gap: 2px;
}

.work-order-tag-picker-option.is-create small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 720;
}

.work-order-tag-picker-actions {
  border-top: 1px solid #eef2f7;
  padding-top: 8px;
}

.work-order-editor-detail-tag.is-muted {
  background: #eef2f7;
  color: #64748b;
}

.work-order-quick-action {
  min-height: 34px;
  max-width: 74px;
  padding: 5px 10px !important;
  border-radius: 10px !important;
  font-size: 0.76rem;
  line-height: 1.05;
}

.work-order-activity-item-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 24px;
  align-items: start;
  gap: 10px;
}

.work-order-activity-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Premium operations polish */
.panel-work-orders {
  border-color: rgba(212, 222, 242, 0.92);
  background:
    radial-gradient(circle at 18% 0%, rgba(125, 92, 255, 0.09), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(51, 153, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
  box-shadow: 0 24px 60px rgba(32, 44, 76, 0.10);
}

.panel-work-orders .workspace-list-head {
  align-items: center;
  padding: 4px 2px 10px;
}

.panel-work-orders .workspace-list-copy h2 {
  color: #111827;
  font-size: 1.34rem;
  font-weight: 850;
}

.panel-work-orders .workspace-list-actions {
  gap: 10px;
}

.panel-work-orders .primary-button,
.public-procurement-module .primary-button {
  border: 0;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 14px 30px rgba(91, 65, 218, 0.24);
}

.work-order-template-strip {
  border-radius: 18px;
  border-color: rgba(215, 225, 244, 0.82);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.work-order-list-toolbar {
  margin-top: 4px;
  padding: 0 2px;
}

.workspace-view-chip {
  min-height: 42px;
  padding: 0 16px;
  border-color: rgba(217, 225, 240, 0.95);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #4b587c;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(38, 51, 84, 0.06);
}

.workspace-view-chip.is-active {
  color: #5b38f3;
  border-color: rgba(126, 95, 255, 0.24);
  background: linear-gradient(180deg, #ffffff, #f6f2ff);
  box-shadow: 0 16px 34px rgba(126, 95, 255, 0.16);
}

.work-order-premium-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(162px, 1fr));
  gap: 10px;
  margin: 6px 0 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.work-order-metric-card {
  position: relative;
  min-width: 162px;
  height: 104px;
  display: grid;
  grid-template-rows: auto auto minmax(22px, 1fr) auto;
  gap: 3px;
  padding: 8px 11px;
  border: 1px solid rgba(219, 227, 242, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #172033;
  text-align: left;
  box-shadow: 0 10px 24px rgba(28, 39, 68, 0.055);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.work-order-metric-card:hover,
.work-order-metric-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(139, 116, 246, 0.38);
  box-shadow: 0 14px 30px rgba(42, 53, 86, 0.085);
  outline: none;
}

.work-order-metric-card.is-active {
  border-color: rgba(91, 65, 218, 0.48);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 255, 0.94));
  box-shadow: 0 0 0 3px rgba(91, 65, 218, 0.08), 0 14px 30px rgba(42, 53, 86, 0.09);
}

.work-order-metric-card::before {
  content: "";
  position: absolute;
  inset: 10px auto auto 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #6d5dfc;
}

.work-order-metric-card.is-red::before {
  background: #ef4444;
}

.work-order-metric-card.is-green::before {
  background: #16a34a;
}

.work-order-metric-card.is-blue::before {
  background: #2563eb;
}

.work-order-metric-card.is-amber::before {
  background: #f59e0b;
}

.work-order-metric-card.is-orange::before {
  background: #f97316;
}

.work-order-metric-card.is-indigo::before {
  background: #4f46e5;
}

.work-order-metric-head,
.work-order-metric-main,
.work-order-metric-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.work-order-metric-title {
  min-width: 0;
  padding-left: 12px;
  color: #50607c;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-order-metric-delta {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  font-size: 0.66rem;
  font-weight: 850;
}

.work-order-metric-delta.is-neutral {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

.work-order-metric-delta.is-up {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}

.work-order-metric-delta.is-down {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.work-order-metric-main strong {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: clamp(1.15rem, 1.2vw, 1.52rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-metric-chart {
  min-height: 20px;
  display: flex;
  align-items: end;
}

.work-order-metric-sparkline {
  width: 100%;
  height: 20px;
  color: #6d5dfc;
}

.work-order-metric-sparkline.is-red {
  color: #ef4444;
}

.work-order-metric-sparkline.is-green {
  color: #16a34a;
}

.work-order-metric-sparkline.is-blue {
  color: #2563eb;
}

.work-order-metric-sparkline.is-violet {
  color: #7c3aed;
}

.work-order-metric-sparkline.is-orange {
  color: #f97316;
}

.metric-sparkline-area {
  fill: currentColor;
  opacity: 0.08;
}

.metric-sparkline-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-order-metric-bars {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: end;
  gap: 5px;
  color: #2563eb;
}

.work-order-metric-bars.is-indigo {
  color: #4f46e5;
}

.work-order-metric-bars.is-orange {
  color: #f97316;
}

.work-order-metric-bars span {
  flex: 1 1 0;
  min-width: 4px;
  height: var(--bar, 8%);
  border-radius: 999px 999px 2px 2px;
  background: currentColor;
  opacity: 0.72;
}

.work-order-metric-donut {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background:
    conic-gradient(#f97316 0 var(--today), #f59e0b var(--today) var(--soon), #fbbf24 var(--soon) 100%);
}

.work-order-metric-donut::before {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: inherit;
  background: #fff;
}

.work-order-metric-donut span {
  position: absolute;
  display: none;
}

.work-order-metric-meta {
  color: #5f6f8f;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.15;
}

.work-order-metric-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-filter-shell {
  border-radius: 18px;
  border: 1px solid rgba(220, 229, 246, 0.92);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 36px rgba(44, 57, 88, 0.06);
}

.work-order-filter-row .field input,
.work-order-filter-row .field select {
  min-height: 46px;
  border-radius: 13px;
  background: #fff;
}

.work-orders-scroll-shell {
  border-radius: 22px;
  border: 1px solid rgba(219, 228, 245, 0.96);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 48px rgba(34, 45, 76, 0.08);
}

.work-group-flat {
  border-radius: 22px;
}

.work-group-columns {
  min-height: 52px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(222, 229, 242, 0.92);
  background: rgba(255, 255, 255, 0.76);
}

.work-group-column-title {
  color: #697697;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.work-group-body {
  gap: 10px;
  padding: 12px 12px 14px;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0.72), rgba(255, 255, 255, 0.88));
}

.work-item-card {
  position: relative;
  border-color: rgba(220, 229, 245, 0.98);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(42, 54, 84, 0.06);
}

.work-item-row {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.045), rgba(255, 255, 255, 0.96) 32%);
}

.work-item-card::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a78bfa, #6d5dfc);
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.08);
  transform: translateY(-50%);
  pointer-events: none;
}

.work-item-select-cell {
  padding-left: 18px;
}

.work-item-card:hover {
  border-color: rgba(139, 116, 246, 0.45);
  box-shadow: 0 18px 40px rgba(72, 83, 128, 0.11);
}

.work-item-card:hover .work-item-row,
.work-item-card.is-expanded .work-item-row {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.08), rgba(245, 249, 255, 0.9) 34%, rgba(255, 255, 255, 0.98));
}

.work-item-basic-value.is-work-order-number {
  color: #101828;
  font-size: 1rem;
}

.work-item-value-primary {
  color: #182238;
  font-weight: 850;
}

.work-item-value-secondary,
.work-item-compact-info-label,
.work-item-basic-label {
  color: #6f7b99;
}

.work-item-action-button {
  border-radius: 12px;
  border-color: rgba(214, 224, 242, 0.92);
  background: #fff;
  box-shadow: 0 10px 22px rgba(41, 55, 88, 0.08);
}

/* 2025 enterprise operations command center */
.app-rail,
.app-sidebar {
  background:
    radial-gradient(circle at 20% 0%, rgba(104, 76, 255, 0.22), transparent 34%),
    linear-gradient(180deg, #07142b 0%, #0a1630 48%, #081225 100%);
  border-color: rgba(116, 141, 190, 0.18);
  color: #dbe6ff;
}

.sidebar-brand-pill,
.sidebar-group-toggle,
.sidebar-link,
.app-rail-toolbar,
.rail-button,
.sidebar-collapse-button {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: #dbe6ff;
}

.sidebar-section-label,
.sidebar-brand-meta span {
  color: rgba(219, 230, 255, 0.62);
}

.sidebar-link:hover,
.sidebar-group-toggle:hover,
.rail-button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.sidebar-link.is-active,
.rail-button.is-active {
  border-color: rgba(124, 92, 255, 0.55);
  background: linear-gradient(135deg, rgba(82, 52, 255, 0.95), rgba(124, 58, 237, 0.86));
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(72, 45, 211, 0.35);
}

.panel-work-orders {
  position: relative;
  overflow: visible;
  border: 0;
  background:
    linear-gradient(180deg, rgba(248, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: none;
}

.panel-work-orders .workspace-list-head {
  padding: 2px 0 14px;
}

.panel-work-orders .workspace-list-copy .section-kicker {
  display: none;
}

.panel-work-orders .workspace-list-copy h2 {
  font-size: 1.62rem;
  letter-spacing: 0;
}

.panel-work-orders .work-order-template-strip {
  display: flex;
}

.work-order-list-toolbar {
  margin: 0 0 10px;
}

.workspace-view-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.work-order-premium-summary {
  grid-template-columns: repeat(6, minmax(174px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
  padding: 1px 1px 4px;
}

.work-order-metric-card {
  min-width: 174px;
  height: 112px;
  padding: 10px 12px;
  border-radius: 14px;
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.work-order-metric-card::before {
  inset: 12px auto auto 12px;
  width: 8px;
  height: 8px;
}

.work-order-metric-title {
  color: #1f2a54;
  font-size: 0.69rem;
  letter-spacing: 0;
  text-transform: none;
}

.work-order-metric-main strong {
  color: #11194a;
  font-size: clamp(1.34rem, 1.4vw, 1.72rem);
}

.work-order-metric-meta {
  color: #1e3a8a;
  font-size: 0.68rem;
}

.work-order-filter-shell {
  position: sticky;
  top: 8px;
  z-index: 21;
  padding: 12px;
  border-radius: 16px;
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(14px);
}

.work-order-quick-filters {
  display: grid;
  grid-template-columns: repeat(7, minmax(126px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.work-order-quick-filter {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #53627f;
  font-size: 0.68rem;
  font-weight: 800;
}

.work-order-quick-filter select,
.work-order-filter-row .field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(214, 224, 242, 0.95);
  border-radius: 10px;
  background: #ffffff;
  color: #15203b;
  font-size: 0.78rem;
  font-weight: 750;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
}

.work-order-filter-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.work-order-search-field span {
  display: none;
}

.work-order-search-field input {
  padding-left: 38px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center / 16px 16px no-repeat,
    #fff;
}

.work-order-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

.work-order-filter-toggle,
.work-order-columns-toggle,
.work-order-filter-reset {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-weight: 850;
}

.work-order-filter-toggle svg,
.work-order-columns-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

.work-order-filter-toggle span[aria-hidden],
.work-order-columns-toggle span[aria-hidden],
.work-order-filter-toggle-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.work-order-columns-toggle.is-active,
.work-order-filter-toggle.is-active {
  border-color: rgba(99, 72, 255, 0.36);
  color: #4f35d9;
  background: #f4f1ff;
}

.work-order-filter-summary {
  margin-top: 10px;
}

.work-order-filter-summary-chip {
  border-radius: 8px;
  border-color: rgba(199, 210, 254, 0.8);
  background: #f4f1ff;
  color: #332a8f;
}

.work-order-columns-panel {
  position: fixed;
  z-index: 80;
  top: 76px;
  right: 24px;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 104px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.work-order-columns-panel[hidden] {
  display: none;
}

.work-order-columns-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 10px;
}

.work-order-columns-head h3 {
  margin: 2px 0 0;
  color: #11194a;
  font-size: 1.15rem;
}

.work-order-columns-close {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 10px;
  font-size: 1.2rem;
}

.work-order-columns-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  padding: 0 18px;
}

.work-order-columns-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #334155;
  padding: 11px 8px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.work-order-columns-tabs button.is-active {
  border-color: #4f35d9;
  color: #4f35d9;
}

.work-order-columns-body {
  overflow: auto;
  padding: 16px 18px;
}

.work-order-column-group {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.work-order-column-group h4 {
  margin: 0;
  color: #24305c;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.work-order-column-checks {
  display: grid;
  gap: 8px;
}

.work-order-column-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #25304f;
  font-size: 0.82rem;
  font-weight: 750;
}

.work-order-column-check input {
  width: 15px;
  height: 15px;
  accent-color: #4f35d9;
}

.work-order-column-preset {
  width: 100%;
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(220, 228, 244, 0.95);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.work-order-column-preset.is-active,
.work-order-column-preset:hover {
  border-color: rgba(99, 72, 255, 0.42);
  background: #f7f5ff;
}

.work-order-column-preset strong {
  color: #11194a;
}

.work-order-column-preset span {
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.35;
}

.work-order-columns-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.work-orders-scroll-shell {
  margin-top: 12px;
  border-radius: 18px;
  border-color: rgba(226, 232, 240, 0.95);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.075);
}

.work-group-columns {
  min-width: var(--work-order-list-min-width);
  min-height: 44px;
  grid-template-columns: var(--work-order-list-grid-template);
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.work-group-column-title {
  color: #334155;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.work-group-body {
  gap: 0;
  padding: 0;
  background: #fff;
}

.work-item-card {
  border: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 0;
  box-shadow: none;
}

.work-item-card:first-child {
  border-top: 0;
}

.work-item-card::after {
  left: 15px;
  width: 10px;
  height: 10px;
  background: #7c5cff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.10);
}

.work-item-card:hover {
  z-index: 1;
  border-color: rgba(199, 210, 254, 0.95);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.work-item-row {
  min-width: var(--work-order-list-min-width);
  grid-template-columns: var(--work-order-list-grid-template);
  gap: 12px;
  padding: 15px 16px;
  background: #fff;
}

.work-item-card:hover .work-item-row,
.work-item-card.is-expanded .work-item-row {
  background: linear-gradient(90deg, rgba(245, 243, 255, 0.72), #ffffff 36%);
}

.work-item-cell {
  min-width: 0;
}

.work-item-select-cell {
  padding-left: 12px;
}

.work-item-basic-value.is-work-order-number {
  color: #101646;
  font-size: 1.04rem;
  font-weight: 900;
}

.work-item-date-stack {
  gap: 3px;
  margin-top: 7px;
}

.work-item-meta-line {
  font-size: 0.68rem;
}

.work-item-meta-value.is-overdue {
  color: #dc2626;
  font-weight: 900;
}

.work-item-meta-value.is-future {
  color: #047857;
  font-weight: 900;
}

.work-item-value-primary {
  color: #121a3f;
  font-size: 0.82rem;
  font-weight: 900;
}

.work-item-value-secondary,
.work-item-value-tertiary,
.work-item-compact-info-label,
.work-item-basic-label {
  color: #52617c;
  font-size: 0.72rem;
}

.work-item-priority-services-cell {
  gap: 9px;
}

.work-item-priority-tags-cell {
  gap: 7px;
}

.work-item-priority-service-block {
  display: grid;
  gap: 6px;
}

.work-item-priority-service-block.is-services {
  padding-top: 6px;
  border-top: 1px dashed rgba(203, 213, 225, 0.85);
}

.work-item-priority-pill,
.work-item-tag-pill,
.work-item-department-pill {
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
}

.work-item-service-line {
  color: #1e3a8a;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35;
}

.work-item-services-cell {
  align-self: stretch;
  align-content: center;
  justify-items: stretch;
  padding-left: 8px;
}

.work-item-service-list {
  display: grid;
  align-self: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.work-item-service-list ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 0 14px;
  color: #12245a;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.35;
}

.work-item-service-list li::marker {
  color: #211bff;
  font-size: 0.78em;
}

.work-item-service-more {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #271dca;
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}

.work-item-service-more:hover {
  text-decoration: underline;
}

.work-item-service-empty {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 760;
}

.work-item-service-note {
  color: #64748b;
  font-size: 0.68rem;
}

.work-executor-load-list {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.work-executor-load-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: #1e2a4a;
  font-size: 0.72rem;
  line-height: 1.2;
}

.work-executor-load-row::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #3b27ff;
  box-shadow: 0 0 0 3px rgba(59, 39, 255, 0.08);
}

.work-executor-load-row:nth-child(2)::before,
.work-executor-load-row:nth-child(3)::before {
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.10);
}

.work-executor-load-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-executor-load-row strong {
  color: #1e3a8a;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.work-executor-load-more,
.work-executor-completed-line,
.work-executor-load-empty {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 750;
}

.work-executor-completed-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(226, 232, 240, 0.75);
  color: #64748b;
  font-weight: 900;
}

.work-executor-completed-line.is-completed {
  color: #047857;
}

.work-executor-completed-line.is-pending {
  color: #64748b;
  font-weight: 780;
}

.work-executor-completed-line span {
  color: #47617f;
}

.work-executor-score-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.work-executor-score-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.work-executor-score-total {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(205, 214, 232, 0.95);
  border-radius: 7px;
  background: rgba(248, 250, 252, 0.9);
  box-shadow: none;
}

.work-executor-score-head strong {
  color: #0d1b4c;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.work-executor-score-rail {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1px;
  min-width: 72px;
  height: 12px;
  overflow: hidden;
  padding: 2px;
  border: 1px solid rgba(204, 214, 232, 0.95);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  box-shadow: none;
}

.work-executor-score-rail::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: rgba(148, 163, 184, 0.1);
}

.work-executor-score-segment {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--score-share, 0%);
  min-width: 7px;
  border-radius: 999px;
  background: var(--score-color, #5b4dff);
  box-shadow: none;
}

.work-executor-score-segment.is-more {
  opacity: 0.8;
}

.work-executor-score-list {
  display: grid;
  gap: 0;
  min-width: 0;
}

.work-executor-score-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.work-executor-score-row + .work-executor-score-row {
  border-top: 1px solid rgba(226, 232, 240, 0.82);
}

.work-executor-score-row::before {
  content: "";
  position: absolute;
  inset: auto 0 0 29px;
  width: var(--score, 0%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2dd4bf, #5b4dff);
  opacity: 0.78;
}

.work-executor-score-row.is-primary {
  border-color: transparent;
}

.work-executor-score-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0.56rem;
}

.work-executor-score-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.work-executor-score-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #13213f;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-executor-score-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.work-executor-score-roles span {
  overflow: hidden;
  max-width: 100%;
  padding: 2px 5px;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 7px;
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-executor-score-roles .is-field {
  background: rgba(240, 253, 250, 0.75);
  color: #0f766e;
}

.work-executor-score-roles .is-completed {
  background: rgba(245, 243, 255, 0.72);
  color: #4f37c7;
}

.work-executor-score-value {
  display: grid;
  gap: 2px;
  justify-items: end;
  color: #34415f;
}

.work-executor-score-value strong {
  color: #102062;
  font-size: 0.66rem;
  font-weight: 950;
  white-space: nowrap;
}

.work-item-finance-cell {
  gap: 4px;
}

.work-item-finance-cell .work-item-compact-info {
  grid-template-columns: 44px minmax(0, 1fr);
  font-size: 0.72rem;
}

.work-item-finance-cell .work-item-compact-info-value {
  color: #11194a;
  font-weight: 900;
}

.work-item-action-button.work-item-menu-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  box-shadow: none;
  color: #334155;
  font-size: 1.22rem;
}

.work-item-actions-cell {
  justify-content: center;
}

.work-order-row-context-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 0 12px;
}

.work-order-row-context-shortcut {
  min-height: 32px;
  border: 1px solid rgba(214, 224, 242, 0.95);
  border-radius: 9px;
  background: #fff;
  color: #1e2a4a;
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
}

.work-order-row-context-shortcut:hover {
  border-color: rgba(99, 72, 255, 0.36);
  background: #f6f3ff;
  color: #4f35d9;
}

.work-order-quick-create-card {
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  background: #fbfcff;
}

.work-order-quick-create-row {
  background: #fbfcff;
}

@media (max-width: 1280px) {
  .work-order-premium-summary,
  .work-order-quick-filters {
    display: flex;
    overflow-x: auto;
  }

  .work-order-quick-filter {
    min-width: 170px;
  }
}

@media (max-width: 760px) {
  .work-order-filter-shell {
    position: static;
  }

  .work-item-row,
  .work-group-columns {
    min-width: 0;
  }

  .work-group-columns {
    display: none;
  }

  .work-item-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .work-item-row .work-item-cell:not(.work-item-select-cell) {
    grid-column: 2;
  }

  .work-order-columns-panel {
    inset: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }
}

.public-procurement-layout {
  display: block;
}

.public-procurement-list-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
  border-color: rgba(214, 224, 244, 0.92);
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
  box-shadow: 0 22px 56px rgba(31, 45, 78, 0.09);
}

.public-procurement-editor-panel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-color: rgba(214, 224, 244, 0.92);
  background: linear-gradient(180deg, #fbfcfe, #f5f7fb);
  box-shadow: 0 28px 88px rgba(43, 53, 84, 0.24);
}

.public-procurement-editor-panel.is-modal-open {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 69;
  display: grid;
  width: min(980px, calc(100vw - 24px));
  height: calc(100vh - 36px);
  transform: translateX(-50%);
  border-radius: 24px;
}

body.is-public-procurement-editor-open {
  overflow: hidden;
}

.public-procurement-editor-backdrop {
  z-index: 68;
}

.public-procurement-editor-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.public-procurement-editor-body {
  padding: 14px 20px 20px;
}

.public-procurement-hero {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 2px 0 0;
}

.public-procurement-hero h3 {
  margin: 0;
  color: #101828;
  font-size: 1.28rem;
}

.public-procurement-hero p {
  max-width: 620px;
  margin: 5px 0 0;
  color: #66738f;
  font-size: 0.86rem;
  line-height: 1.45;
}

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

.public-procurement-stats article {
  padding: 12px 14px;
  border: 1px solid rgba(220, 229, 244, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(34, 48, 82, 0.06);
}

.public-procurement-stats span {
  display: block;
  color: #77829d;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-procurement-stats strong {
  display: block;
  margin-top: 4px;
  color: #101828;
  font-size: 1.08rem;
  font-weight: 900;
}

.public-procurement-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 10px;
}

.public-procurement-list {
  display: grid;
  gap: 8px;
}

.public-procurement-card {
  display: grid;
  grid-template-columns: minmax(148px, 0.22fr) minmax(240px, 1fr) minmax(120px, 0.18fr) minmax(110px, 0.14fr) minmax(86px, auto);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid rgba(218, 228, 244, 0.94);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(124, 58, 237, 0.05), rgba(255, 255, 255, 0) 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 26px rgba(36, 48, 80, 0.06);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.public-procurement-card:hover,
.public-procurement-card.is-active {
  border-color: rgba(124, 58, 237, 0.36);
  box-shadow: 0 18px 42px rgba(82, 65, 165, 0.13);
  transform: translateY(-1px);
}

.public-procurement-card-deadline,
.public-procurement-card-main,
.public-procurement-card-amount,
.public-procurement-card-meta,
.public-procurement-document-row {
  display: flex;
  min-width: 0;
}

.public-procurement-card-deadline,
.public-procurement-card-amount,
.public-procurement-card-meta {
  flex-direction: column;
  gap: 4px;
}

.public-procurement-card-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.public-procurement-card-main h4 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.25;
}

.public-procurement-card-subline,
.public-procurement-card-note,
.public-procurement-card-label,
.public-procurement-card-value,
.public-procurement-card-document-count {
  margin: 0;
  color: #68748f;
  font-size: 0.8rem;
  line-height: 1.42;
}

.public-procurement-card-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-weight: 760;
}

.public-procurement-card-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.public-procurement-card-label {
  color: #8791a7;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-procurement-card-value {
  color: #111827;
  font-size: 0.94rem;
  font-weight: 900;
}

.public-procurement-card-deadline {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 14px;
  background: rgba(248, 250, 255, 0.92);
}

.public-procurement-card-deadline.is-urgent {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(255, 251, 235, 0.86);
}

.public-procurement-card-deadline.is-overdue {
  border-color: rgba(239, 68, 68, 0.36);
  background: rgba(254, 242, 242, 0.86);
}

.public-procurement-card-deadline.is-complete {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(240, 253, 244, 0.84);
}

.public-procurement-card-date {
  color: #111827;
  font-size: 1.02rem;
  font-weight: 950;
}

.public-procurement-card-deadline-hint {
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 800;
}

.public-procurement-card-amount {
  align-items: flex-end;
  text-align: right;
}

.public-procurement-card-amount .public-procurement-card-value {
  color: #4c1d95;
}

.public-procurement-card-meta {
  align-items: flex-start;
}

.public-procurement-card-document-count {
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
  font-weight: 850;
}

.public-procurement-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.96);
  color: #4c1d95;
}

.public-procurement-card-action svg {
  width: 18px;
  height: 18px;
}

.public-procurement-form {
  display: grid;
  gap: 16px;
}

.public-procurement-date-field {
  max-width: 210px;
}

.public-procurement-documents {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(220, 229, 244, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.public-procurement-documents-list {
  display: grid;
  gap: 8px;
}

.public-procurement-document-row {
  padding: 10px 12px;
  border: 1px solid rgba(222, 230, 244, 0.92);
  border-radius: 14px;
  background: #fff;
}

.public-procurement-document-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.public-procurement-document-copy strong {
  color: #1f2937;
  font-size: 0.86rem;
}

.public-procurement-document-copy span {
  color: #7a849a;
  font-size: 0.76rem;
}

.public-procurement-document-actions {
  display: inline-flex;
  gap: 6px;
}

@media (max-width: 1180px) {
  .public-procurement-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-order-premium-summary {
    grid-template-columns: repeat(7, minmax(158px, 1fr));
  }

  .public-procurement-card {
    grid-template-columns: minmax(134px, 0.28fr) minmax(220px, 1fr) minmax(110px, 0.24fr) minmax(76px, auto);
  }

  .public-procurement-card-meta {
    display: none;
  }
}

@media (max-width: 720px) {
  .public-procurement-stats,
  .public-procurement-filters {
    grid-template-columns: 1fr;
  }

  .public-procurement-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-procurement-card {
    grid-template-columns: 1fr;
  }

  .public-procurement-card-amount {
    align-items: flex-start;
    text-align: left;
  }

  .public-procurement-card-action {
    display: none;
  }

  .public-procurement-editor-panel.is-modal-open {
    inset: 10px;
    width: auto;
    height: auto;
    transform: none;
    border-radius: 20px;
  }

  .work-order-premium-summary {
    grid-template-columns: repeat(7, minmax(154px, 1fr));
  }
}

/* Novi zapisnik SaaS refresh */
.app-shell {
  padding: 0;
  background: #f6f7fb;
}

.app-frame {
  min-height: 100vh;
  padding: 12px;
  gap: 12px;
  grid-template-columns: 62px minmax(220px, 240px) minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: #f6f7fb;
  box-shadow: none;
}

.app-frame.is-sidebar-collapsed {
  grid-template-columns: 62px 0 minmax(0, 1fr);
}

.app-frame.is-rail-hidden {
  grid-template-columns: 0 minmax(220px, 240px) minmax(0, 1fr);
}

.app-rail,
.app-sidebar {
  min-height: calc(100vh - 24px);
  border: 1px solid rgba(124, 92, 255, 0.2);
  background:
    radial-gradient(circle at 22% 0%, rgba(124, 58, 237, 0.28), transparent 31%),
    linear-gradient(180deg, #081029 0%, #070b24 54%, #030712 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(4, 8, 24, 0.24);
}

.app-rail {
  top: 12px;
  border-radius: 22px;
}

.app-sidebar {
  top: 12px;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
}

.sidebar-brand-pill {
  padding: 8px 9px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: #f8fbff;
  box-shadow: none;
}

.sidebar-brand-pill:hover {
  border-color: rgba(124, 92, 255, 0.46);
  background: rgba(124, 92, 255, 0.12);
  box-shadow: 0 12px 28px rgba(76, 29, 149, 0.22);
}

.sidebar-brand-meta strong {
  color: #ffffff;
}

.sidebar-brand-meta span {
  color: rgba(226, 232, 255, 0.66);
}

.sidebar-collapse-button,
.rail-toggle-button,
.rail-restore-button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 248, 255, 0.82);
}

.sidebar-collapse-button:hover,
.rail-toggle-button:hover,
.rail-restore-button:hover {
  border-color: rgba(124, 92, 255, 0.46);
  background: rgba(124, 92, 255, 0.16);
}

.sidebar-groups {
  gap: 7px;
}

.sidebar-group {
  gap: 5px;
}

.sidebar-group-toggle {
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 13px;
  color: rgba(226, 232, 255, 0.74);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.sidebar-group.is-open .sidebar-group-toggle,
.sidebar-group-toggle:hover {
  border-color: rgba(124, 92, 255, 0.26);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.sidebar-group-icon,
.tab-button-icon {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 255, 0.82);
}

.sidebar-group-caret {
  color: rgba(226, 232, 255, 0.48);
}

.sidebar-group-items {
  gap: 4px;
  padding-left: 4px;
}

.sidebar-link {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: rgba(235, 238, 255, 0.82);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.sidebar-link strong {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 750;
}

.sidebar-link:hover {
  transform: translateX(1px);
  border-color: rgba(124, 92, 255, 0.26);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-link.is-active {
  border-color: rgba(124, 92, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(92, 56, 255, 0.96), rgba(124, 58, 237, 0.82));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(167, 139, 250, 0.12),
    0 12px 28px rgba(91, 33, 182, 0.34);
}

.sidebar-link.is-active .tab-button-icon {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.rail-button,
.app-rail-logo {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 248, 255, 0.86);
  box-shadow: none;
}

.rail-button:hover,
.rail-button.is-active {
  border-color: rgba(124, 92, 255, 0.52);
  background: rgba(124, 92, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(76, 29, 149, 0.24);
}

body.is-document-template-editor-open .document-template-editor-backdrop {
  background: rgba(246, 247, 251, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.document-template-editor-panel.is-modal-open.is-fill-mode {
  --document-template-runtime-nav-gutter: 18px;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--document-template-runtime-nav-gutter) !important;
  right: var(--document-template-runtime-nav-gutter) !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  border: 0;
  border-radius: 0;
  background: #f6f7fb;
  box-shadow: none;
  transform: none !important;
}

.document-template-editor-panel.is-fill-mode .document-template-editor-body {
  padding: 12px;
  overflow: auto;
  background: #f6f7fb;
}

.document-template-editor-panel.is-fill-mode .document-template-form {
  min-height: 100%;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.document-template-editor-panel.is-fill-mode .document-template-workspace-head {
  position: sticky;
  top: 0;
  z-index: 14;
  margin: 0;
  padding: 10px 12px;
  min-height: 58px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(220, 225, 238, 0.88);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(35, 45, 72, 0.07);
}

.document-template-editor-panel.is-fill-mode .document-template-workspace-head-copy > h3,
.document-template-editor-panel.is-fill-mode .document-template-workspace-head-copy #document-template-editor-title {
  display: block !important;
  margin: 0;
  color: #0f1640;
  font-size: 1.16rem;
  line-height: 1.2;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-header-badges {
  display: none !important;
}

.document-template-editor-panel.is-fill-mode .document-template-head-actions {
  gap: 8px;
  align-items: center;
}

.document-template-editor-panel.is-fill-mode .document-template-head-actions .ghost-button,
.document-template-editor-panel.is-fill-mode .document-template-head-actions .primary-button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 12px;
  font-size: 0.82rem;
  box-shadow: none;
}

.document-template-editor-panel.is-fill-mode .document-template-program-workspace-block {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(230px, 15vw, 260px);
  gap: 14px;
  align-items: start;
  min-height: 0;
  padding: 0 0 2px;
}

.document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-builder-shell {
  grid-template-columns: clamp(220px, 15vw, 240px) minmax(0, 1fr) clamp(230px, 14vw, 260px);
}

.document-template-runtime-status-panel {
  order: 1;
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  max-width: 240px;
  padding: 14px 13px;
  border: 1px solid rgba(222, 226, 238, 0.96);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(28, 38, 65, 0.08);
}

.document-template-runtime-status-panel[hidden] {
  display: none !important;
}

.document-template-runtime-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.document-template-runtime-status-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-template-runtime-status-head span:first-child {
  color: #4c1d95;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.document-template-runtime-status-head strong {
  color: #111735;
  font-size: 0.94rem;
  line-height: 1.15;
}

.document-template-runtime-status-counter {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.12);
  color: #4f2ed1;
  font-size: 0.76rem;
  font-weight: 900;
}

.document-template-runtime-status-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f7;
}

.document-template-runtime-status-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  box-shadow: 0 0 18px rgba(124, 58, 237, 0.3);
  transition: width 0.2s ease;
}

.document-template-runtime-status-list {
  position: relative;
  display: grid;
  gap: 6px;
}

.document-template-runtime-status-list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 13px;
  width: 1px;
  background: linear-gradient(180deg, rgba(124, 92, 255, 0.18), rgba(17, 24, 39, 0.08));
  pointer-events: none;
}

.document-template-runtime-status-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 7px 6px 0;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #182044;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.document-template-runtime-status-item:hover,
.document-template-runtime-status-item:focus-visible {
  border-color: rgba(124, 92, 255, 0.24);
  background: #f8f7ff;
  box-shadow: 0 10px 22px rgba(76, 29, 149, 0.08);
  outline: none;
}

.document-template-runtime-status-item.is-active {
  border-color: rgba(124, 92, 255, 0.38);
  background: linear-gradient(180deg, rgba(248, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 14px 28px rgba(76, 29, 149, 0.12);
}

.document-template-runtime-status-step {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(124, 92, 255, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #4f2ed1;
  font-size: 0.72rem;
  font-weight: 900;
}

.document-template-runtime-status-item.is-active .document-template-runtime-status-step {
  border-color: rgba(124, 92, 255, 0.78);
  background: #4f2ed1;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.14);
}

.document-template-runtime-status-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-template-runtime-status-copy strong {
  overflow: hidden;
  color: #111735;
  font-size: 0.8rem;
  line-height: 1.15;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-status-copy small {
  overflow: hidden;
  color: #697189;
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-status-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 950;
}

.document-template-runtime-status-item.is-ok .document-template-runtime-status-icon {
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.document-template-runtime-status-item.is-warning .document-template-runtime-status-icon {
  border: 1px solid rgba(249, 115, 22, 0.3);
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.document-template-runtime-status-footer {
  padding: 9px 10px;
  border-radius: 12px;
  background: #f8f9fd;
  color: #4b5568;
  font-size: 0.72rem;
  font-weight: 800;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main {
  order: 2;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-builder-main {
  grid-column: 2;
}

.document-template-editor-panel.is-fill-mode .document-template-builder-main > .document-template-block {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(220, 225, 238, 0.9);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(28, 38, 65, 0.08);
}

.document-template-editor-panel.is-fill-mode .document-template-custom-fields,
.document-template-runtime-shell {
  gap: 8px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-ai-assistant {
  padding: 10px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(68, 84, 132, 0.08);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block {
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(224, 226, 238, 0.92);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 31, 58, 0.05);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block:hover {
  border-color: rgba(124, 92, 255, 0.26);
  box-shadow: 0 14px 30px rgba(63, 52, 120, 0.08);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block.is-ok {
  border-color: rgba(34, 197, 94, 0.28);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block.is-warning {
  border-color: rgba(248, 113, 113, 0.3);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-head {
  align-items: center;
  min-height: 34px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-head h4 {
  color: #141a46;
  font-size: 0.96rem;
  font-weight: 850;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-meta {
  color: #697189;
  font-size: 0.74rem;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-actions {
  gap: 7px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-status-dot {
  width: 10px;
  height: 10px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block-body {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card {
  grid-column: span var(--document-template-runtime-span, 6);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card[data-field-width="9"],
.document-template-editor-panel.is-fill-mode .document-template-runtime-field-card[data-field-width="full"] {
  grid-column: 1 / -1;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block .field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-readonly-card,
.document-template-editor-panel.is-fill-mode .document-template-runtime-legal-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-media-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-measurement-field,
.document-template-editor-panel.is-fill-mode .document-template-runtime-digital-signature-card {
  padding: 8px 10px;
  border: 1px solid rgba(218, 222, 235, 0.96);
  border-left: 0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block .field > span {
  margin-bottom: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #59627a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block input:not([type="checkbox"]):not([type="radio"]),
.document-template-editor-panel.is-fill-mode .document-template-runtime-block select,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea {
  min-height: 44px;
  border: 1px solid #dfe3ee;
  border-radius: 13px;
  background: #fbfcff;
  color: #111735;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block input:not([type="checkbox"]):not([type="radio"]):focus,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block select:focus,
.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea:focus {
  border-color: rgba(124, 92, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12);
}

.document-template-editor-panel.is-fill-mode .document-template-runtime-block textarea {
  min-height: 92px;
}

.document-template-runtime-handover-block {
  border-color: rgba(124, 92, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.98)),
    #ffffff;
}

.document-template-runtime-handover-body {
  display: grid;
  gap: 12px;
}

.document-template-runtime-handover-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(224, 226, 238, 0.94);
  border-radius: 16px;
  background: #fbfcff;
}

.document-template-runtime-handover-table-wrap {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(224, 226, 238, 0.94);
  border-radius: 16px;
  background: #ffffff;
}

.document-template-runtime-handover-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.document-template-runtime-handover-table-head strong {
  color: #151b46;
  font-size: 0.9rem;
  font-weight: 850;
}

.document-template-runtime-handover-rows {
  display: grid;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.document-template-runtime-handover-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(132px, 0.9fr) minmax(112px, 0.6fr) minmax(220px, 1.5fr) 36px;
  gap: 6px;
  min-width: 740px;
  align-items: start;
}

.document-template-runtime-handover-row.is-header {
  align-items: center;
  min-height: 26px;
  padding: 0 4px;
  color: #667085;
  font-size: 0.68rem;
  font-weight: 850;
}

.document-template-runtime-handover-row input,
.document-template-runtime-handover-row textarea {
  width: 100%;
  min-height: 38px !important;
  font-size: 0.8rem;
}

.document-template-runtime-handover-row textarea {
  resize: vertical;
}

.document-template-runtime-handover-remove {
  width: 34px;
  min-width: 34px;
  min-height: 38px;
  padding: 0;
  color: #b42318;
}

@media (max-width: 980px) {
  .document-template-runtime-handover-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .document-template-runtime-handover-details {
    grid-template-columns: 1fr;
  }
}

.document-template-runtime-side-panel {
  order: 3;
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  max-width: 260px;
}

.document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-runtime-side-panel {
  grid-column: 3;
}

.document-template-runtime-side-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(222, 226, 238, 0.96);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 30px rgba(34, 43, 70, 0.06);
}

.document-template-runtime-side-card-head {
  display: grid;
  gap: 2px;
}

.document-template-runtime-side-card-head span {
  color: #7b83a0;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.document-template-runtime-side-card-head strong {
  color: #12183d;
  font-size: 0.96rem;
}

.document-template-runtime-summary-panel {
  display: grid;
  gap: 7px;
}

.document-template-runtime-summary-row {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 12px;
  background: #f8f9fd;
}

.document-template-runtime-summary-row span {
  color: #777f99;
  font-size: 0.68rem;
  font-weight: 750;
}

.document-template-runtime-summary-row strong {
  min-width: 0;
  color: #12183d;
  font-size: 0.8rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-template-runtime-quick-actions {
  display: grid;
  gap: 7px;
}

.document-template-runtime-quick-action {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: 12px;
  text-align: left;
}

.document-template-runtime-quick-action > span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  border-radius: 10px;
  background: rgba(124, 92, 255, 0.11);
  color: #5536b8;
  font-size: 0.62rem;
  font-weight: 900;
}

.document-template-runtime-quick-action strong {
  min-width: 0;
  color: #171d42;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-bottom-bar,
.document-template-runtime-dock.work-order-bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  max-height: 110px;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(124, 92, 255, 0.34);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 92, 255, 0.28), transparent 30%),
    linear-gradient(135deg, #070b24 0%, #090d2f 48%, #120923 100%);
  box-shadow:
    0 -12px 38px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.document-template-runtime-dock.work-order-bottom-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 92px;
  padding: 12px 16px;
}

.document-template-runtime-dock.work-order-bottom-bar .document-template-runtime-dock-summary {
  display: none;
}

.document-template-runtime-dock-summary {
  display: grid;
  gap: 3px;
  min-width: 116px;
}

.document-template-runtime-dock-kicker {
  display: block;
  color: rgba(199, 210, 254, 0.7);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.document-template-runtime-dock-summary strong {
  color: #ffffff;
  font-size: 0.88rem;
}

.document-template-runtime-dock-summary span:last-child {
  color: rgba(226, 232, 255, 0.68);
  font-size: 0.7rem;
}

.document-template-runtime-dock-track-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.document-template-runtime-dock-track {
  order: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 2px 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.42) transparent;
}

.document-template-runtime-dock-track::-webkit-scrollbar {
  height: 6px;
}

.document-template-runtime-dock-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.36);
}

.document-template-runtime-dock-scroll {
  order: 2;
  width: 34px;
  height: 34px;
  opacity: 1;
  pointer-events: auto;
  border-radius: 12px;
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  box-shadow: none;
}

.document-template-runtime-dock-scroll + .document-template-runtime-dock-track + .document-template-runtime-dock-scroll,
#document-template-runtime-dock-scroll-next {
  order: 3;
}

.document-template-runtime-dock-scroll:hover,
.document-template-runtime-dock-scroll:focus-visible {
  border-color: rgba(167, 139, 250, 0.56);
  background: rgba(124, 92, 255, 0.2);
}

.work-order-bottom-card,
.document-template-runtime-dock-group.work-order-bottom-card {
  flex: 0 0 clamp(168px, 14vw, 218px);
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 168px;
  min-height: 66px;
  padding: 10px 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.82);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.work-order-bottom-card:hover,
.work-order-bottom-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(167, 139, 250, 0.62);
  background: rgba(20, 27, 54, 0.94);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.14),
    0 16px 28px rgba(2, 6, 23, 0.32);
}

.work-order-bottom-card.is-active {
  border-color: rgba(124, 92, 255, 0.78);
  background: linear-gradient(135deg, rgba(30, 41, 88, 0.98), rgba(49, 24, 91, 0.96));
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.2),
    0 0 30px rgba(124, 92, 255, 0.24);
}

.work-order-bottom-card.is-handover-active {
  border-color: rgba(34, 211, 238, 0.74);
  background: linear-gradient(135deg, rgba(13, 42, 68, 0.98), rgba(49, 24, 91, 0.94));
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.18),
    0 0 28px rgba(34, 211, 238, 0.18);
}

.work-order-bottom-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.work-order-bottom-card-head strong {
  min-width: 0;
  color: #f8fafc;
  font-size: 0.86rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-bottom-card-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #64748b;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.14);
}

.work-order-bottom-card-dot.is-ok {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.work-order-bottom-card-dot.is-error {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

.work-order-bottom-card-services {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

.work-order-bottom-card-service {
  flex: 0 1 auto;
  min-width: 40px;
  max-width: 58px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 9px;
  background: rgba(51, 65, 85, 0.78);
  color: #dbeafe;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-order-bottom-card-service.is-ok {
  border-color: rgba(34, 197, 94, 0.26);
  background: rgba(16, 112, 65, 0.72);
  color: #dcfce7;
}

.work-order-bottom-card-service.is-error {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.78);
  color: #fee2e2;
}

.work-order-bottom-card-service.is-neutral {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(51, 65, 85, 0.72);
  color: #cbd5e1;
}

.work-order-bottom-card-service.is-handover-action {
  flex: 0 0 34px;
  min-width: 34px;
  max-width: 34px;
  margin-left: auto;
  padding: 0;
  border-color: rgba(34, 211, 238, 0.26);
  background: rgba(8, 47, 73, 0.78);
  color: #cffafe;
  cursor: pointer;
}

.work-order-bottom-card-service.is-handover-action:hover,
.work-order-bottom-card-service.is-handover-action:focus-visible,
.work-order-bottom-card-service.is-handover-action.is-active {
  outline: none;
  border-color: rgba(34, 211, 238, 0.58);
  background: rgba(14, 116, 144, 0.78);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.14);
}

.work-order-bottom-card-service-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: inline-grid;
  place-items: center;
}

.work-order-bottom-card-service-icon svg {
  width: 13px;
  height: 13px;
}

.work-order-bottom-card-add-service {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(34, 211, 238, 0.38);
  border-radius: 10px;
  background: rgba(8, 47, 73, 0.92);
  color: #cffafe;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px) scale(0.88);
  box-shadow: 0 10px 22px rgba(8, 47, 73, 0.28);
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.work-order-bottom-card.is-service-add-visible .work-order-bottom-card-add-service,
.work-order-bottom-card-add-service:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.work-order-bottom-card-add-service:hover,
.work-order-bottom-card-add-service:focus-visible {
  outline: none;
  border-color: rgba(34, 211, 238, 0.7);
  background: rgba(14, 116, 144, 0.92);
  color: #ffffff;
}

.work-order-bottom-card.has-service-add.is-service-add-visible .work-order-bottom-card-head strong {
  padding-right: 32px;
}

.document-template-runtime-dock-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.document-template-runtime-dock-actions .ghost-button[hidden],
.document-template-runtime-dock-signature-mode .ghost-button[hidden] {
  display: none !important;
}

.document-template-runtime-dock-signature-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
}

.document-template-runtime-dock-actions .ghost-button,
.document-template-runtime-dock-signature-mode .ghost-button,
#document-template-runtime-dock-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 11px;
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: none;
}

.document-template-runtime-dock-actions .ghost-button:hover,
.document-template-runtime-dock-actions .ghost-button:focus-visible,
.document-template-runtime-dock-signature-mode .ghost-button:hover,
.document-template-runtime-dock-signature-mode .ghost-button:focus-visible,
.document-template-runtime-dock-signature-mode .ghost-button.is-active {
  border-color: rgba(167, 139, 250, 0.62);
  background: rgba(124, 92, 255, 0.2);
  color: #ffffff;
}

.document-template-runtime-dock-actions .ghost-button:disabled,
.document-template-runtime-dock-signature-mode .ghost-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.document-template-runtime-dock-actions .document-template-runtime-dock-nav {
  width: 34px;
  padding: 0;
  font-size: 1.18rem;
  line-height: 1;
}

#document-template-runtime-dock-back {
  gap: 8px;
  padding: 0 12px;
}

#document-template-runtime-dock-back::before {
  content: "";
  width: 15px;
  height: 12px;
  background:
    linear-gradient(#ffffff, #ffffff) 0 0 / 15px 2px no-repeat,
    linear-gradient(#ffffff, #ffffff) 0 5px / 15px 2px no-repeat,
    linear-gradient(#ffffff, #ffffff) 0 10px / 15px 2px no-repeat;
  opacity: 0.82;
}

#document-template-runtime-dock-back:hover,
#document-template-runtime-dock-back:focus-visible {
  border-color: rgba(167, 139, 250, 0.62);
  background: rgba(124, 92, 255, 0.2);
}

@media (max-width: 1180px) {
  .document-template-editor-panel.is-fill-mode .document-template-builder-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-builder-shell {
    grid-template-columns: minmax(200px, 230px) minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-runtime-status-panel {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }

  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-builder-main {
    grid-column: 2;
    grid-row: 1;
  }

  .document-template-runtime-side-panel {
    position: static;
    max-width: none;
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-runtime-side-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 960px) {
  .document-template-editor-panel.is-modal-open.is-fill-mode {
    --document-template-runtime-nav-gutter: 6px;
  }

  .document-template-editor-panel.is-fill-mode .document-template-editor-body {
    padding: 8px;
  }

  .document-template-editor-panel.is-fill-mode .document-template-workspace-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-builder-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-runtime-status-panel,
  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-builder-main,
  .document-template-editor-panel.is-fill-mode.has-runtime-status-panel .document-template-runtime-side-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .document-template-runtime-status-panel {
    position: static;
    max-width: none;
  }

  .document-template-editor-panel.is-fill-mode .document-template-runtime-block-body,
  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-bundle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-card,
  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-card[data-field-width="9"],
  .document-template-editor-panel.is-fill-mode .document-template-runtime-field-card[data-field-width="full"] {
    grid-column: 1 / -1;
  }

  .work-order-bottom-bar,
  .document-template-runtime-dock.work-order-bottom-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 102px;
    padding: 10px;
  }

  .document-template-runtime-dock-summary {
    display: none;
  }

  .work-order-bottom-card,
  .document-template-runtime-dock-group.work-order-bottom-card {
    flex-basis: 170px;
  }
}

@media (max-width: 720px) {
  .app-frame,
  .app-frame.is-rail-hidden {
    grid-template-columns: 0 0 minmax(0, 1fr);
    padding: 8px;
  }

  .app-rail,
  .app-sidebar {
    display: none;
  }

  .document-template-runtime-side-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-dock:not(.work-order-bottom-bar) .document-template-runtime-dock-actions {
    display: none;
  }

  .work-order-bottom-bar,
  .document-template-runtime-dock.work-order-bottom-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-template-runtime-dock.work-order-bottom-bar .document-template-runtime-dock-actions {
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

/* Batch zapisnici SaaS refresh */
.work-order-document-wizard-backdrop {
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.work-order-document-wizard-panel {
  top: 12px;
  width: min(1560px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(219, 224, 236, 0.94);
  border-radius: 22px;
  background: #f6f7fb;
  box-shadow: 0 30px 84px rgba(15, 23, 42, 0.28);
}

.work-order-document-wizard-panel.is-open {
  transform: translateX(-50%) translateY(0);
}

.work-order-document-wizard-head {
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(217, 222, 234, 0.92);
}

.work-order-document-wizard-head-copy {
  gap: 3px;
}

.work-order-document-wizard-head-copy .section-kicker {
  margin: 0;
  color: #4f46e5;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.work-order-document-wizard-head-copy h2 {
  color: #111735;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.work-order-document-wizard-head-copy .helper-copy {
  margin: 2px 0 0;
  color: #667085;
}

.work-order-document-wizard-head-actions .ghost-button,
.work-order-document-wizard-footer .ghost-button,
.work-order-document-wizard-footer .primary-button {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 850;
}

.work-order-document-wizard-head-actions .ghost-button {
  padding: 0 14px;
  border-color: rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.86);
  color: #26324d;
}

.work-order-document-wizard-body {
  gap: 12px;
  padding: 0 4px 0 0;
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

.work-order-document-wizard-body::-webkit-scrollbar {
  width: 9px;
}

.work-order-document-wizard-body::-webkit-scrollbar-thumb {
  border: 2px solid #f6f7fb;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.48);
}

.work-order-document-wizard-block {
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(218, 224, 236, 0.96);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(31, 42, 71, 0.08);
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-block {
  gap: 10px;
  padding: 13px 14px;
  border-color: rgba(124, 92, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 247, 255, 0.98)),
    #ffffff;
  box-shadow:
    inset 4px 0 0 rgba(109, 93, 252, 0.55),
    0 18px 42px rgba(31, 42, 71, 0.1);
}

.work-order-document-wizard-block-head {
  min-height: 34px;
}

.work-order-document-wizard-common-head {
  gap: 8px 12px;
}

.work-order-document-wizard-common-head > strong,
.work-order-document-wizard-subblock-copy strong,
.work-order-document-selection-section-head strong {
  color: #141a46;
  font-size: 0.88rem;
  font-weight: 900;
}

.work-order-document-wizard-common-summary,
.work-order-document-wizard-subblock-copy span,
.work-order-document-selection-section-head span {
  color: #667085;
  font-size: 0.74rem;
  line-height: 1.35;
}

.work-order-document-wizard-common-toggle,
.work-order-document-selection-section-toggle {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  border-radius: 10px;
  border-color: rgba(178, 190, 214, 0.82);
  background: #f8fafc;
  color: #4f46e5;
  font-size: 0.92rem;
  box-shadow: none;
}

.work-order-document-wizard-common-toggle:hover,
.work-order-document-wizard-common-toggle:focus-visible,
.work-order-document-selection-section-toggle:hover,
.work-order-document-selection-section-toggle:focus-visible {
  border-color: rgba(124, 92, 255, 0.45);
  background: #f3f1ff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.1);
}

.work-order-document-wizard-common-layout,
.work-order-document-wizard-sheet-panel {
  gap: 11px;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-layout,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-sheet-panel {
  gap: 8px;
}

.work-order-document-wizard-sheet-tabs {
  gap: 6px;
}

.work-order-document-wizard-sheet-tab {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border-color: rgba(203, 213, 225, 0.94);
  background: #ffffff;
  color: #39445f;
  font-size: 0.78rem;
  font-weight: 850;
  box-shadow: none;
}

.work-order-document-wizard-sheet-tab.is-active {
  border-color: rgba(124, 92, 255, 0.4);
  background: rgba(124, 92, 255, 0.1);
  color: #4f2ed1;
  box-shadow: 0 10px 22px rgba(124, 92, 255, 0.12);
}

.work-order-document-wizard-common-core,
.work-order-document-wizard-common-env-block,
.work-order-document-wizard-common-periods-block,
.work-order-document-wizard-common-person-block,
.work-order-document-selection-basic-block,
.work-order-document-selection-env-block,
.work-order-document-selection-services,
.work-order-document-selection-person-block,
.work-order-document-selection-learning-block,
.work-order-document-selection-section-block {
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-core,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-env-block,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-periods-block,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-person-block {
  gap: 7px;
  padding: 9px 10px;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-core {
  border-color: rgba(124, 92, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(250, 248, 255, 0.98), rgba(255, 255, 255, 0.99)),
    #ffffff;
  box-shadow:
    inset 3px 0 0 rgba(109, 93, 252, 0.42),
    0 12px 28px rgba(79, 70, 229, 0.08);
}

.work-order-document-wizard-common-person-block,
.work-order-document-selection-person-block {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}

.work-order-document-wizard-common-core-grid {
  grid-template-columns: minmax(118px, 0.56fr) minmax(118px, 0.56fr) minmax(168px, 0.82fr) minmax(168px, 0.82fr) minmax(240px, 1.3fr);
  gap: 9px;
}

.work-order-document-wizard-common-env-grid {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  gap: 8px;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-env-body {
  gap: 8px;
}

.work-order-document-wizard-common-person-area {
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(187, 247, 208, 0.8);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(240, 253, 244, 0.86), rgba(255, 255, 255, 0.98));
  box-shadow: inset 3px 0 0 rgba(34, 197, 94, 0.52);
}

.work-order-document-wizard-common-person-area-title {
  color: #14532d;
  font-size: 0.78rem;
  font-weight: 900;
}

.work-order-document-wizard-common-core-grid .field,
.work-order-document-wizard-common-env-grid .field,
.work-order-document-wizard-common-people-grid .field,
.work-order-document-selection-basic-grid .field,
.work-order-document-selection-env-grid .field,
.work-order-document-selection-person-grid .field,
.work-order-document-selection-person-area-grid .field,
.work-order-document-selection-picker-field,
.work-order-document-selection-grid .field {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 13px;
  background: #f8fafc;
  box-shadow: none;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-core-grid .field,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-env-grid .field,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-people-grid .field {
  gap: 4px;
  padding: 6px 8px;
}

.work-order-document-wizard-date-field,
.work-order-document-selection-date-field {
  max-width: 170px;
}

.work-order-document-wizard-common-core-grid .field > span,
.work-order-document-wizard-common-env-grid .field > span,
.work-order-document-wizard-common-people-grid .field > span,
.work-order-document-selection-basic-grid .field > span,
.work-order-document-selection-env-grid .field > span,
.work-order-document-selection-person-grid .field > span,
.work-order-document-selection-grid .field > span {
  margin-bottom: 5px;
  color: #59627a;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.work-order-document-wizard-common-core-grid input,
.work-order-document-wizard-common-core-grid select,
.work-order-document-wizard-common-env-grid input,
.work-order-document-selection-basic-grid input,
.work-order-document-selection-env-grid input,
.work-order-document-selection-grid input,
.work-order-document-selection-grid select,
.work-order-document-selection-grid textarea {
  min-height: 38px;
  border: 1px solid rgba(203, 213, 225, 0.98);
  border-radius: 11px;
  background: #ffffff;
  color: #111735;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-core-grid input,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-core-grid select,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-common-env-grid input {
  min-height: 32px;
  padding-block: 4px;
}

.work-order-document-wizard-date-field input,
.work-order-document-selection-date-field input {
  text-align: center;
  font-size: 0.84rem;
  letter-spacing: 0;
}

.work-order-document-wizard-common-core-grid input:focus,
.work-order-document-wizard-common-core-grid select:focus,
.work-order-document-wizard-common-env-grid input:focus,
.work-order-document-selection-basic-grid input:focus,
.work-order-document-selection-env-grid input:focus,
.work-order-document-selection-grid input:focus,
.work-order-document-selection-grid select:focus,
.work-order-document-selection-grid textarea:focus {
  border-color: rgba(124, 92, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12);
}

.work-order-document-field-with-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.work-order-document-field-with-hint input {
  flex: 1 1 auto;
  min-width: 0;
}

.work-order-document-weather-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  max-width: 46%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.96);
  color: #475569;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-order-document-weather-hint[data-weather-hint-status="ready"] {
  border-color: rgba(20, 184, 166, 0.32);
  background: rgba(240, 253, 250, 0.96);
  color: #0f766e;
}

.work-order-document-weather-hint[data-weather-hint-status="loading"] {
  border-color: rgba(124, 58, 237, 0.24);
  background: rgba(245, 243, 255, 0.94);
  color: #7c3aed;
}

.work-order-document-weather-hint[data-weather-hint-status="error"],
.work-order-document-weather-hint[data-weather-hint-status="empty"] {
  border-color: rgba(234, 88, 12, 0.22);
  background: rgba(255, 247, 237, 0.95);
  color: #9a3412;
}

.work-order-document-weather-hint[data-weather-hint-status="mixed"] {
  border-color: rgba(79, 70, 229, 0.24);
  background: rgba(238, 242, 255, 0.95);
  color: #4f46e5;
}

@media (max-width: 760px) {
  .work-order-document-field-with-hint {
    flex-wrap: wrap;
  }

  .work-order-document-weather-hint {
    max-width: 100%;
  }
}

.work-order-document-wizard-control-slot {
  min-height: 38px;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-control-slot {
  min-height: 32px;
}

.work-order-document-wizard-control-slot .work-item-status-trigger,
.work-order-document-wizard-control-slot .work-order-calendar-executor-trigger,
.work-order-document-wizard-control-slot .work-order-bulk-executor-trigger,
.work-order-document-wizard-control-slot .work-order-document-person-trigger,
.work-order-document-selection-picker-slot .work-order-document-person-trigger,
.work-order-document-selection-services-toolbar .work-order-service-picker-trigger {
  min-height: 38px;
  border: 1px solid rgba(203, 213, 225, 0.98);
  border-radius: 11px;
  background: #ffffff;
  color: #111735 !important;
  box-shadow: none;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-control-slot .work-item-status-trigger,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-control-slot .work-order-calendar-executor-trigger,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-control-slot .work-order-bulk-executor-trigger,
.work-order-document-wizard-panel.is-details-step .work-order-document-wizard-control-slot .work-order-document-person-trigger {
  min-height: 32px;
}

.work-order-document-person-trigger-label,
.work-order-document-wizard-control-slot .work-order-bulk-action-label,
.work-order-document-selection-picker-slot .work-order-bulk-action-label,
.work-order-document-selection-picker-slot .work-order-calendar-executor-trigger-label {
  color: #111735 !important;
  font-size: 0.76rem;
  font-weight: 850;
}

.work-order-document-randomize-field {
  padding: 9px 11px;
  border: 1px dashed rgba(190, 176, 255, 0.72);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(250, 248, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.work-order-document-wizard-panel.is-details-step .work-order-document-randomize-field {
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 5px 10px;
  padding: 7px 9px;
}

.work-order-document-wizard-panel.is-details-step .work-order-document-randomize-field > small {
  align-self: center;
}

.work-order-document-randomize-row input {
  accent-color: #6d5dfc;
}

.work-order-document-wizard-selection-summary {
  gap: 7px;
  padding: 0 2px;
}

.work-order-document-summary-pill {
  min-height: 30px;
  padding: 0 11px;
  border-color: rgba(203, 213, 225, 0.9);
  background: #ffffff;
  color: #26324d;
  font-size: 0.76rem;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(31, 42, 71, 0.04);
}

.work-order-document-wizard-work-orders,
.work-order-document-wizard-template-list {
  gap: 12px;
}

.work-order-document-wizard-step-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.work-order-document-wizard-work-orders[data-layout="double"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.work-order-document-wizard-work-orders[data-layout="triple"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-order-document-wizard-work-orders[data-layout="single"] {
  grid-template-columns: minmax(0, 1fr);
}

.work-order-document-wizard-work-orders.is-carousel {
  display: block;
}

.work-order-document-carousel-shell {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: stretch;
}

.work-order-document-carousel-nav {
  align-self: center;
  width: 40px;
  min-width: 40px;
  min-height: 44px;
  border-radius: 14px;
  border-color: rgba(124, 92, 255, 0.25);
  background: linear-gradient(180deg, #ffffff, #f5f3ff);
  color: #4f46e5;
  box-shadow: 0 14px 28px rgba(31, 42, 71, 0.12);
}

.work-order-document-carousel-nav:hover,
.work-order-document-carousel-nav:focus-visible {
  border-color: rgba(124, 92, 255, 0.42);
  background: #f3f1ff;
}

.work-order-document-carousel-nav:disabled {
  opacity: 0.38;
  box-shadow: none;
}

.work-order-document-carousel-track {
  gap: 12px;
  padding: 3px 3px 10px;
  scroll-padding-inline: 2px;
  scrollbar-color: rgba(100, 116, 139, 0.34) transparent;
}

.work-order-document-carousel-track .work-order-document-selection-card {
  flex: 0 0 calc((100% - 24px) / 3);
  min-width: 300px;
}

.work-order-document-selection-card,
.work-order-document-template-card,
.work-order-document-template-summary-card {
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(31, 42, 71, 0.07);
}

.work-order-document-selection-card {
  gap: 11px;
  padding: 14px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  box-shadow:
    0 16px 38px rgba(31, 42, 71, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.work-order-document-selection-card:hover {
  border-color: rgba(124, 92, 255, 0.36);
  box-shadow:
    0 20px 46px rgba(31, 42, 71, 0.14),
    0 0 0 3px rgba(124, 92, 255, 0.08);
  transform: translateY(-1px);
}

.work-order-document-selection-head,
.work-order-document-template-card-head {
  gap: 10px 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(228, 232, 241, 0.96);
}

.work-order-document-selection-copy {
  min-width: 0;
}

.work-order-document-selection-copy strong,
.work-order-document-template-card-copy strong {
  color: #111735;
  font-size: 1.08rem;
  line-height: 1.12;
  letter-spacing: 0;
}

.work-order-document-selection-subline,
.work-order-document-selection-company-copy span,
.work-order-document-selection-meta,
.work-order-document-selection-service-summary,
.work-order-document-template-card-copy span,
.work-order-document-template-card-footer span,
.work-order-document-template-card-note {
  color: #667085;
  font-size: 0.76rem;
  line-height: 1.4;
}

.work-order-document-selection-chips .document-template-meta-badge,
.work-order-document-template-card-badges .document-template-meta-badge,
.work-order-document-template-card-tags .document-template-meta-badge {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
}

.work-order-document-selection-chips,
.work-order-document-template-card-badges {
  gap: 6px;
  justify-content: flex-end;
}

.work-order-document-selection-executors {
  gap: 7px;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(190, 176, 255, 0.52);
  border-radius: 13px;
  background: rgba(250, 248, 255, 0.94);
}

.work-order-document-selection-executor,
.work-order-document-person-trigger .work-order-document-person-avatar {
  width: 24px;
  height: 24px;
}

.work-order-document-selection-executor-label {
  color: #26324d;
  font-size: 0.74rem;
  font-weight: 850;
}

.work-order-document-selection-grid {
  gap: 9px;
}

.work-order-document-wizard-work-orders[data-layout="triple"] .work-order-document-selection-grid,
.work-order-document-carousel-track .work-order-document-selection-grid {
  grid-template-columns: minmax(0, 1fr);
}

.work-order-document-selection-company-block {
  padding: 10px;
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 14px;
  background: #f8fafc;
}

.work-order-document-selection-company-logo {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 12px;
  border-color: rgba(203, 213, 225, 0.98);
  background: #ffffff;
}

.work-order-document-selection-company-copy strong {
  color: #111735;
  font-size: 0.84rem;
}

.work-order-document-selection-section-block::before {
  width: 3px;
  background: linear-gradient(180deg, #6d5dfc, #8b5cf6);
}

.work-order-document-selection-section-body {
  gap: 9px;
}

.work-order-document-selection-basic-grid {
  gap: 8px;
}

.work-order-document-selection-env-grid {
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 8px;
}

.work-order-document-selection-services-toolbar {
  gap: 7px;
}

.work-order-document-selection-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.work-order-document-selection-service-chip {
  width: auto;
  min-height: 30px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  border-color: rgba(190, 176, 255, 0.46);
  background: #f5f3ff;
  color: #4f2ed1;
  font-size: 0.72rem;
  font-weight: 900;
}

.work-order-document-selection-service-chip.is-completed {
  border-color: rgba(34, 197, 94, 0.34);
  background: #ecfdf3;
  color: #166534;
}

.work-order-document-selection-service-chip small {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.82);
  color: inherit;
  font-size: 0.64rem;
}

.work-order-document-selection-service-remove {
  color: currentColor;
  opacity: 0.65;
}

.work-order-document-selection-person-area {
  border-color: rgba(219, 224, 236, 0.96);
  background: #ffffff;
}

.work-order-document-selection-person-area-title {
  color: #141a46;
  font-size: 0.76rem;
  font-weight: 900;
}

.work-order-document-selection-person-area-grid {
  gap: 8px;
}

.work-order-document-learning-admin-card,
.work-order-document-learning-test-card,
.work-order-document-training-row,
.work-order-document-training-assignment-item {
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: none;
}

.work-order-document-training-card {
  gap: 10px;
}

.work-order-document-training-specialist {
  padding: 9px 10px;
  border: 1px solid rgba(219, 224, 236, 0.96);
  border-radius: 13px;
  background: #f8fafc;
  color: #475467;
  font-size: 0.76rem;
  font-weight: 750;
}

.work-order-document-training-tests,
.work-order-document-learning-test-list {
  gap: 8px;
}

.work-order-document-training-row {
  padding: 10px;
  gap: 9px;
}

.work-order-document-training-row-head strong,
.work-order-document-learning-admin-card strong,
.work-order-document-learning-test-copy strong {
  color: #111735;
  font-size: 0.88rem;
  font-weight: 900;
}

.work-order-document-training-row-head span,
.work-order-document-learning-admin-card span,
.work-order-document-learning-test-copy span,
.work-order-document-learning-test-note {
  color: #667085;
  font-size: 0.74rem;
  line-height: 1.4;
}

.work-order-document-training-row-controls .primary-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 900;
}

.work-order-document-training-external-grid {
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
}

.work-order-document-training-external-grid .field {
  padding: 8px 9px;
  border-radius: 12px;
  background: #ffffff;
}

.work-order-document-training-assignment-item {
  padding: 8px 10px;
}

.work-order-document-selection-footer {
  display: none;
}

.work-order-document-selection-rail {
  display: none;
}

.work-order-document-template-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.work-order-document-template-summary-card {
  display: grid;
  gap: 3px;
  padding: 12px;
}

.work-order-document-template-summary-card strong {
  color: #111735;
  font-size: 0.96rem;
}

.work-order-document-template-summary-card.is-warning {
  border-color: rgba(251, 146, 60, 0.32);
  background: #fff7ed;
}

.work-order-document-template-card {
  gap: 10px;
  padding: 13px;
}

.work-order-document-template-card-tags,
.work-order-document-template-card-work-orders {
  gap: 7px;
}

.work-order-document-template-work-order-chip {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(203, 213, 225, 0.86);
  background: #f8fafc;
  color: #26324d;
  font-size: 0.72rem;
  font-weight: 850;
}

.work-order-document-template-card-footer {
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(228, 232, 241, 0.96);
}

.work-order-document-template-card-footer .ghost-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 11px;
  border-color: rgba(124, 92, 255, 0.25);
  background: rgba(124, 92, 255, 0.1);
  color: #4f2ed1;
  font-size: 0.76rem;
  font-weight: 900;
}

.work-order-document-template-dock {
  bottom: -4px;
  padding-top: 2px;
}

.work-order-document-template-dock-shell {
  padding: 8px;
  border-radius: 16px;
  border-color: rgba(124, 92, 255, 0.26);
  background: #070b24;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.32);
}

.work-order-document-template-dock-type,
.work-order-document-template-dock-number {
  min-height: 28px;
  border-radius: 9px;
  background: rgba(30, 41, 88, 0.92);
  color: #eef2ff;
  box-shadow: none;
}

.work-order-document-template-dock-number {
  background: rgba(124, 92, 255, 0.22);
}

.work-order-document-template-dock-item.is-ro .work-order-document-template-dock-type,
.work-order-document-template-dock-item.is-ro .work-order-document-template-dock-number {
  background: rgba(6, 95, 70, 0.86);
}

.work-order-document-wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 -18px -14px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(217, 222, 234, 0.92);
  background: rgba(246, 247, 251, 0.94);
  box-shadow: 0 -16px 34px rgba(31, 42, 71, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.work-order-document-wizard-footer .primary-button {
  min-width: 132px;
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  box-shadow: 0 14px 26px rgba(79, 70, 229, 0.28);
}

#work-order-document-wizard-error {
  margin: 0;
  min-height: 0;
  color: #b42318;
  font-size: 0.8rem;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .work-order-document-wizard-common-core-grid,
  .work-order-document-wizard-common-env-grid,
  .work-order-document-wizard-common-person-area-grid,
  .work-order-document-selection-env-grid,
  .work-order-document-wizard-work-orders[data-layout="double"],
  .work-order-document-wizard-work-orders[data-layout="triple"],
  .work-order-document-template-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-order-document-carousel-track .work-order-document-selection-card {
    flex-basis: min(520px, calc((100% - 12px) / 2));
  }

  .work-order-document-training-external-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .work-order-document-wizard-panel {
    top: 8px;
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 12px;
    border-radius: 18px;
  }

  .work-order-document-wizard-body {
    padding-right: 0;
  }

  .work-order-document-wizard-common-core-grid,
  .work-order-document-wizard-common-env-grid,
  .work-order-document-wizard-common-people-grid,
  .work-order-document-wizard-common-person-area-grid,
  .work-order-document-selection-basic-grid,
  .work-order-document-selection-env-grid,
  .work-order-document-selection-person-area-grid,
  .work-order-document-selection-grid,
  .work-order-document-wizard-work-orders[data-layout="double"],
  .work-order-document-wizard-work-orders[data-layout="triple"],
  .work-order-document-template-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-document-carousel-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-document-carousel-nav {
    display: none;
  }

  .work-order-document-carousel-track .work-order-document-selection-card {
    flex-basis: min(420px, 88vw);
  }

  .work-order-document-training-external-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-order-document-wizard-head,
  .work-order-document-wizard-block-head,
  .work-order-document-selection-head,
  .work-order-document-template-card-head {
    align-items: flex-start;
  }

  .work-order-document-wizard-footer {
    margin: 0 -12px -12px;
    padding: 10px 12px 12px;
  }

.work-order-document-wizard-footer .primary-button,
.work-order-document-wizard-footer .ghost-button {
    flex: 1 1 auto;
  }
}

/* OZO enterprise module */
.risk-assessment-ppe-panel.ozo-react-panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  color: #111827;
  font-family: "Inter", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-top: 18px;
  overflow: hidden;
  padding: 0;
}

.ozo-loading-shell {
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #eef2f7 100%);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 180px;
  padding: 28px;
}

.ozo-loading-shell strong {
  color: #0f172a;
  font-size: 18px;
  letter-spacing: 0;
}

.ozo-loading-shell span {
  color: #64748b;
  font-size: 13px;
}

.ozo-module {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 28px);
  padding: 22px;
}

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

.ozo-module-header span {
  color: #64748b;
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ozo-module-header h3 {
  color: #0f172a;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 4px 0 0;
}

.ozo-module-stats {
  align-items: center;
  background: #0f172a;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  gap: 10px;
  min-width: 126px;
  padding: 12px 16px;
}

.ozo-module-stats strong {
  color: #facc15;
  font-size: 24px;
  line-height: 1;
}

.ozo-module-stats span {
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.ozo-filter-bar {
  align-items: stretch;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 0.95fr) minmax(360px, 2fr);
  margin-bottom: 18px;
  padding: 12px;
  position: sticky;
  top: 10px;
  z-index: 5;
}

.ozo-search {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 8px 12px;
}

.ozo-search span,
.ozo-new-form label span,
.ozo-selected-row label span {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ozo-search input,
.ozo-new-form input,
.ozo-new-form select,
.ozo-new-form textarea,
.ozo-selected-row input,
.ozo-selected-row textarea {
  background: transparent;
  border: 0;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  min-width: 0;
  outline: none;
  width: 100%;
}

.ozo-filter-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.ozo-filter-chips button {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.05);
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
}

.ozo-filter-chips button small {
  align-items: center;
  background: #eef2ff;
  border-radius: 999px;
  color: #0f172a;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  height: 22px;
  justify-content: center;
  min-width: 28px;
  padding: 0 7px;
}

.ozo-filter-chips button.is-active {
  background: #facc15;
  border-color: #eab308;
  box-shadow: 0 10px 24px rgba(250, 204, 21, 0.24);
  color: #0f172a;
}

.ozo-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(500px, 1.05fr) minmax(190px, 0.38fr) minmax(400px, 1fr);
  min-width: 0;
}

.ozo-worker-panel,
.ozo-category-sidebar,
.ozo-equipment-panel,
.ozo-new-form,
.ozo-selected-editor {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.07);
}

.ozo-worker-panel {
  overflow: hidden;
}

.ozo-worker-hero {
  aspect-ratio: 16 / 9;
  background: #edf2f7;
  min-height: 330px;
  overflow: hidden;
  position: relative;
}

.ozo-worker-hero > img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.ozo-worker-gradient {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0) 54%, rgba(15, 23, 42, 0.64) 100%);
  inset: 0;
  position: absolute;
}

.ozo-gear {
  pointer-events: none;
  position: absolute;
  transform-origin: center;
  z-index: 2;
}

.ozo-gear::before,
.ozo-gear::after {
  content: "";
  position: absolute;
}

.ozo-gear-head {
  background: linear-gradient(180deg, #ffe56c 0%, #facc15 58%, #d8a300 100%);
  border-radius: 55% 55% 26% 26% / 68% 68% 30% 30%;
  box-shadow: inset 0 3px 8px rgba(255, 255, 255, 0.55), 0 8px 16px rgba(15, 23, 42, 0.2);
}

.ozo-gear-head::before {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  height: 82%;
  left: 47%;
  top: 8%;
  transform: translateX(-50%);
  width: 9%;
}

.ozo-gear-head::after {
  background: #d99d00;
  border-radius: 999px;
  bottom: -8%;
  box-shadow: 0 3px 5px rgba(15, 23, 42, 0.18);
  height: 18%;
  left: -8%;
  width: 116%;
}

.ozo-gear-eyes {
  border: 3px solid rgba(7, 14, 28, 0.86);
  border-radius: 999px;
  box-shadow: inset 0 0 0 999px rgba(230, 246, 255, 0.34), 0 3px 10px rgba(15, 23, 42, 0.18);
}

.ozo-gear-eyes::before,
.ozo-gear-eyes::after {
  background: rgba(255, 255, 255, 0.38);
  border: 2px solid rgba(15, 23, 42, 0.55);
  border-radius: 46% 46% 54% 54%;
  height: 110%;
  top: -16%;
  width: 43%;
}

.ozo-gear-eyes::before {
  left: -2%;
}

.ozo-gear-eyes::after {
  right: -2%;
}

.ozo-gear-hearing {
  border-left: 4px solid #0f172a;
  border-right: 4px solid #0f172a;
  border-top: 3px solid #0f172a;
  border-radius: 999px 999px 42% 42%;
}

.ozo-gear-hearing::before,
.ozo-gear-hearing::after {
  background: linear-gradient(180deg, #facc15, #dba800);
  border: 2px solid #0f172a;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.22);
  height: 52%;
  top: 36%;
  width: 25%;
}

.ozo-gear-hearing::before {
  left: -20%;
}

.ozo-gear-hearing::after {
  right: -20%;
}

.ozo-gear-respiratory {
  background: linear-gradient(180deg, #e5e7eb, #94a3b8);
  border: 2px solid rgba(15, 23, 42, 0.72);
  border-radius: 38% 38% 54% 54%;
  box-shadow: inset 0 3px 7px rgba(255, 255, 255, 0.54), 0 4px 12px rgba(15, 23, 42, 0.18);
}

.ozo-gear-respiratory::before,
.ozo-gear-respiratory::after {
  background: #64748b;
  border-radius: 999px;
  height: 22%;
  top: 42%;
  width: 42%;
}

.ozo-gear-respiratory::before {
  left: -38%;
  transform: rotate(18deg);
}

.ozo-gear-respiratory::after {
  right: -38%;
  transform: rotate(-18deg);
}

.ozo-gear-body {
  background:
    linear-gradient(90deg, transparent 47%, rgba(15, 23, 42, 0.24) 47% 53%, transparent 53%),
    linear-gradient(180deg, #fbff5e, #facc15 70%, #d9a500);
  border: 1px solid rgba(161, 98, 7, 0.42);
  clip-path: polygon(18% 0, 82% 0, 97% 100%, 3% 100%);
  filter: drop-shadow(0 7px 12px rgba(15, 23, 42, 0.18));
  opacity: 0.92;
}

.ozo-gear-body::before,
.ozo-gear-body::after {
  background: rgba(255, 255, 255, 0.74);
  height: 8%;
  left: 8%;
  width: 84%;
}

.ozo-gear-body::before {
  top: 34%;
}

.ozo-gear-body::after {
  top: 61%;
}

.ozo-gear-hands::before,
.ozo-gear-hands::after {
  background: linear-gradient(180deg, #5b6472, #202733);
  border: 1px solid rgba(15, 23, 42, 0.52);
  border-radius: 45% 45% 52% 52%;
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.16), 0 4px 10px rgba(15, 23, 42, 0.22);
  height: 72%;
  top: 14%;
  width: 16%;
}

.ozo-gear-hands::before {
  left: 7%;
  transform: rotate(8deg);
}

.ozo-gear-hands::after {
  right: 7%;
  transform: rotate(-8deg);
}

.ozo-gear-feet::before,
.ozo-gear-feet::after {
  background: linear-gradient(180deg, #7c4a1d, #24160e 74%);
  border-radius: 45% 55% 30% 36%;
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.18), 0 6px 10px rgba(15, 23, 42, 0.22);
  height: 70%;
  top: 14%;
  width: 34%;
}

.ozo-gear-feet::before {
  left: 6%;
  transform: rotate(3deg);
}

.ozo-gear-feet::after {
  right: 6%;
  transform: rotate(-3deg);
}

.ozo-gear-knees::before,
.ozo-gear-knees::after {
  background: linear-gradient(180deg, #1f2937, #0f172a);
  border: 1px solid rgba(250, 204, 21, 0.72);
  border-radius: 45% 45% 55% 55%;
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.16), 0 5px 12px rgba(15, 23, 42, 0.22);
  height: 62%;
  top: 18%;
  width: 20%;
}

.ozo-gear-knees::before {
  left: 24%;
  transform: rotate(2deg);
}

.ozo-gear-knees::after {
  right: 24%;
  transform: rotate(-2deg);
}

.ozo-gear-fall {
  background:
    linear-gradient(62deg, transparent 43%, #facc15 43% 50%, transparent 50%),
    linear-gradient(-62deg, transparent 43%, #facc15 43% 50%, transparent 50%);
  border-bottom: 4px solid #facc15;
  border-top: 4px solid #facc15;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.2));
}

.ozo-gear-fall::before {
  background: #0f172a;
  border: 2px solid #facc15;
  border-radius: 999px;
  height: 18%;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 18%;
}

.ozo-gear-other {
  background: rgba(15, 23, 42, 0.82);
  border: 2px solid #facc15;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
}

.ozo-gear-other::before {
  background: #facc15;
  border-radius: inherit;
  height: 38%;
  left: 31%;
  top: 31%;
  width: 38%;
}

.ozo-gear-head.is-male { left: 21.7%; top: 5.8%; width: 8.2%; height: 5.2%; }
.ozo-gear-head.is-female { left: 71.1%; top: 6%; width: 7.2%; height: 4.8%; }
.ozo-gear-eyes.is-male { left: 22.9%; top: 13.8%; width: 5.3%; height: 1.5%; }
.ozo-gear-eyes.is-female { left: 72.4%; top: 13.8%; width: 4.6%; height: 1.35%; }
.ozo-gear-hearing.is-male { left: 21.4%; top: 11.8%; width: 6.7%; height: 5%; }
.ozo-gear-hearing.is-female { left: 71%; top: 12%; width: 5.9%; height: 4.5%; }
.ozo-gear-respiratory.is-male { left: 23.8%; top: 16.3%; width: 3.4%; height: 3.1%; }
.ozo-gear-respiratory.is-female { left: 73%; top: 16.1%; width: 3.1%; height: 2.8%; }
.ozo-gear-body.is-male { left: 20.5%; top: 22.3%; width: 11.9%; height: 25%; }
.ozo-gear-body.is-female { left: 69.9%; top: 22.6%; width: 10.9%; height: 24.2%; }
.ozo-gear-hands.is-male { left: 16.8%; top: 49.5%; width: 17.5%; height: 8.2%; }
.ozo-gear-hands.is-female { left: 66.8%; top: 49.6%; width: 16.3%; height: 7.8%; }
.ozo-gear-feet.is-male { left: 17.2%; top: 90.2%; width: 14.8%; height: 6.4%; }
.ozo-gear-feet.is-female { left: 67.5%; top: 90.6%; width: 13.6%; height: 6%; }
.ozo-gear-knees.is-male { left: 18.3%; top: 68.5%; width: 13.2%; height: 5.4%; }
.ozo-gear-knees.is-female { left: 68.4%; top: 68.7%; width: 12.2%; height: 5.1%; }
.ozo-gear-fall.is-male { left: 20.4%; top: 22.1%; width: 12.2%; height: 28%; }
.ozo-gear-fall.is-female { left: 69.8%; top: 22.4%; width: 11.2%; height: 27%; }
.ozo-gear-other.is-male { left: 24.1%; top: 55.5%; width: 3.5%; height: 6.3%; }
.ozo-gear-other.is-female { left: 73.4%; top: 55.5%; width: 3.2%; height: 6%; }

.ozo-attach-point {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.ozo-attach-point b {
  background: #facc15;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.18), 0 10px 24px rgba(15, 23, 42, 0.24);
  height: 18px;
  width: 18px;
}

.ozo-attach-point small {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 6px 9px;
  white-space: nowrap;
}

.ozo-worker-summary {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ozo-worker-summary > div {
  background: #ffffff;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
}

.ozo-worker-summary span,
.ozo-sidebar-head span,
.ozo-selected-box > span,
.ozo-list-head small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ozo-worker-summary strong {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ozo-worker-selected-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 58px;
  padding: 13px 14px 16px;
}

.ozo-worker-selected-strip span {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 750;
  max-width: 100%;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozo-category-sidebar {
  align-self: start;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.ozo-sidebar-head {
  align-items: center;
  background: #0f172a;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 14px;
}

.ozo-sidebar-head strong {
  color: #facc15;
  font-size: 28px;
  line-height: 1;
}

.ozo-category-stack {
  display: grid;
  gap: 8px;
}

.ozo-category-metric {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 10px;
}

.ozo-category-metric span {
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozo-category-metric strong {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #0f172a;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  height: 26px;
  justify-content: center;
  min-width: 34px;
  padding: 0 8px;
}

.ozo-selected-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.ozo-selected-box strong {
  color: #0f172a;
  font-size: 28px;
  line-height: 1;
}

.ozo-selected-box div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ozo-selected-box small {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozo-sidebar-actions {
  display: grid;
  gap: 8px;
}

.ozo-sidebar-actions a,
.ozo-sidebar-actions button,
.ozo-new-actions button {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  text-decoration: none;
}

.ozo-sidebar-actions a {
  background: #ecfeff;
  border: 1px solid #bae6fd;
  color: #075985;
}

.ozo-sidebar-actions button,
.ozo-new-actions button {
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
  cursor: pointer;
}

.ozo-equipment-panel {
  min-width: 0;
  padding: 14px;
}

.ozo-list-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ozo-list-head > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ozo-list-head span {
  color: #0f172a;
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
}

.ozo-list-head strong {
  color: #0f172a;
  font-size: 14px;
  letter-spacing: 0;
}

.ozo-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  min-width: 0;
}

.ozo-equipment-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  position: relative;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.ozo-equipment-card:hover {
  border-color: rgba(250, 204, 21, 0.72);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.ozo-equipment-card.is-selected {
  border-color: #facc15;
  box-shadow: 0 18px 42px rgba(250, 204, 21, 0.2);
}

.ozo-equipment-card input[type="checkbox"] {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.ozo-card-media {
  aspect-ratio: 16 / 9;
  background: #f1f5f9;
  border-radius: 6px;
  display: block;
  overflow: hidden;
  position: relative;
}

.ozo-card-media > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ozo-card-icon {
  align-items: center;
  background: #0f172a;
  border: 3px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
  display: flex;
  height: 48px;
  justify-content: center;
  left: 10px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  width: 48px;
}

.ozo-card-icon img {
  height: 34px;
  object-fit: contain;
  width: 34px;
}

.ozo-card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ozo-card-kicker {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ozo-card-copy strong {
  color: #0f172a;
  display: -webkit-box;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.24;
  min-height: 40px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ozo-card-copy small {
  color: #0b58b4;
  display: block;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozo-card-copy em {
  color: #475569;
  display: -webkit-box;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
  min-height: 36px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ozo-card-footer {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ozo-status,
.ozo-select-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  min-height: 30px;
  padding: 0 10px;
}

.ozo-status.is-ready {
  background: #dcfce7;
  color: #15803d;
}

.ozo-select-pill {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}

.ozo-equipment-card.is-selected .ozo-select-pill {
  background: #facc15;
  border-color: #eab308;
}

.ozo-equipment-card.is-selected::after {
  align-items: center;
  background: #facc15;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
  color: #0f172a;
  content: "✓";
  display: flex;
  font-size: 14px;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 28px;
}

.ozo-new-form,
.ozo-selected-editor {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
}

.ozo-new-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ozo-new-form label,
.ozo-selected-row label {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
}

.ozo-new-form label:focus-within,
.ozo-selected-row label:focus-within,
.ozo-search:focus-within {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.18);
}

.ozo-new-form .is-wide {
  grid-column: span 2;
}

.ozo-new-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  grid-column: span 3;
  justify-content: space-between;
}

.ozo-new-actions span {
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.ozo-selected-editor {
  margin: 18px 0 0;
}

.ozo-selected-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 10px;
}

.ozo-selected-row .is-wide {
  grid-column: span 2;
}

.ozo-checkline {
  align-content: center;
  display: flex !important;
  flex-direction: row;
  gap: 8px !important;
}

.ozo-checkline input {
  accent-color: #facc15;
  height: 18px;
  width: 18px;
}

@media (max-width: 1360px) {
  .ozo-layout {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1.2fr);
  }

  .ozo-category-sidebar {
    grid-column: 1 / -1;
    grid-template-columns: minmax(160px, 0.4fr) minmax(260px, 1fr) minmax(200px, 0.6fr) minmax(180px, 0.5fr);
  }

  .ozo-category-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .ozo-module {
    padding: 16px;
  }

  .ozo-module-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ozo-filter-bar,
  .ozo-layout,
  .ozo-category-sidebar,
  .ozo-new-form,
  .ozo-selected-row {
    grid-template-columns: 1fr;
  }

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

  .ozo-new-form .is-wide,
  .ozo-new-actions,
  .ozo-selected-row .is-wide {
    grid-column: auto;
  }

  .ozo-new-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .ozo-module {
    padding: 12px;
  }

  .ozo-module-header h3 {
    font-size: 22px;
  }

  .ozo-filter-bar {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    position: static;
  }

  .ozo-filter-chips {
    contain: paint;
    flex-wrap: wrap;
    margin: 0 -2px;
    max-width: 100%;
    overflow: hidden;
    padding: 2px;
    width: 100%;
  }

  .ozo-worker-hero {
    min-height: 220px;
  }

  .ozo-worker-summary,
  .ozo-category-stack,
  .ozo-card-grid {
    grid-template-columns: 1fr;
  }

  .ozo-attach-point small {
    display: none;
  }
}

/* Animated OZO worker preview */
.ozo-worker-hero {
  aspect-ratio: auto;
  background:
    radial-gradient(circle at 50% 86%, rgba(148, 163, 184, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.96)),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.035) 0 1px, transparent 1px 56px);
  min-height: 500px;
  padding: 18px;
}

.ozo-worker-hero > img,
.ozo-worker-gradient,
.ozo-gear,
.ozo-attach-point {
  display: none;
}

.ozo-worker-stage-copy {
  display: grid;
  gap: 4px;
  max-width: 62%;
  position: relative;
  z-index: 3;
}

.ozo-worker-stage-copy span {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ozo-worker-stage-copy strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.18;
}

.ozo-stage-tags {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  left: 40%;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 4;
}

.ozo-stage-tags span {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
}

.ozo-animated-workers {
  align-items: end;
  bottom: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: 18px;
  position: absolute;
  right: 18px;
  top: 82px;
  z-index: 2;
}

.ozo-worker-figure {
  align-items: end;
  display: flex;
  height: 100%;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.ozo-worker-figure svg {
  display: block;
  filter: drop-shadow(0 20px 30px rgba(15, 23, 42, 0.2));
  height: min(100%, 396px);
  max-width: 238px;
  overflow: visible;
  width: 100%;
}

.ozo-worker-figure.is-female svg {
  max-width: 228px;
}

.ozo-svg-shadow {
  fill: rgba(15, 23, 42, 0.18);
}

.ozo-svg-leg,
.ozo-svg-body,
.ozo-svg-arm {
  stroke: rgba(15, 23, 42, 0.2);
  stroke-width: 2;
  stroke-linejoin: round;
}

.ozo-svg-neck,
.ozo-svg-head,
.ozo-svg-hand,
.ozo-svg-ear {
  stroke: rgba(120, 67, 34, 0.16);
  stroke-width: 1.5;
}

.ozo-svg-boot-base {
  stroke: rgba(15, 23, 42, 0.32);
  stroke-linejoin: round;
  stroke-width: 2;
}

.ozo-svg-hair,
.ozo-svg-hair-back {
  stroke: rgba(15, 23, 42, 0.18);
  stroke-width: 1.5;
}

.ozo-svg-eye {
  fill: #111827;
}

.ozo-svg-zip,
.ozo-svg-collar,
.ozo-svg-seam,
.ozo-svg-pocket-flap,
.ozo-svg-leg-highlight,
.ozo-svg-arm-highlight,
.ozo-svg-sole,
.ozo-svg-boot-detail {
  fill: none;
  stroke: rgba(226, 232, 240, 0.86);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.ozo-svg-collar {
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 3;
}

.ozo-svg-jacket-yoke {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.16);
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.ozo-svg-jacket-panel {
  fill: rgba(7, 24, 43, 0.2);
}

.ozo-svg-pocket {
  fill: rgba(9, 31, 54, 0.24);
  stroke: rgba(226, 232, 240, 0.18);
  stroke-width: 1.5;
}

.ozo-svg-knee,
.ozo-svg-cargo {
  fill: rgba(255, 255, 255, 0.075);
  stroke: rgba(226, 232, 240, 0.16);
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.ozo-svg-leg-highlight,
.ozo-svg-arm-highlight,
.ozo-svg-boot-detail {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
}

.ozo-svg-sole {
  stroke: rgba(15, 23, 42, 0.78);
  stroke-width: 4;
}

.ozo-svg-face-shadow,
.ozo-svg-beard {
  fill: rgba(78, 43, 27, 0.14);
}

.ozo-worker-svg.is-female .ozo-svg-face-shadow {
  fill: rgba(126, 78, 48, 0.09);
}

.ozo-svg-brow,
.ozo-svg-nose,
.ozo-svg-cheek,
.ozo-svg-face-line {
  fill: none;
  stroke: rgba(79, 44, 29, 0.66);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ozo-svg-brow {
  stroke: rgba(47, 33, 25, 0.8);
  stroke-width: 2.4;
}

.ozo-svg-nose,
.ozo-svg-cheek {
  stroke-width: 1.8;
}

.ozo-svg-face-line {
  stroke-width: 2.2;
}

.ozo-svg-gear {
  filter: drop-shadow(0 9px 12px rgba(15, 23, 42, 0.2));
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.ozo-svg-helmet path:first-child,
.ozo-svg-helmet rect {
  fill: #facc15;
  stroke: #a16207;
  stroke-width: 2;
}

.ozo-svg-helmet path:not(:first-child) {
  fill: none;
  stroke: rgba(113, 63, 18, 0.56);
  stroke-linecap: round;
  stroke-width: 3;
}

.ozo-svg-cap path {
  fill: #facc15;
  stroke: #0f172a;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ozo-svg-face-shield path:first-child {
  fill: rgba(186, 230, 253, 0.42);
  stroke: rgba(2, 132, 199, 0.88);
  stroke-width: 2.5;
}

.ozo-svg-face-shield rect {
  fill: #0f172a;
}

.ozo-svg-face-shield path:last-child {
  fill: none;
  stroke: rgba(255, 255, 255, 0.82);
  stroke-linecap: round;
  stroke-width: 3;
}

.ozo-svg-glasses path {
  fill: none;
  stroke: #0f172a;
  stroke-linecap: round;
  stroke-width: 4;
}

.ozo-svg-glasses rect {
  fill: rgba(224, 242, 254, 0.42);
  stroke: #0f172a;
  stroke-width: 3;
}

.ozo-svg-earmuffs path {
  fill: none;
  stroke: #0f172a;
  stroke-linecap: round;
  stroke-width: 5;
}

.ozo-svg-earmuffs rect {
  fill: #facc15;
  stroke: #0f172a;
  stroke-width: 3;
}

.ozo-svg-mask path:first-child,
.ozo-svg-respirator path:first-child {
  fill: #e5e7eb;
  stroke: #475569;
  stroke-width: 2.5;
}

.ozo-svg-mask path:not(:first-child),
.ozo-svg-respirator path:not(:first-child) {
  fill: none;
  stroke: #64748b;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.ozo-svg-respirator circle {
  fill: #64748b;
  stroke: #334155;
  stroke-width: 2.5;
}

.ozo-svg-vest path:first-child {
  fill: rgba(250, 204, 21, 0.94);
  stroke: rgba(161, 98, 7, 0.72);
  stroke-width: 2;
}

.ozo-svg-vest path:not(:first-child) {
  fill: none;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-linecap: round;
  stroke-width: 7;
}

.ozo-svg-coverall path:first-child {
  fill: rgba(224, 242, 254, 0.62);
  stroke: rgba(2, 132, 199, 0.74);
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.ozo-svg-coverall path:not(:first-child) {
  fill: none;
  stroke: rgba(2, 132, 199, 0.74);
  stroke-linecap: round;
  stroke-width: 3;
}

.ozo-svg-harness path {
  fill: none;
  stroke: #facc15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
}

.ozo-svg-harness circle {
  fill: #0f172a;
  stroke: #facc15;
  stroke-width: 4;
}

.ozo-svg-gloves path,
.ozo-svg-kneepads rect {
  fill: #374151;
  stroke: #111827;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.ozo-svg-gloves path:nth-child(n + 3) {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-linecap: round;
  stroke-width: 2;
}

.ozo-svg-boots path {
  fill: #7c4a1d;
  stroke: #1f2937;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.ozo-svg-boots path:nth-child(n + 3) {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-linecap: round;
  stroke-width: 2;
}

@media (max-width: 1360px) {
  .ozo-worker-hero {
    min-height: 445px;
  }
}

@media (max-width: 980px) {
  .ozo-worker-hero {
    min-height: 470px;
  }

  .ozo-worker-figure svg {
    max-width: 230px;
  }
}

@media (max-width: 640px) {
  .ozo-worker-hero {
    min-height: 410px;
    padding: 14px;
  }

  .ozo-worker-stage-copy {
    max-width: 100%;
    padding-right: 0;
  }

  .ozo-worker-stage-copy strong {
    font-size: 16px;
  }

  .ozo-stage-tags {
    justify-content: flex-start;
    left: 14px;
    right: 14px;
    top: 66px;
  }

  .ozo-stage-tags span {
    font-size: 10px;
    padding: 7px 8px;
  }

  .ozo-animated-workers {
    bottom: 12px;
    gap: 4px;
    left: 8px;
    right: 8px;
    top: 118px;
  }

  .ozo-worker-figure svg,
  .ozo-worker-figure.is-female svg {
    max-width: 158px;
  }
}

/* Premium 3D OZO worker stage */
.ozo-worker-hero.is-three {
  background:
    radial-gradient(circle at 50% 88%, rgba(15, 23, 42, 0.15), transparent 28%),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 46%, #e8eef6 100%);
  min-height: 545px;
}

.ozo-worker-hero.is-three .ozo-worker-stage-copy {
  max-width: 100%;
}

.ozo-worker-hero.is-three .ozo-stage-tags {
  justify-content: flex-start;
  left: 18px;
  right: 18px;
  top: 78px;
}

.ozo-worker-canvas-wrap {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 116px;
  z-index: 1;
}

.ozo-worker-canvas {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

.ozo-worker-depth-grid {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  inset: 14px 10px 86px;
  mask-image: radial-gradient(circle at 50% 56%, rgba(0, 0, 0, 0.55), transparent 70%);
  opacity: 0.7;
  position: absolute;
  z-index: 0;
}

.ozo-worker-floor-glow {
  background:
    radial-gradient(ellipse at 50% 65%, rgba(15, 23, 42, 0.16), transparent 38%),
    radial-gradient(ellipse at 50% 74%, rgba(250, 204, 21, 0.12), transparent 42%);
  bottom: 12px;
  height: 170px;
  left: 8%;
  position: absolute;
  right: 8%;
  z-index: 0;
}

.ozo-gear-markers {
  display: none;
}

.ozo-worker-hero.is-three .ozo-worker-stage-copy,
.ozo-worker-hero.is-three .ozo-stage-tags {
  z-index: 5;
}

.ozo-worker-hero.is-three .ozo-stage-tags span {
  backdrop-filter: blur(10px);
}

@media (max-width: 1360px) {
  .ozo-worker-hero.is-three {
    min-height: 525px;
  }
}

@media (max-width: 980px) {
  .ozo-worker-hero.is-three {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .ozo-worker-hero.is-three {
    min-height: 440px;
  }

  .ozo-worker-hero.is-three .ozo-stage-tags {
    top: 82px;
  }

  .ozo-worker-canvas-wrap {
    top: 136px;
  }

  .ozo-worker-depth-grid {
    background-size: 38px 38px;
    inset: 8px 4px 72px;
  }
}

/* AI-rendered OZO worker atlas + compact enterprise equipment list */
.ozo-layout {
  align-items: start;
  grid-template-columns: minmax(520px, 1.1fr) minmax(172px, 0.34fr) minmax(430px, 0.95fr);
}

.ozo-worker-hero.is-ai {
  background:
    radial-gradient(circle at 50% 82%, rgba(15, 23, 42, 0.14), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 46%, #e8eef6 100%);
  min-height: 560px;
  padding: 18px;
}

.ozo-worker-hero.is-ai .ozo-worker-stage-copy {
  max-width: 58%;
  z-index: 5;
}

.ozo-worker-hero.is-ai .ozo-stage-tags {
  justify-content: flex-start;
  left: 18px;
  max-height: 78px;
  overflow: hidden;
  right: 18px;
  top: 82px;
  z-index: 5;
}

.ozo-worker-hero.is-ai .ozo-stage-tags span {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.84);
}

.ozo-worker-image-wrap {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 96px;
  z-index: 1;
}

.ozo-ai-worker-image {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  width: 100%;
}


.ozo-worker-image-sheen {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.18) 0%, rgba(248, 250, 252, 0.02) 28%, rgba(15, 23, 42, 0.06) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.32));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.ozo-worker-panel .ozo-worker-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ozo-card-grid {
  gap: 8px;
  grid-template-columns: 1fr;
  max-height: min(780px, calc(100vh - 260px));
  overflow-y: auto;
  padding: 2px 4px 8px 0;
  scrollbar-color: #cbd5e1 transparent;
}

.ozo-equipment-card.is-compact {
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  min-height: 74px;
  overflow: visible;
  padding: 9px 10px;
}

.ozo-equipment-card.is-compact:hover {
  border-color: rgba(250, 204, 21, 0.82);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}

.ozo-equipment-card.is-compact.is-selected {
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.14), #ffffff 34%);
  box-shadow: 0 14px 34px rgba(250, 204, 21, 0.18);
}

.ozo-equipment-card.is-compact .ozo-card-icon {
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: none;
  height: 44px;
  left: auto;
  position: relative;
  top: auto;
  width: 44px;
}

.ozo-equipment-card.is-compact .ozo-card-icon img {
  height: 26px;
  object-fit: contain;
  width: 26px;
}

.ozo-equipment-card.is-compact .ozo-card-copy {
  gap: 3px;
}

.ozo-equipment-card.is-compact .ozo-card-kicker {
  color: #64748b;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.ozo-equipment-card.is-compact .ozo-card-copy strong {
  font-size: 13px;
  line-height: 1.22;
  min-height: 0;
}

.ozo-equipment-card.is-compact .ozo-card-copy small {
  align-items: center;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  color: #0b58b4;
  display: inline-flex;
  font-size: 11px;
  line-height: 1;
  max-width: 100%;
  min-height: 22px;
  padding: 0 8px;
  width: max-content;
}

.ozo-equipment-card.is-compact .ozo-select-pill {
  border-color: #dbe3ef;
  font-size: 11px;
  min-height: 30px;
  padding: 0 9px;
  white-space: nowrap;
}

.ozo-equipment-card.is-compact.is-selected .ozo-select-pill {
  background: #facc15;
  border-color: #eab308;
  color: #0f172a;
}

.ozo-equipment-card.is-compact::after {
  display: none;
}

.ozo-equipment-card.is-compact.is-selected .ozo-card-icon {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.ozo-equipment-card.is-compact.is-selected .ozo-card-icon::after {
  border: solid #facc15;
  border-width: 0 2px 2px 0;
  content: "";
  height: 12px;
  position: absolute;
  right: 8px;
  top: 6px;
  transform: rotate(45deg);
  width: 6px;
}

.ozo-equipment-card.is-compact .ozo-card-media,
.ozo-equipment-card.is-compact .ozo-card-footer,
.ozo-equipment-card.is-compact .ozo-status,
.ozo-equipment-card.is-compact .ozo-card-copy em {
  display: none;
}

@media (max-width: 1360px) {
  .ozo-layout {
    grid-template-columns: minmax(430px, 1fr) minmax(410px, 1.05fr);
  }

  .ozo-equipment-panel {
    grid-column: 2;
    grid-row: 1;
  }

  .ozo-category-sidebar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ozo-worker-hero.is-ai {
    min-height: 525px;
  }
}

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

  .ozo-equipment-panel,
  .ozo-category-sidebar {
    grid-column: auto;
    grid-row: auto;
  }

  .ozo-worker-panel .ozo-worker-summary {
    grid-template-columns: 1fr;
  }

  .ozo-card-grid {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .ozo-worker-hero.is-ai {
    min-height: 420px;
  }

  .ozo-worker-hero.is-ai .ozo-worker-stage-copy {
    max-width: 72%;
  }

  .ozo-worker-hero.is-ai .ozo-stage-tags {
    top: 92px;
  }

  .ozo-worker-image-wrap {
    top: 116px;
  }

  .ozo-equipment-card.is-compact {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .ozo-equipment-card.is-compact .ozo-select-pill {
    grid-column: 2;
    justify-self: start;
  }
}

.risk-assessment-ppe-worker-preview {
  overflow: hidden;
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.075);
}

.risk-assessment-ppe-compact .risk-assessment-ppe-worker-preview {
  margin-top: 2px;
}

.risk-assessment-ppe-compact .ozo-worker-hero.is-ai {
  min-height: 430px;
  border-radius: 16px 16px 0 0;
  background:
    radial-gradient(circle at 50% 84%, rgba(15, 23, 42, 0.12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 44%, #e8eef6 100%);
}

.risk-assessment-ppe-compact .ozo-worker-hero.is-ai .ozo-worker-stage-copy {
  max-width: 62%;
}

.risk-assessment-ppe-compact .ozo-worker-hero.is-ai .ozo-stage-tags {
  top: 76px;
}

.risk-assessment-ppe-compact .ozo-worker-image-wrap {
  top: 104px;
}


.risk-assessment-ppe-compact .ozo-worker-panel .ozo-worker-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.risk-assessment-ppe-compact .ozo-worker-selected-strip {
  min-height: 40px;
  padding: 0 10px 10px;
}

.risk-assessment-ppe-compact .ozo-worker-selected-strip:empty {
  display: none;
}

@media (max-width: 980px) {
  .risk-assessment-ppe-compact .ozo-worker-hero.is-ai {
    min-height: 390px;
  }

  .risk-assessment-ppe-compact .ozo-worker-panel .ozo-worker-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .risk-assessment-ppe-compact .ozo-worker-hero.is-ai {
    min-height: 340px;
  }

  .risk-assessment-ppe-compact .ozo-worker-hero.is-ai .ozo-worker-stage-copy {
    max-width: 74%;
  }

  .risk-assessment-ppe-compact .ozo-worker-hero.is-ai .ozo-stage-tags {
    top: 88px;
  }

  .risk-assessment-ppe-compact .ozo-worker-image-wrap {
    top: 118px;
  }
}

@media (max-width: 1100px) {
  .client-portal-record-overview,
  .client-portal-record-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-portal-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-action-grid,
  .client-portal-document-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-portal-record-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .client-portal-record-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .client-portal-record-overview,
  .client-portal-record-tabs,
  .client-portal-record-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-action-grid,
  .client-portal-document-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-dashboard-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .client-portal-worker-training-dashboard-row,
  .client-portal-worker-training-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-dashboard-row-date,
  .client-portal-dashboard-row .client-portal-record-due-pill {
    grid-column: 2;
    justify-self: start;
  }

  .client-portal-ppe-table {
    overflow-x: auto;
  }

  .client-portal-ppe-row {
    min-width: 680px;
  }

  .client-portal-record-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-portal-record-modal {
    padding: 14px;
    place-items: end center;
  }

  .client-portal-record-dialog {
    max-height: 92vh;
  }

  .client-portal-record-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .client-portal-record-form-actions,
  .client-portal-record-card-actions {
    justify-content: flex-start;
  }

  .client-portal-record-card-status,
  .client-portal-record-card-actions {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .client-portal-record-card-status {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .client-portal-register-panel {
    gap: 14px;
  }

  .client-portal-record-summary-card,
  .client-portal-record-tab,
  .client-portal-record-form,
  .client-portal-record-list-section {
    padding: 11px;
  }

  .client-portal-record-tab {
    min-height: 70px;
  }

  .client-portal-record-list-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .client-portal-record-list-actions,
  .client-portal-record-add-button {
    width: 100%;
  }

  .client-portal-record-modal {
    padding: 10px;
  }

  .client-portal-record-modal-head {
    align-items: flex-start;
  }

  .client-portal-record-form-actions .primary-button,
  .client-portal-record-form-actions .ghost-button {
    width: 100%;
  }
}

#work-order-document-wizard-sheet-ro-panel .work-order-document-wizard-common-ro-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#work-order-document-wizard-sheet-spr-panel .work-order-document-wizard-common-person-area {
  min-width: 0;
}

#work-order-document-wizard-sheet-ro-panel .work-order-document-wizard-common-ro-card {
  min-width: 0;
}

@media (max-width: 1180px) {
  #work-order-document-wizard-sheet-ro-panel .work-order-document-wizard-common-ro-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #work-order-document-wizard-sheet-ro-panel .work-order-document-wizard-common-ro-body {
    grid-template-columns: minmax(0, 1fr);
  }
}