*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  font-family: "Work Sans", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  background-color: #f6f7fb;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
}

strong {
  font-weight: 600;
}

a {
  color: #305DDD;
}

:root {
  --nav-bg: var(--org-theme-color, #111827);
  --nav-hover-bg: #1a2233;
  --nav-active-bg: #1a2233;
  --dropdown-bg: #1a2233;
  --chrome-text-dim: rgba(255, 255, 255, 0.56);
  --chrome-label: rgba(255, 255, 255, 0.28);
  --chrome-border: rgba(255, 255, 255, 0.06);
  --primary-color: #305DDD;
  --primary-hover: #305DDD;
  --primary-pale: #eef2ff;
  --primary-ring: rgba(79, 70, 229, 0.12);
  --seconday-colour: #6366f1;
  --text-light: rgba(255, 255, 255, 0.56);
  --text-muted: #6b7280;
  --text-strong: #111827;
  --text-faint: #3d3d3d;
  --page-bg: #f6f7fb;
  --surface-subtle: rgb(255, 255, 255);
  --surface-hover: #fafbff;
  --track-bg: #eef0f4;
  --border-card: #edeef2;
  --border-row: #f1f2f6;
  --tale-background: #f3f4f6;
  --border-radius: 6px;
  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-hero: 20px;
  --radius-pill: 6px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  --shadow-raised: 0 1px 2px rgba(16, 24, 40, 0.08);
  --font-body: Work Sans, system-ui, sans-serif;
  --font-display: Sora, Work Sans, sans-serif;
  --top-nav-height: 56px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 60px;
  --banner-height: 0px;
  --org-theme-color: #111827;
}

body:has(.sa-impersonation-banner) {
  --banner-height: 40px;
}

@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
.activity-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f2f6;
}

.activity-card-title {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.activity-scope {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: #eef0f4;
  border-radius: 10px;
}

.activity-scope-btn {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.activity-scope-btn:hover {
  color: #111827;
}

.activity-scope-btn--active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.activity-card-heading {
  min-width: 0;
}

.activity-card-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #6b7280;
}

.activity-day {
  margin: 18px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7280;
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0 10px 2px;
}

.activity-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 38px;
  bottom: -6px;
  left: 15px;
  width: 1px;
  background: #e5e7eb;
}

.activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #6b7280;
}

.activity-icon .ui-icon {
  width: 14px;
  height: 14px;
  color: inherit;
}

.activity-icon--success {
  background: #ecfdf5;
  color: #047857;
}

.activity-icon--info {
  background: #eef2ff;
  color: #305DDD;
}

.activity-icon--warn {
  background: #fef9c3;
  color: #a16207;
}

.activity-icon--danger {
  background: #fef2f2;
  color: #dc2626;
}

.activity-body {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}

.activity-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.45;
}

.activity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.activity-actor {
  font-weight: 600;
  color: #4b5563;
}

.activity-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: #4b5563;
}

.activity-detail {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.activity-changes {
  list-style: none;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #f1f2f6;
}

.activity-change {
  display: flex;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.activity-change-field {
  flex: 0 0 140px;
  color: #6b7280;
}

.activity-change-value {
  min-width: 0;
  color: #111827;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.activity-change-value s {
  color: #6b7280;
  font-weight: 400;
}

.activity-change-arrow {
  margin: 0 6px;
  color: #6b7280;
}

.activity-origin {
  margin-top: 6px;
}

.activity-origin summary {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
  list-style: none;
}

.activity-origin summary::-webkit-details-marker {
  display: none;
}

.activity-origin[open] summary {
  margin-bottom: 6px;
}

.activity-origin-list {
  display: grid;
  gap: 4px;
  max-width: 640px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #f1f2f6;
}

.activity-origin-list div {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.activity-origin-list dt {
  flex: 0 0 90px;
  color: #6b7280;
}

.activity-origin-list dd {
  margin: 0;
  min-width: 0;
  color: #111827;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .activity-change,
  .activity-origin-list div {
    flex-direction: column;
    gap: 0;
  }
  .activity-change-field,
  .activity-origin-list dt {
    flex-basis: auto;
  }
}
.activity-note {
  margin: 20px 0 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

.activity-card-foot {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.activity-more-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.activity-more-btn:hover {
  text-decoration: underline;
}

.audit-filters {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.audit-filter-dates {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.audit-filter-sep {
  font-size: 12px;
  color: #6b7280;
}

.audit-date-input,
.audit-search-input {
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid #d8dae1;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
}

.audit-search-input {
  min-width: 260px;
  flex: 1 1 260px;
}

.audit-date-input:focus,
.audit-search-input:focus {
  border-color: #c7d2fe;
}

.audit-when {
  white-space: nowrap;
}

.audit-target-label {
  display: block;
  font-size: 11.5px;
  color: #6b7280;
}

.audit-change {
  color: #6b7280;
  overflow-wrap: anywhere;
}

.audit-log-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px 24px;
}

.audit-log-count {
  font-size: 12px;
  color: #6b7280;
}

.audit-origin {
  white-space: nowrap;
}

.audit-ip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.login-container {
  position: relative;
  display: flex;
  min-height: 100vh;
  background-color: #f0f2f5;
  align-items: stretch;
}

.login-card {
  display: flex;
  width: 100%;
  min-height: 100vh;
  border-radius: 0;
  overflow: hidden;
}

.login-logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  background: #ffffff;
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: unset;
  border-radius: 0;
}

.login-logo::before {
  content: "";
  display: none;
  position: absolute;
  top: -80px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 80, 198, 0.25) 0%, transparent 65%);
  pointer-events: none;
}

.login-logo::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(21, 154, 255, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.login-logo-img {
  width: 180px;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  opacity: 0.92;
  border-radius: var(--border-radius);
}

.login-brand-headline {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, #ffffff 0%, var(--seconday-colour) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-brand-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  line-height: 1.65;
  max-width: 300px;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
  font-weight: 400;
}

.login-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  position: relative;
  z-index: 1;
}

.login-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid rgba(21, 154, 255, 0.5);
  border-radius: 6px;
  padding: 9px 14px;
  transition: background 0.2s ease;
}

.login-features li:hover {
  background: rgba(255, 255, 255, 0.07);
  border-left-color: var(--seconday-colour);
}

.login-features li i {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 80, 198, 0.4);
  border-radius: 5px;
  color: var(--seconday-colour);
  font-size: 11px;
}

.input-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffff;
  width: 480px;
  flex-shrink: 0;
  padding: 56px 52px;
  overflow-y: auto;
}

.auth-form-header {
  margin-bottom: 32px;
}

.auth-form-title {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.auth-form-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-form-divider {
  height: 1px;
  background: #f0f2f5;
  margin-bottom: 28px;
}

.input-field form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  position: static;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.2px;
  pointer-events: none;
  transition: none;
  top: auto;
  left: auto;
  background: none;
  padding: 0;
}

.form-group input,
.form-group select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  font-size: 13.5px;
  font-weight: 400;
  background-color: #ffffff;
  color: #111827;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.form-group input::placeholder {
  color: #9ca3af;
  font-size: 13px;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.form-group input[readonly] {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

.form-group input[readonly]:focus {
  border-color: #d1d5db;
}

.form-group .ui-icon:not(.select-arrow) {
  position: absolute;
  right: 12px;
  bottom: 12px;
  top: auto;
  transform: none;
  color: #9ca3af;
  cursor: pointer;
  width: 16px;
  height: 16px;
  transition: color 0.2s ease;
}

.form-group .ui-icon:not(.select-arrow):hover {
  color: var(--primary-color);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group input:-webkit-autofill + label,
.form-group.autofilled label,
.form-group select.has-value + label {
  top: auto;
  left: auto;
  font-size: 12px;
  color: #374151;
  background-color: transparent;
  padding: 0;
}

.form-group select option {
  background-color: #ffffff;
  color: #111827;
  font-size: 13.5px;
}

.form-group.has-error input {
  border-color: #dc2626;
}

.form-group.has-error label {
  color: #374151;
}

.input-field button[type=submit] {
  width: 100%;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--border-radius);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border: none;
  background: var(--primary-color);
  color: #ffffff;
  cursor: pointer;
  margin-top: 4px;
}

.input-field button[type=submit]:hover {
  background-color: #003d99;
}

.input-field button[type=submit]:active {
  transform: translateY(0);
}

.register-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.register-step.hidden,
.input-field form.hidden {
  display: none;
}

.register-step.onboarding-progress {
  gap: 8px;
  padding: 24px 0;
}

.register-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.register-actions .btn {
  height: 42px;
  padding: 0 20px;
}

.input-field .register-actions button[type=submit] {
  flex: 1;
  margin-top: 0;
}

.register-link {
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.register-link a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.register-link a:hover {
  text-decoration: none;
}

.login-error-msg {
  width: 100%;
  color: #dc2626;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  margin-bottom: 4px;
  font-weight: 500;
  display: none;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.lable-error-msg {
  width: 100%;
  color: #dc2626;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  margin-bottom: 8px;
  font-weight: 500;
  display: block;
  background: #fef2f2;
  border: 1px solid #fecaca;
  box-sizing: border-box;
}

.lable-error-msg:empty {
  display: none;
}

.form-error {
  width: 100%;
  color: #dc2626;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: var(--border-radius);
  margin-bottom: 4px;
  font-weight: 500;
  display: none;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

@media (max-width: 900px) {
  .login-container {
    background-color: #ffffff;
  }
  .login-card {
    flex-direction: column;
    min-height: 100vh;
    background-color: #ffffff;
  }
  .login-logo {
    flex: none;
    min-height: auto;
    padding: 40px 32px 0px;
    background: #ffffff;
  }
  .login-logo::before,
  .login-logo::after,
  .login-brand-headline,
  .login-brand-sub,
  .login-features {
    display: none;
  }
  .login-logo-img {
    margin: 0 auto;
    width: 140px;
    margin-bottom: 0;
  }
  .input-field {
    width: 100%;
    flex: 1;
    padding: 30px 32px 40px;
    background-color: #ffffff;
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .login-logo {
    padding: 48px 24px 0px;
  }
  .login-logo-img {
    width: 120px;
  }
  .input-field {
    padding: 24px 24px 40px;
  }
  .auth-form-title {
    font-size: 22px;
    margin-bottom: 4px;
    text-align: left;
  }
  .auth-form-desc {
    font-size: 14px;
    text-align: left;
  }
  .auth-form-header {
    margin-bottom: 24px;
  }
  .form-group input,
  .form-group select {
    height: 48px;
    font-size: 14.5px;
  }
  .input-field button[type=submit] {
    height: 48px;
    font-size: 14.5px;
    margin-top: 8px;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#app-scale-stage {
  width: 100vw;
  min-height: 100vh;
  overflow: auto;
}

#app-scale-root {
  display: flow-root;
  width: 100%;
  min-height: 100vh;
}

.page-main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.content-wrapper {
  flex: 1;
  padding-bottom: 40px;
}

.welcome_wave_hand {
  width: 16px;
  height: 16px;
}

.icon-12 {
  width: 12px;
  height: 12px;
}

.icon-19 {
  width: 19px;
  height: 19px;
}

.inp-50 {
  width: 50% !important;
}

.supplier-header,
.section-header {
  background: var(--section-header-bg, var(--org-theme-color, #111827));
  color: var(--nav-text-color, #ffffff);
  padding: 40px 32px;
  margin: 24px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.35s ease-out;
}

.supplier-header::before,
.section-header::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  border-radius: var(--border-radius);
  pointer-events: none;
}

.supplier-header h1,
.section-header h1,
.dashboard-header h1 {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.supplier-header p,
.dashboard-header p {
  color: var(--nav-text-color, rgba(255, 255, 255, 0.72));
  font-size: 13.5px;
  font-weight: 400;
}

.dashboard-header p b {
  font-weight: 600;
}

.section-header p {
  color: var(--nav-text-color, rgba(255, 255, 255, 0.72));
  font-size: 15px;
  font-weight: 400;
}

.dashboard-header {
  position: relative;
  overflow: hidden;
  background: var(--section-header-bg, var(--org-theme-color, #111827));
  color: var(--nav-text-color, #ffffff);
  padding: 28px 32px;
  margin: 24px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  animation: fadeInUp 0.35s ease-out;
}

.dashboard-header::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -80px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.dashboard-header > * {
  position: relative;
}

.dashboard-header.dashboard-theme {
  min-height: 168px;
  padding: 36px 40px;
  border: 1px solid var(--nav-border-color, #edeef2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  flex-wrap: wrap;
}

.dashboard-header.dashboard-theme::after {
  content: none;
}

.dashboard-header.dashboard-theme h1 {
  font-size: 32px;
  margin: 6px 0 8px;
  letter-spacing: -0.4px;
}

.dashboard-header.dashboard-theme p {
  font-size: 14.5px;
  opacity: 0.85;
}

.dashboard-header-logo {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--nav-border-color, #edeef2);
  border-radius: 10px;
  background: #fff;
}

.dashboard-header-logo img {
  display: block;
  height: 108px;
  max-width: 300px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .dashboard-header.dashboard-theme {
    padding: 28px 24px;
  }
  .dashboard-header.dashboard-theme h1 {
    font-size: 26px;
  }
}
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 4px 24px 22px;
}

.page-header-text {
  min-width: 0;
}

.page-eyebrow {
  display: block;
  color: #305DDD;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.page-header h1 {
  margin: 0 0 5px;
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
}

.page-subtitle {
  display: block;
  color: #6b7280;
  font-size: 13.5px;
}

.page-header .new-section-btn {
  flex-shrink: 0;
}

.card {
  background: #ffffff;
  border-radius: 14px;
  padding: 24px;
  margin: 24px;
  border: 1px solid #edeef2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  animation: fadeInUp 0.45s ease-out;
}

.card h1 {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 17px;
  padding-bottom: 12px;
  font-weight: 700;
  color: #0f172a;
}

.card:has(> .data-table),
.card:has(> .table-responsive) {
  padding: 0;
  overflow-x: auto;
}

.card:has(> .data-table) > .data-table {
  min-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
  table-layout: auto;
}

.vehicle-list-table {
  width: auto;
  min-width: 100%;
  table-layout: auto;
}

.vehicle-list-table th,
.vehicle-list-table td {
  white-space: nowrap;
}

.data-table th {
  background: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9199a8;
  padding: 13px 16px;
  border-bottom: 1px solid #edeef2;
}

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f2f6;
  font-size: 14px;
  color: #1f2937;
  vertical-align: middle;
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 20px;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 20px;
}

.data-table th.actions-header,
.data-table td.actions-cell,
.data-table td.actions {
  text-align: center;
  white-space: nowrap;
}

.data-table td.actions-cell .action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.profile-card-header .action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-table input[type=checkbox] {
  appearance: none;
  width: 19px;
  height: 19px;
  border: 2px solid #999;
  border-radius: 5px;
  cursor: pointer;
  background: white;
  position: relative;
}

.data-table input[type=checkbox]:checked {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.data-table input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.data-table input[type=checkbox]:disabled {
  background: #f9fafb;
  border-color: #cbd5e1;
  cursor: not-allowed;
}

.data-table input[type=text],
.data-table input[type=number],
.data-table select {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  background-color: #f9fafb;
  transition: all 0.2s ease;
}

.data-table select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr {
  transition: background-color 0.1s ease;
}

.data-table tbody tr:hover {
  background: #fafbff;
}

.data-table a {
  text-decoration: none;
}

.users-row--off {
  display: none;
}

.data-table code,
.user_id_link {
  display: inline-block;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 12px;
  color: #4b5563;
  background: #f3f4f6;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
}

.status-pill {
  width: max-content;
}

.badge {
  background-color: #eef2ff;
  color: #305DDD;
}

.status-active {
  background-color: #ecfdf5;
  color: #047857;
}

.status-inactive {
  color: #b91c1c;
  background-color: #fee2e2;
}

.status-pending {
  background-color: #fef9c3;
  color: #a16207;
}

.domain-record-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--border-radius);
}

.domain-record-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.domain-record-label {
  flex: 0 0 60px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #64748b;
}

.domain-record-value {
  font-family: monospace;
  font-size: 13px;
  color: #0f172a;
  word-break: break-all;
}

.status-low {
  background-color: #ecfdf5;
  color: #047857;
}

.status-medium {
  background-color: #fef9c3;
  color: #a16207;
}

.status-high {
  background-color: #fee2e2;
  color: #b91c1c;
}

.btn,
.btn-view,
.attachment-badge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:active,
.btn-view:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn:disabled,
.btn-view:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-sm {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

.actions-cell .btn + .btn,
.actions-cell .btn + .btn-view,
.actions-cell .btn-view + .btn,
.actions .btn + .btn,
.actions .btn + .btn-view,
.actions .btn-view + .btn {
  margin-left: 8px;
}

.bg-warning-light {
  background-color: #fffbeb !important;
}

.border-warning-left {
  border-left: 4px solid #f59e0b !important;
}

.color-warning-dark {
  color: #b45309 !important;
}

.color-warning-text {
  color: #92400e !important;
}

.btn-view {
  background: #eef2ff;
  color: #305DDD;
  border: 1px solid #c7d2fe;
}

.btn-view:hover {
  background: #dbe3fd;
  color: #305DDD;
  border-color: #a9bcf8;
}

.btn-view:disabled:hover {
  background: #eef2ff;
  color: #305DDD;
  border-color: #c7d2fe;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.btn-primary:hover {
  background-color: #305DDD;
}

.btn-secondary {
  background-color: #ffffff;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #eef0f4;
  color: #111827;
  border-color: #d1d5db;
}

.btn-danger {
  background-color: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
}

.btn-danger:hover {
  background-color: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.lc-note {
  margin: 0 0 16px;
  font-size: 12px;
  color: #6b7280;
}

.data-table th.lc-num,
.data-table td.lc-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lc-item-name {
  font-weight: 600;
  color: #111827;
}

.lc-basis {
  margin-top: 2px;
  font-size: 11px;
  color: #6b7280;
}

.lc-input {
  width: 110px;
  max-width: 100%;
  text-align: right;
  display: inline-block;
}

.data-table td.lc-final .lc-final-cost {
  font-weight: 600;
  color: #111827;
}

.rfq-validation-matrix .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.rfq-validation-matrix .data-table {
  min-width: 900px;
  border: 1px solid #e6eef6;
  background: white;
}

.rfq-validation-matrix .data-table thead th {
  background: #f3f6f9;
  color: #263544;
  border-bottom: 1px solid #e9eef5;
  text-align: center;
  vertical-align: middle;
  padding: 10px 12px;
}

.rfq-validation-matrix .data-table thead th[rowspan] {
  text-align: left;
}

.rfq-validation-matrix .data-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

.rfq-validation-matrix .data-table tbody td input[type=number],
.rfq-validation-matrix .data-table tbody td input[type=date] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dbe6ef;
  border-radius: 6px;
  font-size: 13px;
  background: #ffffff;
  box-sizing: border-box;
}

.rfq-validation-matrix .data-table tbody td input[type=number] {
  text-align: right;
}

.rfq-validation-matrix .data-table tbody tr td:first-child {
  font-weight: 600;
  color: #0f1724;
}

.rfq-validation-matrix .data-table tbody tr td:nth-child(2),
.rfq-validation-matrix .data-table tbody tr td:nth-child(3),
.rfq-validation-matrix .data-table tbody tr td:nth-child(4) {
  color: #334155;
  font-weight: 500;
}

.rfq-validation-matrix .data-table tbody td + td + td + td {
  border-left: 1px solid #eef4f8;
}

@media (max-width: 900px) {
  .rfq-validation-matrix .data-table thead th,
  .rfq-validation-matrix .data-table tbody td {
    padding: 8px 8px;
    font-size: 12px;
  }
  .rfq-validation-matrix .data-table {
    min-width: 760px;
  }
}
.vendor-id-muted {
  font-size: 11px;
  opacity: 0.85;
  color: #64748b;
}

.btn-danger:hover {
  background: #ef4444;
  color: #ffffff;
}

.btn-danger:disabled {
  background: #fee2e2;
  color: #b91c1c;
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-success {
  background-color: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.btn-success:hover {
  background-color: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.btn-ghost-dark {
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
}

.btn-ghost-dark:hover {
  background-color: #f8fafc;
  color: #111827;
  border-color: #9ca3af;
}

.new-section-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
}

.card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
}

.input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.input-group {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-size: 12px !important;
  font-weight: bolder !important;
  color: var(--text-muted);
}

.input-group label .req {
  color: #ff3b30;
  font-weight: 600;
  padding-left: 2px;
}

.input-group input[type=text],
.input-group input[type=number],
.input-group select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #11141a;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  transition: border-color 0.15s ease;
  outline: none;
  margin-top: 2px;
  margin-bottom: 6px;
}

.input-group input::placeholder {
  color: #a0a5b1;
  font-size: 12.5px;
}

.input-group input:focus,
.input-group select:focus {
  border-color: var(--primary-color);
  background-color: #ffffff;
}

.footer-text {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
}

.app-footer {
  padding: 14px 24px;
  text-align: center;
  font-size: 11.5px;
  color: #9ca3af;
}

.app-footer--pinned {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 20px 24px 22px;
  font-size: 13px;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}

.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 8px;
  background-color: #4b5563;
  -webkit-mask: url("/static/images/ui-icons/chevron-right-icons-ui.svg") center/contain no-repeat;
  mask: url("/static/images/ui-icons/chevron-right-icons-ui.svg") center/contain no-repeat;
  user-select: none;
}

.breadcrumb a {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13px;
  color: #6b7280;
  padding: 0;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb a:hover {
  color: #111827;
  text-decoration: none;
}

.breadcrumb li:last-child {
  font-family: "Work Sans", system-ui, sans-serif;
  color: #111827;
  padding: 0;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

.horizontal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 850px;
}

.form-row-horizontal {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: center;
}

.form-row-horizontal.align-top {
  align-items: flex-start;
}

.label-col label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

label.required_lable::after {
  content: "*";
  color: #ff3b30;
  margin-left: 4px;
  font-weight: bolder;
}

.req {
  color: red;
  margin-left: 6px;
  font-weight: bolder;
}

.help-icon {
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
}

.field-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.field-col input[type=text],
.field-col input[type=number],
.field-col input[type=email],
.field-col input[type=password],
.field-col input[type=tel],
.field-col input[type=date],
.field-col select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
}

.sub-field-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sub-field-col input {
  width: 100%;
  max-width: 320px;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
}

.sub-field-col .select-wrapper,
.sub-field-col .toggle-switch-wrapper {
  width: 100%;
  max-width: 320px;
}

.sub-field-col input:focus,
.sub-field-col .select-trigger:focus {
  border-color: #2563eb;
}

.field-col textarea {
  width: 100%;
  padding: 12px;
  font-size: 13.5px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
  resize: vertical;
}

.field-col input:focus:not([readonly]),
.field-col select:focus,
.field-col textarea:focus {
  border-color: #2563eb;
}

.form-row-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 850px;
}

.form-row-vertical input[type=text],
.form-row-vertical input[type=number],
.form-row-vertical input[type=date],
.form-row-vertical textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13.5px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
  resize: vertical;
  margin-bottom: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-row-vertical input[type=text]:focus,
.form-row-vertical input[type=number]:focus,
.form-row-vertical input[type=date]:focus,
.form-row-vertical textarea:focus {
  border-color: #305DDD;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.form-label-top {
  font-size: 12px !important;
  font-weight: bolder !important;
  color: var(--text-muted) !important;
  margin: 5px;
}

.address-group {
  gap: 10px;
}

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-with-action {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-icon-action {
  position: absolute;
  right: -32px;
  background: transparent;
  border: none;
  color: #2563eb;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

.form-link-text {
  font-size: 14px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  margin-top: 4px;
  display: inline-block;
}

.form-link-text:hover {
  text-decoration: underline;
}

.banner-toggle-box {
  background-color: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
}

.toggle-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inputcheckbox {
  width: 19px;
  height: 18px;
  accent-color: #0064ff;
  cursor: pointer;
}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2563eb;
}

input:checked + .slider:before {
  transform: translateX(18px);
}

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 10px;
  margin-left: 3px;
  border-radius: 4px;
  font-size: 12px;
  color: #000000;
  background: rgb(217, 217, 217);
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tooltip-content {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  width: 260px;
  padding: 10px 14px;
  background: #21253c;
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
  transform: translateY(-50%) translateX(-6px);
}

.tooltip-content::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #21253c;
}

.help-tooltip:hover .tooltip-content,
.help-tooltip:focus-within .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(4px);
}

.hidden {
  display: none;
}

.file-upload-actions {
  margin-top: 15px;
  text-align: center;
}

.signature-preview-container {
  margin-top: 15px;
}

.file-upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  border: 2px dashed #cfd6e4;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
  transition: all 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.file-upload-section:hover {
  border-color: var(--primary-color);
  background: #f0f7ff;
}

.file-upload-section:focus {
  outline: none;
  border-color: var(--primary-color);
}

.file-upload-section span {
  color: var(--text-muted);
}

.file-upload-icon {
  color: #2563eb;
  font-size: 16px;
  margin-bottom: 8px;
}

.file-upload-label {
  color: #2563eb;
  font-weight: 500;
}

input[type=file]::file-selector-button {
  display: none;
}

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

.select-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.select-wrapper select {
  display: none;
}

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.select-trigger.is-placeholder {
  color: #3d3d3d;
}

.select-trigger:focus {
  outline: none;
  border-color: #305DDD;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.select-trigger .select-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.select-wrapper.is-open .select-trigger {
  border-color: #305DDD;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.select-wrapper.is-open .select-trigger .select-arrow {
  transform: rotate(180deg);
  color: var(--primary-color);
}

.select-wrapper.has-value .select-trigger .select-arrow {
  color: var(--primary-color);
}

.select-trigger.is-disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
}

.select-dropdown {
  position: fixed;
  background-color: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  padding: 4px;
  z-index: 500000;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.select-search-wrap {
  position: sticky;
  top: -4px;
  background-color: #ffffff;
  padding: 4px 4px 6px;
  margin: -4px -4px 4px;
  border-bottom: 1px solid #edeef2;
  z-index: 1;
}

.select-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid #edeef2;
  border-radius: 7px;
  font-size: 13px;
  outline: none;
}

.select-search-input:focus {
  border-color: var(--primary-color);
}

.select-option.is-empty-message {
  color: #9ca3af;
  cursor: default;
  text-align: center;
}

.select-dropdown::-webkit-scrollbar {
  width: 5px;
}

.select-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.select-dropdown::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 10px;
}

.select-wrapper.is-open .select-dropdown,
.select-dropdown.is-open {
  display: block;
  animation: selectDropIn 0.15s ease-out;
}

@keyframes selectDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.select-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13.5px;
  color: #374151;
  transition: background-color 0.1s ease, color 0.1s ease;
  border-radius: 6px;
}

.select-option:hover {
  background-color: #eef2ff;
  color: #305DDD;
}

.select-option.is-selected {
  background-color: #eef2ff;
  color: #305DDD;
  font-weight: 600;
}

.select-option.is-typeahead-active {
  background-color: #eef2ff;
  color: #305DDD;
}

.select-option.is-placeholder-opt {
  color: #3d3d3d;
}

.input-group .select-trigger {
  height: 34px;
  font-size: 13px;
}

.sa-impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 40px;
  flex-shrink: 0;
  view-transition-name: app-impersonation-banner;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: #b45309;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: none;
  animation: fadeInUp 0.25s ease-out;
}

.sa-impersonation-banner-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.sa-impersonation-banner-inner i {
  font-size: 14px;
  color: #ffffff;
}

.sa-banner-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.sa-banner-exit-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.sa-nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 12px 24px 0;
  padding: 4px;
  background: #eef0f4;
  border-radius: 10px;
  border-bottom: none;
  width: fit-content;
  align-self: flex-start;
}

.sa-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-radius: 7px;
  border: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.sa-tab:hover {
  color: white;
  background: #305DDD;
}

.sa-tab--active {
  color: #111827;
  background: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.card-nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 24px;
  padding: 4px;
  background: #eef0f4;
  border-radius: 10px;
  border-bottom: none;
}

.card-nav-tabs--page {
  display: flex;
  width: fit-content;
  margin: 12px 24px 0;
}

.card-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  border-radius: 7px;
  border-bottom: none;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

.card-tab i {
  font-size: 13px;
  color: #3d3d3d;
  transition: color 0.15s ease;
}

.card-tab:hover {
  color: #111827;
}

.card-tab:hover i {
  color: #111827;
}

.card-tab--active {
  color: #111827;
  font-weight: 600;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.card-tab--active i {
  color: #305DDD;
}

@keyframes fadeInTab {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.sa-panel {
  display: none;
  animation: fadeInTab 0.15s ease-in-out;
}

.sa-panel.active,
.sa-panel-active {
  display: block;
}

.sa-action-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--border-radius);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.sa-action-badge--info {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.sa-action-badge--danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.sa-action-badge--neutral {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.sa-audit-detail {
  max-width: 300px;
  white-space: normal;
  word-break: break-word;
  font-size: 12.5px;
  color: #6b7280;
}

.attachment-file-icon--archive {
  color: #f59e0b;
}

@media (max-width: 900px) {
  .sa-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .sa-stats-grid {
    grid-template-columns: 1fr;
  }
}
.sa-impersonating-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.sa-exit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(180, 83, 9, 0.28);
  color: #fcd9a4;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sa-exit-btn:hover {
  background: rgba(180, 83, 9, 0.45);
  border-color: rgba(251, 191, 36, 0.65);
  color: #ffffff;
}

.sa-impersonating-icon {
  font-size: 12px;
  color: #fbbf24;
}

.sa-exit-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 50%;
  font-size: 10px;
  color: #fca5a5;
  transition: all 0.2s ease;
}

.sa-exit-btn:hover .sa-exit-btn-icon {
  background: rgba(239, 68, 68, 0.8);
  color: #ffffff;
}

.input-prefix-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background-color: #f1f5f9;
  border: 1px solid #d1d5db;
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 13.5px;
  color: #475569;
  font-weight: 500;
}

.input-prefix-group input {
  border-radius: 0 6px 6px 0 !important;
}

.selected-files-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  max-width: 280px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
}

.file-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.file-item-delete {
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.15s ease;
}

.file-item-delete:hover {
  color: #b91c1c;
}

.status-pill-wrap {
  display: inline-block;
}

.link-primary-custom {
  color: var(--text-muted);
}

.link-primary-custom:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.p-20 {
  padding: 20px;
}

.empty-state-card {
  text-align: center;
  padding: 56px 40px;
}

.empty-state-title {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 17px;
  color: #111827;
  font-weight: 700;
  margin-bottom: 6px;
}

.empty-state-desc {
  color: #6b7280;
  font-size: 13.5px;
  margin-bottom: 20px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 24px 24px 0 24px;
}

.list-header-filters,
.list-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.list-header-actions .audit-search-input {
  flex: 0 0 240px;
  min-width: 240px;
}

@media (max-width: 768px) {
  .list-header {
    flex-direction: column;
    align-items: stretch;
  }
  .list-header-filters,
  .list-header-actions {
    flex-wrap: wrap;
  }
  .list-header-actions .audit-search-input {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.filter-wrapper {
  width: 200px;
}

.filter-wrapper select {
  height: 38px;
}

.card-content-layout {
  display: flex;
  min-height: 500px;
  background-color: #fff;
}

.card-nav {
  width: 240px;
  border-right: 1px solid #eaedf3;
  background-color: #fcfdfd;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-nav .card-tab {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  color: #5c6b81;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.card-nav .card-tab:hover {
  background-color: #f4f6f9;
  color: #1a202c;
}

.card-nav .card-tab.card-tab-active {
  background-color: #fff;
  border-left: 3px solid #2563eb;
  color: #2563eb;
  font-weight: 500;
}

.card-nav .card-tab-number {
  background-color: #eaedf3;
  color: #5c6b81;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 12px;
  font-weight: 600;
}

.card-nav .card-tab-active .card-tab-number {
  background-color: #2563eb;
  color: #fff;
}

.card-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.fw-500 {
  font-weight: 500;
}

.d-none {
  display: none !important;
}

.text-left {
  text-align: left !important;
}

.flex-row-center-20 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.profile-card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-24 {
  margin-top: 24px;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.proc-req-by-input {
  background-color: #f1f5f9;
  cursor: not-allowed;
}

.items-empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background-color: #f8fafc;
  border-radius: 8px;
  margin-top: 20px;
}

.items-empty-state-icon {
  background-color: #334155;
  color: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.flex-gap-10 {
  display: flex;
  gap: 10px;
}

.align-items-center {
  align-items: center;
}

.btn-outline-blue {
  color: #305DDD;
  background-color: #eef2ff;
  border: 1px solid #c7d2fe;
}

.btn-outline-gray {
  color: #1f2937;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
}

.form-actions-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 15px 20px;
}

.info-icon-muted {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
}

.profile-card-header-padded {
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  padding: 15px 20px;
}

.panel-form-body {
  padding: 20px;
}

.panel-summary-card {
  padding: 12px 14px;
  margin-bottom: 20px;
  background: #eef0f4;
  border-radius: 10px;
}

.panel-summary-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
}

.panel-summary-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.slide-panel-body > .panel-form-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
}

.slide-panel-body > .panel-form-body > .form-actions-footer {
  margin: auto -20px -20px;
  padding: 15px 20px;
  gap: 10px;
}

.input-group-addon-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
}

.input-group-addon-wrapper-reverse {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
}

.input-group-addon-wrapper,
.input-group-addon-wrapper-reverse {
  align-items: stretch;
}

.input-group-addon-wrapper input,
.input-group-addon-wrapper-reverse input,
.input-group-addon-wrapper .select-wrapper,
.input-group-addon-wrapper-reverse .select-wrapper,
.input-group-addon-wrapper .select-trigger,
.input-group-addon-wrapper-reverse .select-trigger {
  margin-bottom: 0 !important;
  height: 100% !important;
  min-height: 38px;
  box-sizing: border-box;
}

.input-addon-left,
.input-addon-left select,
.input-addon-left input,
.input-addon-left .select-trigger {
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.select-trigger .select-label {
  font-size: 12px;
}

.input-addon-right,
.input-addon-right select,
.input-addon-right input,
.input-addon-right .select-trigger {
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  background-color: #f8fafc;
  border-bottom-right-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.input-addon-text-right {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  padding: 0 15px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.input-addon-text-right {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  padding: 0 15px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.input-addon-right-full,
.input-addon-right-full select,
.input-addon-right-full input,
.input-addon-right-full .select-trigger {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  width: 100%;
}

.text-xs-muted {
  font-size: 11px;
  color: var(--text-muted);
}

.text-sm {
  font-size: 13px;
}

.mt-24-top-5 {
  margin-top: 5px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0;
}

.mt-24-top-10 {
  margin-top: 10px;
  align-items: flex-start;
}

.addon-prefix {
  background-color: #f8fafc;
  border: 1px solid #d1d5db;
  border-right: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

.panel-form-actions {
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 15px 20px;
  margin: 24px -20px -20px -20px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.add-new-item-option {
  color: var(--primary-color);
  font-weight: 600;
}

.panel-form-body-compact {
  padding: 10px 0;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #374151;
  cursor: pointer;
}

.radio-label input[type=radio] {
  accent-color: var(--primary-color);
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}

.radio-label-spaced {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-left: 15px;
}

.text-center {
  text-align: center !important;
}

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

.flex-1 {
  flex: 1;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.p-30 {
  padding: 30px;
}

.flex-between-start {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.w-5 {
  width: 5%;
}

.w-10 {
  width: 5%;
}

.w-15 {
  width: 15%;
}

.w-6 {
  width: 6%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 17%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 20%;
}

.w-45 {
  width: 45%;
}

.w-50 {
  width: 50%;
}

.w-12 {
  width: 12%;
}

.w-36 {
  width: 36%;
}

.w-action-col {
  width: 40px;
}

.item-list-thumbnail {
  width: 32px;
  height: 32px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.item-name-link {
  color: #2563eb;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.gap-12 {
  gap: 12px;
}

.mt-2 {
  margin-top: 4px;
}

.radio-group {
  display: flex;
  gap: 12px;
}

.radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 13px;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  background: #fff;
  margin-bottom: 12px;
}

.radio-card:hover {
  border-color: #2563eb;
  background: #f8fbff;
}

.radio-card input[type=radio] {
  width: 15px;
  height: 22px;
  accent-color: #2563eb;
  cursor: pointer;
}

.radio-card span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.radio-card:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}

.radio-card:has(input:checked) span {
  color: #2563eb;
}

.item-description {
  text-wrap: wrap;
}

.attachment-badge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #1f2937;
  font-family: inherit;
  cursor: pointer;
  border: 1px dashed #d1d5db;
  text-transform: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.attachment-badge-btn:hover {
  background: #f1f5f9;
  border-color: #9ca3af;
}

.attachment-badge-icon {
  color: #64748b;
  font-size: 13px;
}

.attachment-badge-count {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}

.popover-wrapper {
  position: relative !important;
  display: inline-flex !important;
  width: fit-content !important;
  height: fit-content;
}

.attachments-popover {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 315px !important;
  max-width: 315px;
  z-index: 9999;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transform-origin: top right;
  animation: popoverFadeIn 0.2s ease-out;
}

.attachments-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
  transform: rotate(45deg);
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.attachments-popover .popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.attachments-popover .popover-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.attachments-popover .popover-header .close-btn {
  font-size: 14px;
  color: #ef4444;
  padding: 4px;
}

.attachments-popover .popover-body {
  padding: 16px;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.attachment-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.attachment-icon {
  color: #ef4444;
  font-size: 16px;
  margin-top: 2px;
}

.attachment-details {
  flex: 1;
}

.attachment-name {
  font-size: 13px;
  color: #2563eb;
  font-weight: 500;
  word-break: break-all;
  text-decoration: none;
  display: block;
}

.attachment-delete-btn {
  background: none;
  border: none;
  color: #000000;
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0.7;
}

.attachment-delete-btn:hover {
  opacity: 1;
  color: red;
}

.attachment-name:hover {
  text-decoration: none;
}

.attachment-file-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

.attachment-file-icon--pdf {
  color: #ef4444;
}

.attachment-file-icon--image {
  color: #8b5cf6;
}

.attachment-file-icon--doc {
  color: #2563eb;
}

.attachment-file-icon--excel {
  color: #16a34a;
}

.attachment-file-icon--generic {
  color: #6b7280;
}

.attachment-file-icon--txt {
  color: #4b5563;
}

.attachment-file-icon--ppt {
  color: #ea580c;
}

.attachment-file-icon--video {
  color: #ec4899;
}

.attachment-file-icon--audio {
  color: #8b5cf6;
}

.attachment-size {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

.attachment-empty-msg {
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
}

.upload-hint {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  margin-top: 8px;
}

.preview-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 75vh;
  background: #f8fafc;
  border-radius: var(--border-radius, 4px);
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.preview-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--border-radius, 4px);
}

.preview-unsupported-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.preview-unsupported-icon {
  color: #94a3b8;
  margin-bottom: 16px;
}

.preview-unsupported-text {
  color: #4b5563;
  font-size: 16px;
  margin-bottom: 24px;
}

.site-links {
  color: var(--primary-color, #2563eb);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

.site-links:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.dynamic-search-wrapper {
  position: relative;
  width: 100%;
}

.dynamic-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: var(--border-radius, 4px);
  background-color: #f9fafb;
  outline: none;
  font-size: 14px;
  color: #1a1a2e;
}

.dynamic-search-input:focus {
  border-color: #2563eb;
  background-color: #fff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.dynamic-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0px;
  right: 0px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
  margin-top: 4px;
  display: none;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(209, 213, 219);
  border-image: none;
  border-radius: var(--border-radius, 4px);
}

.dynamic-search-dropdown.is-open {
  display: block;
}

.dynamic-search-option {
  font-size: 12px;
  font-family: SFMono-Regular, Consolas, monospace;
  font-weight: 600;
  color: rgb(56, 63, 77);
  cursor: pointer;
  padding: 6px 10px;
  transition: background-color 0.1s;
  border-bottom: 1px solid var(--border);
}

.dynamic-search-option:last-child {
  border-bottom: none;
}

.dynamic-search-option:hover,
.dynamic-search-option.is-active {
  background-color: rgb(240, 247, 255);
  color: rgb(21, 154, 255);
}

.dynamic-search-option.empty {
  color: var(--muted-text);
  cursor: default;
  background: transparent;
}

.multi-select-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 1px solid #d1d5db;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  min-height: 38px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.multi-select-container:focus-within {
  border-color: var(--primary-color, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.multi-select-input {
  border: none !important;
  outline: none !important;
  flex-grow: 1;
  min-width: 150px;
  padding: 4px 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #1a1a2e;
  font-size: 13.5px;
}

.multi-select-input:focus {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.vendor-select-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background-color: var(--tale-background, #f0f7ff);
  border: 1px solid #dbeafe;
  border-radius: var(--border-radius);
  font-size: 13px;
  color: var(--primary-color, #305DDD);
  font-weight: 500;
}

.vendor-select-pill i {
  cursor: pointer;
  color: #94a3b8;
  font-size: 12px;
  transition: color 0.2s ease;
}

.vendor-select-pill i:hover {
  color: #dc3545;
}

.vendor-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.field-col > .vendor-pills-container:not(:empty) {
  margin-top: 10px;
}

.multi-select-trigger {
  cursor: pointer;
  position: relative;
  padding-right: 32px;
}

.multi-select-trigger .select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.select-wrapper.is-open .multi-select-trigger {
  border-color: var(--primary-color, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.select-wrapper.is-open .multi-select-trigger .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--primary-color);
}

.select-placeholder {
  color: #3d3d3d;
  font-size: 13.5px;
}

.multi-select-trigger.is-disabled {
  cursor: not-allowed;
  background-color: #f3f4f6;
}

.metal-pill {
  gap: 6px;
  padding: 3px 6px 3px 10px;
  white-space: nowrap;
}

.metal-pill-label {
  font-weight: 600;
}

.metal-pill-suffix {
  color: var(--muted-text, #6b7280);
  font-size: 12px;
}

.field-col input[type=number].metal-percent-input {
  width: 54px;
  height: 26px;
  flex-shrink: 0;
  padding: 0 6px;
  border: 1px solid #dbeafe;
  border-radius: var(--border-radius);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-color, #305DDD);
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}

.metal-percent-input::-webkit-outer-spin-button,
.metal-percent-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field-col input[type=number].metal-percent-input:focus {
  border-color: var(--primary-color, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.approver-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.approver-card-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.approver-card-avatar {
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 24px;
  overflow: hidden;
  flex-shrink: 0;
}

.approver-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.approver-card-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.approver-card-name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
  line-height: 1.2;
}

.approver-card-email {
  font-size: 13px;
  color: #777;
  margin-top: 2px;
}

.approver-card-role {
  font-size: 13px;
  color: #888;
  text-transform: capitalize;
  text-align: right;
}

.approval-action-banner {
  background: linear-gradient(to right, #fdf8e6, #fffcf5);
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 16px 24px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.approval-banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.approval-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #fef3c7;
  color: #d97706;
  border-radius: 50%;
  font-size: 20px;
}

.approval-banner-text h3 {
  font-size: 16px;
  font-weight: 600;
  color: #92400e;
  margin: 0 0 4px 0;
}

.approval-banner-text p {
  font-size: 14px;
  color: #b45309;
  margin: 0;
  line-height: 1.4;
}

.approval-banner-actions {
  display: flex;
  gap: 12px;
}

.approval-banner-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}

.btn-reject-action {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.btn-reject-action:hover {
  background-color: #fecaca;
  color: #991b1b;
  transform: translateY(-1px);
}

.btn-approve-action {
  background-color: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.btn-approve-action:hover {
  background-color: #bbf7d0;
  color: #166534;
  transform: translateY(-1px);
}

.vendor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fdf2eb;
  color: #dc7c3f;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.vendor-details-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vendor-details-name {
  font-weight: 500;
  color: #2e3139;
  font-size: 13.5px;
}

.vendor-details-company {
  font-size: 12px;
  color: #7b8393;
}

.vendor-contact-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vendor-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #636b7b;
}

.vendor-contact-item i {
  width: 14px;
  text-align: center;
  color: #8c94a3;
}

.rfq-vendor-section {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.rfq-vendor-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.rfq-vendor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rfq-vendor-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rfq-vendor-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.rfq-vendor-name {
  font-weight: 600;
  color: #1a202c;
}

.rfq-vendor-email {
  font-size: 11.5px;
  color: #64748b;
}

.rfq-quote-table {
  font-size: 12.5px;
}

.rfq-quote-table th,
.rfq-quote-table td {
  padding: 8px 12px;
}

.rfq-quote-table td.rfq-item-name {
  font-weight: 500;
}

.rfq-quote-input {
  width: 100%;
  max-width: 120px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12.5px;
  box-sizing: border-box;
  outline: none;
  background: #fff;
}

.rfq-quote-input-date {
  max-width: 140px;
}

.btn-enter-quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color, #2563eb);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-enter-quote:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.rfq-no-response {
  margin-top: 10px;
  font-size: 12.5px;
}

.rfq-vendor-actions-btn {
  background: none;
  border: none;
  color: #7b8393;
  font-size: 16px;
  cursor: pointer;
}

.rfq-validation-matrix {
  margin-top: 15px;
  overflow-x: auto;
}

.rfq-validation-matrix .data-table {
  width: 100%;
  min-width: 800px;
}

.rfq-validation-matrix .data-table th,
.rfq-validation-matrix .data-table td {
  padding: 8px 6px;
  font-size: 13px;
  text-align: center;
  vertical-align: middle;
}

.rfq-validation-matrix .data-table th {
  background-color: #f8fafc;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.rfq-validation-matrix .data-table th:nth-child(-n+4),
.rfq-validation-matrix .data-table td:nth-child(-n+4) {
  text-align: left;
}

.rfq-validation-matrix .data-table th:nth-child(1),
.rfq-validation-matrix .data-table td:nth-child(1) {
  min-width: 150px;
}

.rfq-validation-matrix .data-table th:nth-child(2),
.rfq-validation-matrix .data-table td:nth-child(2),
.rfq-validation-matrix .data-table th:nth-child(3),
.rfq-validation-matrix .data-table td:nth-child(3),
.rfq-validation-matrix .data-table th:nth-child(4),
.rfq-validation-matrix .data-table td:nth-child(4) {
  min-width: 90px;
}

.rfq-validation-matrix .data-table input[type=number],
.rfq-validation-matrix .data-table input[type=date] {
  width: 100%;
  min-width: 70px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: var(--border-radius, 4px);
  font-size: 13px;
  background-color: #ffffff;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.rfq-validation-matrix .data-table input[type=date] {
  min-width: 125px;
}

.rfq-validation-matrix .data-table input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
  outline: none;
}

.rfq-validation-matrix .data-table input:disabled {
  background-color: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

.rfq-validation-matrix .data-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.rfq-validation-matrix .data-table th,
.rfq-validation-matrix .data-table td {
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #f1f5f9;
}

.rfq-validation-matrix .data-table thead tr:last-child th {
  border-bottom: 2px solid #cbd5e1;
}

.rfq-validation-matrix .data-table .static-col {
  background-color: #f8fafc;
  font-weight: 600;
}

.rfq-validation-matrix .data-table .border-right-strong {
  border-right: 2px solid #cbd5e1 !important;
}

.rfq-validation-matrix .data-table .vendor-col-start {
  border-left: 2px solid #cbd5e1 !important;
}

.rfq-validation-matrix .data-table .vendor-group-th {
  background-color: #f1f5f9;
  color: #0f172a;
  font-size: 12px;
  letter-spacing: 0;
}

.rfq-validation-matrix .data-table .vendor-sub-th {
  background-color: #f8fafc;
  color: #64748b;
  font-weight: 500;
}

.rfq-validation-matrix .data-table tbody tr:hover td {
  background-color: #f8fafc;
}

.rfq-validation-matrix .data-table .rfq-item-cell {
  min-width: 200px;
  line-height: 1.35;
}

.rfq-item-name {
  font-weight: 600;
  color: #0f172a;
}

.rfq-item-meta {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.rfq-item-desc {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rfq-validation-matrix .data-table .rfq-num-cell {
  white-space: nowrap;
}

.rfq-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
}

.rfq-unit {
  margin-left: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.rfq-input-hint {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-align: right;
}

.rfq-validation-matrix .data-table th,
.rfq-validation-matrix .data-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

.rfq-validation-matrix .data-table .vendor-group-th {
  padding: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.rfq-validation-matrix .data-table input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 13px;
  background-color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rfq-validation-matrix .data-table input[type=number] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rfq-validation-matrix .data-table input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(48, 93, 221, 0.12);
}

.rfq-validation-matrix .data-table input:disabled {
  background-color: #f8fafc;
  color: #64748b;
}

.rfq-validation-matrix .data-table td.is-best-price {
  background-color: #f0fdf4;
  box-shadow: inset 2px 0 0 #22c55e;
}

.rfq-totals-row td {
  background-color: #f8fafc;
  border-top: 2px solid #cbd5e1;
}

.rfq-totals-label {
  text-align: right;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.rfq-total-cell {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.rfq-total-cell.is-best-total {
  color: #15803d;
  background-color: #f0fdf4;
}

.soft-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #305DDD;
  z-index: 10001;
  opacity: 0;
  transition: width 0.4s ease, opacity 0.15s ease;
  pointer-events: none;
}

.soft-nav-progress.is-active {
  width: 75%;
  opacity: 1;
}

.soft-nav-progress.is-done {
  width: 100%;
  opacity: 0;
}

.qc-totals-row td {
  font-weight: 600;
  color: #111827;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

.qc-result-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.qc-result-note {
  font-size: 13.5px;
  color: #4b5563;
}

.qc-result-note strong {
  color: #111827;
  font-weight: 600;
}

#grading-note-form .field-col > .select-wrapper,
#grading-note-form .field-col > input[type=number] {
  width: 100%;
  max-width: 380px;
}

#grading-note-form .field-col > textarea {
  width: 100%;
  max-width: 560px;
}

#grading-note-form .field-col > .form-field-hint {
  margin-top: -4px;
}

.bags-required {
  color: #dc2626;
  margin-left: 2px;
}

.bags-entry-body .bags-entry-row td {
  padding: 8px 16px;
  border-bottom: none;
}

.bags-entry-body .bags-entry-row:first-child td {
  border-top: 1px solid #f1f2f6;
}

#grading-note-bags-body:empty + .bags-entry-body .bags-entry-row:first-child td {
  border-top: none;
}

.bags-entry-body .bags-entry-row:hover {
  background: none;
}

.bags-field {
  width: 100%;
  height: 38px;
  border: 1px solid #d8dae1;
  background: #ffffff;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13.5px;
  color: #1f2937;
  outline: none;
}

.bags-field.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bags-field:focus {
  border-color: #c7d2fe;
}

.bags-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
}

.bags-entry-hint {
  font-size: 11px;
  color: #6b7280;
  margin-right: auto;
}

.bags-table-label {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 16px;
}

.bags-table-section {
  overflow-x: auto;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
}

.bags-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.bags-table th {
  padding: 13px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #111827;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid #edeef2;
}

.bags-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: #1f2937;
  border-bottom: 1px solid #f1f2f6;
  vertical-align: middle;
}

.bags-table tbody tr:last-child td {
  border-bottom: none;
}

.bags-table tbody tr:hover {
  background-color: #fbfbfd;
}

.bags-table th.num,
.bags-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bags-table td.muted {
  color: #6b7280;
}

.bags-table td.strong {
  font-weight: 600;
  color: #111827;
}

.bags-table th.bags-actions-col,
.bags-table td.bags-actions-col {
  text-align: right;
  width: 110px;
}

.bags-empty {
  text-align: center;
  color: #6b7280;
  padding: 22px 14px;
}

.bags-col-id {
  width: 150px;
}

.bags-col-item {
  width: auto;
  min-width: 220px;
}

.bags-col-num {
  width: 130px;
}

.bags-col-user {
  width: 170px;
}

.bags-col-date {
  width: 160px;
}

.bags-col-qr {
  width: 120px;
}

.bags-col-actions {
  width: 110px;
}

.bags-col-check {
  width: 40px;
}

.pp-team-input {
  max-width: 220px;
}

.bags-table th.bags-qr-col,
.bags-table td.bags-qr-col {
  text-align: center;
}

.bag-qr-thumb {
  display: inline-block;
  width: 64px;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}

.bags-entry-row .bags-field.num {
  max-width: 110px;
  margin-left: auto;
}

.bags-entry-row .bag-auto-id,
.bags-entry-row .bag-pending {
  font-size: 12.5px;
}

.bag-id-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 3px 8px;
  border-radius: 6px;
}

.bags-avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bags-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: #eef2ff;
  color: #305DDD;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bags-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bags-entry-row .btn.hidden {
  display: none;
}

.bags-totals-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.bags-totals-row:empty {
  margin-top: 0;
}

.bags-totals-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 18px;
  background: rgb(255, 255, 255);
  border: 1px solid #f1f5f9;
  border-radius: 9px;
}

.bags-totals-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.bags-totals-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

.bags-totals-figures strong {
  font-weight: 600;
  color: #111827;
}

.bags-totals-figures strong.accent {
  color: #305DDD;
}

.bag-record + .bag-record {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid #f1f2f6;
}

.bag-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.bag-record-identity,
.bag-record-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bag-record-status {
  font-size: 13px;
  color: #6b7280;
}

.bag-record-status.is-in-progress {
  color: #305DDD;
  font-weight: 600;
}

.bag-record-status.is-complete {
  color: #22c55e;
  font-weight: 600;
}

.bag-record-body.hidden,
.bag-record-actions .btn.hidden {
  display: none;
}

.bag-record-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 40px;
}

.stage-panel {
  flex: 1 1 360px;
  min-width: 280px;
}

.stage-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f2f6;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #111827;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
}

.pp-field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9199a8;
  white-space: nowrap;
}

.pp-field .bags-field {
  height: 36px;
  font-size: 13px;
  border-color: #e5e7eb;
}

.pp-field .bags-field.num {
  text-align: left;
}

.pp-records-empty {
  margin: 0;
  padding: 22px 0;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 720px) {
  .stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.quantity-with-unit {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity-with-unit input[type=number] {
  flex: 1 1 auto;
  min-width: 0;
}

.form-row-vertical .quantity-with-unit input[type=number] {
  height: 38px;
  margin-bottom: 0;
}

.quantity-unit-wrapper {
  width: 110px;
  flex-shrink: 0;
}

.card-disabled .profile-card-header h2 {
  color: var(--muted-text, #6b7280);
}

.card-disabled .field-col input:disabled,
.card-disabled .field-col textarea:disabled,
.card-disabled .field-col select:disabled,
.card-disabled .field-col input[type=number].metal-percent-input:disabled {
  background-color: #f3f4f6;
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.card-disabled .vendor-select-pill {
  background-color: #f3f4f6;
  border-color: #e5e7eb;
  color: #6b7280;
}

.bags-table td.bags-field-error {
  color: #b91c1c;
  font-weight: 600;
}

.pp-split {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #f1f2f6;
}

.pp-split.hidden {
  display: none;
}

.pp-entry {
  margin-top: 14px;
  padding: 16px 18px;
  background: rgb(255, 255, 255);
  border: 1px solid #f1f2f6;
  border-radius: 6px;
}

.pp-entry.hidden {
  display: none;
}

.pp-entry-grid {
  display: grid;
  gap: 14px 16px;
  align-items: start;
}

.pp-entry-grid--input {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.pp-entry-grid--output {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1fr);
}

.pp-field .bags-field[readonly] {
  background: #f8fafc;
  color: #4b5563;
  cursor: default;
}

.pp-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f2f6;
}

.pp-op-screen .profile-details-card {
  margin-top: 20px;
  padding: 20px 22px 22px;
  border: 1px solid #edeef2;
  border-radius: 14px;
}

.pp-op-screen .profile-card-header {
  margin-bottom: 18px;
}

.pp-op-screen .profile-card-header h2 {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #0f172a;
}

.pp-op-screen .bags-table-label {
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.pp-op-screen .bags-table-section {
  margin-bottom: 10px;
  overflow: hidden;
  border-color: #eef0f4;
  border-radius: 10px;
}

.pp-op-screen .bags-table {
  min-width: 0;
}

.pp-op-screen .bags-table colgroup {
  display: none;
}

.pp-op-screen .bags-table th {
  padding: 8px 14px;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: #9199a8;
  background: rgb(255, 255, 255);
  border-top: 1px solid #eef0f4;
  border-bottom: 1px solid #eef0f4;
}

.pp-op-screen .bags-table td {
  padding: 9px 14px;
  font-size: 13px;
  color: #1f2937;
}

.pp-op-screen .bags-table th.bags-actions-col,
.pp-op-screen .bags-table td.bags-actions-col {
  width: auto;
  text-align: center;
}

.pp-op-screen .profile-card-header .status-pill {
  height: 32px;
  padding: 0 12px;
  border-radius: 7px;
}

.pp-op-screen .bags-table th.pp-th-right {
  text-align: right;
}

.pp-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.pp-op-list {
  overflow: hidden;
  border: 1px solid #eef0f4;
  border-radius: 10px;
}

.pp-op-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f2f6;
  cursor: pointer;
}

.pp-op-row:last-child {
  border-bottom: none;
}

.pp-op-row:hover {
  background-color: #fbfbfd;
}

.pp-op-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-op-row-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.pp-op-row-sub {
  font-size: 11.5px;
  color: #9ca3af;
}

.pp-op-row-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
}

.pp-op-row-chevron {
  width: 14px;
  height: 14px;
  color: #c6cad3;
}

#pp-stage-pipeline-table th:nth-child(1),
#pp-stage-pipeline-table td:nth-child(1) {
  width: 15%;
}

#pp-stage-pipeline-table th:nth-child(2),
#pp-stage-pipeline-table td:nth-child(2) {
  width: 15%;
}

#pp-stage-pipeline-table th:nth-child(3),
#pp-stage-pipeline-table td:nth-child(3) {
  width: 15%;
}

#pp-stage-pipeline-table th:nth-child(4),
#pp-stage-pipeline-table td:nth-child(4) {
  width: 55%;
  text-align: center;
}

.pp-pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

.pp-pipeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.pp-pipeline-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid transparent;
  flex-shrink: 0;
  outline: none;
}

.pp-pipeline-stage i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.pp-pipeline-stage.is-done {
  background-color: #ecfdf5;
  border-color: #b7ecc4;
}

.pp-pipeline-stage.is-done i {
  color: #047857;
}

.pp-pipeline-stage.is-pending {
  background-color: #fef9c3;
  border-color: #fde68a;
}

.pp-pipeline-stage.is-pending i {
  color: #a16207;
}

.pp-pipeline-caption {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
  text-align: center;
  max-width: 78px;
  line-height: 1.3;
}

.pp-pipeline-connector {
  width: 32px;
  height: 1px;
  margin: 18px 6px 0;
  background-color: #e5e7eb;
  flex-shrink: 0;
}

.pp-pipeline-connector.is-done {
  background-color: #b7ecc4;
}

.pp-pipeline-tooltip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  background: #21253c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

.pp-pipeline-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #21253c;
}

.pp-pipeline-stage:hover .pp-pipeline-tooltip,
.pp-pipeline-stage:focus-visible .pp-pipeline-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pp-op-screen .pp-row-id,
.pp-op-screen .input-code,
.pp-op-screen .output-code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.pp-op-screen .input-source {
  color: #6b7280;
}

.pp-op-screen .pp-records-empty {
  padding: 18px 14px;
  font-size: 12.5px;
  color: #9ca3af;
}

.pp-op-screen .pp-entry {
  margin-top: 0;
  padding: 12px 14px;
  border-color: #eef0f4;
  border-radius: 9px;
  background: #fbfbfd;
}

.pp-op-screen .pp-entry-grid {
  gap: 10px;
}

.pp-op-screen .pp-field-label {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #9199a8;
}

.pp-op-screen .pp-field .bags-field {
  height: 32px;
  padding: 0 11px;
  font-size: 12.5px;
  border-color: #d8dae1;
  border-radius: 7px;
}

.pp-op-screen .pp-field .select-trigger {
  height: 32px;
  padding: 0 11px;
  font-size: 12.5px;
  border-color: #d8dae1;
  border-radius: 7px;
}

.pp-op-screen .pp-entry .cell-subtext {
  margin-top: 4px;
  font-size: 10.5px;
  color: #9ca3af;
}

.pp-use-remaining {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.pp-use-remaining:hover {
  text-decoration: underline;
}

.pp-op-screen .pp-entry-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: #eef0f4;
}

.pp-op-screen .pp-section-gap {
  margin-top: 20px;
}

.pp-balance-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 360px;
  max-width: calc(100% - 48px);
  margin: 14px 24px 24px auto;
  padding: 14px 16px 16px;
  background: #ffffff;
  border: 1px solid #f1f2f6;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
}

.pp-balance-bar:empty {
  display: none;
}

.pp-balance-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pp-balance-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #4b5563;
}

.pp-balance-when {
  font-size: 11.5px;
  color: #6b7280;
  white-space: nowrap;
}

.pp-balance-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #f1f2f6;
  border-radius: 8px;
  overflow: hidden;
}

.pp-balance-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
}

.pp-balance-stat + .pp-balance-stat {
  border-left: 1px solid #f1f2f6;
}

.pp-balance-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.pp-balance-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pp-balance-stat-value small {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.pp-balance-stat-sub {
  font-size: 11px;
  color: #6b7280;
}

.pp-balance-stat--warn {
  background: rgba(254, 249, 195, 0.45);
}

.pp-balance-stat--warn .pp-balance-stat-value {
  color: #a16207;
}

.pp-balance-stat--done .pp-balance-stat-value {
  color: #047857;
}

.pp-balance-reason {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-balance-reason-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pp-balance-flag {
  font-size: 11px;
  font-weight: 600;
  color: #a16207;
  white-space: nowrap;
}

.pp-balance-reason-text {
  margin: 0;
  font-size: 13px;
  color: #111827;
  overflow-wrap: anywhere;
}

.pp-entry .cell-subtext {
  margin-top: 4px;
  font-size: 10.5px;
  color: #9ca3af;
}

.pp-use-remaining {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.pp-use-remaining:hover {
  text-decoration: underline;
}

.pp-op-screen .pp-entry-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: #eef0f4;
}

.pp-op-screen .pp-section-gap {
  margin-top: 20px;
}

.pp-entry .cell-subtext {
  margin-top: 6px;
}

.pp-section-gap {
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .pp-entry-grid--input,
  .pp-entry-grid--output {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.pp-split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pp-split-title {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.pp-split-remaining {
  font-size: 13px;
  color: #6b7280;
}

.pp-split-remaining.is-done {
  color: #22c55e;
  font-weight: 600;
}

.pp-split-table {
  min-width: 0;
}

.app-launcher-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px;
  box-sizing: border-box;
}

.app-launcher-topbar {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
}

.app-launcher-search-wrap {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 40px;
}

.app-launcher-search-input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
}

.app-launcher-empty {
  margin-top: 40px;
  font-size: 13.5px;
  color: #6b7280;
}

.app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 170px));
  justify-content: center;
  gap: 32px;
  max-width: 1120px;
}

.app-launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #edeef2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.app-launcher-tile.hidden {
  display: none;
}

.app-launcher-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.08), 0 8px 20px rgba(16, 24, 40, 0.08);
}

.ui-icon.app-launcher-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.app-launcher-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.su-capacity-row {
  display: flex;
  gap: 8px;
}

.su-capacity-row .form-control {
  flex: 1;
  min-width: 0;
}

.su-capacity-row input[type=number].form-control {
  height: 38px;
  padding: 0 12px;
  margin-bottom: 0;
}

.ui-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}

.ui-icon--admin-panel {
  -webkit-mask-image: url("/static/images/ui-icons/admin-panel-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/admin-panel-icons-ui.svg?v=7");
  color: #4b57d1;
}

.ui-icon--alert-circle {
  -webkit-mask-image: url("/static/images/ui-icons/alert-circle-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/alert-circle-icons-ui.svg?v=7");
}

.ui-icon--apps {
  -webkit-mask-image: url("/static/images/ui-icons/apps-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/apps-icons-ui.svg?v=7");
  color: #2a74db;
}

.ui-icon--alert-triangle {
  -webkit-mask-image: url("/static/images/ui-icons/alert-triangle-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/alert-triangle-icons-ui.svg?v=7");
}

.ui-icon--arrow-left {
  -webkit-mask-image: url("/static/images/ui-icons/arrow-left-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/arrow-left-icons-ui.svg?v=7");
  color: #1c5bd9;
}

.ui-icon--automation {
  -webkit-mask-image: url("/static/images/ui-icons/automation-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/automation-icons-ui.svg?v=7");
  color: #f7525a;
}

.ui-icon--bell {
  -webkit-mask-image: url("/static/images/ui-icons/bell-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/bell-icons-ui.svg?v=7");
}

.ui-icon--boxes {
  -webkit-mask-image: url("/static/images/ui-icons/boxes-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/boxes-icons-ui.svg?v=7");
}

.ui-icon--building {
  -webkit-mask-image: url("/static/images/ui-icons/building-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/building-icons-ui.svg?v=7");
}

.ui-icon--calendar {
  -webkit-mask-image: url("/static/images/ui-icons/calendar-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/calendar-icons-ui.svg?v=7");
}

.ui-icon--camera {
  -webkit-mask-image: url("/static/images/ui-icons/camera-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/camera-icons-ui.svg?v=7");
}

.ui-icon--chart-line {
  -webkit-mask-image: url("/static/images/ui-icons/chart-line-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/chart-line-icons-ui.svg?v=7");
}

.ui-icon--check-circle {
  -webkit-mask-image: url("/static/images/ui-icons/check-circle-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/check-circle-icons-ui.svg?v=7");
}

.ui-icon--chevron-down {
  -webkit-mask-image: url("/static/images/ui-icons/chevron-down-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/chevron-down-icons-ui.svg?v=7");
}

.ui-icon--chevron-right {
  -webkit-mask-image: url("/static/images/ui-icons/chevron-right-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/chevron-right-icons-ui.svg?v=7");
}

.ui-icon--chevron-up {
  -webkit-mask-image: url("/static/images/ui-icons/chevron-up-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/chevron-up-icons-ui.svg?v=7");
}

.ui-icon--clock {
  -webkit-mask-image: url("/static/images/ui-icons/clock-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/clock-icons-ui.svg?v=7");
}

.ui-icon--close {
  -webkit-mask-image: url("/static/images/ui-icons/close-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/close-icons-ui.svg?v=7");
}

.ui-icon--community {
  -webkit-mask-image: url("/static/images/ui-icons/community-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/community-icons-ui.svg?v=7");
  color: #a8283f;
}

.ui-icon--contrast {
  -webkit-mask-image: url("/static/images/ui-icons/contrast-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/contrast-icons-ui.svg?v=7");
  color: #64748b;
}

.ui-icon--copy {
  -webkit-mask-image: url("/static/images/ui-icons/copy-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/copy-icons-ui.svg?v=7");
}

.ui-icon--custom-modules {
  -webkit-mask-image: url("/static/images/ui-icons/custom-modules-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/custom-modules-icons-ui.svg?v=7");
  color: #2762d9;
}

.ui-icon--developer-options {
  -webkit-mask-image: url("/static/images/ui-icons/developer-options-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/developer-options-icons-ui.svg?v=7");
  color: #fd9134;
}

.ui-icon--crusher {
  -webkit-mask-image: url("/static/images/ui-icons/crusher-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/crusher-icons-ui.svg?v=7");
}

.ui-icon--cutter {
  -webkit-mask-image: url("/static/images/ui-icons/cutter-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/cutter-icons-ui.svg?v=7");
}

.ui-icon--download {
  -webkit-mask-image: url("/static/images/ui-icons/download-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/download-icons-ui.svg?v=7");
}

.ui-icon--drag {
  -webkit-mask-image: url("/static/images/ui-icons/drag-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/drag-icons-ui.svg?v=7");
}

.ui-icon--dryer {
  -webkit-mask-image: url("/static/images/ui-icons/dryer-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/dryer-icons-ui.svg?v=7");
}

.ui-icon--emoji {
  -webkit-mask-image: url("/static/images/ui-icons/emoji-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/emoji-icons-ui.svg?v=7");
}

.ui-icon--flame {
  -webkit-mask-image: url("/static/images/ui-icons/flame-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/flame-icons-ui.svg?v=7");
}

.ui-icon--lab-external {
  -webkit-mask-image: url("/static/images/ui-icons/lab-external-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/lab-external-icons-ui.svg?v=7");
}

.ui-icon--quarantine {
  -webkit-mask-image: url("/static/images/ui-icons/quarantine-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/quarantine-icons-ui.svg?v=7");
}

.ui-icon--scale {
  -webkit-mask-image: url("/static/images/ui-icons/scale-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/scale-icons-ui.svg?v=7");
}

.ui-icon--segregate {
  -webkit-mask-image: url("/static/images/ui-icons/segregate-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/segregate-icons-ui.svg?v=7");
}

.ui-icon--truck {
  -webkit-mask-image: url("/static/images/ui-icons/truck-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/truck-icons-ui.svg?v=7");
}

.ui-icon--unloading {
  -webkit-mask-image: url("/static/images/ui-icons/unloading-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unloading-icons-ui.svg?v=7");
}

.ui-icon--vendor {
  -webkit-mask-image: url("/static/images/ui-icons/vendor-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/vendor-icons-ui.svg?v=7");
}

.ui-icon--wrench {
  -webkit-mask-image: url("/static/images/ui-icons/wrench-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/wrench-icons-ui.svg?v=7");
}

.ui-icon--barcode {
  -webkit-mask-image: url("/static/images/ui-icons/barcode-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/barcode-icons-ui.svg?v=7");
}

.ui-icon--inbox {
  -webkit-mask-image: url("/static/images/ui-icons/inbox-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/inbox-icons-ui.svg?v=7");
}

.ui-icon--layers {
  -webkit-mask-image: url("/static/images/ui-icons/layers-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/layers-icons-ui.svg?v=7");
}

.ui-icon--lock {
  -webkit-mask-image: url("/static/images/ui-icons/lock-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/lock-icons-ui.svg?v=7");
}

.ui-icon--plan {
  -webkit-mask-image: url("/static/images/ui-icons/plan-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/plan-icons-ui.svg?v=7");
}

.ui-icon--qc-finished {
  -webkit-mask-image: url("/static/images/ui-icons/qc-finished-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/qc-finished-icons-ui.svg?v=7");
}

.ui-icon--qc-grn {
  -webkit-mask-image: url("/static/images/ui-icons/qc-grn-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/qc-grn-icons-ui.svg?v=7");
}

.ui-icon--qc-production {
  -webkit-mask-image: url("/static/images/ui-icons/qc-production-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/qc-production-icons-ui.svg?v=7");
}

.ui-icon--rack {
  -webkit-mask-image: url("/static/images/ui-icons/rack-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/rack-icons-ui.svg?v=7");
}

.ui-icon--receipt {
  -webkit-mask-image: url("/static/images/ui-icons/receipt-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/receipt-icons-ui.svg?v=7");
}

.ui-icon--tag {
  -webkit-mask-image: url("/static/images/ui-icons/tag-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/tag-icons-ui.svg?v=7");
}

.ui-icon--test-tubes {
  -webkit-mask-image: url("/static/images/ui-icons/test-tubes-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/test-tubes-icons-ui.svg?v=7");
}

.ui-icon--eye {
  -webkit-mask-image: url("/static/images/ui-icons/eye-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/eye-icons-ui.svg?v=7");
}

.ui-icon--eye-off {
  -webkit-mask-image: url("/static/images/ui-icons/eye-off-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/eye-off-icons-ui.svg?v=7");
}

.ui-icon--feedback {
  -webkit-mask-image: url("/static/images/ui-icons/feedback-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/feedback-icons-ui.svg?v=7");
  color: #de9a0e;
}

.ui-icon--feedback-alt {
  -webkit-mask-image: url("/static/images/ui-icons/feedback-alt-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/feedback-alt-icons-ui.svg?v=7");
}

.ui-icon--file {
  -webkit-mask-image: url("/static/images/ui-icons/file-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-icons-ui.svg?v=7");
}

.ui-icon--file-audio {
  -webkit-mask-image: url("/static/images/ui-icons/file-audio-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-audio-icons-ui.svg?v=7");
}

.ui-icon--file-docx {
  -webkit-mask-image: url("/static/images/ui-icons/file-docx-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-docx-icons-ui.svg?v=7");
}

.ui-icon--file-image {
  -webkit-mask-image: url("/static/images/ui-icons/file-image-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-image-icons-ui.svg?v=7");
}

.ui-icon--file-jpeg {
  -webkit-mask-image: url("/static/images/ui-icons/file-jpeg-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-jpeg-icons-ui.svg?v=7");
}

.ui-icon--file-jpg {
  -webkit-mask-image: url("/static/images/ui-icons/file-jpg-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-jpg-icons-ui.svg?v=7");
}

.ui-icon--file-pdf {
  -webkit-mask-image: url("/static/images/ui-icons/file-pdf-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-pdf-icons-ui.svg?v=7");
}

.ui-icon--file-rar {
  -webkit-mask-image: url("/static/images/ui-icons/file-rar-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-rar-icons-ui.svg?v=7");
}

.ui-icon--file-refresh {
  -webkit-mask-image: url("/static/images/ui-icons/file-refresh-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-refresh-icons-ui.svg?v=7");
}

.ui-icon--file-sheet {
  -webkit-mask-image: url("/static/images/ui-icons/file-sheet-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-sheet-icons-ui.svg?v=7");
}

.ui-icon--file-slides {
  -webkit-mask-image: url("/static/images/ui-icons/file-slides-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-slides-icons-ui.svg?v=7");
}

.ui-icon--file-txt {
  -webkit-mask-image: url("/static/images/ui-icons/file-txt-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-txt-icons-ui.svg?v=7");
}

.ui-icon--file-video {
  -webkit-mask-image: url("/static/images/ui-icons/file-video-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-video-icons-ui.svg?v=7");
}

.ui-icon--file-xlsx {
  -webkit-mask-image: url("/static/images/ui-icons/file-xlsx-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-xlsx-icons-ui.svg?v=7");
}

.ui-icon--file-zip {
  -webkit-mask-image: url("/static/images/ui-icons/file-zip-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/file-zip-icons-ui.svg?v=7");
}

.ui-icon--help {
  -webkit-mask-image: url("/static/images/ui-icons/help-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/help-icons-ui.svg?v=7");
  color: #139aae;
}

.ui-icon--history {
  -webkit-mask-image: url("/static/images/ui-icons/history-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/history-icons-ui.svg?v=7");
}

.ui-icon--idea {
  -webkit-mask-image: url("/static/images/ui-icons/idea-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/idea-icons-ui.svg?v=7");
}

.ui-icon--image {
  -webkit-mask-image: url("/static/images/ui-icons/image-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/image-icons-ui.svg?v=7");
}

.ui-icon--info {
  -webkit-mask-image: url("/static/images/ui-icons/info-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/info-icons-ui.svg?v=7");
}

.ui-icon--integrations {
  -webkit-mask-image: url("/static/images/ui-icons/integrations-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/integrations-icons-ui.svg?v=7");
  color: #22b378;
}

.ui-icon--key {
  -webkit-mask-image: url("/static/images/ui-icons/key-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/key-icons-ui.svg?v=7");
}

.ui-icon--layout {
  -webkit-mask-image: url("/static/images/ui-icons/layout-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/layout-icons-ui.svg?v=7");
  color: #4b5670;
}

.ui-icon--link {
  -webkit-mask-image: url("/static/images/ui-icons/link-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/link-icons-ui.svg?v=7");
}

.ui-icon--logout {
  -webkit-mask-image: url("/static/images/ui-icons/logout-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/logout-icons-ui.svg?v=7");
}

.ui-icon--mail {
  -webkit-mask-image: url("/static/images/ui-icons/mail-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/mail-icons-ui.svg?v=7");
  color: #2a74db;
}

.ui-icon--menu {
  -webkit-mask-image: url("/static/images/ui-icons/menu-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/menu-icons-ui.svg?v=7");
}

.ui-icon--moon {
  -webkit-mask-image: url("/static/images/ui-icons/moon-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/moon-icons-ui.svg?v=7");
  color: #6366f1;
}

.ui-icon--notes {
  -webkit-mask-image: url("/static/images/ui-icons/notes-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/notes-icons-ui.svg?v=7");
}

.ui-icon--pen {
  -webkit-mask-image: url("/static/images/ui-icons/pen-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/pen-icons-ui.svg?v=7");
}

.ui-icon--plug {
  -webkit-mask-image: url("/static/images/ui-icons/plug-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/plug-icons-ui.svg?v=7");
}

.ui-icon--nav-admin {
  -webkit-mask-image: url("/static/images/ui-icons/nav-admin-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-admin-icons-ui.svg?v=7");
  color: #7c4ddb;
}

.ui-icon--nav-audit {
  -webkit-mask-image: url("/static/images/ui-icons/nav-audit-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-audit-icons-ui.svg?v=7");
  color: #be185d;
}

.ui-icon--nav-consumables {
  -webkit-mask-image: url("/static/images/ui-icons/nav-consumables-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-consumables-icons-ui.svg?v=7");
  color: #a246c0;
}

.ui-icon--nav-dashboard {
  -webkit-mask-image: url("/static/images/ui-icons/nav-dashboard-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-dashboard-icons-ui.svg?v=7");
  color: #4b57d1;
}

.ui-icon--nav-inventory {
  -webkit-mask-image: url("/static/images/ui-icons/nav-inventory-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-inventory-icons-ui.svg?v=7");
  color: #2f6fb0;
}

.ui-icon--nav-items {
  -webkit-mask-image: url("/static/images/ui-icons/nav-items-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-items-icons-ui.svg?v=7");
  color: #1d5f85;
}

.ui-icon--nav-mes {
  -webkit-mask-image: url("/static/images/ui-icons/nav-mes-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-mes-icons-ui.svg?v=7");
  color: #d97706;
}

.ui-icon--nav-lab {
  -webkit-mask-image: url("/static/images/ui-icons/nav-lab-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-lab-icons-ui.svg?v=7");
  color: #0b8a8f;
}

.ui-icon--nav-preprocess {
  -webkit-mask-image: url("/static/images/ui-icons/nav-preprocess-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-preprocess-icons-ui.svg?v=7");
  color: #4d9a1f;
}

.ui-icon--nav-production {
  -webkit-mask-image: url("/static/images/ui-icons/nav-production-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-production-icons-ui.svg?v=7");
  color: #e25a34;
}

.ui-icon--nav-purchases {
  -webkit-mask-image: url("/static/images/ui-icons/nav-purchases-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-purchases-icons-ui.svg?v=7");
  color: #2a74db;
}

.ui-icon--nav-quality {
  -webkit-mask-image: url("/static/images/ui-icons/nav-quality-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-quality-icons-ui.svg?v=7");
  color: #0f9674;
}

.ui-icon--nav-units {
  -webkit-mask-image: url("/static/images/ui-icons/nav-units-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-units-icons-ui.svg?v=7");
  color: #3d6388;
}

.ui-icon--nav-warehouse {
  -webkit-mask-image: url("/static/images/ui-icons/nav-warehouse-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/nav-warehouse-icons-ui.svg?v=7");
  color: #1597a3;
}

.ui-icon--paperclip {
  -webkit-mask-image: url("/static/images/ui-icons/paperclip-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/paperclip-icons-ui.svg?v=7");
}

.ui-icon--plus {
  -webkit-mask-image: url("/static/images/ui-icons/plus-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/plus-icons-ui.svg?v=7");
}

.ui-icon--print {
  -webkit-mask-image: url("/static/images/ui-icons/print-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/print-icons-ui.svg?v=7");
}

.ui-icon--question {
  -webkit-mask-image: url("/static/images/ui-icons/question-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/question-icons-ui.svg?v=7");
}

.ui-icon--refresh {
  -webkit-mask-image: url("/static/images/ui-icons/refresh-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/refresh-icons-ui.svg?v=7");
  color: #22b378;
}

.ui-icon--reminder {
  -webkit-mask-image: url("/static/images/ui-icons/reminder-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/reminder-icons-ui.svg?v=7");
  color: #f59e0b;
}

.ui-icon--report {
  -webkit-mask-image: url("/static/images/ui-icons/report-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/report-icons-ui.svg?v=7");
  color: #22b378;
}

.ui-icon--search {
  -webkit-mask-image: url("/static/images/ui-icons/search-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/search-icons-ui.svg?v=7");
}

.ui-icon--send {
  -webkit-mask-image: url("/static/images/ui-icons/send-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/send-icons-ui.svg?v=7");
}

.ui-icon--setup-configurations {
  -webkit-mask-image: url("/static/images/ui-icons/setup-configurations-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/setup-configurations-icons-ui.svg?v=7");
  color: #fd9134;
}

.ui-icon--shield {
  -webkit-mask-image: url("/static/images/ui-icons/shield-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/shield-icons-ui.svg?v=7");
}

.ui-icon--spinner {
  -webkit-mask-image: url("/static/images/ui-icons/spinner-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/spinner-icons-ui.svg?v=7");
}

.ui-icon--sun {
  -webkit-mask-image: url("/static/images/ui-icons/sun-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/sun-icons-ui.svg?v=7");
  color: #f59e0b;
}

.ui-icon--sun-small {
  -webkit-mask-image: url("/static/images/ui-icons/sun-small-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/sun-small-icons-ui.svg?v=7");
}

.ui-icon--support {
  -webkit-mask-image: url("/static/images/ui-icons/support-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/support-icons-ui.svg?v=7");
}

.ui-icon--support-desk {
  -webkit-mask-image: url("/static/images/ui-icons/support-desk-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/support-desk-icons-ui.svg?v=7");
}

.ui-icon--sync {
  -webkit-mask-image: url("/static/images/ui-icons/sync-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/sync-icons-ui.svg?v=7");
}

.ui-icon--three-dots {
  -webkit-mask-image: url("/static/images/ui-icons/three-dots-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/three-dots-icons-ui.svg?v=7");
}

.ui-icon--trash {
  -webkit-mask-image: url("/static/images/ui-icons/trash-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/trash-icons-ui.svg?v=7");
}

.ui-icon--unit-bag {
  -webkit-mask-image: url("/static/images/ui-icons/unit-bag-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-bag-icons-ui.svg?v=7");
}

.ui-icon--unit-bin {
  -webkit-mask-image: url("/static/images/ui-icons/unit-bin-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-bin-icons-ui.svg?v=7");
}

.ui-icon--unit-box {
  -webkit-mask-image: url("/static/images/ui-icons/unit-box-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-box-icons-ui.svg?v=7");
}

.ui-icon--unit-container {
  -webkit-mask-image: url("/static/images/ui-icons/unit-container-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-container-icons-ui.svg?v=7");
}

.ui-icon--unit-custom {
  -webkit-mask-image: url("/static/images/ui-icons/unit-custom-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-custom-icons-ui.svg?v=7");
}

.ui-icon--unit-drum {
  -webkit-mask-image: url("/static/images/ui-icons/unit-drum-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-drum-icons-ui.svg?v=7");
}

.ui-icon--unit-tin {
  -webkit-mask-image: url("/static/images/ui-icons/unit-tin-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-tin-icons-ui.svg?v=7");
}

.ui-icon--unit-tray {
  -webkit-mask-image: url("/static/images/ui-icons/unit-tray-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-tray-icons-ui.svg?v=7");
}

.ui-icon--unit-tumbler {
  -webkit-mask-image: url("/static/images/ui-icons/unit-tumbler-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/unit-tumbler-icons-ui.svg?v=7");
}

.ui-icon--upload {
  -webkit-mask-image: url("/static/images/ui-icons/upload-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/upload-icons-ui.svg?v=7");
}

.ui-icon--user {
  -webkit-mask-image: url("/static/images/ui-icons/user-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/user-icons-ui.svg?v=7");
}

.ui-icon--users {
  -webkit-mask-image: url("/static/images/ui-icons/users-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/users-icons-ui.svg?v=7");
  color: #5e52d6;
}

.ui-icon--voice {
  -webkit-mask-image: url("/static/images/ui-icons/voice-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/voice-icons-ui.svg?v=7");
}

.ui-icon--x-circle {
  -webkit-mask-image: url("/static/images/ui-icons/x-circle-icons-ui.svg?v=7");
  mask-image: url("/static/images/ui-icons/x-circle-icons-ui.svg?v=7");
}

.ui-icon--nav-vault {
  -webkit-mask: none;
  mask: none;
  background: url("/static/images/ui-icons/nav-vault-icons-ui.svg?v=7") center/contain no-repeat;
}

.ui-icon--lg {
  width: 32px;
  height: 32px;
}

.contact-support-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.contact-support-popup {
  display: none;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: -8px 0 30px rgba(16, 24, 40, 0.18);
  overflow: hidden;
}

.contact-support-widget.is-open .contact-support-popup {
  display: flex;
  flex-direction: column;
  animation: fadeInUp 0.25s ease-out;
}

.contact-support-popup .ticket-system {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-support-popup .ticket-layout {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  gap: 0;
}

.contact-support-popup .ticket-list-pane,
.contact-support-popup .ticket-chat-pane {
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  flex: 1 1 auto;
}

.contact-support-popup .ticket-list-pane {
  display: flex;
}

.contact-support-popup .ticket-chat-pane,
.contact-support-popup .ticket-system--chat-open .ticket-list-pane {
  display: none;
}

.contact-support-popup .ticket-system--chat-open .ticket-chat-pane {
  display: flex;
}

.contact-support-popup .ticket-back-btn {
  display: inline-flex;
}

.contact-support-popup .ticket-chat-head {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 12px 8px;
}

.contact-support-popup .ticket-back-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.contact-support-popup .ticket-chat-title {
  display: -webkit-box;
  font-size: 13.5px;
  line-height: 1.35;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.contact-support-popup .ticket-chat-meta {
  font-size: 11px;
}

.contact-support-popup .ticket-attachments {
  max-width: 100%;
}

.contact-support-popup .ticket-messages {
  gap: 12px;
  padding: 12px;
}

.contact-support-popup .ticket-composer-wrap {
  padding: 10px 12px;
}

.contact-support-btn {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(48, 93, 221, 0.35);
  transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.contact-support-btn:hover {
  background: #305DDD;
  transform: scale(1.05);
}

.contact-support-btn .ui-icon--support,
.contact-support-btn .ui-icon--close {
  grid-area: 1/1;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.contact-support-btn .ui-icon.hidden {
  display: none;
}

.contact-support-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  background: #b91c1c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.contact-support-badge[hidden] {
  display: none;
}

.ui-icon.select-arrow {
  width: 13px;
  height: 13px;
}

.ui-icon.accordion-icon {
  width: 13px;
  height: 13px;
}

.ui-icon.help-icon {
  width: 14px;
  height: 14px;
}

.ui-icon.role-search-icon,
.ui-icon.settings-search-icon {
  width: 15px;
  height: 15px;
}

.ui-icon.drag-icon {
  width: 16px;
  height: 16px;
  cursor: grab;
}

.ui-icon.attachment-file-icon {
  width: 17px;
  height: 17px;
}

.ui-icon.file-item-delete,
.ui-icon.file-item-preview {
  width: 16px;
  height: 16px;
}

.ui-icon.preview-unsupported-icon {
  width: 46px;
  height: 46px;
}

.ui-icon.preview-note-icon {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

.ui-icon--spinner {
  animation: ui-icon-spin 0.8s linear infinite;
}

@keyframes ui-icon-spin {
  to {
    transform: rotate(360deg);
  }
}
.chip-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-toggle {
  min-width: 84px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #3d3d3d;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip-toggle:hover:not(.is-active):not(.is-static) {
  background: #f8fafc;
  color: #4b5563;
}

.chip-toggle.is-active {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.chip-toggle.is-static {
  cursor: default;
}

.cell-subtext {
  display: block;
  font-size: 11px;
  color: #6b7280;
}

.su-capacity-unit {
  flex: 0 0 110px;
}

.su-form-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
}

#su-table th,
#sv-table th {
  white-space: nowrap;
}

.sa-orgs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  padding: 0 24px 24px;
}

.sa-orgs .list-header,
.sa-orgs > .card {
  margin: 0;
}

.invd-swatch--status-available {
  background: #16a34a;
}

.invd-swatch--status-in_use {
  background: #3b82f6;
}

.invd-swatch--status-maintenance {
  background: #d97706;
}

.invd-swatch--service-preventive {
  background: #3b82f6;
}

.invd-swatch--service-breakdown {
  background: #ef4444;
}

.invd-swatch--service-calibration {
  background: #8b5cf6;
}

.invd-swatch--service-inspection {
  background: #14b8a6;
}

.ppd-att-dot--later {
  background: #64748b;
}

.inv-nowrap {
  white-space: nowrap;
}

.su-overdue {
  font-weight: 600;
  color: #dc2626;
}

.sv-detail-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f2f6;
  font-size: 13.5px;
}

.sv-detail-label {
  color: #6b7280;
}

.sv-detail-value {
  color: #111827;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.form-row-vertical input.su-readonly-input {
  background-color: #f8fafc;
  color: #6b7280;
  cursor: not-allowed;
}
#cm-page {
  margin-top: 16px;
}

.cm-panel {
  padding: 0;
  overflow: hidden;
}

.cm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #edeef2;
  background: #f8fafc;
}

.cm-path {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.cm-updated {
  font-size: 12px;
  color: #6b7280;
}

.cm-group + .cm-group {
  border-top: 1px solid #edeef2;
}

.cm-group-title {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid #f1f2f6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9199a8;
}

.cm-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(90px, 0.6fr) auto minmax(80px, 0.5fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid #f1f2f6;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

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

.cm-row:hover {
  background: #f5f6f9;
}

.cm-row--alert {
  background: #fef2f2;
  box-shadow: inset 3px 0 0 #b91c1c;
}

.cm-row--muted .cm-name,
.cm-row--muted .cm-schedule {
  color: #3d3d3d;
}

.cm-name {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.cm-schedule {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  color: #6b7280;
}

.cm-strip {
  display: inline-flex;
  gap: 3px;
}

.cm-beat {
  width: 12px;
  height: 18px;
  border-radius: 2px;
  background: #f1f5f9;
  transition: background-color 0.4s ease;
}

.cm-beat--success {
  background: #047857;
}

.cm-beat--failed {
  background: #b91c1c;
}

.cm-beat--running {
  background: #b45309;
}

.cm-beat--new {
  animation: cmBeatIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cmBeatIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-beat {
    transition: none;
  }
  .cm-beat--new {
    animation: none;
  }
}
.cm-status {
  justify-self: end;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
}

.cm-status--healthy {
  color: #047857;
}

.cm-status--failed,
.cm-status--down {
  color: #b91c1c;
}

.cm-status--late {
  color: #92400e;
}

.cm-status--paused,
.cm-status--waiting {
  color: #6b7280;
}

.cm-foot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #edeef2;
  background: #f8fafc;
}

.cm-foot-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px;
  border-right: 1px solid #f1f2f6;
}

.cm-foot-cell:last-child {
  border-right: none;
}

.cm-foot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9199a8;
}

.cm-foot-value {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.cm-up {
  color: #047857;
}

.cm-down {
  color: #b91c1c;
}

.cm-empty {
  margin: 0;
  padding: 18px 20px;
  font-size: 13.5px;
  color: #6b7280;
}

.cm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px 16px;
}

.cm-toolbar-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cm-toolbar-start .status-pill.hidden {
  display: none;
}

.cm-row--selected {
  background: #eef2ff;
}

.cm-row--selected.cm-row--alert {
  background: #fef2f2;
}

.cm-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.cm-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #edeef2;
  background: #f8fafc;
}

.cm-card-title {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.cm-card-note {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: #6b7280;
}

.cm-card-metric {
  margin-left: auto;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
}

.cm-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}

.cm-card-text {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.cm-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cm-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9199a8;
}

.cm-card-table {
  max-height: 340px;
  overflow: auto;
}

.cm-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #edeef2;
  background: #f8fafc;
}

.cm-card-alert,
.cm-card-ok {
  margin: 0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
}

.cm-card-alert {
  color: #b91c1c;
}

.cm-card-ok {
  color: #047857;
}

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

.cm-card-actions .select-wrapper.cm-interval {
  width: 160px;
  margin: 0;
}

.cm-card-head .cm-card-actions {
  margin-left: auto;
}

.cm-toolbar .ppd-range.hidden {
  display: none;
}

.cm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

.cm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cm-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.cm-dot--success {
  background: #16a34a;
}

.cm-dot--failed {
  background: #ef4444;
}

.cm-dot--average {
  background: #8b5cf6;
}

.cm-chart {
  position: relative;
  height: 220px;
}

.cm-chart--small {
  height: 190px;
}

[data-cm-view] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 24px 24px;
}

[data-cm-view].hidden {
  display: none;
}

[data-cm-view] > .card {
  margin: 0;
}

.ppd-kpis#cm-db-tiles,
.ppd-kpis#cm-svc-tiles {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

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

.cm-chart-grid > .card {
  margin: 0;
}

.cm-runs .cm-status {
  justify-self: auto;
}

.cm-result {
  white-space: pre-line;
  overflow-wrap: break-word;
  font-size: 12.5px;
}

.cm-query {
  display: -webkit-box;
  overflow: hidden;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  white-space: normal;
  word-break: break-all;
  color: #1f2937;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cm-queries td:first-child {
  max-width: 640px;
}

.cm-nowrap {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .cm-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ppd-kpis#cm-db-tiles,
  .ppd-kpis#cm-svc-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .cm-row {
    grid-template-columns: 1fr auto;
  }
  .cm-strip {
    grid-column: 1/-1;
  }
  .cm-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.value-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.value-stack > li,
.value-stack > span {
  display: block;
  line-height: 1.4;
}

.detail-subtable {
  width: auto;
  min-width: 360px;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #edeef2;
  border-radius: 7px;
  overflow: hidden;
  background: #ffffff;
  font-size: 13.5px;
}

.field-col > .detail-subtable,
.field-col .detail-subtable {
  align-self: flex-start;
}

.detail-subtable th {
  padding: 8px 14px;
  text-align: left;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9199a8;
  background: #f8fafc;
  border-bottom: 1px solid #edeef2;
}

.detail-subtable td {
  padding: 9px 14px;
  color: #1f2937;
  border-bottom: 1px solid #f1f2f6;
  vertical-align: middle;
}

.detail-subtable tbody tr:last-child td {
  border-bottom: none;
}

.detail-subtable .num {
  text-align: right;
  white-space: nowrap;
}

.data-table th.num,
.data-table td.num {
  text-align: right;
  white-space: nowrap;
}

.data-table .value-stack > span {
  white-space: nowrap;
}
.has-field-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.field-info {
  order: 2;
  outline: none;
}

.field-info .help-icon {
  width: 14px;
  height: 14px;
  margin-left: 0;
  background: none;
}

.field-info .ui-icon.help-icon {
  background-color: currentColor;
  color: #9ca3af;
}

.field-info:hover .ui-icon.help-icon,
.field-info:focus-visible .ui-icon.help-icon {
  color: #305DDD;
}

.field-info .tooltip-content {
  z-index: 60;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.form-field-hint:empty {
  display: none;
}

.settings-group-icon {
  width: 16px;
  height: 16px;
}

.btn .btn-back-icon {
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  color: currentColor;
}
.gn-bag-picker:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
}

.gn-bag-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gn-bag-toolbar .gn-bag-search {
  flex: 1;
  min-width: 0;
}

.gn-bag-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #f8fafc;
}

.gn-bag-group-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.gn-bag-group-title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.gn-bag-group-count {
  font-size: 11.5px;
  color: #6b7280;
}

.gn-bag-group-toggle {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font-size: 11.5px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.gn-bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}

.gn-bag-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  text-align: left;
}

button.gn-bag-tile {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

button.gn-bag-tile:hover {
  border-color: #c7d2fe;
}

.gn-bag-tile[aria-pressed=true] {
  border-color: #305DDD;
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px #305DDD;
}

.gn-bag-tile-code {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

.gn-bag-tile-meta {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}

.gn-bag-empty {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

.gn-bag-group-header {
  flex-wrap: wrap;
  column-gap: 14px;
}

.gn-bag-group-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.gn-bag-group-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6b7280;
}

.gn-bag-table-wrap {
  max-width: 820px;
  overflow-x: auto;
}

.gn-bag-table {
  max-width: none;
}

.gn-nowrap {
  white-space: nowrap;
}
.lab-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  margin-right: 16px;
}

@media (max-width: 900px) {
  .lab-steps {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    margin: 8px 0 0;
  }
}
.lab-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lab-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #3d3d3d;
}

.lab-step-icon .ui-icon {
  width: 17px;
  height: 17px;
  color: inherit;
}

.lab-step-text {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: #6b7280;
  white-space: nowrap;
}

.lab-step-text strong {
  font-size: 13px;
  color: #4b5563;
}

.lab-step--done .lab-step-icon {
  background: #ecfdf5;
  color: #059669;
}

.lab-step--done .lab-step-text strong {
  color: #111827;
}

.lab-step--current .lab-step-icon {
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 0 0 2px #bfdbfe;
}

.lab-step--current .lab-step-text strong {
  color: #1d4ed8;
}

.lab-step-line {
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: #edeef2;
}

.lab-overdue {
  display: inline-flex;
  padding: 1px 8px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
}

.lab-results-card,
.lab-close-card {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}

.lab-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #edeef2;
}

.lab-results-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #111827;
}

.lab-results-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

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

.lab-results-table td {
  vertical-align: middle;
}

.lab-results-table .ltr-entry input[data-r=value] {
  max-width: 120px;
  text-align: right;
}

.lab-unit {
  min-width: 100px;
  margin: 0;
}

.lab-close-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  padding: 16px 20px 4px;
}

.lab-close-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

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

.lab-close-field input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13.5px;
  color: #1f2937;
}

.lab-close-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px 18px;
}

@media (max-width: 700px) {
  .lab-steps {
    flex-direction: column;
    align-items: flex-start;
  }
  .lab-step-line {
    display: none;
  }
  .lab-close-field--wide {
    grid-column: auto;
  }
}
.lab-test-pills:empty {
  display: none;
}

.lab-test-pills {
  margin-top: 2px;
}

.lab-method {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
}

.lab-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
}

.lab-progress.hidden {
  display: none;
}

.lab-progress-bar {
  position: relative;
  width: 160px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f4;
}

.lab-progress-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: #22c55e;
  transition: width 0.3s ease;
}

.lab-worksheet {
  padding: 4px 0 8px;
}

.lab-ws-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 0.9fr) minmax(150px, 0.9fr) minmax(140px, 1fr) 64px;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-bottom: 1px solid #f1f2f6;
}

.lab-ws-row:last-child {
  border-bottom: none;
}

.lab-ws-head {
  padding-top: 8px;
  padding-bottom: 6px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #9199a8;
}

.lab-ws-test {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
}

.lab-ws-test .select-wrapper {
  flex: 1 1 auto;
  margin: 0;
}

.lab-ws-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}

.lab-ws-check {
  width: 16px;
  height: 16px;
  color: #047857;
}

.lab-ws-row.is-done {
  background: #fbfdfc;
}

.lab-ws-row.is-pending .lab-ws-value {
  font-size: 13px;
}

.lab-ws-value {
  font-size: 14px;
  color: #111827;
}

.lab-ws-unit {
  margin-left: 2px;
  font-size: 12.5px;
  color: #6b7280;
}

.lab-ws-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 6px;
}

.lab-ws-inputs .select-wrapper {
  margin: 0;
}

.lab-ws-row input[type=text] {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13.5px;
  color: #1f2937;
}

.lab-ws-row input[type=text]:focus {
  border-color: #305DDD;
  outline: none;
}

.lab-ws-row input[data-r=value] {
  text-align: right;
}

.lab-ws-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.lab-ws-remarks {
  min-width: 0;
  font-size: 13px;
  color: #4b5563;
}

.lab-ws-action {
  display: flex;
  justify-content: flex-end;
}

.lab-ws-action .btn {
  height: 32px;
  padding: 0 12px;
}

.lab-ws-extra.hidden {
  display: none;
}

.lab-ws-extra .lab-ws-row {
  border-top: 1px dashed #e5e7eb;
}

.lab-ws-foot {
  padding: 10px 20px 6px;
}

.lab-methods {
  position: relative;
  width: 100%;
}

.lab-methods-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
}

.lab-methods-btn .ui-icon {
  width: 14px;
  height: 14px;
  color: #305DDD;
}

.lab-methods-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-methods-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr;
  width: max(100%, 240px);
  max-height: 280px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #edeef2;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.lab-methods-menu.hidden {
  display: none;
}

.lab-methods-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
}

.lab-methods-option:hover {
  background: #f5f6f9;
}

.lab-methods-option input {
  accent-color: #305DDD;
}

.lab-results-empty {
  margin: 0;
  padding: 18px 20px;
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 1100px) {
  .lab-ws-row {
    grid-template-columns: 1fr 1fr;
  }
  .lab-ws-head {
    display: none;
  }
}
.lab-ws-row .select-trigger,
.lab-ws-row .lab-methods-btn {
  height: 32px;
  font-size: 12.5px;
}

.lab-ws-test,
.lab-ws-value {
  font-size: 13px;
}

.lab-results-head {
  padding: 10px 20px;
}

.lab-worksheet {
  padding: 0 0 4px;
}

.lab-ws-foot {
  padding: 8px 20px;
}

.lab-test-cell {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lab-test-tag,
.lab-test-more {
  display: inline-flex;
  padding: 1px 8px;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  background: #eef2ff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: #305DDD;
}

.lab-test-more {
  border-color: #e5e7eb;
  background: #f8fafc;
  color: #4b5563;
}

.lab-ws-note {
  margin: 0;
  padding: 8px 20px;
  border-top: 1px solid #f1f2f6;
  background: #eef2ff;
  font-size: 12.5px;
  color: #305DDD;
}

.lab-ws-foot.hidden {
  display: none;
}

.lab-nowrap {
  white-space: nowrap;
}

.lab-results-sub .value-stack {
  gap: 2px;
}

#lab-table-section {
  overflow-x: auto;
}

#lab-table-section .data-table th,
#lab-table-section .data-table td {
  padding-left: 10px;
  padding-right: 10px;
}

#lab-table-section .data-table th:first-child,
#lab-table-section .data-table td:first-child {
  padding-left: 20px;
}

#lab-table-section .lab-name-cell {
  min-width: 96px;
}

#lab-table-section .data-table th:last-child,
#lab-table-section .data-table td:last-child {
  padding-right: 20px;
}
nav.top-navbar {
  position: fixed;
  top: var(--banner-height, 0px);
  left: 0;
  right: 0;
  height: var(--top-nav-height, 56px);
  background: var(--nav-bg);
  view-transition-name: app-topbar;
  z-index: 9999;
  border-bottom: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.06));
}

nav.top-navbar,
nav {
  height: var(--top-nav-height, 56px);
}

nav {
  position: relative;
  z-index: 9999;
  width: 100%;
  background: var(--nav-bg);
  flex-shrink: 0;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 100%;
}

.nav-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--nav-border-color, #e5e7eb);
  border-radius: 10px;
  background: #ffffff;
}

.nav-identity .logo::before {
  content: "";
  align-self: stretch;
  width: 1px;
  margin: 4px 8px 4px 0;
  background: var(--nav-border-color, #e5e7eb);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 0.15s ease;
}

.logo:hover {
  opacity: 1;
}

.org-logo {
  height: 32px;
  max-width: 118px;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.sidebar-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

body.sidebar-collapsed .sidebar-nav-scroll {
  scrollbar-width: none;
}

body.sidebar-collapsed .sidebar-nav-scroll::-webkit-scrollbar {
  display: none;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
}

.nav-links li {
  width: 100%;
  box-sizing: border-box;
}

.nav-links a {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 18px;
  margin: 1px 10px;
  width: auto;
  border-radius: 7px;
  text-decoration: none;
  color: var(--nav-text-color, rgba(255, 255, 255, 0.56));
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-links a .nav-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  transition: filter 0.15s ease;
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-dashboard {
  color: rgb(58.0125490196%, 60.9293532338%, 90.5835294118%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-admin {
  color: rgb(69.9271361502%, 58.6949019608%, 92.6305882353%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--users {
  color: rgb(62.6173975045%, 59.7184313725%, 91.6070588235%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-inventory {
  color: rgb(47.1039796008%, 67.2037548198%, 87.6175890266%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-purchases {
  color: rgb(50.7341176471%, 68.2501561981%, 92.6305882353%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-mes {
  color: rgb(98.4192666843%, 69.5687332974%, 36.3023019432%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-quality {
  color: rgb(27.9497326203%, 93.5796791444%, 77.0506555754%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-items {
  color: rgb(33.5994771242%, 67.645389643%, 87.2475816993%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-preprocess {
  color: rgb(56.5335978733%, 88.8518282989%, 37.2266030737%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-production {
  color: rgb(94.0635294118%, 62.0990849673%, 53.1678431373%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-lab {
  color: rgb(24.2328291317%, 92.1218266701%, 94.7946218487%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-units {
  color: rgb(48.647687867%, 64.6140046846%, 80.1601552702%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-warehouse {
  color: rgb(33.467374254%, 87.4047696409%, 92.3836061381%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-consumables {
  color: rgb(79.5752748312%, 56.488627451%, 87.1035294118%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-audit {
  color: rgb(93.2045299615%, 39.4699798424%, 61.8054253738%);
}

.nav-dark .nav-links a .nav-icon.ui-icon--nav-vault {
  filter: brightness(1.7);
}

.nav-links a .nav-icon.ui-icon--chart-line {
  color: #22b378;
}

.nav-dark .nav-links a .nav-icon.ui-icon--chart-line {
  color: rgb(42.1518475559%, 90.2952112676%, 70.7058425849%);
}

.nav-links a .nav-icon.ui-icon--building {
  color: #e25a34;
}

.nav-dark .nav-links a .nav-icon.ui-icon--building {
  color: rgb(94.0635294118%, 62.0990849673%, 53.1678431373%);
}

.nav-links a .nav-icon.ui-icon--support-desk {
  color: #2a74db;
}

.nav-dark .nav-links a .nav-icon.ui-icon--support-desk {
  color: rgb(50.7341176471%, 68.2501561981%, 92.6305882353%);
}

.nav-links a .nav-icon.ui-icon--key {
  color: #a246c0;
}

.nav-dark .nav-links a .nav-icon.ui-icon--key {
  color: rgb(79.5752748312%, 56.488627451%, 87.1035294118%);
}

.nav-links a .nav-label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  flex-grow: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.nav-links a.active {
  background-color: var(--nav-active-bg, #1a2233);
  color: var(--nav-text-color, #ffffff);
}

.nav-links a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: #6366f1;
}

.nav-links a.active .nav-icon,
.nav-links a:hover .nav-icon {
  filter: saturate(1.15);
}

.nav-links a.active .nav-label {
  opacity: 1;
  font-weight: 600;
}

.nav-links a:hover:not(.active) {
  background-color: var(--nav-hover-bg, #1a2233);
  color: var(--nav-text-hover-color, #ffffff);
}

.nav-links a:hover .nav-label {
  opacity: 1;
}

.nav-group-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.nav-group.is-open .nav-group-chevron {
  transform: rotate(180deg);
}

.nav-links a.nav-group-head.has-active {
  color: var(--nav-text-color, #ffffff);
}

.nav-links a.nav-group-head.has-active .nav-label {
  font-weight: 600;
}

.nav-sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-group.is-open .nav-sub {
  display: block;
}

.nav-links .nav-sub a {
  padding-left: 40px;
}

.nav-links .nav-sub a .nav-label {
  font-size: 13px;
}

body.sidebar-collapsed .nav-group-chevron {
  display: none;
}

body.sidebar-collapsed .nav-group.is-open .nav-sub {
  display: none;
}

body.sidebar-collapsed .nav-group.is-flyout .nav-sub {
  display: block;
  position: fixed;
  top: var(--nav-flyout-top, 0);
  left: calc(var(--sidebar-collapsed-width) - 6px);
  z-index: 9995;
  min-width: 220px;
  padding: 6px 0;
  background-color: var(--org-theme-color, #111827);
  border: 1px solid var(--sidebar-border-color, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
}

body.sidebar-collapsed .nav-group.is-flyout .nav-sub::before {
  content: attr(data-title);
  display: block;
  padding: 6px 18px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--nav-text-color, rgba(255, 255, 255, 0.56));
  opacity: 0.75;
}

body.sidebar-collapsed .nav-group.is-flyout .nav-sub a {
  justify-content: flex-start;
  gap: 11px;
  padding: 9px 16px;
  margin: 1px 6px;
}

body.sidebar-collapsed .nav-group.is-flyout .nav-sub .nav-label {
  display: block;
}

.nav-group[data-tone=nav-dashboard] .nav-sub .nav-icon {
  color: #4b57d1;
}

.nav-dark .nav-group[data-tone=nav-dashboard] .nav-sub .nav-icon {
  color: rgb(58.0125490196%, 60.9293532338%, 90.5835294118%);
}

.nav-group[data-tone=nav-admin] .nav-sub .nav-icon {
  color: #7c4ddb;
}

.nav-dark .nav-group[data-tone=nav-admin] .nav-sub .nav-icon {
  color: rgb(69.9271361502%, 58.6949019608%, 92.6305882353%);
}

.nav-group[data-tone=nav-inventory] .nav-sub .nav-icon {
  color: #2f6fb0;
}

.nav-dark .nav-group[data-tone=nav-inventory] .nav-sub .nav-icon {
  color: rgb(47.1039796008%, 67.2037548198%, 87.6175890266%);
}

.nav-group[data-tone=nav-purchases] .nav-sub .nav-icon {
  color: #2a74db;
}

.nav-dark .nav-group[data-tone=nav-purchases] .nav-sub .nav-icon {
  color: rgb(50.7341176471%, 68.2501561981%, 92.6305882353%);
}

.nav-group[data-tone=nav-mes] .nav-sub .nav-icon {
  color: #d97706;
}

.nav-dark .nav-group[data-tone=nav-mes] .nav-sub .nav-icon {
  color: rgb(98.4192666843%, 69.5687332974%, 36.3023019432%);
}

.nav-group[data-tone=nav-quality] .nav-sub .nav-icon {
  color: #0f9674;
}

.nav-dark .nav-group[data-tone=nav-quality] .nav-sub .nav-icon {
  color: rgb(27.9497326203%, 93.5796791444%, 77.0506555754%);
}

.nav-group[data-tone=nav-items] .nav-sub .nav-icon {
  color: #1d5f85;
}

.nav-dark .nav-group[data-tone=nav-items] .nav-sub .nav-icon {
  color: rgb(33.5994771242%, 67.645389643%, 87.2475816993%);
}

.nav-group[data-tone=nav-preprocess] .nav-sub .nav-icon {
  color: #4d9a1f;
}

.nav-dark .nav-group[data-tone=nav-preprocess] .nav-sub .nav-icon {
  color: rgb(56.5335978733%, 88.8518282989%, 37.2266030737%);
}

.nav-group[data-tone=nav-production] .nav-sub .nav-icon {
  color: #e25a34;
}

.nav-dark .nav-group[data-tone=nav-production] .nav-sub .nav-icon {
  color: rgb(94.0635294118%, 62.0990849673%, 53.1678431373%);
}

.nav-group[data-tone=nav-lab] .nav-sub .nav-icon {
  color: #0b8a8f;
}

.nav-dark .nav-group[data-tone=nav-lab] .nav-sub .nav-icon {
  color: rgb(24.2328291317%, 92.1218266701%, 94.7946218487%);
}

.nav-group[data-tone=nav-units] .nav-sub .nav-icon {
  color: #3d6388;
}

.nav-dark .nav-group[data-tone=nav-units] .nav-sub .nav-icon {
  color: rgb(48.647687867%, 64.6140046846%, 80.1601552702%);
}

.nav-group[data-tone=nav-warehouse] .nav-sub .nav-icon {
  color: #1597a3;
}

.nav-dark .nav-group[data-tone=nav-warehouse] .nav-sub .nav-icon {
  color: rgb(33.467374254%, 87.4047696409%, 92.3836061381%);
}

.nav-group[data-tone=nav-consumables] .nav-sub .nav-icon {
  color: #a246c0;
}

.nav-dark .nav-group[data-tone=nav-consumables] .nav-sub .nav-icon {
  color: rgb(79.5752748312%, 56.488627451%, 87.1035294118%);
}

.nav-group[data-tone=nav-audit] .nav-sub .nav-icon {
  color: #be185d;
}

.nav-dark .nav-group[data-tone=nav-audit] .nav-sub .nav-icon {
  color: rgb(93.2045299615%, 39.4699798424%, 61.8054253738%);
}

.nav-group[data-tone=nav-vault] .nav-sub .nav-icon {
  color: #2f855a;
}

.nav-dark .nav-group[data-tone=nav-vault] .nav-sub .nav-icon {
  color: rgb(42.58%, 82.3611764706%, 62.4705882353%);
}

.nav-label-group {
  padding: 16px 22px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  height: 100%;
}

.notification-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 7px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.notification-icon i,
.notification-icon .ui-icon {
  color: var(--nav-icon-color, rgba(255, 255, 255, 0.75));
  font-size: 1.05rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.notification-icon .ui-icon {
  width: 20px;
  height: 20px;
}

.notification-icon:hover {
  background: var(--nav-hover-bg, rgba(255, 255, 255, 0.08));
}

.notification-icon:hover i,
.notification-icon:hover .ui-icon {
  color: var(--notification-icon-color, #ffffff);
}

button.notification-icon {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 7px;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.logout-btn:hover {
  background: var(--nav-hover-bg, rgba(255, 255, 255, 0.08));
}

.logout-btn i {
  color: var(--logout-btn-icon-color, rgba(255, 255, 255, 0.75));
  font-size: 1.05rem;
  transition: color 0.15s ease;
}

.logout-btn:hover i {
  color: red;
}

.sidebar-toggle-btn {
  background: transparent;
  border: none;
  color: var(--nav-icon-color, rgba(255, 255, 255, 0.75));
  font-size: 1.05rem;
  cursor: pointer;
  width: calc(var(--sidebar-collapsed-width) - 32px);
  flex-shrink: 0;
  padding: 8px 0;
  margin-right: 16px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-toggle-btn:hover {
  background: var(--nav-hover-bg, rgba(255, 255, 255, 0.08));
  color: var(--nav-text-hover-color, #ffffff);
}

.sidebar-toggle-btn .ui-icon {
  width: 22px;
  height: 22px;
}

.nav-more-wrapper {
  padding: 0 10px;
  position: relative;
}

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

.nav-more-menu {
  position: absolute;
  bottom: 100%;
  left: 10px;
  right: 10px;
  top: auto;
  min-width: unset;
  border-radius: 10px;
}

.nav-more-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(2px);
}

.nav-more-menu li {
  width: 100%;
  padding: 2px 0;
}

.nav-more-menu a {
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-text-color, rgba(255, 255, 255, 0.56));
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: block;
  width: 100%;
}

.nav-more-menu a:hover {
  background: var(--nav-hover-bg, #1a2233);
  color: var(--nav-text-hover-color, #ffffff);
}

.nav-links li,
.nav-more-menu li {
  cursor: grab;
  user-select: none;
}

.nav-links > li,
.nav-more-menu > li {
  position: relative;
}

.nav-grip {
  position: absolute;
  top: 1px;
  right: 40px;
  width: 22px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--nav-text-color, rgba(255, 255, 255, 0.56));
  opacity: 0;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.15s ease;
}

li:not(.nav-group) > .nav-grip {
  right: 18px;
}

.nav-grip .ui-icon {
  width: 14px;
  height: 14px;
}

.nav-links > li:hover > .nav-grip,
.nav-more-menu > li:hover > .nav-grip,
.nav-grip:focus-visible {
  opacity: 0.6;
}

.nav-grip:hover,
.nav-grip:focus-visible {
  opacity: 1;
}

.is-reordering,
.is-reordering * {
  cursor: grabbing !important;
  user-select: none;
}

.nav-links > li.is-moving,
.nav-more-menu > li.is-moving {
  z-index: 2;
  background-color: var(--org-theme-color, #111827);
  border-radius: 7px;
}

li.is-moving > a {
  background-color: var(--nav-active-bg, #1a2233);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
}

li.is-moving > .nav-grip {
  opacity: 1;
}

.nav-gliding {
  transition: transform 0.15s ease;
}

body.sidebar-collapsed .nav-grip {
  display: none;
}

#more-menu li a {
  flex-direction: row;
  gap: 11px;
  padding: 9px 16px;
  width: 100%;
  justify-content: flex-start;
}

#more-menu li a .nav-label {
  font-size: 13px;
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border-color, rgba(255, 255, 255, 0.07));
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sidebar-user-card:hover {
  background: var(--nav-hover-bg, #1a2233);
}

.sidebar-user-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.18);
  color: #818cf8;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-user-text {
  min-width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nav-text-color, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--nav-text-color, rgba(255, 255, 255, 0.45));
  opacity: 0.8;
}

.sidebar-navbar {
  position: fixed;
  top: calc(var(--top-nav-height) + var(--banner-height, 0px));
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--org-theme-color, #111827);
  z-index: 9990;
  view-transition-name: app-sidebar;
  display: flex;
  flex-direction: column;
  padding: 10px 0 0;
  overflow: hidden;
  border-right: 1px solid var(--sidebar-border-color, rgba(255, 255, 255, 0.06));
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .sidebar-navbar {
  width: var(--sidebar-collapsed-width);
}

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-user-text,
body.sidebar-collapsed .nav-more-wrapper {
  display: none;
}

body.sidebar-collapsed .nav-links a,
body.sidebar-collapsed .sidebar-user-card {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 6px;
  margin-right: 6px;
}

.app-body {
  margin-top: calc(var(--top-nav-height) + var(--banner-height, 0px));
  margin-left: var(--sidebar-width);
  min-height: calc(100vh - var(--top-nav-height) - var(--banner-height, 0px));
  background: #f6f7fb;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-collapsed .app-body {
  margin-left: var(--sidebar-collapsed-width);
}

@media (max-width: 900px) {
  body.sidebar-collapsed .sidebar-navbar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
  }
  body.sidebar-collapsed .app-body {
    margin-left: 0;
  }
}
.notification-menu {
  position: relative;
  display: inline-flex;
}

.notif-badge.hidden {
  display: none;
}

.notification-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  overflow: hidden;
  z-index: 10000;
}

.notification-dropdown.is-open {
  display: flex;
  animation: notificationDropdownIn 0.18s ease-out;
}

@keyframes notificationDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.notification-dropdown-head,
.notification-dropdown-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.notification-dropdown-head {
  border-bottom: 1px solid #f1f2f6;
}

.notification-dropdown-foot {
  justify-content: center;
  border-top: 1px solid #f1f2f6;
  padding: 10px 16px;
}

.notification-dropdown-title {
  margin: 0;
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.notification-link-btn {
  padding: 0;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.notification-link-btn:hover {
  text-decoration: underline;
}

.notification-dropdown-scroll {
  max-height: 420px;
  overflow-y: auto;
}

.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-note {
  margin: 0;
  padding: 24px 16px;
  font-size: 13px;
  text-align: center;
  color: #6b7280;
}

.notification-sentinel {
  height: 1px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f2f6;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.notification-item:hover {
  background: #fafbff;
}

.notification-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.notification-item-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.notification-item-body {
  flex: 1;
  min-width: 0;
}

.notification-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-item-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.notification-item-message {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #4b5563;
  overflow-wrap: anywhere;
}

.notification-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #6b7280;
}

.notification-item-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.notification-item-meta .ui-icon {
  width: 13px;
  height: 13px;
}

.notification-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.notification-unread-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.notification-item.is-unread .notification-unread-dot {
  display: inline-block;
}

.notification-item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.notification-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.notification-action-btn .ui-icon {
  width: 16px;
  height: 16px;
}

.notification-action-btn--read {
  color: #047857;
}

.notification-action-btn--read:hover {
  background: #ecfdf5;
  border-color: #22c55e;
}

.notification-item--warning .notification-item-icon,
.notification-item--warning .notification-tag {
  background: #fef9c3;
  color: #a16207;
}

.notification-item--warning .notification-unread-dot {
  background: #a16207;
}

.notification-item--warning.is-unread {
  background: rgba(254, 249, 195, 0.55);
}

.notification-list--feed .notification-item--warning {
  border-left-color: #fde68a;
}

.notification-list--feed .notification-item--warning.is-unread {
  border-color: #fde68a;
  background: #fef9c3;
}

.notification-list--feed .notification-item--warning.is-unread .notification-item-title {
  color: #a16207;
}

.notification-item--success .notification-item-icon,
.notification-item--success .notification-tag {
  background: #ecfdf5;
  color: #047857;
}

.notification-item--success .notification-unread-dot {
  background: #047857;
}

.notification-item--success.is-unread {
  background: rgba(236, 253, 245, 0.55);
}

.notification-list--feed .notification-item--success {
  border-left-color: #22c55e;
}

.notification-list--feed .notification-item--success.is-unread {
  border-color: #22c55e;
  background: #ecfdf5;
}

.notification-list--feed .notification-item--success.is-unread .notification-item-title {
  color: #047857;
}

.notification-item--danger .notification-item-icon,
.notification-item--danger .notification-tag {
  background: #fef2f2;
  color: #b91c1c;
}

.notification-item--danger .notification-unread-dot {
  background: #b91c1c;
}

.notification-item--danger.is-unread {
  background: rgba(254, 242, 242, 0.55);
}

.notification-list--feed .notification-item--danger {
  border-left-color: #fecaca;
}

.notification-list--feed .notification-item--danger.is-unread {
  border-color: #fecaca;
  background: #fef2f2;
}

.notification-list--feed .notification-item--danger.is-unread .notification-item-title {
  color: #b91c1c;
}

.notification-item--info .notification-item-icon,
.notification-item--info .notification-tag {
  background: #f0f7ff;
  color: #2563eb;
}

.notification-item--info .notification-unread-dot {
  background: #2563eb;
}

.notification-item--info.is-unread {
  background: rgba(240, 247, 255, 0.55);
}

.notification-list--feed .notification-item--info {
  border-left-color: #bae0ff;
}

.notification-list--feed .notification-item--info.is-unread {
  border-color: #bae0ff;
  background: #f0f7ff;
}

.notification-list--feed .notification-item--info.is-unread .notification-item-title {
  color: #2563eb;
}

.notification-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}

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

.notification-panel-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.notification-panel-head .btn .ui-icon {
  width: 15px;
  height: 15px;
}

.notification-panel .list-header {
  margin: 0;
}

.notification-list--feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-list--feed .notification-item {
  align-items: center;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #edeef2;
  border-left-width: 4px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
}

.notification-list--feed .notification-item-title {
  font-size: 14.5px;
}

.notification-list--feed .notification-item-icon {
  width: 42px;
  height: 42px;
}

.notification-panel .notification-note {
  background: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 10px;
}

.notification-card-stack {
  position: fixed;
  top: calc(var(--banner-height, 0px) + var(--top-nav-height, 56px) + 12px);
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 380px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.notification-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  overflow: hidden;
  pointer-events: auto;
  animation: notificationCardIn 0.22s ease-out;
}

.notification-card.is-leaving {
  animation: notificationCardOut 0.25s ease-in forwards;
}

.notification-card .notification-item {
  padding-right: 44px;
}

.notification-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
}

.notification-card-close:hover {
  background: #f5f6f9;
  color: #111827;
}

.notification-card-close .ui-icon {
  width: 16px;
  height: 16px;
}

.notification-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
}

@keyframes notificationCardIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes notificationCardOut {
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
@media (max-width: 720px) {
  .notification-card-stack {
    top: calc(var(--banner-height, 0px) + var(--top-nav-height, 56px) + 8px);
    right: 16px;
  }
  .notification-dropdown {
    position: fixed;
    top: calc(var(--banner-height, 0px) + var(--top-nav-height, 56px) + 8px);
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
  .notification-list--feed .notification-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .notification-list--feed .notification-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .notification-panel .audit-search-input {
    min-width: 0;
  }
}
.onboarding-aside {
  justify-content: center;
  gap: 32px;
}

.onboarding-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.onboarding-step.active {
  background: #eef2ff;
}

.onboarding-step-index {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #d8dae1;
  background: #ffffff;
  color: #6b7280;
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.onboarding-step.active .onboarding-step-index {
  border-color: #305DDD;
  background: #305DDD;
  color: #ffffff;
}

.onboarding-step.done .onboarding-step-index {
  border-color: #22c55e;
  background: #ecfdf5;
  color: #047857;
}

.onboarding-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 3px;
}

.onboarding-step-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
}

.onboarding-step-desc {
  font-size: 12px;
  color: #6b7280;
}

.onboarding-main {
  justify-content: flex-start;
}

.onboarding-body {
  margin-block: auto;
}

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

.onboarding-fields .form-group .ui-icon:not(.select-arrow) {
  position: static;
  color: inherit;
  cursor: inherit;
}

.onboarding-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.onboarding-fields .form-group .onboarding-logo-drop {
  pointer-events: auto;
}

.onboarding-logo-drop {
  width: 100%;
  min-height: 84px;
  gap: 6px;
}

#onboarding-logo-preview .org-logo-img {
  width: 100%;
  max-width: 280px;
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}

.onboarding-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.onboarding-progress .auth-form-title span {
  font: inherit;
  color: inherit;
}

.onboarding-progress-spinner,
.onboarding-progress-done {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: #305DDD;
}

.onboarding-progress-done {
  color: #22c55e;
}

.onboarding-tasks {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.onboarding-task {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.onboarding-task::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #ffffff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.onboarding-task.active {
  color: #111827;
  font-weight: 500;
}

.onboarding-task.active::before {
  border: 2px solid #c7d2fe;
  border-top-color: #305DDD;
  animation: ui-icon-spin 0.8s linear infinite;
}

.onboarding-task.done {
  color: #4b5563;
}

.onboarding-task.done::before {
  border-color: #22c55e;
  background: #22c55e;
  box-shadow: inset 0 0 0 3px #ffffff;
}

@media (max-width: 900px) {
  .onboarding-aside {
    gap: 20px;
    padding-bottom: 12px;
  }
  .onboarding-steps {
    flex-direction: row;
    max-width: none;
    justify-content: center;
  }
  .onboarding-step {
    padding: 8px;
  }
  .onboarding-step-text {
    display: none;
  }
}
@media (max-width: 480px) {
  .onboarding-grid {
    grid-template-columns: 1fr;
  }
}
.po-receipt-panel {
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  overflow: hidden;
}

.po-receipt-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.po-receipt-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.po-receipt-panel .data-table th.num,
.po-receipt-panel .data-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.po-receipt-panel .data-table tr.is-selected td {
  background: #eef2ff;
}

.po-receipt-message {
  margin: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 500;
  border-top: 1px solid #e5e7eb;
  color: #4b5563;
}

.po-receipt-message--short {
  background: #fef9c3;
  color: #a16207;
}

.po-receipt-message--complete {
  background: #ecfdf5;
  color: #047857;
}

.po-receipt-message--over {
  background: #fee2e2;
  color: #b91c1c;
}

.po-receipt-hint:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.po-receipt-closed:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: #4b5563;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.po-receipt-section:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.po-receipt-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.po-receipt-section-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.ppd {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 24px;
  transition: opacity 0.2s ease;
}

.ppd--loading {
  opacity: 0.6;
}

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

.ppd-updated {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

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

.ppd-download {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 10px;
  background: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 10px;
}

.ppd-download-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.ppd-download-label .ui-icon {
  width: 14px;
  height: 14px;
}

.ppd-download-btn {
  min-width: 44px;
  min-height: 30px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: #eef2ff;
  font-size: 12px;
  font-weight: 700;
  color: #305DDD;
  cursor: pointer;
}

.ppd-download-btn:hover:not(:disabled) {
  background: #c7d2fe;
}

.ppd-download-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.ppd-range {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: #eef0f4;
  border-radius: 10px;
}

.ppd-range-btn {
  min-height: 32px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}

.ppd-range-btn:hover {
  color: #111827;
}

.ppd-range-btn--active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.ppd-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.ppd-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  transition: border-color 0.4s ease;
}

.ppd-slot {
  display: contents;
}

.ppd-kpi-value--long {
  font-size: 22px;
}

.ppd-kpi-value--xlong {
  font-size: 18px;
}

.ppd-kpi--warn {
  border-color: #fde68a;
}

.ppd-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.ppd-kpi-value {
  margin: 2px 0;
  font-size: 26px;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  color: #111827;
}

.ppd-kpi-sub {
  font-size: 12px;
  color: #6b7280;
}

.ppd-kpi-delta {
  font-size: 12px;
  color: #6b7280;
}

.ppd-kpi-delta--good {
  color: #047857;
  font-weight: 600;
}

.ppd-kpi-delta--bad {
  color: #dc2626;
  font-weight: 600;
}

.ppd-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #a16207;
}

.ppd-flag .ui-icon {
  width: 13px;
  height: 13px;
}

.ppd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1280px) {
  .ppd-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ppd-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 20px;
}

.ppd-card--wide {
  grid-column: 1/-1;
}

.ppd-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ppd-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.ppd-card-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #6b7280;
}

.ppd-view-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.ppd-view-btn:hover {
  text-decoration: underline;
}

.ppd-chart {
  position: relative;
  height: 260px;
}

.ppd-chart--tall {
  height: 300px;
}

.ppd-table {
  max-height: 320px;
  overflow: auto;
}

.ppd-table .data-table td,
.ppd-table .data-table th {
  font-variant-numeric: tabular-nums;
}

.ppd-floor,
.ppd-shares,
.ppd-loss {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ppd-key {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #4b5563;
}

.ppd-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ppd-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ppd-swatch--waiting {
  background: #b9c8f2;
}

.ppd-swatch--working {
  background: #305DDD;
}

.ppd-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.ppd-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ppd-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ppd-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ppd-row-value {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.ppd-row-share {
  margin-left: 6px;
  font-weight: 500;
  color: #6b7280;
}

.ppd-row-sub {
  font-size: 11.5px;
  color: #6b7280;
}

.ppd-meter {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 4px;
  background: #eef0f4;
  overflow: hidden;
}

.ppd-meter-fill {
  height: 100%;
  border-radius: 4px;
}

.ppd-meter-fill--waiting {
  background: #b9c8f2;
}

.ppd-meter-fill--working {
  background: #305DDD;
}

.ppd-meter-fill--share {
  background: #64748b;
}

.ppd-row--loss .ppd-meter-fill--share {
  background: #a16207;
}

.ppd-floor-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #f1f2f6;
  font-size: 12.5px;
  color: #6b7280;
}

.ppd-floor-extra strong {
  color: #111827;
}

.ppd-attention {
  margin-top: 4px;
}

.ppd-attention-tabs {
  flex-shrink: 0;
}

.ppd-attention-tabs .ppd-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ppd-att-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ppd-att-dot--info {
  background: #305DDD;
}

.ppd-att-dot--warn {
  background: #b45309;
}

.ppd-att-dot--hod {
  background: #7c3aed;
}

.ppd-count {
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: #4b5563;
}

.ppd-count--info {
  background: #eef2ff;
  color: #305DDD;
}

.ppd-count--warn {
  background: #fef9c3;
  color: #92400e;
}

.ppd-count--hod {
  background: #f5f3ff;
  color: #6d28d9;
}

.ppd-mini {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  font-size: 13px;
}

.ppd-mini thead th:first-child {
  border-top-left-radius: 10px;
}

.ppd-mini thead th:last-child {
  border-top-right-radius: 10px;
}

.ppd-mini tbody tr:hover td {
  background: #fafbff;
}

.ppd-mini--grid {
  table-layout: fixed;
}

.ppd-mini--grid .c-op {
  width: 12%;
}

.ppd-mini--grid .c-stage {
  width: 10%;
}

.ppd-mini--grid .c-num {
  width: 9%;
}

.ppd-mini--grid .c-who {
  width: 11%;
}

.ppd-mini--grid .c-when {
  width: 15%;
}

.ppd-mini th {
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9199a8;
  background: #f8fafc;
  border-bottom: 1px solid #edeef2;
  white-space: nowrap;
}

.ppd-mini td {
  padding: 10px 14px;
  color: #111827;
  border-bottom: 1px solid #f1f2f6;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ppd-mini tr:last-child td {
  border-bottom: none;
}

.ppd-mini tbody tr:not(.ppd-page-off):has(+ tr.ppd-page-off) td {
  border-bottom: none;
}

.ppd-mini .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ppd-who {
  font-weight: 600;
}

.ppd-when {
  margin-left: 8px;
  font-size: 12px;
  color: #6b7280;
}

.ppd-op-link {
  font-weight: 700;
  color: #305DDD;
  text-decoration: none;
  white-space: nowrap;
}

.ppd-op-link:hover {
  text-decoration: underline;
}

.ppd-mini .ppd-reason {
  white-space: normal;
  overflow-wrap: anywhere;
}

.ppd-nowrap {
  white-space: nowrap;
}

.ppd-muted {
  color: #6b7280;
}

.ppd-warn-text {
  font-weight: 700;
  color: #a16207;
}

.ppd-empty {
  margin: 0;
  padding: 8px 0;
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 1100px) {
  .ppd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .ppd {
    padding: 0 16px 16px;
  }
  .ppd-mini thead {
    display: none;
  }
  .ppd-mini tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #f1f2f6;
  }
  .ppd-mini td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 14px;
    border: none;
    white-space: normal;
  }
  .ppd-mini colgroup {
    display: none;
  }
  .ppd-mini td::before {
    content: attr(data-label);
    color: #6b7280;
  }
  .ppd-mini .num {
    text-align: right;
  }
}
.ppd-table .data-table td {
  white-space: nowrap;
}

.ppd-row-name {
  display: inline-flex;
  align-items: center;
}

.ppd-row-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ppd-swatch--lost,
.ppd-meter-fill--lost {
  background: #64748b;
}

.ppd-swatch--over,
.ppd-meter-fill--over {
  background: #d97706;
}

.ppd-swatch--allowed {
  background: #ccefdf;
}

.ppd-meter--layered {
  position: relative;
  display: block;
  height: 10px;
}

.ppd-meter--layered span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
}

.ppd-meter-allowed {
  background: #ccefdf;
}

.ppd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}

.ppd-chip--warn {
  background: #fef9c3;
  color: #a16207;
}

.ppd-chip .ui-icon {
  width: 12px;
  height: 12px;
}

.ppd-note-filter {
  min-width: 210px;
  margin: 0;
}

.ppd-range {
  position: relative;
}

.ppd-custom {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 300px;
  padding: 14px;
  border: 1px solid #edeef2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.ppd-custom.hidden {
  display: none;
}

.ppd-custom-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.ppd-custom-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ppd-custom-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
}

.ppd-custom-field input {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 12.5px;
  color: #1f2937;
}

.ppd-custom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ppd-toolbar-actions > .ppd-download,
.ppd-toolbar-actions > .ppd-range {
  box-sizing: border-box;
  height: 40px;
}

.ppd-toolbar-actions .ppd-range-btn {
  min-height: 0;
  height: 32px;
}

.ppd-toolbar-actions .ppd-download-btn {
  min-height: 0;
  height: 30px;
}

.ppd-note-filter .select-trigger {
  height: 40px;
}

.ppd-row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: #111827;
}

.ppd-row-fact-label {
  margin-right: 4px;
  font-weight: 500;
  color: #6b7280;
}

.ppd-updated-fact + .ppd-updated-fact {
  margin-left: 16px;
}

.ppd-updated-fact strong {
  font-weight: 600;
  color: #4b5563;
}

.ppd-card-head:has(> .ppd-attention-tabs) {
  flex-wrap: wrap;
  align-items: center;
}

.ppd-mini tr.ppd-page-off {
  display: none;
}

.ppd-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 14px;
}

.ppd-pager-info {
  font-size: 13px;
  color: #4b5563;
}

.ppd-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
}

.ppd-pager-btn:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.ppd-pager-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.ppd-pager-back {
  transform: rotate(180deg);
}

.ppd-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -22px;
}

.ppd-polar {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  margin: 8px 0 12px;
}

.ppd-polar-chart {
  position: relative;
  height: 280px;
}

.ppd-polar .ppd-row-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ppd-swatch--production {
  background: #3b82f6;
}

.ppd-swatch--warehouse {
  background: #14b8a6;
}

.ppd-swatch--store {
  background: #8b5cf6;
}

.ppd-swatch--loss {
  background: #f97316;
}

@media (max-width: 900px) {
  .ppd-polar {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pp-bagsplit-summary {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #6b7280;
}

.pp-bagsplit-bags:not(.hidden) {
  margin-bottom: 16px;
}

.pp-bagsplit-bag {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #ffffff;
}

.pp-bagsplit-bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pp-bagsplit-bag-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.pp-bagsplit-bag-code {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.pp-bagsplit-bag-material {
  font-size: 12.5px;
  color: #6b7280;
}

.pp-bagsplit-bag-state {
  font-size: 12px;
  font-weight: 600;
  color: #a16207;
  white-space: nowrap;
}

.pp-bagsplit-bag-state.is-done {
  color: #047857;
}

.pp-bagsplit-progress {
  width: 100%;
  height: 6px;
  appearance: none;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: #eef0f4;
}

.pp-bagsplit-progress::-webkit-progress-bar {
  background: #eef0f4;
}

.pp-bagsplit-progress::-webkit-progress-value {
  background: #305DDD;
  border-radius: 999px;
}

.pp-bagsplit-progress::-moz-progress-bar {
  background: #305DDD;
  border-radius: 999px;
}

.pp-bagsplit-outputs {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #f1f2f6;
}

.pp-split-table {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.pp-bagsplit-output {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(100px, 1fr) 96px 84px 96px minmax(140px, 1.4fr) 44px 84px;
  align-items: center;
  column-gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid #f1f2f6;
  font-size: 13px;
}

.pp-bagsplit-output--head {
  border-top: none;
  background: #f8fafc;
}

.pp-bagsplit-output--head span,
.pp-phase-table th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #9199a8;
}

.pp-split-group {
  border-top: 1px solid #e5e7eb;
}

.pp-split-group.is-active {
  background: #ffffff;
}

.pp-split-group-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(80px, 1fr) auto auto;
  align-items: center;
  column-gap: 16px;
  padding: 10px 16px;
  background: #f4f6ff;
}

.pp-split-from-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #305DDD;
  white-space: nowrap;
}

.pp-split-child {
  position: relative;
  padding-left: 22px;
  font-weight: 600;
}

.pp-split-child::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -14px;
  width: 10px;
  height: 22px;
  border-left: 1.5px solid #d8dae1;
  border-bottom: 1.5px solid #d8dae1;
  border-bottom-left-radius: 4px;
}

.pp-split-from {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pp-split-from-code {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}

.pp-split-from-meta {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.pp-split-meter {
  height: 6px;
  border-radius: 999px;
  background: #eef0f4;
  overflow: hidden;
}

.pp-split-meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #305DDD;
}

.pp-split-state {
  font-size: 12px;
  font-weight: 600;
  color: #a16207;
  white-space: nowrap;
}

.pp-split-state.is-done {
  color: #047857;
}

.pp-split-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-split-group .pp-entry {
  margin: 4px 16px 14px;
}

@media (max-width: 900px) {
  .pp-split-table {
    overflow-x: auto;
  }
  .pp-bagsplit-output {
    min-width: 820px;
  }
}
.pp-bagsplit-output-weight.is-muted {
  font-weight: 500;
  color: #4b5563;
}

.pp-bagsplit-output .bag-qr-thumb {
  width: 30px;
}

.pp-bagsplit-output-name {
  font-weight: 700;
  color: #111827;
}

.pp-bagsplit-output-material,
.pp-bagsplit-output-goes {
  color: #4b5563;
}

.pp-bagsplit-output-weight {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pp-bagsplit-bag-action {
  align-self: flex-start;
}

.pp-bagsplit-bag .pp-entry {
  margin-top: 0;
}

.pp-bagsplit-form-title {
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
}

.pp-phase,
.pp-phase-head {
  margin: 0 0 16px;
}

.pp-phase-head.hidden {
  display: none;
}

.pp-phase {
  border: 1px solid #edeef2;
  border-radius: 12px;
  overflow: hidden;
}

.pp-phase-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.pp-phase > .pp-phase-title {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f2f6;
}

.pp-phase-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #305DDD;
}

.pp-phase-tag--after {
  background: #ecfdf5;
  color: #047857;
}

.pp-phase-sub {
  font-size: 12.5px;
  font-weight: 500;
  color: #6b7280;
}

.pp-after.pp-phase {
  padding: 0 16px 16px;
  overflow: visible;
}

.pp-after.pp-phase > .pp-phase-head {
  margin: 0 -16px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f2f6;
  border-radius: 12px 12px 0 0;
  background: #f8fafc;
}

.pp-phase-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.pp-phase-more {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-top: 1px solid #f1f2f6;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: #305DDD;
  text-align: left;
  cursor: pointer;
}

.pp-phase-table-wrap.is-collapsed tbody tr:nth-child(n+6) {
  display: none;
}

.pp-bagsplit-bag-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}

.pp-bagsplit-bag.is-compact {
  gap: 8px;
  padding: 10px 16px;
}

.pp-bagsplit-toggle {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #305DDD;
  cursor: pointer;
  white-space: nowrap;
}

.pp-phase-head-body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pp-return-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
}

.pp-return-date input {
  width: 160px;
}

.pp-return-date strong {
  color: #111827;
}

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

.pp-phase-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pp-phase-table th {
  padding: 8px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #9199a8;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.pp-phase-table td {
  padding: 9px 16px;
  color: #111827;
  border-bottom: 1px solid #f1f2f6;
  vertical-align: middle;
}

.pp-phase-table .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pp-phase-table .cell-subtext {
  display: block;
}

.pp-phase-empty {
  color: #6b7280;
  text-align: center;
}

.pp-witness-strip.hidden {
  display: none;
}

#pp-stage-after-witness {
  margin: 16px 0 0;
  border: 1px solid #edeef2;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.pp-witness {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid #f1f2f6;
  background: #f8fafc;
}

#pp-stage-after-witness .pp-witness {
  border-top: none;
}

.pp-witness-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: 32px;
}

.pp-witness-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #4b5563;
}

.pp-witness-note {
  font-size: 12px;
  color: #6b7280;
}

.pp-witness-head .btn {
  margin-left: auto;
}

.pp-witness-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.pp-sign {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
  border: 1px dashed #d8dae1;
  border-radius: 10px;
  background: #ffffff;
}

.pp-sign--done {
  border: 1px solid #edeef2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.pp-sign-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7280;
}

.pp-sign-role .ui-icon {
  width: 15px;
  height: 15px;
  color: #047857;
}

.pp-sign-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pp-sign-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef2ff;
  font-size: 13px;
  font-weight: 700;
  color: #305DDD;
}

.pp-sign--done .pp-sign-avatar {
  background: #ecfdf5;
  color: #047857;
}

.pp-sign-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
  overflow-wrap: anywhere;
}

.pp-sign-extra {
  font-size: 11.5px;
  font-weight: 500;
  color: #6b7280;
}

.pp-sign-wait {
  font-size: 13px;
  color: #6b7280;
}

.pp-sign-at {
  margin-top: auto;
  font-size: 11.5px;
  color: #6b7280;
}

.pp-sign-select {
  width: 100%;
}

.pp-sign-btn {
  align-self: flex-start;
}

.pp-wchip {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
}

.pp-wchip--warn {
  background: #fef9c3;
  color: #a16207;
}

.pp-wchip--done {
  background: #ecfdf5;
  color: #047857;
}

@media (max-width: 600px) {
  .pp-sign {
    flex: 1 1 100%;
  }
}
.pp-bagsplit-bag-head > .pp-bagsplit-bag-state {
  margin-left: auto;
}

.pp-op-table .pp-op-link {
  cursor: pointer;
}

.pp-op-table .pp-op-link:hover td {
  background-color: #fbfbfd;
}

.pp-op-table td {
  vertical-align: middle;
}

.pp-op-table .pp-op-chevron-col {
  width: 32px;
  text-align: right;
}

.pp-nowrap {
  white-space: nowrap;
}

.pp-phase-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.pp-phase-fact-label,
.pp-split-from-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #6b7280;
}

.pp-split-from-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
}

.pp-sign-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: auto 0 0;
  font-size: 11.5px;
}

.pp-sign-facts dt {
  color: #6b7280;
}

.pp-sign-facts dd {
  margin: 0;
  color: #111827;
  font-weight: 500;
}
.prd-tag {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}

.prd-tag--preprocess {
  color: #305DDD;
  background: #eef2ff;
  border-color: #c7d2fe;
}

.prd-tag--warehouse {
  color: #92400e;
  background: #fef9c3;
  border-color: #fde68a;
}

.prd-tag--sampling {
  color: #047857;
  background: #ecfdf5;
  border-color: #22c55e;
}

.prd-muted {
  color: #6b7280;
}

.prd-tile {
  border-left-width: 3px;
}

.prd-tile--preprocess {
  border-left-color: #c7d2fe;
}

.prd-tile--warehouse {
  border-left-color: #fde68a;
}

#prd-bag-groups {
  gap: 16px;
  padding: 14px;
}

#prd-bag-groups {
  max-height: 420px;
}

#prd-bag-groups .gn-bag-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

#prd-bag-groups .gn-bag-group-header {
  gap: 14px;
  margin-bottom: 8px;
}

.prd-tile {
  gap: 3px;
  min-width: 0;
  padding: 9px 12px;
}

.prd-tile .gn-bag-tile-meta {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gn-bag-group-title .prd-tag {
  margin-right: 4px;
}

.prd-view-lot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prd-link {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #305DDD;
  cursor: pointer;
}

.prd-link:hover {
  text-decoration: underline;
}

img.prd-qr {
  width: 48px;
  height: auto;
  cursor: zoom-in;
}

.prd-lot-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.prd-lot-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.prd-lot-modal-facts {
  flex: 1;
  min-width: 0;
  gap: 12px;
}

.prd-lot-modal-facts .form-row-horizontal {
  grid-template-columns: 180px 1fr;
  margin-bottom: 0;
}

.prd-tag-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prd-nowrap {
  white-space: nowrap;
}

.prd-subtable-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.prd-bag-table {
  max-width: none;
}

.prd-bag-table td:nth-child(3) {
  min-width: 130px;
}

#prd-view-bags .prd-bag-table {
  max-width: 980px;
}

@media (max-width: 640px) {
  .prd-lot-modal-head {
    flex-direction: column;
  }
}
.prd-lot-modal-head img.prd-qr {
  width: 80px;
}

#prd-bag-picker .gn-bag-toolbar.hidden {
  display: none;
}

.ltr-pending {
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

.ltr-process-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  max-width: 760px;
}

.ltr-process-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ltr-process-card:hover {
  border-color: #c7d2fe;
}

.ltr-process-card[aria-pressed=true] {
  border-color: #305DDD;
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px #305DDD;
}

.ltr-process-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.ltr-process-steps {
  font-size: 11.5px;
  line-height: 1.5;
  color: #6b7280;
}

.ltr-section {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}

.ltr-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #edeef2;
}

.ltr-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #111827;
}

.ltr-section-head h3 span {
  font-weight: 600;
  color: #6b7280;
}

.ltr-section-count {
  font-size: 12px;
  color: #6b7280;
}

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

.ltr-table {
  min-width: 100%;
}

.ltr-table th,
.ltr-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.ltr-table th.ltr-group-head {
  text-align: center;
  border-bottom: 1px solid #f1f2f6;
}

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

.ltr-witness-cell {
  min-width: 110px;
}

.ltr-signed {
  display: inline-flex;
  flex-direction: column;
  font-size: 12.5px;
  font-weight: 600;
  color: #047857;
}

.ltr-total td {
  font-weight: 700;
  color: #111827;
  border-top: 1px solid #e5e7eb;
}

.ltr-entry td {
  background: #f8fafc;
}

.ltr-entry input {
  width: 100%;
  min-width: 80px;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #d8dae1;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 12.5px;
  color: #1f2937;
}

.ltr-entry input[type=number] {
  max-width: 96px;
  text-align: right;
}

.ltr-entry input[type=date] {
  min-width: 130px;
}

.ltr-net {
  font-weight: 700;
  color: #111827;
}

.ltr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #6b7280;
  cursor: pointer;
}

.ltr-icon-btn:hover {
  border-color: #fecaca;
  color: #dc2626;
  background: #fef2f2;
}

.ltr-signoff {
  margin-top: 16px;
  padding: 16px 20px 20px;
}

.ltr-signoff-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.ltr-signoff-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #111827;
}

.ltr-sign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.ltr-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #edeef2;
  border-radius: 7px;
}

.ltr-sign-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #64748b;
}

.ltr-sign-name {
  font-size: 14px;
  font-weight: 700;
  color: #047857;
}

.rp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #4b5563;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.rp-icon-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.rp-icon-btn:hover:not(:disabled) {
  border-color: #c7d2fe;
  color: #305DDD;
}

.rp-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.rp-icon-btn--danger:hover:not(:disabled) {
  border-color: #fecaca;
  color: #dc2626;
  background: #fef2f2;
}

#ltr-header-fields {
  display: contents;
}

.ltr-step {
  white-space: nowrap;
}

.ltr-step-arrow {
  width: 12px;
  height: 12px;
  margin: 0 4px;
  vertical-align: -2px;
  opacity: 0.6;
}

.ltr-entry input[data-remarks] {
  min-width: 110px;
  max-width: 160px;
}

.ltr-entry input[type=date] {
  min-width: 124px;
  max-width: 140px;
}

.rp-availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.rp-availability .role-perm-btn {
  min-width: 96px;
}

.ltr-req {
  margin-left: 2px;
  color: #dc2626;
}

.prd-dash .ppd-updated {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.prdd-nowrap {
  white-space: nowrap;
}

.prd-lot-table th,
.prd-lot-table td:nth-child(1),
.prd-lot-table td:nth-child(2) {
  white-space: nowrap;
}

.prd-lot-table th,
.prd-lot-table td {
  padding-left: 12px;
  padding-right: 12px;
}
.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.profile_image {
  position: relative;
  display: inline-block;
}

.profile_image img {
  width: 145px;
  height: 145px;
  border-radius: var(--border-radius);
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.profile_image--placeholder img {
  box-sizing: border-box;
  padding: 34px;
  background: rgba(99, 102, 241, 0.18);
  object-fit: contain;
}

.avatar-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99, 102, 241, 0.18);
  color: #818cf8;
}

.avatar-icon-placeholder .ui-icon {
  width: 55%;
  height: 55%;
}

.profile-icon .avatar-icon-placeholder {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius);
}

.profile-upload-overlay {
  width: 145px;
  height: 145px;
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.profile_image:hover .profile-upload-overlay {
  opacity: 1;
}

.profile-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--border-radius);
  background: #f0f0f0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-delete-btn .ui-icon {
  width: 15px;
  height: 15px;
}

.profile-delete-btn:hover {
  color: rgb(255, 50, 21);
  background: #f8f8f8;
}

.profile-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  background: var(--primary-color);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: 0.2s;
}

.profile-upload-btn i {
  font-size: 14px;
}

.profile-icon img {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius);
  object-fit: cover;
  text-decoration: none;
  color: var(--text-light);
  outline: var(--profile-outline, none);
}

.profile-icon-panel {
  width: 392px;
  padding: 0;
  box-shadow: -8px 0 30px rgba(16, 24, 40, 0.18);
}

.profile-icon-panel .profile-panel-header-section,
.profile-icon-panel .profile-panel-actions,
.profile-icon-panel .profile-flat-section,
.profile-icon-panel .product_details,
.profile-icon-panel .appearance-theme {
  padding: 16px 22px;
}

.profile-panel-header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 22px !important;
  padding-bottom: 18px !important;
}

.profile-panel-info-row {
  display: flex;
  gap: 14px;
  min-width: 0;
}

.profile-panel-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #305DDD);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

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

.profile-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  min-width: 0;
}

.profile-details h2 {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #111827;
  margin: 0;
}

.profile-email {
  font-size: 12.5px;
  color: #6b7280;
  margin: 0;
}

.profile-email copy {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.profile-userid {
  font-size: 12.5px;
  color: #3d3d3d;
  margin: 5px 0 0;
}

.profile-userid copy {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #4b5563;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 1px 2px 1px 7px;
  border-radius: 5px;
}

.profile-panel-divider {
  border: none;
  border-top: 1px solid #eef0f4;
  margin: 0;
}

.profile-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-text-link {
  background: none;
  border: none;
  padding: 0;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.profile-text-link:hover {
  text-decoration: none;
}

.profile-text-link.accent {
  color: var(--primary-color);
}

.profile-text-link.danger {
  color: #dc2626;
}

.profile-flat-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-icon-panel .profile-flat-section {
  padding: 8px 12px;
}

.profile-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #3d3d3d;
  text-transform: uppercase;
  margin: 4px 0 4px 10px;
}

.profile-resource-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 4px;
}

.profile-flat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 0;
  border: none;
  background: none;
  color: #374151;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.profile-flat-row:hover,
.profile-flat-row:focus-visible {
  background: #eef2ff;
  color: #305DDD;
  text-decoration: none;
  outline: none;
}

.product_details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product_details h2 {
  font-size: 12.5px;
  font-weight: 500;
  color: #3d3d3d;
  margin: 0;
  letter-spacing: 0;
}

.product_details h2::before {
  content: "v";
}

.product_details p {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #c2410c;
  background-color: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 3px 8px;
  border-radius: 6px;
  margin: 0;
}

.appearance-theme h2 {
  font-size: 11px;
  font-weight: 700;
  color: #3d3d3d;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theme-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  background-color: #eef0f4;
  padding: 7px;
  border: none;
  border-radius: 9px;
}

.theme-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 7px 8px;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.theme-btn:hover {
  color: #111827;
  background: transparent;
}

.theme-btn.active {
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.user-self-badge {
  background-color: #e2e8f0;
  color: #4a5568;
  padding: 2px 6px;
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  margin-left: 5px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}

.selected-file {
  max-width: 145px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-file.selected {
  font-weight: 600;
}

.preview-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: 0.2s;
  pointer-events: none;
}

.preview-badge.show {
  opacity: 1;
}

.profile-details-card {
  padding: 30px;
  background: #ffffff;
  border-radius: var(--border-radius);
  margin-top: 20px;
}

.profile-card-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 15px;
  padding-top: 14px;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-group p {
  font-size: 1rem;
  color: #334155;
  margin: 0;
  font-weight: 500;
}

.info-group code {
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  color: #334155;
}

.signature-display {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.signature-image {
  max-height: 150px;
  border-radius: var(--border-radius);
  border: 1px solid #e2e8f0;
  padding: 10px;
  background: #fff;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

#delete-signature-btn {
  top: 0;
  right: 0;
}

.empty-signature-state {
  text-align: center;
  color: #64748b;
  padding: 20px;
}

#signature-preview-img-new {
  width: 246px;
  max-height: 169px;
  object-fit: contain;
  margin-bottom: 12px;
}
.rfb-pills:empty {
  display: none;
}

.rfb-add-row {
  align-self: flex-start;
}

.rfb-material-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rfb-material-rows:empty {
  display: none;
}

.rfb-material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 110px 32px;
  align-items: center;
  gap: 8px;
}

.rfb-material-row input,
.rfb-entry input[type=text] {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 13.5px;
  color: #1f2937;
}

.rfb-material-row input:focus,
.rfb-entry input[type=text]:focus {
  border-color: #305DDD;
  outline: none;
}

.rfb-material-row .select-wrapper,
.rfb-entry .select-wrapper {
  margin: 0;
}

.rfb-form-actions {
  align-items: center;
}

.rfb-total {
  margin-right: auto;
  font-size: 13px;
  color: #4b5563;
}

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

.rfb-run {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}

.rfb-run.is-open {
  border-color: #c7d2fe;
}

.rfb-run-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #edeef2;
}

.rfb-run-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rfb-run-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.rfb-run-input {
  font-size: 13px;
  color: #1f2937;
}

.rfb-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rfb-track-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3d3d3d;
}

.rfb-track-step .ui-icon {
  width: 15px;
  height: 15px;
  color: #059669;
}

.rfb-track-dot {
  width: 10px;
  height: 10px;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
}

.rfb-track-step.is-done {
  color: #111827;
}

.rfb-track-step.is-current {
  color: #1d4ed8;
}

.rfb-track-step.is-current .rfb-track-dot {
  border-color: #1d4ed8;
  background: #bfdbfe;
}

.rfb-track-line {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #edeef2;
}

.rfb-table td {
  vertical-align: top;
}

.rfb-table th:first-child,
.rfb-table td:first-child {
  padding-left: 20px;
}

.rfb-chem {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.rfb-chem span {
  color: #6b7280;
}

.rfb-over {
  font-weight: 700;
  color: #cf1322;
}

.rfb-sub-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px 6px;
}

.rfb-sub-head h4,
.rfb-entry-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #111827;
}

.rfb-entry {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 20px 20px;
  padding: 14px 20px 16px;
  border: 1px solid #edeef2;
  border-radius: 7px;
  background: #f8fafc;
}

.rfb-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}

.rfb-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
}

.rfb-entry-grid.hidden,
.rfb-sec-body.hidden,
.rfb-temps.hidden,
.rfb-field.hidden,
.rfb-waste-note.hidden,
.rfb-over.hidden {
  display: none;
}

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

.rfb-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.rfb-label.required_lable::after {
  content: "*";
  margin-left: 4px;
  font-weight: 700;
  color: #ff3b30;
}

.rfb-seg .role-perm-btn {
  width: auto;
  min-width: 84px;
  height: 36px;
  padding: 0 16px;
  font-size: 12px;
}

.rfb-temps {
  display: grid;
  grid-template-columns: repeat(3, 160px) auto;
  align-items: end;
  gap: 16px;
}

.rfb-qty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

.rfb-waste-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #ffccc7;
  border-radius: 7px;
  background: #fff1f0;
  font-size: 12.5px;
  color: #a8071a;
}

.rfb-waste-note .ui-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.rfb-entry-actions {
  display: flex;
  justify-content: flex-end;
}

.rfb-close-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed #e5e7eb;
}

.rfb-note {
  margin: 0;
  padding: 0 20px 14px;
  font-size: 12.5px;
  color: #6b7280;
}

.rfb-entry .rfb-note,
.rfb-field .rfb-note {
  padding: 0;
}

@media (max-width: 760px) {
  .rfb-material-row {
    grid-template-columns: 1fr 1fr;
  }
  .rfb-temps {
    grid-template-columns: 1fr;
  }
}
.ppd-grid.prdd-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#prdd-recovered,
#prdd-chemicals {
  overflow-x: auto;
}

@media (max-width: 1100px) {
  .ppd-grid.prdd-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rfb-list-table td:first-child,
.rfb-list-table td.num,
.rfb-list-table td:last-child {
  white-space: nowrap;
}

.rfb-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.rfb-out + .rfb-out {
  margin-top: 6px;
}

.rfb-out .status-pill {
  flex-shrink: 0;
}

.rfb-run-rows,
.rfb-stage-rows {
  max-width: 1100px;
  gap: 14px;
}

.rfb-run-rows {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f2f6;
}

.rfb-run-rows .detail-subtable,
.rfb-stage-rows .detail-subtable,
#rfb-details .detail-subtable,
.rfb-picked .detail-subtable {
  max-width: 100%;
}

#rfb-page .form-row-horizontal:has(.detail-subtable) {
  align-items: start;
}

#rfb-page .form-row-horizontal:has(.detail-subtable) > .label-col {
  padding-top: 6px;
}

.rfb-stage-block {
  margin: 0 20px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f2f6;
}

.rfb-stage-block:last-of-type {
  border-bottom: none;
}

.rfb-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rfb-stage-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.rfb-picked:empty {
  display: none;
}

.rfb-unit-inline {
  width: 260px;
  margin: 8px 0 0;
}

.rfb-list-table th {
  white-space: nowrap;
}

#rfb-table-section {
  overflow-x: auto;
}

.rfb-list-table th,
.rfb-list-table td {
  padding-left: 12px;
  padding-right: 12px;
}

.rfb-list-table th:first-child,
.rfb-list-table td:first-child {
  padding-left: 20px;
}

.rfb-nowrap {
  white-space: nowrap;
}

.rfb-entry-step {
  font-size: 12px;
  color: #6b7280;
}

.rfb-entry .rfb-entry-actions {
  padding-top: 12px;
  border-top: 1px solid #f1f2f6;
}

.rfb-run-head {
  position: relative;
}

.rfb-run-title {
  padding-right: 120px;
}

.rfb-run-title > .status-pill,
.rfb-run-title > .ppd-count {
  position: absolute;
  top: 14px;
  right: 20px;
}

.rfb-sec-body.rfb-temps {
  display: grid;
  grid-template-columns: repeat(3, 160px) minmax(160px, auto);
  justify-content: start;
  align-items: end;
  gap: 16px;
}

.rfb-sec-body.rfb-temps.hidden {
  display: none;
}

.rfb-temp-result {
  display: flex;
  align-items: center;
  height: 38px;
  font-size: 13px;
}

.rfb-add-entry {
  margin-top: 0;
  max-width: 1280px;
}

.rfb-added:empty {
  display: none;
}

.rfb-added .detail-subtable {
  margin-bottom: 4px;
}

.rfb-grid-out {
  grid-template-columns: repeat(3, minmax(140px, 1fr)) repeat(2, minmax(0, 0.6fr)) repeat(3, minmax(0, 1fr));
}

.rfb-grid-chem {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.6fr);
  max-width: 760px;
}

.rfb-grid-chem.has-names {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 0.6fr);
  max-width: 980px;
}

.rfb-grid-out .pp-field.hidden,
.rfb-grid-chem .pp-field.hidden {
  display: none;
}

.rfb-grid-out .rfb-span2 {
  grid-column: span 2;
}

.rfb-add-entry .rfb-seg {
  flex-wrap: nowrap;
}

.rfb-add-entry .rfb-seg .role-perm-btn {
  height: 36px;
  min-width: 0;
  padding: 0 12px;
}

@container (max-width: 1150px) {
  .rfb-grid-out {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (max-width: 640px) {
  .rfb-grid-out,
  .rfb-grid-chem,
  .rfb-grid-chem.has-names,
  .rfb-sec-body.rfb-temps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rfb-entry.rfb-record {
  display: block;
  margin: 0 20px;
  padding: 16px 0 20px;
  border: none;
  border-top: 1px solid #f1f2f6;
  border-radius: 0;
  background: none;
}

.rfb-record .rfb-stage-head {
  justify-content: flex-start;
  gap: 10px;
}

.rfb-record-rows {
  max-width: none;
  gap: 14px;
}

.rfb-record .form-row-horizontal {
  align-items: start;
}

.rfb-record .form-row-horizontal > .label-col {
  padding-top: 9px;
}

.rfb-record .field-col {
  container-type: inline-size;
  min-width: 0;
  gap: 10px;
}

.rfb-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}

.rfb-sec-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rfb-sec-head .rfb-remarks {
  flex: 1 1 320px;
  max-width: 640px;
}

.rfb-record .rfb-entry-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f2f6;
}

.rfb-sec-head .rfb-select {
  width: 160px;
}

.rfb-other {
  position: relative;
}

.rfb-other .bags-field {
  padding-right: 34px;
}

.rfb-other-back {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.rfb-other-back:hover {
  background: #f8fafc;
}

.rfb-other-back .ui-icon {
  width: 12px;
  height: 12px;
}

.rfb-other.hidden,
[data-material-list].hidden {
  display: none;
}

.rfb-grid-out .select-wrapper,
.rfb-grid-out .select-trigger {
  width: 100%;
}

.rfb-temp-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.rfb-temp-inline.hidden {
  display: none;
}

.rfb-temp-label {
  font-size: 13px;
  color: #4b5563;
}

.rfb-temp-input {
  position: relative;
  display: inline-block;
  width: 130px;
}

.rfb-record .rfb-temp-input input.bags-field {
  height: 36px;
  padding: 0 38px 0 12px;
  text-align: left;
}

.rfb-temp-unit {
  position: absolute;
  top: 50%;
  right: 12px;
  font-size: 13px;
  color: #6b7280;
  transform: translateY(-50%);
  pointer-events: none;
}

.rfb-add-entry .bags-field.is-invalid {
  border-color: #fca5a5;
  background: #fef2f2;
}

.rfb-record .rfb-add-entry,
.rfb-sec-head .rfb-remarks {
  max-width: 1150px;
}

.rfb-sec-head:has(.rfb-remarks) {
  display: block;
}

.rfb-sec-head .rfb-remarks {
  width: 100%;
}

.rfb-record .rfb-entry-step {
  font-size: 12.5px;
  font-weight: 500;
}

.rfb-grid-params {
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
}

.rfb-run.hidden {
  display: none;
}

.rfb-note.rfb-note--warn {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #fde68a;
  border-radius: 7px;
  background: #fef9c3;
  color: #a16207;
  font-size: 13px;
}

.rfb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0;
  border-bottom: 1px solid #f1f2f6;
}

.rfb-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-right: 1px solid #f1f2f6;
}

.rfb-fact-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9199a8;
}

.rfb-fact-value {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.rfb-run-section {
  padding: 16px 20px;
}

.rfb-run-section + .rfb-run-section {
  padding-top: 0;
}

.rfb-run-section-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4b5563;
}

.rfb-run-section .detail-subtable,
.rfb-panel .detail-subtable,
.rfb-record .detail-subtable {
  width: 100%;
  min-width: 0;
}

.rfb-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rfb-stage,
.rfb-stage.rfb-entry.rfb-record {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #edeef2;
  border-radius: 6px;
  background: #ffffff;
}

.rfb-stage.is-active,
.rfb-stage.rfb-entry.rfb-record {
  border-color: #c7d2fe;
  border-top: 3px solid #305DDD;
  box-shadow: 0 2px 10px rgba(48, 93, 221, 0.06);
}

.rfb-stage.is-upcoming {
  background: #f8fafc;
}

.rfb-stage.is-upcoming .rfb-stage-name {
  color: #6b7280;
}

.rfb-stage-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 16px;
  list-style: none;
}

details.rfb-stage > .rfb-stage-summary {
  cursor: pointer;
}

details.rfb-stage > .rfb-stage-summary::-webkit-details-marker {
  display: none;
}

details.rfb-stage[open] > .rfb-stage-summary,
.rfb-stage.is-active > .rfb-stage-summary {
  border-bottom: 1px solid #f1f2f6;
  background: #f8fafc;
}

.rfb-stage-no {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  background: #ffffff;
}

.rfb-stage-no.is-active {
  border-color: #305DDD;
  color: #ffffff;
  background: #305DDD;
}

.rfb-stage-no.is-done {
  border: none;
  background: transparent;
}

.rfb-stage-no.is-done .ui-icon {
  width: 22px;
  height: 22px;
}

.rfb-stage-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.rfb-stage-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.rfb-stage-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

details.rfb-stage[open] .rfb-stage-caret {
  transform: rotate(180deg);
}

.rfb-stage-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

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

.rfb-panel {
  min-width: 0;
}

.rfb-panel-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4b5563;
}

.rfb-remarks-text {
  margin: 0;
  font-size: 13.5px;
  color: #1f2937;
}

@media (max-width: 1100px) {
  .rfb-panels {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rfb-record .rfb-add-entry,
.rfb-record .rfb-sec-head .rfb-remarks {
  max-width: none;
}

.rfb-stage.rfb-record .rfb-entry-actions {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #f1f2f6;
}

.rfb-run .detail-subtable td strong,
.rfb-run .detail-subtable td.num {
  white-space: nowrap;
}

.rfb-stage-no.is-done .ui-icon {
  color: #16a34a;
  background-color: #16a34a;
}

.rfb-stage-end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.rfb-fact-value .value-stack > span {
  font-weight: 500;
  color: #111827;
}

.rfb-stage.is-active,
.rfb-stage.rfb-entry.rfb-record {
  border: 1px solid #edeef2;
  box-shadow: none;
}

.rfb-stage-no.is-active {
  border-color: #c7d2fe;
  color: #305DDD;
  background: #eef2ff;
}

.rfb-kv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rfb-kv + .rfb-kv {
  padding-top: 12px;
  border-top: 1px solid #f1f2f6;
}

.rfb-kv {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rfb-kv-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.rfb-kv-label {
  font-size: 13px;
  color: #64748b;
}

.rfb-kv-value {
  font-size: 13.5px;
  color: #111827;
}

.rfb-record .rfb-add-entry .pp-entry-grid,
.rfb-record .rfb-add-entry .pp-entry-grid.rfb-grid-out,
.rfb-record .rfb-add-entry .pp-entry-grid.rfb-grid-chem,
.rfb-record .rfb-add-entry .pp-entry-grid.rfb-grid-chem.has-names,
.rfb-record .rfb-add-entry .pp-entry-grid.rfb-grid-params {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
}

.rfb-record .rfb-add-entry .pp-field {
  display: grid;
  grid-template-columns: 160px minmax(0, 420px);
  align-items: center;
  gap: 16px;
  grid-column: auto;
}

.rfb-record .rfb-add-entry .pp-field.hidden {
  display: none;
}

.rfb-record .rfb-add-entry .pp-field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: #64748b;
}

.rfb-record .rfb-add-entry .pp-entry-actions {
  margin-top: 4px;
  padding-top: 12px;
}

@media (max-width: 760px) {
  .rfb-record .rfb-add-entry .pp-field,
  .rfb-kv-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}
.rfb-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rfb-rows.hidden {
  display: none;
}

.rfb-field-row.hidden {
  display: none;
}

.rfb-record .rfb-input,
.rfb-record .rfb-sec-head .rfb-select {
  width: 100%;
  max-width: 420px;
}

.rfb-record input.rfb-input,
.rfb-record .rfb-input input.bags-field {
  height: 38px;
}

.rfb-readout {
  font-size: 13.5px;
  color: #111827;
}

.rfb-add-btn {
  align-self: flex-start;
}

.rfb-record .rfb-added .detail-subtable {
  width: 100%;
}

.rfb-record .rfb-select {
  width: 100%;
  max-width: 420px;
}

.rfb-record .rfb-field-row {
  align-items: center;
}

.rfb-record .rfb-field-row > .label-col {
  padding-top: 0;
}

.rfb-record .rfb-field-row:has(.detail-subtable) {
  align-items: start;
}

.rfb-record .rfb-field-row:has(.detail-subtable) > .label-col {
  padding-top: 8px;
}

.rfb-record .rfb-field-row .field-col {
  gap: 0;
}

.rfb-record input.bags-field.num {
  text-align: left;
}

.rfb-record .rfb-added .detail-subtable {
  width: auto;
  min-width: 420px;
  max-width: 100%;
}

.rfb-view-rows {
  max-width: none;
  gap: 0;
}

.rfb-view-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.rfb-view-group:first-child {
  padding-top: 0;
}

.rfb-view-group:last-child {
  padding-bottom: 0;
}

.rfb-view-group + .rfb-view-group {
  border-top: 1px solid #f1f2f6;
}

.rfb-view-rows .rfb-field-row {
  align-items: center;
}

.rfb-view-rows .rfb-field-row > .label-col {
  padding-top: 0;
}

.rfb-view-rows .field-col {
  gap: 0;
  font-size: 13.5px;
  color: #111827;
}

#rfb-details .rfb-input-start {
  padding-top: 14px;
  border-top: 1px solid #f1f2f6;
}

.rfb-new-run.hidden {
  display: none;
}

.rfb-new-run > .rfb-stage-summary {
  border-bottom: 1px solid #f1f2f6;
  background: #f8fafc;
}

.rfb-new-run .rfb-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f2f6;
}

.rfb-picked-lots {
  margin-top: 4px;
}

.rfb-picked-lot {
  position: relative;
  padding: 12px 14px;
  border: 1px solid #edeef2;
  border-radius: 7px;
  background: #ffffff;
}

.rfb-picked-lot + .rfb-picked-lot {
  padding-top: 12px;
  border-top: 1px solid #edeef2;
}

.rfb-picked-lot .rfb-kv-row {
  grid-template-columns: 120px minmax(0, 1fr);
  padding-right: 40px;
}

.rfb-picked-remove {
  position: absolute;
  top: 10px;
  right: 10px;
}

#rfb-page .form-row-horizontal:has(.rfb-picked-lots) {
  align-items: start;
}

#rfb-page .form-row-horizontal:has(.rfb-picked-lots) > .label-col {
  padding-top: 10px;
}

.rfb-field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #dc2626;
}

.rfb-field-error.hidden {
  display: none;
}

.rfb-record .bags-field.is-invalid {
  border-color: #fca5a5;
  background: #fef2f2;
}

#rfb-details .form-row-horizontal:has(.rfb-picked-lots) {
  align-items: start;
}

#rfb-details .form-row-horizontal:has(.rfb-picked-lots) > .label-col {
  padding-top: 12px;
}

#rfb-details .rfb-picked-lots {
  max-width: 560px;
}

.rfb-runs-card {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}

.rfb-runs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #edeef2;
}

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

.rfb-runs-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px 20px;
}

.rfb-runs-body .rfb-run {
  margin: 0;
  box-shadow: none;
}

.rfb-runs-head .rfb-run-title,
.rfb-run-title:has(.rfb-run-end) {
  padding-right: 0;
}

.rfb-runs-head .rfb-run-title > .ppd-count {
  position: static;
}

.rfb-runs-body .rfb-new-run {
  border-color: #c7d2fe;
}

.rfb-runs-empty {
  margin: 0;
  font-size: 13.5px;
  color: #6b7280;
}

.rfb-run-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.rfb-run-end .status-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 0;
  padding: 0 10px;
  font-size: 11.5px;
  line-height: 1;
}

.rfb-process-tag {
  padding: 2px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  background: #f8fafc;
}

.rfb-next {
  border-style: dashed;
  border-color: #c7d2fe;
}

.rfb-next > .rfb-stage-summary {
  border-bottom: 1px solid #f1f2f6;
  background: #f8fafc;
}

.rfb-stage-body > .rfb-view-rows + .rfb-record-rows {
  padding-top: 14px;
  border-top: 1px solid #f1f2f6;
}

.rfb-view-rows .field-col > .btn {
  align-self: flex-start;
}

.rfb-stage-body > .rfb-entry-actions {
  gap: 10px;
}

.rfb-run-title copy.rfb-run-code {
  font-size: 12.5px;
}
.settings-body {
  background-color: #f4f6f9;
  min-height: 100vh;
}

.settings-container {
  padding: 0 40px 24px 40px;
  width: 100%;
  margin: 0 auto;
}

.settings-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 768px) {
  .settings-layout {
    flex-direction: column;
  }
  .settings-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-panel-head-actions {
    flex-wrap: wrap;
  }
  .settings-panel-head .add-department-row {
    max-width: none;
  }
}
.settings-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.accordion-sidebar {
  background: #ffffff;
  border-radius: var(--border-radius, 4px);
  border: 1px solid #e5e7eb;
  padding: 12px 0;
}

.sidebar-group {
  margin-bottom: 24px;
}

.sidebar-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 16px;
  margin-bottom: 8px;
}

.accordion-item {
  display: flex;
  flex-direction: column;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: color 0.2s ease;
}

.accordion-header:hover {
  color: var(--primary-color, #0050c6);
}

.accordion-icon {
  color: #6b7280;
  transition: transform 0.2s ease;
}

.accordion-header.active .accordion-icon {
  transform: rotate(90deg);
}

.accordion-body {
  display: none;
  flex-direction: column;
  padding: 4px 12px 4px 16px;
}

.accordion-body.show {
  display: flex;
}

.settings-tab-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 4px;
  margin-bottom: 2px;
}

.settings-tab-btn:hover {
  color: var(--primary-color, #0050c6);
}

.settings-tab-btn.active {
  background-color: var(--primary-color, #2563eb);
  color: #ffffff;
  font-weight: 500;
}

.inner-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

.inner-tab-btn {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.inner-tab-btn:hover {
  color: var(--primary-color, #0050c6);
}

.inner-tab-btn.active {
  color: var(--primary-color, #0050c6);
  border-bottom-color: var(--primary-color, #0050c6);
}

.settings-content {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.settings-content .card {
  margin: 0 !important;
  width: 100%;
}

.settings-content .card:has(> .data-table) {
  padding: 24px;
}

.settings-content .settings-panel > .card + .card {
  margin-top: 20px !important;
}

.panel-subtitle {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted, #6b7280);
}

.card h1:has(+ .panel-subtitle) {
  padding-bottom: 6px;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
  animation: fadeInTab 0.15s ease-in-out;
}

.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border: 2px dashed #cbd5e1;
  border-radius: var(--border-radius);
  background-color: #f8fafc;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  margin-top: 10px;
}

.file-upload:hover {
  border-color: var(--primary-color, #2563eb);
  background-color: #f1f5f9;
}

.file-upload i {
  font-size: 32px;
  color: #94a3b8;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.file-upload:hover i {
  color: var(--primary-color, #2563eb);
}

.file-upload-title {
  font-size: 1rem;
  color: #334155;
  font-weight: 500;
  margin-bottom: 6px;
}

.file-upload-link {
  color: var(--primary-color, #2563eb);
  font-weight: 600;
}

.file-upload-hint {
  font-size: 0.85rem;
  color: #64748b;
}

.file-upload-input {
  display: none;
}

.org-logo-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.org-logo-preview-box {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.org-logo-img {
  width: 280px;
  height: 120px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  background: #f8fafc;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  display: block;
}

.org-logo-preview-box .profile-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
}

.org-logo-preview-box.hidden {
  display: none;
}

.theme-color-picker-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-color-picker-wrapper {
  border-radius: var(--border-radius, 4px);
  border: 1px solid #e5e7eb;
  padding: 3px;
  width: fit-content;
  background: #ffffff;
}

.theme-color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 32px;
  height: 20px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: block;
}

.theme-color-picker::-webkit-color-swatch {
  border-radius: 2px;
  border: none;
}

.theme-color-picker::-moz-color-swatch {
  border-radius: 2px;
  border: none;
}

.add-department-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  max-width: 500px;
}

.add-department-row .input-group {
  flex: 1;
  margin-bottom: 0;
}

.add-department-row .input-group input[type=text] {
  height: 32px;
  margin: 0;
}

.role-form-section {
  background: #fff;
  padding: 0;
  margin-bottom: 24px;
}

.role-form-section .section-header {
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
  background-color: #f9fafb;
  padding: 10px 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.form-grid {
  padding: 0 16px;
}

.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  max-width: 500px;
}

.form-row label {
  flex: 0 0 160px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  padding-top: 8px;
}

.form-row .form-control {
  flex: 1;
}

.form-row .form-field-with-hint {
  flex: 1;
}

.form-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.perm-table th {
  background-color: #f9fafb !important;
  font-size: 12px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e5e7eb;
}

.perm-table td {
  padding: 12px 16px !important;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.perm-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #2563eb;
}

.roles-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.form-actions-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.upload-icon-style {
  color: #2563eb;
  font-size: 16px;
  margin-bottom: 8px;
}

.upload-text-style {
  color: #2563eb;
  font-weight: 500;
}

.mt-24 {
  margin-top: 24px;
}

.role-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.align-top {
  vertical-align: top;
}

.current-role-label {
  font-size: 12px;
  font-weight: 600;
}

.inner-tab-content {
  display: none;
}

.inner-tab-content.active {
  display: block;
}

.approval-config-container {
  margin-top: 16px;
  max-width: 900px;
}

.approval-section-title {
  font-size: 13.5px;
  color: #374151;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 16px;
  padding-top: 12px;
}

.approval-section-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 24px 0;
}

.approval-type-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.approval-type-card {
  flex: 4 1 288px;
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  padding: 13px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s;
  position: relative;
  background: #fff;
}

.approval-type-card:has(.approval-radio-input:checked) {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.approval-type-card.disabled,
.approval-type-card.disabled input,
.approval-type-card.disabled .approval-type-info,
.approval-type-card.disabled .approval-type-title,
.approval-type-card.disabled .approval-type-desc {
  cursor: not-allowed;
}

.approval-type-card.disabled {
  opacity: 0.75;
  position: relative;
  overflow: hidden;
  background: repeating-linear-gradient(140deg, rgba(0, 0, 0, 0) 0px, transparent 6px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 10px);
}

.approval-type-card.disabled:hover {
  border-color: #e5e7eb;
  background-color: #fff;
}

.approval-radio-input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 47%;
  margin: 0;
  margin-top: 18px;
  outline: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  background: #fff;
  transition: all 0.2s ease;
}

.approval-radio-input:checked {
  border-color: #2563eb;
}

.approval-radio-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2563eb;
}

.approval-type-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #111827;
}

.approval-type-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.criteria-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.criteria-row-index {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
}

.criteria-drag-handle {
  color: #9ca3af;
  cursor: grab;
  font-size: 14px;
  padding: 4px;
}

.criteria-drag-handle:active {
  cursor: grabbing;
}

.criteria-select {
  flex: 1;
  min-width: 150px;
}

.criteria-input-wrapper {
  flex: 1;
  min-width: 150px;
}

.criteria-input-wrapper input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
}

.criteria-input-wrapper input:focus {
  border-color: #2563eb;
}

.criteria-delete-btn {
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  transition: color 0.2s;
}

.criteria-delete-btn:hover {
  color: #ef4444;
}

.hierarchy-config-section {
  margin-top: 32px;
}

.hierarchy-table {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.hierarchy-table thead {
  background: #f9fafb;
}

.hierarchy-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
}

.col-priority {
  width: 30%;
}

.col-approver {
  width: 50%;
}

.col-action {
  width: 20%;
}

.hierarchy-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.priority-cell-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drag-icon {
  color: #9ca3af;
}

.level-text {
  font-weight: 500;
  font-size: 13.5px;
  color: #374151;
  white-space: nowrap;
}

.approver-cell-content {
  width: 100%;
  max-width: 350px;
}

.add-level-container {
  margin-top: 0px;
  border: 1px solid #e5e7eb;
  border-top: none;
  padding: 12px 16px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.add-level-btn {
  background: none;
  border: none;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.approval-note-box {
  margin-top: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 13px;
  color: #4b5563;
}

.approval-save-container {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
}

.approval-save-btn {
  min-width: 120px;
}

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

.prefix-col {
  flex: 1;
}

.prefix-label {
  font-size: 11px;
  color: #6b7280;
}

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

.theme-color-hint {
  display: block;
  margin-top: 5px;
}

.criteria-pattern-box {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 20px;
  background-color: #f9fafb;
}

.criteria-pattern-label-wrapper {
  width: auto;
  padding-right: 20px;
}

.criteria-pattern-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.5px;
}

.criteria-pattern-input {
  background: transparent;
  border: none;
  font-family: monospace;
  color: #111827;
  font-weight: 500;
  width: 100%;
}

.criteria-pattern-input.editable {
  background: #ffffff;
  border: 1px solid #d1d5db;
  padding: 6px 12px;
  border-radius: 4px;
  outline: none;
}

.criteria-pattern-input.editable:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.criteria-pattern-edit-wrapper {
  padding-left: 10px;
}

.criteria-pattern-edit-icon {
  color: #2563eb;
  font-size: 13px;
  cursor: pointer;
}

.logic-dropdown-floating {
  position: absolute;
  top: -11px;
  left: 10px;
  z-index: 10;
}

.logic-select {
  width: 54px;
  font-size: 13px;
  font-weight: 600;
  color: #0050c6;
  border-radius: var(--border-radius);
  border: 1px solid #bae0ff;
  background-color: #eff7ff;
  cursor: pointer;
  padding: 3px 3px 3px 3px;
}

.logic-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.criteria-pattern-actions {
  margin-left: 15px;
  display: flex;
  gap: 8px;
}

.criteria-pattern-btn {
  white-space: nowrap;
}

.criteria-pattern-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.criteria-pattern-field {
  flex-grow: 1;
}

.action-type-container {
  display: flex;
  gap: 16px;
  padding: 0 20px;
}

.action-type-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius);
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  position: relative;
  background: #fff;
}

.role-panel-head,
.settings-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.role-panel-head .panel-subtitle,
.settings-panel-head .panel-subtitle {
  margin-bottom: 0;
}

.settings-panel-head {
  margin-bottom: 20px;
}

.settings-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.settings-panel-head-actions .btn.hidden {
  display: none;
}

.settings-item.hidden,
.settings-detail.hidden,
.settings-detail-empty.hidden,
.settings-detail-actions .btn.hidden,
.settings-detail-fields .form-row-vertical.hidden {
  display: none;
}

.settings-panel-head .add-department-row {
  margin-bottom: 0;
}

.role-workspace, .settings-workspace {
  display: flex;
  margin-top: 20px;
  border: 1px solid #edeef2;
  border-radius: 10px;
  overflow: hidden;
  min-height: 520px;
}

.role-list-pane, .settings-list-pane {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid #edeef2;
  display: flex;
  flex-direction: column;
}

.role-search-wrap, .settings-search-wrap {
  position: relative;
  padding: 16px 16px 12px;
}

.role-search-input, .settings-search-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 6px;
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  font-family: "Work Sans", system-ui, sans-serif;
  color: #111827;
  outline: none;
}

.role-search-input::placeholder, .settings-search-input::placeholder {
  color: #3d3d3d;
}

.role-search-input:focus, .settings-search-input:focus {
  border-color: #305DDD;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.role-search-icon, .settings-search-icon {
  position: absolute;
  left: 27px;
  top: 47%;
  transform: translateY(-2px);
  color: #3d3d3d;
  pointer-events: none;
}

.role-list, .settings-list {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 8px;
}

.role-item, .settings-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 16px 10px 20px;
  cursor: pointer;
}

.role-item:hover, .settings-item:hover {
  background: #f8fafc;
}

.role-item--active, .settings-item--active {
  background: #eef2ff;
}

.role-item--active::before, .settings-item--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: #305DDD;
}

.role-name, .settings-item-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #1f2937;
}

.role-item--active .role-name, .settings-item--active .role-name, .role-item--active .settings-item-name, .settings-item--active .settings-item-name {
  color: #3730a3;
}

.role-summary, .settings-item-summary {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: #3d3d3d;
  margin-top: 3px;
}

.role-item--active .role-summary, .settings-item--active .role-summary, .role-item--active .settings-item-summary, .settings-item--active .settings-item-summary {
  color: #6366f1;
}

.role-list-empty, .settings-list-empty {
  padding: 4px 20px 16px;
  font-size: 12.5px;
  color: #6b7280;
}

.role-detail-pane, .settings-detail-pane {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.role-detail-empty, .settings-detail-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  padding: 40px 26px;
  font-size: 13px;
}

.role-detail-head, .settings-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid #edeef2;
}

.role-detail-title, .settings-detail-title {
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #111827;
}

.role-detail-meta, .settings-detail-meta {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: #3d3d3d;
}

.role-detail-actions, .settings-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.role-detail-fields, .settings-detail-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px 26px 4px;
}

.role-detail-fields textarea, .settings-detail-fields textarea {
  min-height: 38px;
  resize: vertical;
}

.role-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 26px;
}

.role-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #6b7280;
}

.role-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.dot-full {
  background: #047857;
}

.dot-update {
  background: #1d4ed8;
}

.dot-write {
  background: #6d28d9;
}

.dot-read {
  background: #374151;
}

.dot-none {
  background: #dc2626;
}

.role-modules {
  padding: 0 26px 20px;
  flex-grow: 1;
  overflow-y: auto;
}

.role-module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #f1f2f6;
}

.role-module-row:last-child {
  border-bottom: none;
}

.role-module-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ui-icon.role-module-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.role-module-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
}

.role-perm-seg {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.role-perm-btn {
  width: 84px;
  text-align: center;
  padding: 6px 4px;
  border-radius: 7px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #3d3d3d;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.role-perm-btn:hover:not(:disabled):not(.role-perm-btn--active) {
  background: #f8fafc;
  color: #4b5563;
}

.role-perm-btn:disabled {
  cursor: default;
  opacity: 0.55;
}

.role-perm-btn.sel-full {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.role-perm-btn.sel-update {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.role-perm-btn.sel-write {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

.role-perm-btn.sel-read {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}

.role-perm-btn.sel-none {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.role-perm-btn--active:disabled {
  opacity: 1;
}

@media (max-width: 1100px) {
  .role-workspace,
  .settings-workspace {
    flex-direction: column;
  }
  .role-list-pane,
  .settings-list-pane {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #edeef2;
  }
  .role-list,
  .settings-list {
    max-height: 260px;
  }
  .role-module-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .role-perm-seg {
    flex-wrap: wrap;
  }
}
.role-item.hidden, .hidden.settings-item,
.role-detail.hidden,
.role-detail-empty.hidden,
.hidden.settings-detail-empty,
.role-detail-actions .btn.hidden,
.settings-detail-actions .btn.hidden {
  display: none;
}

/* Forms whose fields carry hints: labels line up with the control, not the middle of the hint text. */
.horizontal-form--aligned {
  padding-top: 12px;
}

.horizontal-form--aligned .form-row-horizontal {
  align-items: start;
}

.horizontal-form--aligned .label-col,
.horizontal-form--aligned .toggle-switch-wrapper,
.horizontal-form--aligned .radio-group,
.horizontal-form--aligned .field-value {
  display: flex;
  align-items: center;
  min-height: 38px;
}

.horizontal-form--aligned .radio-card {
  margin-bottom: 0;
}

.horizontal-form--aligned .field-col {
  gap: 6px;
}

.horizontal-form--aligned .muted_text {
  font-size: 12.5px;
  line-height: 1.5;
}

.horizontal-form--aligned .field-value {
  font-size: 13.5px;
  font-weight: 500;
  color: #1f2937;
}

.mail-provider-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mail-provider-fields.hidden {
  display: none;
}
.status-pill,
.status-tag,
.prd-tag,
.lab-overdue,
.ppd-chip,
.pp-phase-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: max-content;
  padding: 4px 10px;
  border: 1px solid #d9d9d9;
  border-radius: var(--border-radius);
  background: #f5f5f5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #595959;
}

.status-active,
.status-low,
.status-authentic,
.prd-tag--sampling {
  background: #e8f8ef;
  color: #067647;
  border-color: #abefc6;
}

.status-running,
.status-info,
.prd-tag--preprocess,
.pp-phase-tag {
  background: #e6f4ff;
  color: #0050c6;
  border-color: #bae0ff;
}

.status-pending,
.status-medium,
.status-warning,
.prd-tag--warehouse,
.ppd-chip--warn {
  background: #fff7e6;
  color: #ad6800;
  border-color: #ffe0a3;
}

.status-inactive,
.status-high,
.status-tampered,
.lab-overdue {
  background: #fff1f0;
  color: #cf1322;
  border-color: #ffccc7;
}

.status-idle,
.status-unknown {
  background: #f5f5f5;
  color: #595959;
  border-color: #d9d9d9;
}

.pp-phase-tag--after {
  background: #e8f8ef;
  color: #067647;
  border-color: #abefc6;
}
.ticket-system {
  margin: 0 24px 24px;
}

.ticket-desk-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px #ecfdf5;
}

.ticket-desk-dot.is-off {
  background: #fde68a;
  box-shadow: 0 0 0 3px #fef9c3;
}

.ticket-desk-dot.is-checking {
  background: #d1d5db;
  box-shadow: 0 0 0 3px #f1f5f9;
}

.ticket-icon-btn-plain {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ticket-icon-btn-plain:hover {
  background: #f5f6f9;
  color: #111827;
}

.ticket-icon-btn-plain.is-spinning .ui-icon {
  animation: ticketSpin 0.8s linear infinite;
}

@keyframes ticketSpin {
  to {
    transform: rotate(360deg);
  }
}
.ticket-back-icon {
  transform: scaleX(-1);
}

.ticket-card-org .ui-icon,
.ticket-activity .ui-icon,
.ticket-attachment-name .ui-icon,
.ticket-resolved-notice p .ui-icon,
.ticket-chat-actions .btn .ui-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

.ticket-layout {
  display: flex;
  gap: 16px;
  height: calc(100vh - 330px);
  min-height: 480px;
}

.ticket-list-pane,
.ticket-chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border: 1px solid #edeef2;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 14px rgba(16, 24, 40, 0.04);
  overflow: hidden;
  animation: fadeInUp 0.45s ease-out;
}

.ticket-list-pane {
  flex: 0 0 360px;
}

.ticket-chat-pane {
  flex: 1 1 auto;
  min-width: 0;
}

.ticket-list-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f2f6;
}

.ticket-brand-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #ffffff;
}

.ticket-brand-avatar .ui-icon {
  width: 20px;
  height: 20px;
}

.ticket-list-brand-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ticket-list-brand-text strong {
  display: block;
  font-size: 13.5px;
  color: #111827;
}

.ticket-list-brand-text p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 12px;
  color: #3d3d3d;
}

.ticket-list-brand-text p span {
  font-size: inherit;
}

.ticket-list-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f2f6;
}

.ticket-search {
  position: relative;
}

.ticket-search-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #3d3d3d;
  pointer-events: none;
}

.ticket-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  font-size: 13px;
  border: 1px solid #d8dae1;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1f2937;
  outline: none;
}

.ticket-search-input:focus {
  border-color: #c7d2fe;
}

.ticket-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-filter-row .activity-scope {
  display: flex;
  width: 100%;
}

.ticket-filter-row .ticket-filter {
  flex: 1 1 0;
  min-height: 28px;
  padding: 5px 4px;
  font-size: 11.5px;
  white-space: nowrap;
}

.ticket-filter-count {
  margin-left: 4px;
  font-size: inherit;
  font-weight: 500;
  color: #6b7280;
}

.ticket-filter.activity-scope-btn--active .ticket-filter-count {
  color: inherit;
}

.ticket-list {
  flex: 1 1 auto;
  overflow-y: auto;
}

.ticket-placeholder {
  margin: 0;
  padding: 40px 16px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

.ticket-placeholder .ui-icon {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 8px;
  color: #3d3d3d;
}

.ticket-placeholder .ui-icon--spinner {
  animation: ticketSpin 0.8s linear infinite;
}

.ticket-card {
  display: block;
  width: 100%;
  padding: 12px 16px 12px 13px;
  border: none;
  border-bottom: 1px solid #f1f2f6;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ticket-card:hover {
  background: #f5f6f9;
}

.ticket-card--active,
.ticket-card--active:hover {
  background: #eef2ff;
  border-left-color: #305DDD;
}

.ticket-card-top,
.ticket-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-card-top {
  justify-content: space-between;
}

.ticket-card-subject {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: #111827;
}

.ticket-card-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #3d3d3d;
}

.ticket-card-org {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 8px;
  overflow: hidden;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  background: #eef2ff;
  font-size: 11px;
  font-weight: 600;
  color: #305DDD;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-card-preview {
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #6b7280;
}

.ticket-card-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: #6b7280;
}

.ticket-card-id {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: inherit;
  white-space: nowrap;
}

.ticket-empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.ticket-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 6px;
  background: #eef2ff;
  color: #305DDD;
}

.ticket-empty-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.ticket-bubble-avatar .ui-icon {
  width: 15px;
  height: 15px;
}

.ticket-chat {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.ticket-chat.hidden,
.ticket-empty.hidden {
  display: none;
}

.ticket-chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 6px;
}

.ticket-resolve-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  color: #4b5563;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ticket-resolve-btn:hover {
  background: #f5f6f9;
  color: #111827;
}

.ticket-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.ticket-more-icon {
  width: 16px;
  height: 16px;
}

.ticket-menu {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 5;
  min-width: 192px;
  padding: 6px;
  border: 1px solid #edeef2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}

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

.ticket-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #1f2937;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ticket-menu button:hover {
  background: #f5f6f9;
}

.ticket-menu button .ui-icon {
  width: 15px;
  height: 15px;
  color: #6b7280;
}

.ticket-menu .is-danger,
.ticket-menu .is-danger .ui-icon {
  color: #dc2626;
}

.ticket-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
}

.ticket-back-btn:hover {
  background: #f1f5f9;
}

.ticket-chat-heading {
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
}

.ticket-chat-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Sora", "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.ticket-chat-meta {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #6b7280;
}

.ticket-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  background: #f6f7fb;
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb transparent;
}

.ticket-messages::-webkit-scrollbar {
  width: 6px;
}

.ticket-messages::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e5e7eb;
}

.ticket-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ticket-day {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #3d3d3d;
}

.ticket-day::before,
.ticket-day::after {
  content: "";
  flex: 1;
  border-top: 1px solid #e5e7eb;
}

.ticket-activity {
  align-self: center;
  padding: 4px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
  font-size: 11px;
  color: #6b7280;
}

.ticket-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 85%;
}

.ticket-bubble-row--mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ticket-bubble-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.ticket-bubble-avatar--agent {
  background: #111827;
  color: #ffffff;
}

.ticket-bubble-avatar--mine {
  background: #eef2ff;
  color: #305DDD;
}

.ticket-bubble-body {
  min-width: 0;
}

.ticket-bubble-row--mine .ticket-bubble-body {
  text-align: right;
}

.ticket-bubble-meta {
  margin-bottom: 4px;
  font-size: 11px;
  color: #6b7280;
}

.ticket-bubble-support {
  font-size: inherit;
  color: #305DDD;
}

.ticket-bubble {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.ticket-bubble--agent {
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 6px;
  background: #ffffff;
  color: #1f2937;
}

.ticket-bubble--mine {
  border-bottom-right-radius: 6px;
  background: var(--primary-color);
  color: #ffffff;
}

.ticket-attachments {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.ticket-attachments--n1 {
  grid-template-columns: 180px;
}

.ticket-attachments--n2 {
  grid-template-columns: repeat(2, 96px);
}

.ticket-attachments--n3 {
  grid-template-columns: repeat(3, 72px);
}

.ticket-attachments--n1 .ticket-attachment {
  aspect-ratio: 4/3;
}

.ticket-bubble-row--mine .ticket-attachments {
  margin-left: auto;
}

.ticket-attachment {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: rgb(255, 255, 255);
  cursor: pointer;
}

.ticket-attachment:hover {
  box-shadow: 0 0 0 2px #c7d2fe;
}

.ticket-attachment-name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  overflow: hidden;
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}

.ticket-attachment img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #ffffff;
}

.ticket-composer-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #f1f2f6;
}

.ticket-resolved-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}

.ticket-resolved-notice.hidden {
  display: none;
}

.ticket-resolved-notice p {
  margin: 0;
  font-size: 13px;
  color: #4b5563;
}

.ticket-resolved-notice p .ui-icon {
  color: #047857;
}

.ticket-composer {
  position: relative;
  border: 1px solid #d8dae1;
  border-radius: 10px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ticket-composer:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.ticket-composer--drop {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.ticket-reply-input {
  display: block;
  width: 100%;
  min-height: 44px;
  max-height: 140px;
  padding: 12px 14px 4px;
  font: inherit;
  font-size: 13.5px;
  border: none;
  background: transparent;
  color: #1f2937;
  outline: none;
  resize: none;
  overflow-y: hidden;
}

.ticket-reply-input--scroll {
  overflow-y: auto;
}

.ticket-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px 8px;
}

.ticket-composer-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ticket-tool-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ticket-tool-btn:hover {
  background: #f5f6f9;
  color: #111827;
}

.ticket-tool-btn.is-recording {
  background: #fef2f2;
  color: #dc2626;
}

.ticket-recording {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #dc2626;
}

.ticket-recording span {
  font-size: inherit;
  font-weight: inherit;
}

.ticket-recording.hidden {
  display: none;
}

.ticket-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: ticketPulse 1s ease-in-out infinite;
}

@keyframes ticketPulse {
  50% {
    opacity: 0.3;
  }
}
.ticket-send-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ticket-send-btn:hover:not(:disabled) {
  background: #eef2ff;
}

.ticket-send-btn:disabled {
  color: #9ca3af;
  cursor: default;
}

.ticket-pending-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 10px 0;
}

.ticket-pending-files.hidden {
  display: none;
}

.ticket-pending-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 4px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
  color: #4b5563;
}

.ticket-pending-file img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}

.ticket-pending-file > .ui-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.ticket-pending-file-name {
  max-width: 140px;
  overflow: hidden;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-pending-file-remove {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}

.ticket-pending-file-remove:hover {
  background: #fef2f2;
  color: #dc2626;
}

.ticket-pending-file-remove .ui-icon {
  width: 10px;
  height: 10px;
}

.ticket-emoji-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 280px;
  max-width: calc(100% - 16px);
  padding: 8px;
  border: 1px solid #edeef2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
}

.ticket-emoji-panel.hidden {
  display: none;
}

.ticket-emoji {
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ticket-emoji:hover {
  background: #f5f6f9;
}

.ticket-audio {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 36px;
  margin-top: 6px;
}

.ticket-bubble-row--mine .ticket-audio {
  margin-left: auto;
}

.ticket-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ticket-file-chip:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.ticket-file-chip-name {
  overflow: hidden;
  font-size: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-system--draft .ticket-menu-wrap,
.ticket-system--draft .ticket-resolve-btn {
  display: none;
}

@media (max-width: 900px) {
  .ticket-system {
    margin: 0 16px 16px;
  }
  .ticket-layout {
    height: calc(100vh - 300px);
  }
  .ticket-list-pane {
    flex: 1 1 auto;
  }
  .ticket-chat-pane,
  .ticket-system--chat-open .ticket-list-pane {
    display: none;
  }
  .ticket-system--chat-open .ticket-chat-pane {
    display: flex;
  }
  .ticket-back-btn {
    display: inline-flex;
  }
  .ticket-chat-head {
    flex-wrap: wrap;
  }
  .ticket-bubble-row {
    max-width: 100%;
  }
}
.ticket-messages {
  gap: 6px;
}

.ticket-day {
  justify-content: center;
  margin: 10px 0 6px;
}

.ticket-day::before,
.ticket-day::after {
  content: none;
}

.ticket-day span {
  padding: 3px 12px;
  border: 1px solid #edeef2;
  border-radius: 6px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.tk-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 82%;
  margin-top: 4px;
}

.tk-msg--mine {
  align-self: flex-end;
}

.tk-msg--theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.tk-msg--theirs:has(.tk-msg-name) .tk-avatar {
  margin-top: 22px;
}

.tk-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: #eef2ff;
  font-size: 11px;
  font-weight: 700;
  color: #305DDD;
}

.tk-avatar:has(.tk-avatar-logo) {
  width: 34px;
  height: 34px;
  background: transparent;
}

.tk-avatar-logo {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, 0.25));
}

.tk-avatar .ui-icon {
  width: 16px;
  height: 16px;
  color: #305DDD;
}

.tk-msg-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tk-msg--mine .tk-msg-col {
  align-items: flex-end;
}

.tk-msg--theirs .tk-msg-col {
  align-items: flex-start;
}

.tk-msg-name {
  display: flex;
  align-items: center;
  min-height: 18px;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4b5563;
}

.tk-bubble {
  position: relative;
  max-width: 100%;
  padding: 8px 12px 6px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tk-msg--theirs .tk-bubble {
  border: 1px solid #edeef2;
  border-top-left-radius: 4px;
  background: #ffffff;
  color: #1f2937;
}

.tk-msg--mine .tk-bubble {
  border-bottom-right-radius: 4px;
  background: var(--primary-color);
  color: #fff;
}

.tk-time {
  float: right;
  margin: 6px 0 -2px 10px;
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.65;
}

.tk-time-row {
  padding: 0 4px;
  font-size: 10.5px;
  color: #6b7280;
}

.tk-time-row .tk-time {
  float: none;
  margin: 0;
  opacity: 1;
}

.tk-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tk-link .ui-icon {
  width: 12px;
  height: 12px;
  color: inherit;
}

.tk-msg-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tk-msg--mine .tk-msg-files {
  align-items: flex-end;
}

.tk-msg-files .ticket-attachments,
.tk-msg-files .ticket-file-chip {
  margin-top: 0;
}

.tk-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 250px;
  max-width: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid #edeef2;
  border-radius: 14px;
  background: #ffffff;
}

.tk-msg--mine .tk-audio {
  border-color: transparent;
  background: var(--primary-color);
  color: #fff;
}

.tk-audio audio {
  display: none;
}

.tk-audio-play {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.tk-msg--mine .tk-audio-play {
  background: #fff;
}

.tk-audio-glyph {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
}

.tk-msg--mine .tk-audio-glyph {
  border-left-color: var(--primary-color);
}

.tk-audio.is-playing .tk-audio-glyph {
  width: 10px;
  height: 12px;
  margin-left: 0;
  border: none;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}

.tk-msg--mine .tk-audio.is-playing .tk-audio-glyph {
  border-left-color: var(--primary-color);
  border-right-color: var(--primary-color);
}

.tk-audio-track {
  position: relative;
  flex: 1 1 auto;
  height: 26px;
  cursor: pointer;
}

.tk-audio-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.tk-audio-wave i {
  flex: 1 1 0;
  min-height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.3;
}

.tk-msg--theirs .tk-audio-wave {
  color: #4b5563;
}

.tk-audio-played {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  pointer-events: none;
}

.tk-audio-played i {
  opacity: 1;
}

.tk-msg--theirs .tk-audio-played {
  color: var(--primary-color);
}

.tk-audio-time {
  flex: 0 0 auto;
  min-width: 32px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ticket-more-icon {
  width: 18px;
  height: 18px;
}