@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');.chatBot--launcher {
  position: fixed;
  bottom: 60px;
  right: 24px;
  z-index: 1300;
  display: flex;
  align-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  padding-left: 15px;
  background: linear-gradient(135deg, #1A8A56, #2EB273);
  color: #fff;
  border: none;
  border-radius: 26px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease, transform 0.6s;
  animation: chatBotFadeIn 0.2s ease-out both;
}
.chatBot--launcher:hover {
  width: auto;
  padding: 12px 20px 12px 15px;
  border-radius: 28px;
  box-shadow: 0 6px 24px rgba(46, 178, 115, 0.5), 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.chatBot--launcher:active {
  transform: scale(0.97);
}

.chatBot--launcher-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chatBot--launcher-label {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.6s ease;
  margin-left: 12px;
}

.chatBot--launcher:hover .chatBot--launcher-label,
.chatBot--launcher:hover .chatBot--launcher-kbd {
  opacity: 1;
}

.chatBot--launcher-kbd {
  font-family: inherit;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 1px 6px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.25s ease 0.08s, max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.chatBot--panel {
  position: fixed;
  top: 2vh;
  right: 24px;
  bottom: 2vh;
  width: max(420px, 30vw);
  height: auto;
  max-height: none;
  min-height: 480px;
  background: #fff;
  border: 1px solid #ECEDEF;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
  z-index: 1299;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatBotFadeIn 0.2s ease-out both;
}

.chatBot--spark-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2EB273, #1A6B43);
  color: #fff;
  flex-shrink: 0;
}

.chatBot--header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #F2F3F4;
  flex-shrink: 0;
}

.chatBot--hd-info {
  flex: 1;
  min-width: 0;
}

.chatBot--hd-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1F2125;
  letter-spacing: -0.2px;
}

.chatBot--hd-beta {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EBF9F2;
  font-weight: 500;
  font-size: 10px;
  color: #1A8A56;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}

.chatBot--hd-sub {
  font-size: 11px;
  color: #8E8E93;
  margin-top: 1px;
}

.chatBot--hd-actions {
  display: flex;
  gap: 2px;
}
.chatBot--hd-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 7px;
  color: #AFAFB4;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.chatBot--hd-actions button:hover {
  background: #F2F3F4;
  color: #4A4C50;
}

.chatBot--ctx-bar {
  background: #FAFBFB;
  border-bottom: 1px solid #F2F3F4;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.chatBot--ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ECEDEF;
  color: #4A4C50;
}

.chatBot--ctx-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2EB273;
  flex-shrink: 0;
}

.chatBot--ctx-label {
  font-size: 10.5px;
  color: #AFAFB4;
}

.chatBot--body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
  min-height: 0;
}
.chatBot--body::-webkit-scrollbar {
  width: 4px;
}
.chatBot--body::-webkit-scrollbar-thumb {
  background: #ECEDEF;
  border-radius: 4px;
}

.chatBot--welcome {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}

.chatBot--greeting {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.35px;
  color: #1F2125;
  line-height: 1.2;
  margin-bottom: 5px;
}

.chatBot--grad {
  background: linear-gradient(135deg, #2EB273 0%, #1A6B43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.chatBot--greeting-sub {
  font-size: 12.5px;
  color: #8E8E93;
  line-height: 1.5;
}

.chatBot--section-lbl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #AFAFB4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 14px 0 8px;
}

.chatBot--ln {
  flex: 1;
  height: 1px;
  background: #F2F3F4;
}

.chatBot--ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #EBF9F2;
  color: #1A8A56;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chatBot--ic--red {
  background: #FFEBEE;
  color: #C62828;
}
.chatBot--ic--amber {
  background: #FEF1DD;
  color: #B26B0F;
}
.chatBot--ic--blue {
  background: #E6EEF9;
  color: #2A6FDB;
}
.chatBot--ic--purple {
  background: #F3E8FF;
  color: #7E22CE;
}

.chatBot--insight-list {
  background: #fff;
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  overflow: hidden;
}

.chatBot--insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #F2F3F4;
  cursor: pointer;
  transition: background 0.12s;
}
.chatBot--insight-row:last-child {
  border-bottom: none;
}
.chatBot--insight-row:hover {
  background: #FAFBFB;
}

.chatBot--ins-body {
  flex: 1;
  min-width: 0;
}

.chatBot--ins-title {
  font-size: 12px;
  font-weight: 500;
  color: #1F2125;
  line-height: 1.4;
}

.chatBot--ins-sub {
  font-size: 10.5px;
  color: #8E8E93;
  margin-top: 2px;
  line-height: 1.35;
}

.chatBot--ins-chevron {
  color: #AFAFB4;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.chatBot--suggest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.chatBot--suggest-tile {
  width: 100%;
  background: #fff;
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.chatBot--suggest-tile:hover {
  background: #FAFBFB;
  border-color: #D4D6D8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.chatBot--suggest-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.chatBot--suggest-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #8E8E93;
  text-transform: uppercase;
}

.chatBot--suggest-prompt {
  font-size: 11.5px;
  color: #1F2125;
  line-height: 1.45;
  font-weight: 500;
}

.chatBot--msg-row {
  display: flex;
}
.chatBot--msg-row--user {
  justify-content: flex-end;
}
.chatBot--msg-row--ai {
  justify-content: flex-start;
}

.chatBot--user-bubble {
  background: #EBF9F2;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #1F2125;
  max-width: 86%;
}

.chatBot--ai-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.chatBot--ai-sender {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatBot--ai-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1F2125;
}

.chatBot--ai-time {
  font-size: 11px;
  color: #AFAFB4;
}

.chatBot--ai-text {
  font-size: 13px;
  color: #1F2125;
  line-height: 1.6;
  padding-left: 30px;
}
.chatBot--ai-text p {
  margin: 0 0 8px;
}
.chatBot--ai-text p:last-child {
  margin-bottom: 0;
}
.chatBot--ai-text ul, .chatBot--ai-text ol {
  margin: 4px 0 8px;
  padding-left: 18px;
}
.chatBot--ai-text ul:last-child, .chatBot--ai-text ol:last-child {
  margin-bottom: 0;
}
.chatBot--ai-text li {
  margin-bottom: 3px;
}
.chatBot--ai-text strong {
  font-weight: 600;
  color: #1F2125;
}
.chatBot--ai-text em {
  font-style: italic;
}
.chatBot--ai-text code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  background: #F2F3F4;
  border: 1px solid #ECEDEF;
  border-radius: 3px;
  padding: 1px 5px;
  color: #1F2125;
}
.chatBot--ai-text pre {
  background: #F2F3F4;
  border: 1px solid #ECEDEF;
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 6px 0 8px;
}
.chatBot--ai-text pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
}
.chatBot--ai-text blockquote {
  border-left: 3px solid #C8E8D6;
  margin: 4px 0 8px;
  padding: 2px 10px;
  color: #656669;
}
.chatBot--ai-text h1, .chatBot--ai-text h2, .chatBot--ai-text h3 {
  font-size: 13px;
  font-weight: 600;
  color: #1F2125;
  margin: 8px 0 4px;
}
.chatBot--ai-text h1:first-child, .chatBot--ai-text h2:first-child, .chatBot--ai-text h3:first-child {
  margin-top: 0;
}
.chatBot--ai-text a {
  color: #1A8A56;
  text-decoration: underline;
}

.chatBot--typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 4px 30px;
}
.chatBot--typing-dots span {
  width: 5px;
  height: 5px;
  background: #2EB273;
  border-radius: 50%;
  animation: chatBotBounce 1.2s infinite ease-in-out;
}
.chatBot--typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.chatBot--typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.chatBot--slash-menu {
  background: #fff;
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 6px;
  animation: chatBotFadeIn 0.15s ease-out both;
}
.chatBot--slash-menu-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #AFAFB4;
  padding: 8px 14px 4px;
}

.chatBot--slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.chatBot--slash-item:last-child {
  margin-bottom: 4px;
}
.chatBot--slash-item:hover, .chatBot--slash-item--active {
  background: #FAFBFB;
}
.chatBot--slash-item-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #1F2125;
  line-height: 1.3;
}
.chatBot--slash-item-desc {
  font-size: 11px;
  color: #AFAFB4;
  margin-top: 1px;
}

.chatBot--input-area {
  border-top: 1px solid #F2F3F4;
  padding: 10px 14px 14px;
  flex-shrink: 0;
  background: #fff;
}

.chatBot--input-wrap {
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chatBot--input-wrap:focus-within {
  border-color: #2EB273;
  box-shadow: 0 0 0 3px rgba(46, 178, 115, 0.15);
}

.chatBot--textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 13px;
  color: #1F2125;
  padding: 10px 14px 8px;
  line-height: 1.5;
  background: transparent;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
}
.chatBot--textarea::placeholder {
  color: #AFAFB4;
}
.chatBot--textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chatBot--ctrls {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-top: 1px solid #F2F3F4;
  background: #fff;
  border-radius: 0 0 10px 10px;
}

.chatBot--ctrls-grow {
  flex: 1;
}

.chatBot--ic-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 7px;
  color: #AFAFB4;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.chatBot--ic-btn:hover {
  background: #F2F3F4;
  color: #4A4C50;
}

.chatBot--mode-tabs {
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
}

.chatBot--mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #8E8E93;
  background: none;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chatBot--mode-tab:hover {
  background: #F2F3F4;
  color: #4A4C50;
}
.chatBot--mode-tab--active {
  color: #1A8A56;
  background: #EBF9F2;
  border-color: #C8E8D6;
}
.chatBot--mode-tab--active svg {
  color: #1A8A56;
}
.chatBot--mode-tab svg {
  color: #8E8E93;
}

.chatBot--form-type-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 4px;
}

.chatBot--form-type-label {
  font-size: 10.5px;
  font-weight: 500;
  color: #8E8E93;
}

.chatBot--form-type-options {
  display: flex;
  gap: 4px;
}

.chatBot--form-type-btn {
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid #ECEDEF;
  background: #fff;
  color: #656669;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chatBot--form-type-btn:hover {
  background: #FAFBFB;
  border-color: #D4D6D8;
}
.chatBot--form-type-btn--active {
  background: #EBF9F2;
  border-color: #C8E8D6;
  color: #1A8A56;
  font-weight: 600;
}

.chatBot--send-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ECEDEF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.chatBot--send-btn svg {
  color: #AFAFB4;
}
.chatBot--send-btn.active {
  background: #2EB273;
}
.chatBot--send-btn.active svg {
  color: #fff;
}
.chatBot--send-btn.active:hover {
  background: #1A8A56;
}
.chatBot--send-btn.active:active {
  transform: scale(0.94);
}
.chatBot--send-btn:disabled {
  cursor: default;
}

.chatBot--hints {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 11px;
  color: #AFAFB4;
  font-family: inherit;
}
.chatBot--hints kbd {
  font-family: inherit;
  font-size: 10px;
  background: #F2F3F4;
  border: 1px solid #ECEDEF;
  border-radius: 4px;
  padding: 1px 4px;
  color: #8E8E93;
}

.chatBot--hints-right {
  margin-left: auto;
}

.chatBot--preview-card {
  flex-shrink: 0;
  min-height: 80px;
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  background: #fff;
  margin: 8px 0;
}

.chatBot--preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #FAFBFB 0%, #fff 100%);
  border-bottom: 1px solid #F2F3F4;
}

.chatBot--preview-head-ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #EBF9F2;
  color: #1A8A56;
  display: grid;
  place-items: center;
}
.chatBot--preview-head-ic svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

.chatBot--preview-head-ttl {
  font-size: 13px;
  font-weight: 600;
  color: #1F2125;
  letter-spacing: -0.02em;
}

.chatBot--preview-head-sub {
  font-size: 11px;
  font-weight: 400;
  color: #8E8E93;
  display: block;
  margin-top: 1px;
  letter-spacing: 0;
}

.chatBot--preview-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #FEF1DD;
  color: #B26B0F;
  font-size: 10.5px;
  font-weight: 600;
}
.chatBot--preview-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.chatBot--preview-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chatBot--preview-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  align-items: baseline;
}

.chatBot--preview-row-key {
  font-size: 11.5px;
  color: #8E8E93;
}

.chatBot--preview-row-val {
  font-size: 12.5px;
  color: #1F2125;
  font-weight: 500;
}

.chatBot--preview-li {
  display: grid;
  gap: 0;
  border-top: 1px solid #F2F3F4;
  font-size: 12px;
  margin-top: 8px;
  padding-top: 4px;
}

.chatBot--preview-li-h {
  padding: 7px 0 5px;
  font-size: 10px;
  font-weight: 600;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #F2F3F4;
}
.chatBot--preview-li-h.right {
  text-align: right;
}

.chatBot--preview-li-c {
  padding: 8px 0;
  border-bottom: 1px solid #F8F9FA;
  color: #1F2125;
}
.chatBot--preview-li-c.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chatBot--preview-tot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: #FAFBFB;
  border-top: 1px solid #F2F3F4;
}

.chatBot--preview-tot-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #656669;
}
.chatBot--preview-tot-row.total {
  font-size: 14px;
  font-weight: 700;
  color: #1F2125;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #ECEDEF;
}

.chatBot--preview-tot-row-val {
  font-variant-numeric: tabular-nums;
}

.chatBot--preview-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #F2F3F4;
}

.chatBot--preview-foot-grow {
  flex: 1;
}

.chatBot--doc-upload-area {
  padding: 0 14px 10px;
  flex-shrink: 0;
}

.chatBot--doc-dropzone {
  border: 2px dashed #D4D6D8;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: #FAFBFB;
}
.chatBot--doc-dropzone:hover {
  border-color: #2EB273;
  background: #E8F7F0;
}
.chatBot--doc-dropzone--active {
  border-color: #2EB273;
  background: #EBF9F2;
}

.chatBot--doc-drop-label {
  font-size: 13px;
  font-weight: 500;
  color: #1F2125;
  margin-top: 4px;
}

.chatBot--doc-drop-sub {
  font-size: 11px;
  color: #8E8E93;
  margin-top: 2px;
}

.chatBot--doc-progress-wrap {
  padding: 10px 14px;
  flex-shrink: 0;
}

.chatBot--doc-progress-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chatBot--doc-progress-name {
  font-size: 12px;
  font-weight: 500;
  color: #1F2125;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatBot--doc-progress-pct {
  font-size: 11px;
  font-weight: 600;
  color: #2EB273;
}

.chatBot--doc-progress-bar {
  height: 4px;
  background: #ECEDEF;
  border-radius: 2px;
  overflow: hidden;
}

.chatBot--doc-progress-fill {
  height: 100%;
  background: #2EB273;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.chatBot--doc-progress-fill--indeterminate {
  width: 100%;
  animation: chatBotProgressIndeterminate 1.5s infinite ease-in-out;
}

.chatBot--doc-status-area {
  padding: 0 14px 8px;
  flex-shrink: 0;
}

.chatBot--doc-status-card {
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.chatBot--doc-status-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatBot--doc-status-info {
  flex: 1;
  min-width: 0;
}

.chatBot--doc-status-name {
  font-size: 12px;
  font-weight: 600;
  color: #1F2125;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatBot--doc-status-label {
  font-size: 11px;
  color: #8E8E93;
  display: block;
  margin-top: 1px;
}

.chatBot--doc-status-error {
  font-size: 11px;
  color: #C62828;
  margin-top: 6px;
  padding: 6px 8px;
  background: #FFEBEE;
  border-radius: 6px;
}

.chatBot--doc-status-ready {
  font-size: 11px;
  color: #2EB273;
  margin-top: 6px;
  font-weight: 500;
}

.chatBot--doc-status-spin {
  animation: chatBotSpin 1s linear infinite;
}

.chatBot--doc-chip-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 6px;
}

.chatBot--doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 16px;
  background: #EBF9F2;
  border: 1px solid #C8E8D6;
  font-size: 11px;
  font-weight: 500;
  color: #1F2125;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.chatBot--doc-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chatBot--doc-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatBot--doc-chip-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  background: #EBF9F2;
  color: #2EB273;
  flex-shrink: 0;
  text-transform: uppercase;
}

.chatBot--doc-chip-action {
  background: none;
  border: 1px solid #ECEDEF;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  color: #8E8E93;
  display: flex;
  align-items: center;
  transition: background 0.12s, color 0.12s;
}
.chatBot--doc-chip-action:hover {
  background: #F2F3F4;
  color: #4A4C50;
}
.chatBot--doc-chip-action--danger:hover {
  background: #FFEBEE;
  color: #C62828;
}

.chatBot--doc-intro-card {
  border: 1px solid #ECEDEF;
  border-radius: 10px;
  background: #fff;
  overflow: auto;
  margin: 8px 0;
}

.chatBot--doc-intro-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #FAFBFB;
  border-bottom: 1px solid #F2F3F4;
}

.chatBot--doc-intro-head-info {
  flex: 1;
  min-width: 0;
}

.chatBot--doc-intro-filename {
  font-size: 12px;
  font-weight: 600;
  color: #1F2125;
  display: block;
}

.chatBot--doc-intro-meta {
  font-size: 10.5px;
  color: #8E8E93;
  display: block;
  margin-top: 1px;
  text-transform: capitalize;
}

.chatBot--doc-intro-summary {
  font-size: 12.5px;
  color: #4A4C50;
  line-height: 1.55;
  padding: 10px 12px;
}

.chatBot--doc-intro-questions {
  padding: 8px 12px 10px;
  border-top: 1px solid #F2F3F4;
}

.chatBot--doc-intro-q-label {
  font-size: 10px;
  font-weight: 700;
  color: #AFAFB4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.chatBot--doc-intro-q-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #2EB273;
  background: none;
  border: none;
  padding: 5px 0;
  cursor: pointer;
  transition: color 0.12s;
}
.chatBot--doc-intro-q-btn:hover {
  color: #1A8A56;
  text-decoration: underline;
}

.chatBot--doc-error {
  font-size: 11px;
  color: #C62828;
  padding: 6px 12px;
}

.chatBot--doc-error-floating {
  position: absolute;
  bottom: 120px;
  left: 14px;
  right: 14px;
  font-size: 11px;
  color: #C62828;
  padding: 8px 12px;
  background: #FFEBEE;
  border-radius: 8px;
  cursor: pointer;
  z-index: 10;
}

@keyframes chatBotFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes chatBotBounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
}
@keyframes chatBotSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes chatBotProgressIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(25%);
  }
}
.chatBot--disclaimer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0 14px;
  color: #9CA3AF;
}
.chatBot--disclaimer-wrap svg {
  color: #9CA3AF;
  fill: none;
}

.chatBot--disclaimer-ln {
  flex: 1;
  height: 1px;
  background: #F2F3F4;
}

.chatBot--disclaimer-text {
  display: flex;
  align-items: center;
  /* Reset Typography margin from AIDisclaimer */
}
.chatBot--disclaimer-text .MuiTypography-root {
  margin-top: 0 !important;
}.action-bar {
  display: flex;
  padding: 0.75rem 0rem;
  justify-content: space-between;
  align-items: center;
}
.action-bar--RightContent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.action-bar--LeftContent {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.action-bar--HeaderCard {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.filter-bar {
  display: flex;
  padding: 0.75rem 0rem;
  align-items: center;
  justify-content: space-between;
}
.filter-bar .filter-bar--LeftContent {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.filter-bar .filter-bar--LeftContent h6 {
  color: #7b7c7f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.225rem;
}
.filter-bar .filter-bar--LeftContent .hide-btn {
  color: #7b7c7f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.018rem;
  background-color: #fff;
  box-shadow: unset;
  padding: 0rem 0.5rem;
}
.filter-bar .filter-bar--LeftContent .hide-btn:hover {
  box-shadow: unset;
}
.filter-bar .filter-bar--LeftContent .filter-chip {
  border: 0.063rem solid #f3f2f2;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
}
.filter-bar .filter-bar--LeftContent .subtask-switch {
  display: flex;
  align-items: center;
  gap: 0.313rem;
}
.filter-bar .filter-bar--LeftContent .subtask-switch .switch {
  width: 1.75rem;
  height: 1.063rem;
  margin-top: 0.375rem;
}
.filter-bar .filter-bar--LeftContent .subtask-switch .switch .slider:before {
  width: 0.875rem;
  height: 0.813rem;
}
.filter-bar .filter-bar--RightContent .enable-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #4AC08C;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.225rem;
  cursor: pointer;
}.view-modal--Head {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f6f5;
}
.view-modal--Tab {
  border-right: 1px solid #f5f6f5;
  width: 12rem;
  flex-shrink: 0;
  padding-bottom: auto;
}
.view-modal--Tab .MuiButtonBase-root {
  min-height: 3rem;
  text-transform: none;
  display: flex;
  gap: 0.25rem;
  justify-content: flex-start;
  margin: 0 0.75rem;
  margin-bottom: 0.375rem;
  border-radius: 0.5rem;
}
.view-modal--Tab .MuiButtonBase-root:first-child {
  margin-top: 0.375rem;
}
.view-modal--Tab .MuiButtonBase-root:last-child {
  margin-bottom: 0;
}
.view-modal--Tab .MuiButtonBase-root:hover {
  background-color: #eeeff1;
}
.view-modal--Tab .Mui-selected {
  border-radius: 0.5rem;
  background-color: #D2F0E6;
  color: #2EB273;
}
.view-modal--Tab .Mui-selected svg {
  color: #2EB273;
}
.view-modal--Tab .Mui-selected:hover {
  background-color: #D2F0E6;
}
.view-modal--Tab .MuiTabs-indicator {
  display: none;
}
.view-modal--TabsContent {
  display: flex;
}
.view-modal .MuiDialog-paper {
  min-width: 40rem;
}
.view-modal--TabData {
  height: 25rem;
}
.view-modal--TabData img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.view-modal--Desc {
  padding: 0rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-weight: 400;
}
.view-modal--Header {
  display: flex;
  align-items: center;
  color: #d3d3d4;
}
.view-modal--Tabs {
  display: flex;
  gap: 0.25rem;
}
.view-modal--Tabs svg {
  color: #7b7c7f;
}
.view-modal--Tabs.Mui-disabled {
  color: #d3d3d4;
}
.view-modal--Tabs.Mui-disabled svg {
  color: #d3d3d4;
}
.view-modal--Select {
  border-radius: 1.5rem;
  padding: 0rem 0.5rem;
}
.view-modal--Select .MuiSelect-select {
  padding: 0.25rem 0.5rem;
}
.view-modal--BoardContainer {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.view-modal--Actions {
  padding: 0.5rem 1rem;
}.select--MenuItemHeader {
  border-top: 1px solid #d3d3d4;
  border-bottom: 1px solid #d3d3d4;
  background-color: #fbfbfb;
}.header-card {
  display: flex;
  padding: 0.375rem 0.5rem;
  align-items: center;
  gap: 0.5rem;
  color: #7b7c7f;
  cursor: pointer;
}
.header-card svg {
  width: 1rem;
  height: 1rem;
}
.header-card--Active {
  color: #4AC08C;
}.search-wrapper {
  position: relative;
}
.search-wrapper .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 0.4rem;
}.switch {
  position: relative;
  display: inline-block;
  width: 1.5625rem;
  height: 0.875rem;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 0.625rem;
  width: 0.625rem;
  left: 0.1875rem;
  bottom: 0.125rem;
  background-color: white;
  transition: 0.4s;
}
.switch input:checked + .slider:before {
  transform: translateX(0.625rem);
}

/* Rounded sliders */
.slider.round {
  border-radius: 2.125rem;
}

.slider.round:before {
  border-radius: 50%;
}

input:checked + .slider.round:before {
  border-radius: 50%;
  border: none;
}
.filter-modal .MuiPaper-root {
  background: #ffffff;
}
.filter-modal {
  /* ---------- Header ---------- */
}
.filter-modal .filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #EEF0F3;
  background: #ffffff;
}
.filter-modal .filter-header__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-modal .filter-header__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #EEF2FF;
  color: #4F46E5;
  display: grid;
  place-items: center;
}
.filter-modal .filter-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-modal .filter-dropdown {
  min-width: 200px;
}
.filter-modal .filter-dropdown .MuiOutlinedInput-root {
  border-radius: 8px;
  background: #F9FAFB;
}
.filter-modal .filter-dropdown .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #E5E7EB;
}
.filter-modal .filter-dropdown .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #CBD5E1;
}
.filter-modal .searchbar-box-list {
  padding: 8px 10px 4px;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
  border-bottom: 1px solid #F1F5F9;
}
.filter-modal .menu-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}
.filter-modal .menu-list .icon-list {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.filter-modal .menu-list:hover .icon-list, .filter-modal .menu-list.Mui-selected .icon-list {
  opacity: 1;
}
.filter-modal .empty-saved-filters {
  padding: 16px;
  text-align: center;
}
.filter-modal {
  /* ---------- Content ---------- */
}
.filter-modal .filter-content {
  background: #F9FAFB;
  padding: 18px 20px 12px !important;
}
.filter-modal .filter-error {
  border-radius: 8px;
  margin-bottom: 12px;
}
.filter-modal {
  /* ---------- Query Builder Styling ---------- */
}
.filter-modal .query-builder-wrapper .queryBuilder {
  background: transparent;
}
.filter-modal .query-builder-wrapper {
  /* Group container — the real visual upgrade */
}
.filter-modal .query-builder-wrapper .ruleGroup {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  position: relative;
}
.filter-modal .query-builder-wrapper .ruleGroup .ruleGroup {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  margin-top: 10px;
}
.filter-modal .query-builder-wrapper {
  /* Rule row */
}
.filter-modal .query-builder-wrapper .rule {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}
.filter-modal .query-builder-wrapper .rule .MuiOutlinedInput-root,
.filter-modal .query-builder-wrapper .rule .MuiSelect-select {
  border-radius: 8px;
  font-size: 13px;
}
.filter-modal .query-builder-wrapper {
  /* Combinator between rules — segmented control look */
}
.filter-modal .query-builder-wrapper .betweenRules {
  display: inline-flex;
  margin: 6px 0;
}
.filter-modal .query-builder-wrapper .betweenRules .MuiToggleButtonGroup-root,
.filter-modal .query-builder-wrapper .betweenRules .MuiSelect-root {
  background: #F1F5F9;
  border-radius: 8px;
  padding: 2px;
}
.filter-modal .query-builder-wrapper .betweenRules .MuiToggleButtonGroup-root .MuiSelect-select,
.filter-modal .query-builder-wrapper .betweenRules .MuiSelect-root .MuiSelect-select {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.filter-modal .query-builder-wrapper {
  /* Header row (combinator + delete group + actions) */
}
.filter-modal .query-builder-wrapper .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-modal .query-builder-wrapper {
  /* Add filter / add group buttons inside group */
}
.filter-modal .query-builder-wrapper .ruleGroup-addRule,
.filter-modal .query-builder-wrapper .ruleGroup-addGroup {
  border-radius: 8px;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
}
.filter-modal .query-builder-wrapper {
  /* Remove icons */
}
.filter-modal .query-builder-wrapper .rule-remove,
.filter-modal .query-builder-wrapper .ruleGroup-remove {
  border-radius: 8px;
  color: #94A3B8;
  transition: all 0.15s ease;
}
.filter-modal .query-builder-wrapper .rule-remove:hover,
.filter-modal .query-builder-wrapper .ruleGroup-remove:hover {
  color: #DC2626;
  background: #FEF2F2;
}
.filter-modal {
  /* ---------- Footer ---------- */
}
.filter-modal .filter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid #EEF0F3;
  background: #ffffff;
}
.filter-modal .filter-footer__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.filter-modal .clear-all-btn {
  color: #64748B;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
}
.filter-modal .clear-all-btn:hover {
  color: #475569;
  background: #F8FAFC;
}
.filter-modal .clear-all-btn--rtl {
  margin-right: 0;
  margin-left: auto;
}
.filter-modal .clear-all-btn.Mui-disabled {
  color: #CBD5E1;
}
.filter-modal .cancel-filter-btn {
  text-transform: none;
  border-radius: 8px;
  font-weight: 500;
  color: #475569;
  border-color: #E2E8F0;
}
.filter-modal .cancel-filter-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}
.filter-modal .update-filter-btn {
  text-transform: none;
  border-radius: 8px;
  font-weight: 500;
  color: #4F46E5;
  border-color: #C7D2FE;
}
.filter-modal .update-filter-btn:hover {
  background: #EEF2FF;
  border-color: #A5B4FC;
}
.filter-modal .apply-filter-btn {
  text-transform: none;
  border-radius: 8px;
  font-weight: 500;
  background: #10B981;
  color: #ffffff;
  padding: 6px 18px;
  box-shadow: none;
}
.filter-modal .apply-filter-btn:hover {
  background: #059669;
  box-shadow: none;
}
.filter-modal .apply-filter-btn.Mui-disabled {
  background: #D1FAE5;
  color: #ffffff;
}
.filter-modal .apply-count-chip {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  height: 18px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 2px;
}
.filter-modal .apply-count-chip .MuiChip-label {
  padding: 0 6px;
}.textfield {
  border-radius: 0.25rem;
}
.textfield input,
.textfield textarea {
  padding: 0.5rem;
  font-size: 0.875rem;
}
.textfield :disabled {
  -webkit-text-fill-color: unset;
}
.requiredStar {
  color: #c64d4d;
}.datePicker {
  border-radius: 0.25rem;
  width: 100%;
}
.datePicker input {
  padding: 0.5rem;
  font-size: 0.875rem;
}
.datePicker :disabled {
  -webkit-text-fill-color: unset;
}
.MuiDateCalendar-root .MuiPickersCalendarHeader-labelContainer {
  font-weight: 600;
}
.MuiDateCalendar-root .MuiPickersDay-root {
  border-radius: 2px;
}
.MuiDateCalendar-root .MuiPickersDay-today {
  background-color: #f5f6f5;
}
.MuiDateCalendar-root .MuiPickersDay-root:hover {
  background-color: #f5f6f5;
  color: #1F7C5E;
}
.MuiDateCalendar-root .MuiPickersDay-root.Mui-selected,
.MuiDateCalendar-root .MuiPickersYear-yearButton.Mui-selected {
  background-color: #4AC08C;
}
.requiredStar {
  color: #c64d4d;
}.form-element-wrapper--Element {
  position: relative;
  display: flex;
  border-radius: 0.5rem;
  padding: 0.75rem;
  cursor: pointer;
}
.form-element-wrapper--Active {
  position: relative;
  display: flex;
  border-radius: 0.5rem;
  padding: 0.75rem;
  border: 2px solid #54CC96;
  cursor: pointer;
}
.form-element-wrapper--Default {
  background-color: #fbfbfb;
}
.form-element-wrapper--Actions {
  position: absolute;
  right: 1rem;
  display: flex;
  gap: 0.25rem;
}
.formBuilder--GridLayout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.formBuilder--Header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.formBuilder--Section {
  border-radius: 0.5rem;
  border: 2px dotted #919294;
  padding: 0.75rem;
}
.formBuilder--Active {
  border-radius: 0.5rem;
  border: 2px solid #54CC96;
  padding: 0.75rem;
}
.MultiSelect .MuiSelect-select {
  padding-top: 4px !important;
  padding-bottom: 4px;
  padding-left: 8px;
}
.table--AddButton {
  color: #1f2125 !important;
}
.editor-container .ck-editor__editable {
  min-height: 300px !important; /* Set min height */
  border-top: 0 !important;
}
.editor-container .ck-sticky-panel__content {
  border-bottom: 0;
  padding: 4px !important;
}
.editor-container .ck-toolbar {
  border-bottom: 0 !important;
  background-color: #f5f6f5 !important;
  border-radius: 4px !important;
}
.editor-container .ck-toolbar__items {
  justify-content: center;
}.itemEntryModal--Divider {
  border-color: #eeeff1;
}
.itemEntryModal--DialogTitle {
  border-bottom: 1px solid #d3d3d4;
}
.itemEntryModal--SectionTitle {
  padding-left: 1.5rem;
}
.itemEntryModal--DialogContents {
  padding-top: 0 !important;
}
.itemEntryModal--DialogAction {
  justify-content: end !important;
  z-index: 9999 !important;
  padding: 0.5rem 1.5rem !important;
  background-color: #eeeff1 !important;
}
.itemEntryModal--DialogAction--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125 !important;
}
.itemEntryModal--DialogAction--GreenBtn {
  background-color: #2EB273 !important;
  color: #fff !important;
}
.scroll-container {
  overflow: auto; /* enables scroll */
  scrollbar-width: none; /* for Firefox */
  -ms-overflow-style: none; /* for Internet Explorer and Edge */
}
.scroll-container::-webkit-scrollbar {
  display: none; /* for Chrome, Safari and Opera */
}.add-role-drp ul {
  min-width: 12.875rem;
  border-radius: 0.5rem;
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
}
.add-role-drp ul .searchbar-box-list {
  border: 0;
  padding: 0.313rem 0.75rem 0.5rem 0.75rem;
}
.add-role-drp ul .all-attribute-title {
  padding: 0rem 0.938rem;
}
.add-role-drp ul .all-attribute-title .MuiTypography-root {
  font-size: 0.875rem;
}
.add-role-drp ul .role-drp-list .add-icon {
  min-width: 1.5rem;
}
.add-role-drp ul .role-drp-list .title span {
  font-size: 0.938rem;
  font-weight: 400;
  line-height: 1.125rem;
  letter-spacing: -0.02em;
  color: #656669;
}
.add-role-drp ul .role-drp-list .eye-icon {
  text-align: right;
  min-width: 2rem;
}
.add-role-drp ul .role-drp-list .eye-icon img {
  margin-left: auto;
}
.add-role-drp ul .role-drp-list:last-child .title span {
  color: #1f2125;
}
.add-role-drp ul .role-drp-list:last-child .eye-icon {
  position: relative;
  top: 0.188rem;
}
.add-role-drp ul .role-drp-list:last-child .eye-icon svg {
  fill: #7b7c7f;
}
.dropdown-inner--DestructiveActions {
  color: #c64d4d;
}
.dropdown-inner--DestructiveActions:hover {
  background-color: #fedfdf;
}
.action-items ul {
  display: flex;
  text-align: center;
}
.no-data {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.add-row-btn {
  color: #1f2125 !important;
}
.MuiTableSortLabel-iconDirectionAsc path:first-child {
  fill: #232529;
}
.MuiTableSortLabel-iconDirectionAsc path:last-child {
  fill: #bdbebf;
}
.MuiTableSortLabel-iconDirectionDesc path:first-child {
  fill: #232529;
}
.MuiTableSortLabel-iconDirectionDesc path:last-child {
  fill: #bdbebf;
}
.custom-table table th {
  background-color: #FBFBFB !important;
}
.custom-table table th svg {
  height: 16px !important;
  width: 16px !important;
}
.custom-table table th:nth-child(2) svg {
  height: 20px !important;
  width: 20px !important;
}
.custom-table table th button[aria-label=Move] {
  display: none;
  transition: all 0.3s ease-in-out;
}
.custom-table table th:hover button[aria-label=Move] {
  display: block;
}
.custom-table .MuiTouchRipple-root {
  display: none;
}
.custom-table table th span.MuiBadge-root {
  width: 16px;
}
.custom-table table td {
  font-size: 12px !important;
}.brandAddModal--Divider {
  border-color: #eeeff1;
}
.brandAddModal--DialogTitle {
  border-bottom: 1px solid #d3d3d4;
}
.brandAddModal--SectionTitle {
  padding-left: 1.5rem;
}
.brandAddModal--DialogAction {
  justify-content: space-between;
  padding: 0.5rem 1.5rem !important;
  background-color: #eeeff1;
}
.brandAddModal--DialogAction--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}.datePicker {
  border-radius: 0.25rem;
  width: 100%;
}
.datePicker input {
  padding: 0.5rem;
  font-size: 0.875rem;
}
.datePicker :disabled {
  -webkit-text-fill-color: unset;
}
.MuiDateCalendar-root .MuiPickersCalendarHeader-labelContainer {
  font-weight: 600;
}
.MuiDateCalendar-root .MuiPickersDay-root {
  border-radius: 2px;
}
.MuiDateCalendar-root .MuiPickersDay-today {
  background-color: #f5f6f5;
}
.MuiDateCalendar-root .MuiPickersDay-root:hover {
  background-color: #f5f6f5;
  color: #1F7C5E;
}
.MuiDateCalendar-root .MuiPickersDay-root.Mui-selected,
.MuiDateCalendar-root .MuiPickersYear-yearButton.Mui-selected {
  background-color: #4AC08C;
}
.requiredStar {
  color: #c64d4d;
}.confirm .MuiDialog-paper {
  min-width: 2.375rem;
  border-radius: 1rem;
}
.confirm--head {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: space-between;
  align-items: center;
}
.confirm--title {
  display: flex;
  align-items: center;
}
.confirm--content {
  padding: 1rem 1.375rem 1.5rem 1.375rem;
}
.confirm--actions {
  padding: 0.5rem 1rem;
}.valueField--Container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}.toast-undo {
  margin: 0.4rem 1rem;
  padding: 0rem;
  cursor: pointer;
}

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

.icon {
  font-size: 1rem;
}.fixedAssetItemAddModal--DialogTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
}
.fixedAssetItemAddModal--DialogContents {
  padding: 24px !important;
}
.fixedAssetItemAddModal--DialogAction {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
}
.fixedAssetItemAddModal--DialogAction--WhiteBtn {
  background-color: #FFFFFF !important;
  border: 1px solid #e0e0e0;
  color: #333;
}
.fixedAssetItemAddModal--DialogAction--WhiteBtn:hover {
  background-color: #f5f5f5 !important;
}.upload-icon {
  display: inline-block;
  position: relative;
  border-radius: calc(var(--size) * 625rem);
}

.upload-icon.hoverable:hover {
  background-color: #d3d3d4;
}

.FileUploadCard--FileIcon .Avatar {
  background-color: #ebf9f2;
  padding: 0.375rem;
  border-radius: 0.25rem;
}

.FileUploadCard .MuiListItemText-root .MuiTypography-root {
  font-size: 0.75rem;
  color: #232529;
  line-height: 1.05rem;
}

.FileUploadCard .MuiListItemIcon-root {
  min-width: 2.75rem;
}

.upload .MuiDialog-paper {
  min-width: 38.875rem;
  border-radius: 1rem;
}

.upload--head {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  background-color: #fbfbfb;
  border-top: 1px solid #eeeff1;
}

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

.upload--content {
  padding: 1.5rem 1.375rem 2.25rem 1.375rem;
}

.upload--fileContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 16.25rem;
  border: 0.0625rem dashed #d3d3d4;
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: border 0.3s ease;
  text-align: center;
}

.upload--fileContent.drag-active {
  border-color: #4AC08C;
}

.upload--text {
  text-align: center;
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  margin-bottom: 0.5rem;
}

.upload--iconBox {
  display: flex;
  flex-direction: column;
}

.upload--actions {
  padding: 0.5rem 1rem;
}

.upload .upload--head .upload--title .dialog-box-title {
  color: #000;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .upload--head button svg {
  width: 1.25rem;
}

.upload .upload--head button svg path {
  fill: #292d32;
}

.upload .upload--content .input-label {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
  margin-bottom: 0.5rem;
}

.upload .autocomplete-input-upload {
  margin-left: 0rem;
  margin-right: 0.3125rem;
  width: 100%;
}

.upload .autocomplete-input-upload .MuiFormControl-root .MuiOutlinedInput-root {
  padding: 0rem 0.5rem;
}

.upload .autocomplete-input-upload .MuiFormControl-root .MuiOutlinedInput-root .MuiAutocomplete-clearIndicator {
  display: none;
  visibility: hidden;
}

.upload .autocomplete-input-upload .MuiOutlinedInput-notchedOutline {
  border-color: #ddd;
  border-width: 0.0625rem;
}

.upload .upload-btn {
  min-width: 6.25rem;
  color: #fff;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .public-check-label {
  margin-left: 0rem;
}

.upload .public-check-label .MuiFormControlLabel-label {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .people-access-accordion {
  border: 0rem;
  border-radius: 0rem;
  box-shadow: none;
  margin-top: 0rem;
}

.upload .people-access-accordion::before {
  background-color: unset;
}

.upload .people-access-accordion .MuiAccordionSummary-root {
  padding: 0rem;
  margin: 0rem;
  min-height: 4rem;
}

.upload .people-access-accordion .MuiAccordionSummary-root .MuiAccordionSummary-content .MuiTypography-root {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.upload .people-access-accordion .user-accordion-details {
  padding: 0rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list {
  padding: 0rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root {
  padding: 0rem;
  margin-bottom: 0.9375rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .primary-user-name {
  color: #1f2125;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .primary-user-name .secondary-email-text {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .owner-role-badge {
  display: flex;
  padding: 0.25rem 0.375rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  background: #f5f6f5;
  overflow: hidden;
  color: #656669;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box .MuiSelect-select {
  padding: 0.5rem 0rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
  color: #232529;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box .MuiOutlinedInput-notchedOutline {
  border: 0rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box svg path {
  fill: #919294;
}

.upload .upload--actions {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  background-color: #eeeff1;
}

.upload .upload--actions .cancel-btn {
  display: flex;
  padding: 0.375rem 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  color: #1f2125;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  border-radius: 0.25rem;
  box-shadow: 0rem 0.25rem 0.625rem -0.125rem rgba(20, 78, 50, 0.05), 0rem 0.125rem 0.125rem -0.0625rem rgba(20, 78, 50, 0.1), 0rem -0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}

.upload .upload--actions .success-btn {
  display: flex;
  padding: 0.375rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  border-radius: 0.25rem;
  color: #fff;
  background: var(--PrimaryGreen-700, #289b64);
  box-shadow: 0rem 0.25rem 0.625rem -0.125rem rgba(20, 78, 50, 0.05), 0rem 0.125rem 0.125rem -0.0625rem rgba(20, 78, 50, 0.1), 0rem -0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}

.select-menu-items {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
  color: #232529;
}

.user-select-chips {
  border-radius: 0.25rem;
}

.dzu-dropzone {
  border: unset !important;
  background: transparent !important;
  height: 100%;
}

.dzu-inputLabel {
  text-align: center;
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  margin-bottom: 0.5rem;
}

.preview-box {
  display: flex;
  align-items: center;
  width: calc(100% - 1.875rem);
  padding: 0.625rem 3%;
  background: #fff;
  border-bottom: 0.0625rem solid #ddd;
  font-size: 0.875rem;
}

.preview-box img {
  max-height: 5rem;
  max-width: 5rem;
  border-radius: 0.25rem;
  margin-right: 0.625rem;
}

.document-cover {
  display: flex;
  padding: 0.75rem 0rem 0.25rem 0rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 0.0625rem solid #f5f6f5;
}

.document-name {
  display: flex;
  width: 28.125rem;
  align-items: flex-start;
  gap: 0.75rem;
}

.delete-icon {
  cursor: pointer;
}

.upload-list {
  width: 100%;
}

.drop-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.after-drop {
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
  align-items: center;
}

.after-drop img {
  width: 3rem;
  height: 3rem;
}

.after-drop p {
  font-weight: 500;
}

.device-wrap {
  display: flex;
  gap: 1.5rem;
}

.device-wrap .select-button {
  margin-top: 1rem;
}

.device-wrap .select-button img {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #eeeff1;
}

.device-wrap .select-button p {
  color: #656669;
}

.bottom-corner-box {
  display: inline-block;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2;
  max-height: 50%;
}

.bottom-corner-box .box-list {
  overflow-y: auto;
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
}

.bottom-corner-box .bottom-section {
  border-bottom: 0.063rem solid #eeeff1;
  padding: 0.5rem;
}

.bottom-corner-box .bottom-section .close-icon,
.bottom-corner-box .bottom-section .folder-icon {
  transform: translate(-50%, -79%);
  left: 50%;
  right: unset;
}

.avatar-container {
  position: relative;
  display: flex;
}

.close-icon,
.folder-icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: none;
}

.avatar-container:hover .avatar {
  display: none;
}

.avatar-container:hover .close-icon,
.avatar-container:hover .folder-icon {
  display: block;
}

.header-section {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 0.0625rem solid var(--Border-Default, #d3d3d4);
  background: var(--Neutral-50, #fff);
}

.import-text {
  color: #000;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.canceled-text {
  color: #656669;
}

.svgDiv {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.125rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: var(--Neutral-200, #f5f6f5);
}

.svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.body-section {
  display: flex;
  height: 20rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  background: #fff;
}

.document-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.document-body {
  display: flex;
  width: 35.375rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.document-cover {
  display: flex;
  padding: 0.75rem 0rem 0.25rem 0rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.document-name {
  display: flex;
  width: 34.375rem;
  align-items: flex-start;
  gap: 0.75rem;
  align-items: center;
}

.document-choices {
  display: flex;
  width: 9.625rem;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.document-icon-sm {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  background: var(--Accent-Red-100, #ffebeb);
}

.document-icon-lg {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  background: var(--Accent-Red-100, #ffebeb);
}

.document-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 0 0;
}

.svg-document {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.document-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem;
  align-self: stretch;
}

.document-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--Neutral-900, #232529);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.document-size {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--Text-Secondary, #656669);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.document-size .success-file {
  color: #289b64;
  margin: 0 0.75rem;
}

.document-size .fail-file {
  color: #f86060;
  margin: 0 0.75rem;
}

.checkbox {
  display: flex;
  height: 2.5625rem;
  align-items: center;
  gap: 0.25rem;
}

.delete-icon {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.checkbox-svg {
  width: 1.5rem;
  height: 1.5rem;
}

.checkbox-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--Text-Secondary, #656669);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.svg-delete {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.button-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: var(--Button-Secondary_BG, #fff);
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
}

.button-body {
  display: flex;
  padding: 0.375rem 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.button-add {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  justify-content: center;
  align-items: center;
}

.svg-add {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.button-add-text {
  color: var(--Button-On_Secondary, #1f2125);
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.submit-section {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: flex-end;
  align-items: center;
  gap: 3.125rem;
  align-self: stretch;
  border-top: 0.0625rem solid var(--Border-Default, #d3d3d4);
  background: var(--Neutral-200, #f5f6f5);
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex: 1 0 0;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.btn-cancel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: #fff;
  color: #292d32;
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
}

.btn-upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: var(--Neutral-500, #a7a8a9);
  color: #ffffff;
  box-shadow: 0rem 0.125rem 0.3125rem -0.125rem rgba(20, 78, 50, 0.05), 0rem 0.0625rem 0.0625rem -0.125rem rgba(20, 78, 50, 0.1), 0rem -0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}

.top-section {
  display: flex;
  width: 350rem;
  padding: 0.5rem 0.75rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem 0.75rem 0rem 0rem;
  background: var(--PrimaryGreen-100, #ebf9f2);
}

.top-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--Neutral-900, #232529);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
}

.top-options {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.btn {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  justify-content: center;
  align-items: center;
}

.arrow-btn {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.svg-arrow-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.svg-cancel-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.bottom-section {
  display: flex;
  padding: 0.5rem;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  background: #fff;
}

.svg-icon {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--PrimaryGreen-100, #ebf9f2);
}

.doc-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.25rem;
}

.svg-doc {
  width: 20rem;
  height: 20rem;
}

.file-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
}

.file-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1 0 0;
}

.file-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--Neutral-900, #232529);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.015rem;
}

.file-status {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
}

.svg-status {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
}

.add-file {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
  border: unset;
}

.uploadActions, .uploadHeader {
  padding: 0.5rem;
  background-color: #fbfbfb;
  border-top: 1px solid #eeeff1;
}

.remove-button {
  position: absolute;
  z-index: 10;
  background: #54CC96;
  height: 30px;
  width: 30px;
  color: white;
  top: -10px;
  right: -10px;
  border: 3px solid white;
}

.remove-button:hover {
  z-index: 10;
  background: #4AC08C;
}

.icon-BG {
  position: relative;
  background: #B6E9D6;
  border-radius: 8px;
}.Avatar {
  position: relative;
  display: inline-block;
}
.Avatar--FirstChar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Avatar--Badge {
  position: absolute;
  bottom: -2%;
  right: -24%;
  transform: translateX(-50%);
  background-color: green;
  border-radius: 50%;
  z-index: 1;
}.Timeline {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.Timeline li {
  min-height: 2.5625rem;
}
.Timeline li::before {
  content: unset;
}
.Timeline li:last-child .MuiTimelineContent-root {
  padding: 0 1.5rem 0;
}
.Timeline li .MuiTimelineDot-root {
  margin: 0.125rem 0.3125rem;
  border-width: 0.125rem;
  padding: 0.0625rem;
  background: #656669;
}
.Timeline li .MuiTimelineContent-root {
  padding: 0 0.75rem 1rem;
  font-size: 0.75rem;
}
.Timeline li .MuiTimelineConnector-root {
  background-color: #eeeff1;
  width: 1px;
}
.Timeline li .MuiFormControl-root {
  width: 100%;
}
.Timeline li .MuiTimelineSeparator-root .MuiSvgIcon-root {
  background-color: #eeeff1;
  height: 1.0625rem;
  width: 1.0625rem;
  border-radius: 50%;
  padding: 0.1875rem;
}
.Timeline--ActivityBox {
  padding: 2rem 1.5rem;
  font-size: 0.75rem;
  width: 100%;
}
.Timeline--CommentWrap {
  padding: 0.4375rem 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid #d3d3d4;
  margin: 0.5rem 0 1rem;
}
.Timeline--Comment {
  margin: 0;
}
.Timeline--CommentBox {
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid #eeeff1;
  width: 100%;
}
.Timeline--CommentText {
  margin: 0.5rem 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.Timeline--Chat {
  overflow: auto;
  padding: 1rem 1.5rem;
  max-height: calc(100vh - 260px);
}
.Timeline--Chat li::before {
  content: unset;
}
.Timeline--Content {
  display: flex;
  flex-direction: column;
}
.Timeline--Activity {
  max-height: calc(100vh - 260px);
}
.Timeline--ActivityLogItem {
  line-height: 1.3;
}
.MuiAccordionDetails-root {
  padding: 1rem 1.5rem !important;
}
.ActivityContainer {
  border-left: 2px solid #f5f6f5;
  height: calc(100vh - 130px);
  position: absolute;
  width: 100%;
  right: 0;
}
.Avatar .MuiAvatar-root {
  border-radius: 0.5rem;
}
.Activity--Container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}.main-wrapper {
  width: 100%;
  height: calc(100vh - 4.6875rem);
  overflow-y: auto;
}.Timeline {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.Timeline li {
  min-height: 2.5625rem;
}
.Timeline li::before {
  content: unset;
}
.Timeline li:last-child .MuiTimelineContent-root {
  padding: 0 1.5rem 0;
}
.Timeline li .MuiTimelineDot-root {
  margin: 0.25rem !important;
  border-width: 0.125rem;
  padding: 0.0625rem;
  background: #919294;
}
.Timeline li .MuiTimelineContent-root {
  padding: 0 0.75rem 1rem;
  font-size: 0.75rem;
}
.Timeline li .MuiTimelineConnector-root {
  background-color: #eeeff1;
  width: 1px;
}
.Timeline li .MuiFormControl-root {
  width: 100%;
}
.Timeline li .MuiTimelineSeparator-root .MuiSvgIcon-root {
  background-color: #eeeff1;
  height: 1.0625rem;
  width: 1.0625rem;
  border-radius: 50%;
  padding: 0.1875rem;
}
.Timeline--CommentWrap {
  padding: 0.4375rem 0.5rem;
  border-radius: 0.25rem;
  border: 0.0625rem solid #d3d3d4;
  margin: 0.5rem 0 1rem;
}
.Timeline--Comment {
  margin: 0;
}
.Timeline--CommentBox {
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid #eeeff1;
  width: 100%;
}
.Timeline--CommentText {
  margin: 0.5rem 0;
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.Timeline--Chat {
  overflow: auto;
  padding: 1rem 1.5rem;
  max-height: calc(100vh - 260px);
}
.Timeline--Chat li::before {
  content: unset;
}
.Timeline--Content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.Timeline--Activity {
  max-height: calc(100vh - 260px);
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.Timeline--ActivityLogItem {
  line-height: 1.3;
}
.MuiAccordionDetails-root {
  padding: 1rem 1.5rem !important;
}
.ActivityContainer {
  border-left: 2px solid #f5f6f5;
  height: calc(100vh - 130px);
  position: absolute;
  width: 100%;
  right: 0;
}
.Avatar .MuiAvatar-root {
  border-radius: 0.5rem;
}
.Activity--Container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.box-class {
  border: 1px solid;
  border-color: #F3F2F2;
  border-radius: 8px;
}
.Timeline li .MuiTimelineDot-root {
  background: #d3d3d4 !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.Timeline li .MuiTimelineConnector-root {
  background: transparent !important;
}
/* ─── App Bar ─── */
.app-bar {
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  flex: 1;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
}
/* ─── Waffle button ─── */
.app-switch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a4c50;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.app-switch:hover {
  background: #f2f3f4;
  color: #1f2125;
}
.app-switch.open {
  background: #ebf9f2;
  color: #1a8a56;
  border-color: #c8ebd8;
}
.app-switch svg {
  width: 18px;
  height: 18px;
}
/* ─── Divider between waffle and breadcrumb ─── */
.ab-divider {
  width: 1px;
  height: 22px;
  background: #ecedef;
  margin: 0 2px;
  flex-shrink: 0;
}
/* ─── Crumb path ─── */
.crumb-path {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 4px;
  border-radius: 9px;
  min-width: 0;
  list-style: none;
}
.mod-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px 0 4px;
  border-radius: 7px;
  background: #f2f8f5;
  border: 1px solid #dcefe4;
  color: #1a6b43;
  cursor: pointer;
  flex-shrink: 0;
}
.mod-chip:hover {
  background: #e6f5ec;
}
.mod-chip .mp-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(135deg, #2eb273 0%, #1a8a56 100%);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mod-chip .mp-icon img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.mod-chip .mp-icon .mp-icon-img {
  filter: brightness(0) invert(1);
}
.mod-chip .mp-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cp-sep {
  width: 11px;
  height: 11px;
  color: #c8cacc;
  flex-shrink: 0;
}
.cp-text {
  font-size: 12.5px;
  color: #6b6d70;
  padding: 4px 6px;
  letter-spacing: -0.01em;
}
.cp-link {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: #6b6d70;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.cp-link:hover {
  color: #1f2125;
  background: #f5f6f7;
}
.cp-current {
  font-size: 12.5px;
  color: #1f2125;
  font-weight: 600;
  padding: 4px 6px;
  letter-spacing: -0.01em;
}
/* ─── Global Search — margin-left:auto pushes it to the right ─── */
.gs {
  width: 280px;
  position: relative;
  transition: width 0.2s ease;
  flex-shrink: 0;
}
.gs.open {
  width: 460px;
}
.gs-input {
  width: 100%;
  height: 36px;
  background-color: #f5f6f7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%239EA0A3' stroke-width='2' stroke-linecap='round'><circle cx='6.5' cy='6.5' r='4.5'/><line x1='10' y1='10' x2='13' y2='13'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0 12px 0 32px;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  color: #1f2125;
  outline: none;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gs-input::placeholder {
  color: #9ea0a3;
}
.gs-input:focus, .gs.open .gs-input {
  background-color: #fff;
  border-color: #2eb273;
  box-shadow: 0 0 0 3px rgba(46, 178, 115, 0.12);
}
.gs-kbd {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  color: #8e8e93;
  background: #fff;
  border: 1px solid #ecedef;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600;
  white-space: nowrap;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.gs.open .gs-kbd {
  display: none;
}
.gs-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: #9ea0a3;
  padding: 0;
  z-index: 1;
  transition: color 0.15s, background 0.15s;
}
.gs-clear:hover {
  color: #1f2125;
  background: #f2f3f4;
}
.gs-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ecedef;
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15, 17, 21, 0.16), 0 2px 6px rgba(15, 17, 21, 0.05);
  padding: 6px;
  z-index: 1400;
  max-height: 460px;
  overflow: auto;
}
.gs-group {
  padding: 4px 0;
}
.gs-group + .gs-group {
  border-top: 1px solid #f2f3f4;
  margin-top: 2px;
  padding-top: 6px;
}
.gs-group-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 10px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gs-group-label .count {
  color: #c8cacc;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.gs-item:hover, .gs-item.focused {
  background: #f5f6f7;
}
.gs-item.focused {
  background: #ebf9f2;
}
.gs-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f2f3f4;
  color: #4a4c50;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
}
.gs-thumb img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}
.gs-thumb svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.8;
}
.gs-thumb.av {
  background: linear-gradient(135deg, #2eb273, #1a8a56);
  color: #fff;
}
.gs-thumb.doc {
  background: #e8eaf6;
  color: #3949ab;
}
.gs-thumb.act {
  background: #fff3cc;
  color: #8a6d00;
}
.gs-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gs-title {
  font-size: 12.5px;
  color: #1f2125;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-meta {
  font-size: 11px;
  color: #8e8e93;
}
.gs-trail {
  font-size: 10.5px;
  color: #8e8e93;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f5f6f7;
  flex-shrink: 0;
  white-space: nowrap;
}
.gs-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 4px;
  border-top: 1px solid #f2f3f4;
  margin-top: 4px;
  font-size: 10.5px;
  color: #8e8e93;
}
.gs-foot .gs-kbd {
  background: #f5f6f7;
}
.gs-foot .right {
  margin-left: auto;
  color: #2eb273;
  font-weight: 600;
  cursor: pointer;
}
/* ─── Language switch ─── */
.language-selector-wrapper {
  flex-shrink: 0;
  position: relative;
}
.hdr-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: #4a4c50;
  transition: background 0.15s, color 0.15s;
}
.hdr-lang-btn:hover {
  background: #f2f3f4;
  color: #1f2125;
}
.hdr-lang-btn.language-fallback-active {
  border-color: #f0c36d;
}
.hdr-lang-btn .lang-text {
  font-size: 13px;
  font-weight: 500;
}
.hdr-lang-btn svg {
  stroke-width: 1.5;
}
.language-chip-loading {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f5f6f7;
  font-size: 12.5px;
  color: #9ea0a3;
}
/* ─── Notification wrapper — strips MUI defaults to match .icon-btn ─── */
.notif-wrap .MuiButtonBase-root.MuiIconButton-root {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #4a4c50;
  padding: 0;
}
.notif-wrap .MuiButtonBase-root.MuiIconButton-root:hover {
  background: #f2f3f4;
  color: #1f2125;
}
.notif-wrap .MuiButtonBase-root.MuiIconButton-root svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.7;
}
.notif-wrap .MuiBadge-badge {
  min-width: 14px;
  height: 14px;
  font-size: 9px;
  padding: 0 3px;
  line-height: 14px;
}
/* ─── Vertical divider ─── */
.v-divider {
  width: 1px;
  height: 22px;
  background: #ecedef;
  flex-shrink: 0;
}
/* ─── User button ─── */
.hdr-user-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hdr-user-btn:hover {
  background: #f2f3f4;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2eb273 0%, #1a8a56 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  line-height: 1;
}
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #1f2125;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.user-role {
  font-size: 11px;
  color: #9ea0a3;
}
/* ─── App Switcher Popover ─── */
.as-pop {
  width: 560px;
  border-radius: 14px !important;
  border: 1px solid #ecedef !important;
  box-shadow: 0 20px 48px -12px rgba(15, 17, 21, 0.22), 0 4px 12px rgba(15, 17, 21, 0.06) !important;
  overflow: hidden;
}
.as-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #f2f3f4;
}
.as-search-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #ecedef;
  background: #fafbfb;
  height: 32px;
  padding: 0 12px 0 32px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  color: #1f2125;
  outline: none;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239EA0A3' stroke-width='2' stroke-linecap='round'><circle cx='6.5' cy='6.5' r='4.5'/><line x1='10' y1='10' x2='13' y2='13'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.as-search-input:focus {
  border-color: #2eb273;
  background-color: #fff;
}
.as-search-input::placeholder {
  color: #9ea0a3;
}
.as-pin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #8e8e93;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fafbfb;
  border: 1px solid #ecedef;
  white-space: nowrap;
  flex-shrink: 0;
}
.as-body {
  padding: 8px 8px 4px;
  max-height: 480px;
  overflow-y: auto;
}
.as-section {
  padding: 6px 6px 0;
}
.as-section + .as-section {
  margin-top: 4px;
}
.as-section-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.as-section-label .badge {
  background: #f2f3f4;
  color: #8e8e93;
  font-weight: 600;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.as-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.as-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 10px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.as-tile:hover {
  background: #f8f9fa;
}
.as-tile:hover .pin {
  opacity: 1;
}
.as-tile.active {
  background: #ebf9f2;
  border-color: #c8ebd8;
}
.as-tile.pinned .pin {
  opacity: 1;
  color: #2eb273;
}
.as-tile-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tile-bg, #f2f3f4);
  color: var(--tile-fg, #4a4c50);
  display: grid;
  place-items: center;
}
.as-tile-icon img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}
.as-tile-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.as-tile-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2125;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.as-tile-meta {
  font-size: 10.5px;
  color: #8e8e93;
  line-height: 1.3;
}
.new-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #2eb273;
  padding: 2px 5px;
  border-radius: 5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1;
}
.pin {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #c8cacc;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.pin:hover {
  color: #2eb273;
}
.pin svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.pin .pin-star {
  width: 14px;
  height: 14px;
}
.as-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #f2f3f4;
  background: #fafbfb;
  font-size: 11.5px;
  color: #8e8e93;
}
.as-foot .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.as-foot a {
  color: #2eb273;
  font-weight: 600;
  cursor: pointer;
}
.as-foot a:hover {
  text-decoration: underline;
}
/* ─── Profile dropdown ─── */
.main-profile-menu .user-data-wrap {
  font-size: 0.875rem;
  line-height: 1.225rem;
  gap: 0.5rem;
}
.main-profile-menu .user-assigned {
  font-size: 0.75rem;
  line-height: 1.05rem;
}
.menu-item-color {
  color: #c64d4d;
}
.menu-item-color:hover {
  background-color: #fedfdf;
}
.avatar-class {
  color: #2EB273;
  background-color: #B6E9D6;
}
.size15 .MuiTypography-root {
  font-size: 15px;
}
.popup-change-pass {
  padding: 20px 30px;
  min-width: 500px;
}
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 6px;
  color: #4A4C50;
  cursor: pointer;
  flex-shrink: 0;
}
.back-btn:hover {
  background: #F3F4F6;
}.quickApprovalModal--ModalContentContainer {
  padding: 1.5rem !important;
}
.quickApprovalModal--Title {
  background-color: #fbfbfb;
  border-bottom: 1px solid #eeeff1;
}
.quickApprovalModal--UserListingContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.quickApprovalModal--UserContent {
  display: flex;
  gap: 0.5rem;
}
.quickApprovalModal--DialogActions {
  background-color: #eeeff1;
  border-top: 1px solid #d3d3d4;
}
.quickApprovalModal--DialogActions--Cancel {
  background-color: #fff !important;
  color: #292d32;
}
.quickApprovalModal--DisplayNameChip {
  padding: 0.25rem !important;
}
.quickApprovalModal--DisplayNameChip .MuiChip-label {
  height: 16px;
  width: 100%;
}.react-kanban-board {
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 140%;
  letter-spacing: -0.0175rem;
}
.react-kanban-board .react-kanban-column-adder-button {
  border-radius: 0.75rem;
  background-color: #eeeff1;
  width: 17rem;
  height: 3rem;
  padding: 0.75rem;
  content: "test";
}
.react-kanban-board .react-kanban-column {
  background-color: #fcf8f8;
  border-radius: 0.75rem;
  border: 0.063rem solid #faf0f0;
  position: relative;
  padding-bottom: 2.5rem;
}
.react-kanban-board .react-kanban-column:nth-child(1) {
  background-color: #fcf8f8;
}
.react-kanban-board .react-kanban-column:nth-child(2) {
  background-color: #fdf7f9;
}
.react-kanban-board .react-kanban-column:nth-child(3) {
  background-color: #f7fcfd;
}
.react-kanban-board .react-kanban-column .react-kanban-column-header, .react-kanban-board .react-kanban-column .react-kanban-card__title {
  font-weight: 500;
}
.react-kanban-board .react-kanban-column .react-kanban-card {
  border-radius: 0.5rem;
  border: 0.031rem solid #f3f2f2;
  background-color: #ffffff;
  box-shadow: 0rem 0.063rem 0.313rem 0rem rgba(100, 100, 100, 0.05);
  padding: 0.75rem 1rem 1rem 1rem;
  height: 8.0625rem;
}
.react-kanban-board .react-kanban-column .react-kanban-card-adder-button {
  position: absolute;
  bottom: 0;
  width: 90%;
  background-color: transparent;
  border: none;
  font-weight: 200;
}
.react-kanban-board .react-kanban-column .react-kanban-card-adder-form {
  position: absolute;
  bottom: 0rem;
}
.react-kanban-board .react-kanban-column .react-kanban-card-adder-form + div:last-child {
  margin-bottom: 4.375rem;
}
.react-kanban-board .react-kanban-column form {
  display: block !important;
  text-align: center;
}
.column-header {
  margin-bottom: 1.25rem;
}
.column-header .kanban-column {
  display: flex;
  align-items: baseline;
}
.column-header .kanban-column .kanban-column-title {
  overflow: hidden;
  color: #883c3c;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
  cursor: pointer;
}
.column-header .kanban-column .count-length-text {
  color: #d5adad;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: -0.015rem;
  margin-left: 0.5rem;
}
.column-header .kanban-column .more-menu-btn {
  margin-left: auto;
  line-height: 140%;
}
.column-header .kanban-column .create-status-box {
  display: flex;
  width: 12.5rem;
  padding: 0.75rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem;
  background: #f5f6f5;
  margin: 0.313rem;
  cursor: pointer;
  flex-wrap: wrap;
}
.column-header .kanban-column .create-status-box span {
  font-size: 1.5rem;
  display: inline-block;
}
.column-header .kanban-column .create-status-box .add-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.313rem;
}
.column-header .kanban-column .create-status-box .add-btns button {
  background-color: #eee;
  border: none;
  padding: 0.313rem;
  width: 45%;
  margin-top: 0.313rem;
  border-radius: 0.188rem;
}
.column-header .kanban-column .create-status-box input {
  width: 100%;
  font-size: 0.813rem;
  border: 0.063rem solid #ccc;
  border-radius: 0.3rem;
  min-height: 1.813rem;
  padding: 0.313rem;
}
.card-board-wrap .react-kanban-board .react-kanban-column .react-kanban-card-adder-button {
  width: 1.875rem;
}
.card-board-wrap .react-kanban-board .react-kanban-column-adder-button {
  justify-content: space-between !important;
}
.create-status-box {
  display: flex;
  width: 17rem;
  padding: 0.75rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem;
  background: #f5f6f5;
  margin: 0.313rem;
  cursor: pointer;
  flex-wrap: wrap;
}
.create-status-box span {
  font-size: 1.5rem;
  display: inline-block;
}
.create-status-box .add-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 0.313rem;
}
.create-status-box .add-btns button {
  background-color: #eee;
  border: none;
  padding: 0.313rem;
  width: 45%;
  margin-top: 0.313rem;
  border-radius: 0.188rem;
}
.create-status-box input {
  width: 100%;
  font-size: 0.813rem;
  border: 0.063rem solid #ccc;
  border-radius: 0.3rem;
  min-height: 1.813rem;
  padding: 0.313rem;
}
button.react-kanban-card-adder-button::after {
  content: "New";
  color: #656669;
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.018rem;
  margin-left: 0.375rem;
  position: relative;
  top: -0.188rem;
}
@media screen and (max-width: 450px) {
  .react-kanban-board {
    overflow: scroll;
  }
}.calculationSummary--SummaryContainer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.calculationSummary--SummaryItem {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}.calendar-wrapper {
  background-color: #fff;
  padding: "1.25rem";
}
.calendar-wrapper .fc {
  font-family: Inter;
  font-style: normal;
  line-height: 140%;
}
.calendar-wrapper .fc .fc-header-toolbar .fc-toolbar-title {
  font-size: 0.875rem;
  font-weight: 500;
  /* 1.225rem */
  letter-spacing: -0.0175rem;
}
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group {
  display: flex;
}
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button,
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button:active {
  background-color: transparent;
  color: #656669;
  border: none;
  box-shadow: none;
  outline: none;
}
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button.fc-prev-button,
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button:active.fc-prev-button {
  order: 1;
}
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button.fc-today-button,
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button:active.fc-today-button {
  order: 2;
}
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button.fc-next-button,
.calendar-wrapper .fc .fc-header-toolbar .fc-button-group button:active.fc-next-button {
  order: 3;
}
.calendar-wrapper .fc .fc-daygrid-day {
  font-size: 0.75rem;
  font-weight: 400;
  /* 1.05rem */
  letter-spacing: -0.015rem;
  background-color: #fff;
  border: 1px solid #eeeff1;
}
.calendar-wrapper .fc .fc-daygrid-day .fc-daygrid-day-number {
  margin: 0.325rem;
  color: #656669;
}
.calendar-wrapper .fc .fc-daygrid-day.fc-day-today {
  background-color: transparent;
}
.calendar-wrapper .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: #ffffff;
  background-color: #289b64;
  width: 20px;
  display: flex;
  height: 20px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.calendar-wrapper .fc .fc-daygrid-day-events {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.calendar-wrapper .fc .fc-day-other {
  background-color: #fbfbfb;
}
.calendar-wrapper .fc .fc-col-header-cell-cushion {
  font-weight: 300;
  font-size: 0.75rem;
}
@media screen and (max-width: 450px) {
  .calendar-wrapper {
    overflow: scroll;
  }
}.card-wrapper {
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #eeeff1;
  box-shadow: 0px 0px 2px 0px #e0e0e0, 0px 1px 4px -2px rgba(24, 39, 75, 0.02), 0px 4px 4px -2px rgba(24, 39, 75, 0.06);
}.contactModal--Divider {
  border-color: #eeeff1;
}
.contactModal--Title {
  border-bottom: 1px solid #d3d3d4;
}
.contactModal--SectionTitle {
  padding-left: 1.5rem;
}
.contactModal--ActionContainer {
  justify-content: space-between;
  padding: 0.5rem 1.5rem !important;
  background-color: #eeeff1;
}
.contactModal--ActionContainer--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}
.contactModal--ActionContainer--FlexEnd {
  justify-content: flex-end !important;
}.addressModal--Divider {
  border-color: #eeeff1;
}
.addressModal--Title {
  border-bottom: 1px solid #d3d3d4;
}
.addressModal--SectionTitle {
  padding-left: 1.5rem;
}
.addressModal--LanguageSwitch {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  background-color: #eeeff1;
  border-bottom: 1px solid #d3d3d4;
}
.addressModal--ActionContainer {
  justify-content: space-between;
  padding: 0.5rem 1.5rem !important;
  background-color: #eeeff1;
}
.addressModal--ActionContainer--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}
.addressModal--ActionContainer--FlexEnd {
  justify-content: flex-end !important;
}.SnackBar {
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  width: 420px;
  cursor: pointer;
}

.notistack-Snackbar:has(.SnackBar) {
  transition: transform 0.3s ease-in-out;
}
.notistack-Snackbar:has(.SnackBar):hover {
  transform: scale(1.05) !important;
}.dashboard-card-icon {
  border-radius: 50%;
  border: 1px solid;
  width: 30px;
  height: 30px;
  border-color: #f5f6f5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.card-class {
  width: 100%;
}.react-datepicker__header {
  border-bottom: none;
  background-color: #fff;
  padding: 0;
  /* No need to convert as it's already in pixels */
}

.react-datepicker {
  box-shadow: 0px 0.5rem 2rem 0px rgba(0, 0, 0, 0.08), 0px 0.125rem 1rem 0px rgba(0, 0, 0, 0.04);
  /* Converted from pixels to rem */
  border: none;
}

.react-datepicker__today-button {
  padding: 0;
  /* No need to convert */
  border-top: 0.0625rem solid #eeeff1;
  /* Converted from pixels to rem */
  font-weight: normal;
}

.react-datepicker__day-name {
  color: #7b7c7f;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #4AC08C;
  color: #fff;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range),
.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range) {
  background-color: #B6E9D6;
  color: #232529;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  background-color: #B6E9D6;
}

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #2EB273;
}

.calender-container {
  position: relative;
}

.select-year {
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 0.625rem;
  /* Converted from pixels to rem */
}

.react-datepicker__close-icon {
  right: 1.25rem;
  /* Converted from pixels to rem */
}

.react-datepicker__close-icon::after {
  color: #7b7c7f !important;
  background-color: unset;
  font-size: 1.25rem !important;
  /* Converted from pixels to rem */
}

.open-selected-calender {
  border-radius: 0.25rem;
  border: 0.0625rem solid #bdbebf;
  /* Converted from pixels to rem */
  width: 100%;
  height: 2.4rem;
  /* Converted from pixels to rem */
  color: #7b7c7f;
  font-weight: 400;
  font-size: 0.875rem;
  /* Converted from pixels to rem */
  padding: 0 0.625rem;
  /* Converted from pixels to rem */
  outline-offset: unset;
  outline: unset;
}

.icon-box {
  position: absolute;
  top: 1.4375rem;
  /* Converted from pixels to rem */
  transform: translateY(-50%);
  right: 0.625rem;
  /* Converted from pixels to rem */
  color: #7b7c7f;
}

.icon-box_rtl {
  position: absolute;
  top: 1.4375rem;
  /* Converted from pixels to rem */
  transform: translateY(-50%);
  left: 0.625rem;
  /* Converted from pixels to rem */
  color: #7b7c7f;
}

.btn-transparent {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: inherit;
}

.date-picker-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0.9375rem 0;
  /* Converted from pixels to rem */
}

.date-picker-container .MuiSvgIcon-root {
  color: #a7a8a9;
}

.month-view {
  margin: 0 0.3125rem 0.25rem 0.3125rem;
  /* Converted from pixels to rem */
}

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

.select-year {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0.625rem;
  /* Converted from pixels to rem */
  margin: 0 0 0.0625rem 0;
  font-size: inherit;
  color: black;
}

.react-datepicker {
  border-radius: 0.5rem;
}

.DateRangePicker .react-datepicker-wrapper {
  width: 100%;
  min-width: 250px;
}

@media print {
	body {
		margin: 0 !important;
	}
}

.main-container {
	font-family: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif';
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.custom-editor-container {
	width: 100% !important;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

/* ─── Toolbar ─── */

.tiptap-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	background: #f8f9fa;
	border-bottom: 1px solid #dee2e6;
}

.tiptap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: #495057;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	font-family: inherit;
	line-height: 1;
}

.tiptap-btn:hover {
	background: #e9ecef;
	color: #212529;
}

.tiptap-btn.is-active {
	background: #dee2e6;
	color: #0d6efd;
}

.tiptap-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.tiptap-select {
	height: 28px;
	padding: 0 8px;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	background: #fff;
	color: #495057;
	font-size: 12px;
	cursor: pointer;
	outline: none;
}

.tiptap-select:focus {
	border-color: #0d6efd;
}

.tiptap-divider {
	display: inline-block;
	width: 1px;
	height: 20px;
	margin: 0 4px;
	background: #dee2e6;
}

/* Color picker labels */

.tiptap-color-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	position: relative;
	color: #333;
}

.tiptap-color-label:hover {
	background: #e9ecef;
}

.tiptap-bg-color {
	background: #fffde7;
	border: 1px solid #e0e0e0;
}

.tiptap-color-input {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.tiptap-color-label:active .tiptap-color-input,
.tiptap-color-label:focus-within .tiptap-color-input {
	position: absolute;
	top: 100%;
	left: 0;
	width: 32px;
	height: 32px;
	opacity: 1;
	pointer-events: auto;
	z-index: 10;
}

/* ─── Editor content area ─── */

.tiptap-editor-wrapper {
	min-height: 300px;
}

.tiptap-editor-wrapper .tiptap {
	min-height: 300px;
	padding: 16px;
	outline: none;
	font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #212529;
}

.tiptap-editor-wrapper .tiptap:focus {
	outline: none;
}

/* Typography within editor */

.tiptap-editor-wrapper .tiptap p {
	margin: 0 0 0.5em 0;
}

.tiptap-editor-wrapper .tiptap h1,
.tiptap-editor-wrapper .tiptap h2,
.tiptap-editor-wrapper .tiptap h3,
.tiptap-editor-wrapper .tiptap h4 {
	margin: 0.5em 0 0.3em 0;
	line-height: 1.3;
}

.tiptap-editor-wrapper .tiptap blockquote {
	border-left: 3px solid #dee2e6;
	margin: 0.5em 0;
	padding-left: 1em;
	color: #6c757d;
}

.tiptap-editor-wrapper .tiptap code {
	background: #f1f3f5;
	padding: 2px 4px;
	border-radius: 3px;
	font-size: 0.9em;
}

.tiptap-editor-wrapper .tiptap pre {
	background: #1e1e1e;
	color: #d4d4d4;
	border-radius: 6px;
	padding: 12px 16px;
	overflow-x: auto;
	font-size: 13px;
}

.tiptap-editor-wrapper .tiptap pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	color: inherit;
}

.tiptap-editor-wrapper .tiptap hr {
	border: none;
	border-top: 2px solid #dee2e6;
	margin: 1em 0;
}

.tiptap-editor-wrapper .tiptap img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Table styles */

.tiptap-editor-wrapper .tiptap table {
	border-collapse: collapse;
	width: 100%;
	margin: 0.5em 0;
}

.tiptap-editor-wrapper .tiptap td,
.tiptap-editor-wrapper .tiptap th {
	border: 1px solid #dee2e6;
	padding: 8px 12px;
	min-width: 80px;
	vertical-align: top;
}

.tiptap-editor-wrapper .tiptap th {
	background: #f8f9fa;
	font-weight: 600;
}

/* Selected cell */

.tiptap-editor-wrapper .tiptap .selectedCell {
	background: #e7f1ff;
}

/* Link styles */

.tiptap-editor-wrapper .tiptap a {
	color: #0d6efd;
	text-decoration: underline;
}

/* Placeholder */

.tiptap-editor-wrapper .tiptap p.is-editor-empty:first-child::before {
	color: #adb5bd;
	content: attr(data-placeholder);
	float: left;
	height: 0;
	pointer-events: none;
}

/* ─── Source code editor ─── */

.custom-editor-source {
	width: 100%;
	min-height: 400px;
	padding: 16px;
	border: none;
	outline: none;
	resize: vertical;
	font-family: 'Courier New', Courier, monospace;
	font-size: 13px;
	line-height: 1.5;
	color: #212529;
	background: #fafafa;
	box-sizing: border-box;
}

.custom-editor-source:focus {
	outline: none;
	background: #fff;
}

/* Selection handles */

.custom-editor-resize-handle {
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: #1976d2;
	border: 1px solid white;
	pointer-events: auto;
	z-index: 1001;
}

.custom-editor-selection-box {
	position: absolute;
	border: 2px solid #1976d2;
	pointer-events: none;
	z-index: 1000;
}

/* ─── Table Editing Styles ─── */

/* Selected table cell */

.table-cell-selected {
	background-color: #e3f2fd !important;
	outline: 2px solid #1976d2;
	outline-offset: -2px;
}

/* Cell highlight overlay */

.table-cell-highlight {
	position: absolute;
	border: 2px solid #1976d2;
	pointer-events: none;
	z-index: 100;
	background-color: rgba(25, 118, 210, 0.1);
}

/* Row hover highlight */

.table-row-hover {
	background-color: rgba(25, 118, 210, 0.08) !important;
}

.table-row-hover td,
.table-row-hover th {
	background-color: rgba(25, 118, 210, 0.08) !important;
}

/* Column hover highlight */

.table-col-hover {
	background-color: rgba(25, 118, 210, 0.08) !important;
}

/* Table toolbar */

.table-toolbar {
	position: absolute;
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 1001;
	display: flex;
	gap: 4px;
	align-items: center;
}

.table-toolbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: #495057;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.table-toolbar-button:hover {
	background: #e9ecef;
	color: #212529;
}

.table-toolbar-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.table-toolbar-button.active {
	background: #dee2e6;
	color: #0d6efd;
}

/* ─── Handlebars Template Syntax Protection ─── */

/* Handlebars placeholder styling */

/* .hbs-placeholder {
	display: inline-block;
	color: #d97706 !important;
	background: #fef3c7 !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	font-family: 'Courier New', Courier, monospace !important;
	font-size: 11px !important;
	border: 1px solid #fbbf24 !important;
	cursor: default !important;
	user-select: none !important;
	white-space: nowrap !important;
	vertical-align: baseline !important;
} */

.hbs-placeholder:hover {
	background: #fde68a !important;
	border-color: #f59e0b !important;
}

/* Prevent editing of Handlebars placeholders */

.hbs-placeholder[contenteditable="false"] {
	-webkit-user-modify: read-only;
	-moz-user-modify: read-only;
}

/* Make placeholders stand out in tables */

table .hbs-placeholder {
	margin: 0 2px;
}

/* Ensure placeholders don't break table layout */

td .hbs-placeholder,
th .hbs-placeholder {
	display: inline;
}
.fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: fixed;
  bottom: 50%;
  width: -webkit-fill-available;
  transform: translateY(50%);
}
.fallback--Text {
  width: 25%;
  text-align: center;
}.pagination {
  display: flex;
  align-items: center;
}

.page-size-select {
  width: auto;
  margin: 0rem 0.5rem;
}

.page-size-select .MuiSelect-select {
  font-size: 0.75rem;
  color: #656669;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem !important;
}

.page-size-select .MuiSvgIcon-root {
  right: 2px;
  font-size: 1.2rem;
}

.page-size-select-pagination .MuiSelect-select {
  margin-right: 16px;
}

.page-input {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  width: fit-content;
  max-width: 2rem;
  border: 1px solid #d3d3d4 !important;
  font-size: 0.75rem;
}

.goto-box {
  margin: 0 8px;
}

.goto-box .MuiInputBase-root .MuiInputBase-input {
  padding: 0.25rem 0.5rem 0.25rem 0.5rem !important;
  max-width: 26px;
  font-size: 12px;
}.shared-pages-modal .tab-title-wrap {
  border-right: 0.0625rem solid #f5f6f5;
}
.shared-pages-modal .tab-title-wrap .MuiTabs-indicator {
  background-color: #bdbebf;
}
.shared-pages-modal .tab-title-wrap .tab-search-wrap {
  padding: 0.5rem 0.75rem;
  border-bottom: 0.0625rem solid #f5f6f5;
}
.shared-pages-modal .tab-title-wrap .MuiTabs-flexContainer {
  padding: 0.5rem;
}
.shared-pages-modal .tab-title-wrap .MuiTabs-flexContainer .MuiButtonBase-root {
  margin-bottom: 0.5rem;
  color: #1f2125;
  padding: 0.375rem 0.75rem;
  min-height: auto;
  text-transform: capitalize;
  line-height: 1.25rem;
  border-radius: 0.25rem;
  align-items: flex-start;
}
.shared-pages-modal .tab-title-wrap .MuiTabs-flexContainer .MuiButtonBase-root.Mui-selected, .shared-pages-modal .tab-title-wrap .MuiTabs-flexContainer .MuiButtonBase-root:hover {
  background-color: #f5f6f5;
}
.shared-pages-modal .MuiDialogContent-root {
  padding: 0;
}
.shared-pages-modal .MuiPaper-root {
  max-width: 44.0625rem;
  height: 30.375rem;
}
.shared-pages-modal .shared-grid-wrap {
  padding: 1rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .MuiBox-root {
  padding: 0;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main {
  background-color: #fbfbfb;
  padding: 0.625rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap {
  position: relative;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img {
  height: 13.4375rem;
  max-width: 100%;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img-tab {
  position: absolute;
  bottom: 0.5rem;
  right: 0.375rem;
  left: auto;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img-tab .MuiTabs-scroller {
  height: auto;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img-tab .MuiTabs-scroller .MuiTabs-flexContainer {
  gap: 0.375rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img-tab .MuiTabs-scroller .MuiTabs-flexContainer .MuiButtonBase-root.MuiTab-root {
  padding: 0;
  border: 0.0625rem solid #f3f2f2;
  border-radius: 50%;
  height: 1.5rem;
  width: 1.5rem;
  font-size: 0.75rem;
  max-width: 100%;
  min-width: auto;
  min-height: 1.5rem;
  color: #656669;
  background-color: #f5f6f5;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img-tab .MuiTabs-scroller .MuiTabs-flexContainer .MuiButtonBase-root.MuiTab-root.Mui-selected {
  background-color: #32c27d;
  color: #fff;
  border-radius: 3.75rem;
  width: auto;
  padding: 0.25rem 0.5rem;
  text-transform: capitalize;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .shared-pages-main .shared-img-wrap .shared-img-tab .MuiTabs-indicator {
  display: none;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap {
  padding: 1.5rem 0 0.5rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info h1 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #1f2125;
  margin: 0;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info .tab-toggle {
  color: #232529;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info .tab-toggle .MuiFormControlLabel-root .switch {
  margin-left: 0.75rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info .tab-toggle .MuiFormControlLabel-root .MuiTypography-root {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.0625rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info .tab-toggle .owner-name-wrap p {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.0625rem;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-inner-info .tab-toggle .owner-name-wrap p span {
  color: #656669;
}
.shared-pages-modal .shared-grid-wrap .shared-tab .tab-info-wrap .tab-content p {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.0625rem;
  margin: 0;
  color: #656669;
}.share .MuiDialog-paper {
  min-width: 42.375rem;
  border-radius: 1rem;
}
.share--head {
  display: flex;
  padding: 0.5rem 1rem;
  justify-content: space-between;
  align-items: center;
}
.share--title {
  display: flex;
  align-items: center;
}
.share--content {
  padding: 1rem 1.375rem 1.5rem 1.375rem;
}
.share--blurClass .MuiAccordionSummary-root {
  opacity: 0.3;
}
.share--blurClass .accordion-list {
  opacity: 0.3;
}
.share--actions {
  padding: 0.5rem 1rem;
}
.share .share--head .share--title .dialog-box-title {
  color: #000;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
}
.share .share--head button svg {
  width: 1.25rem;
}
.share .share--head button svg path {
  fill: #292d32;
}
.share .share--content .input-label {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.015rem;
  margin-bottom: 0.5rem;
}
.share .autocomplete-input-share {
  margin-left: 0rem;
  margin-right: 0.313rem;
  width: 100%;
}
.share .autocomplete-input-share .MuiFormControl-root .MuiOutlinedInput-root {
  padding: 0rem 0.5rem;
}
.share .autocomplete-input-share .MuiFormControl-root .MuiOutlinedInput-root .MuiAutocomplete-clearIndicator {
  display: none;
  visibility: hidden;
}
.share .autocomplete-input-share .MuiOutlinedInput-notchedOutline {
  border-color: #ddd;
  border-width: 0.063rem;
}
.share .chip-selected-role .MuiChip-filled {
  border-radius: 0.25rem;
  background-color: rgb(245, 246, 245);
}
.share .clear-role-icon {
  padding: 0rem;
}
.share .share-btn {
  min-width: 6.25rem;
  color: #fff;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
}
.share .public-check-label {
  margin-left: 0;
}
.share .public-check-label .MuiFormControlLabel-label {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.018rem;
}
.share .people-access-accordion {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
}
.share .people-access-accordion::before {
  background-color: unset;
}
.share .people-access-accordion .MuiAccordionSummary-root {
  padding: 0;
  margin: 0;
  min-height: 4rem;
}
.share .people-access-accordion .MuiAccordionSummary-root .MuiAccordionSummary-content .MuiTypography-root {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.24px;
}
.share .people-access-accordion .user-accordion-details {
  padding: 0;
}
.share .people-access-accordion .user-accordion-details .accordion-list {
  padding: 0;
  width: 100%;
  background-color: #fff;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root {
  padding: 0;
  margin-bottom: 0.938rem;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .primary-user-name {
  color: #1f2125;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.018rem;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .primary-user-name .secondary-email-text {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.24px;
  display: inline;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .owner-role-badge {
  display: flex;
  padding: 0.25rem 0.375rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  background: #f5f6f5;
  overflow: hidden;
  color: #656669;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.24px;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box .MuiSelect-select {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.24px;
  color: #232529;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box .MuiOutlinedInput-notchedOutline {
  border: 0;
}
.share .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box svg path {
  fill: #919294;
}
.share .share--actions {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  background-color: #eeeff1;
}
.share .share--actions .cancel-btn {
  display: flex;
  padding: 0.375rem 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  color: #1f2125;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.625rem -0.125rem rgba(20, 78, 50, 0.05), 0 0.125rem 0.125rem -0.0625rem rgba(20, 78, 50, 0.1), 0 -0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.05);
}
.share .share--actions .success-btn {
  display: flex;
  padding: 0.375rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
  border-radius: 0.25rem;
  color: #fff;
  background: #4AC08C;
  box-shadow: 0 0.25rem 0.625rem -0.125rem rgba(20, 78, 50, 0.05), 0 0.125rem 0.125rem -0.0625rem rgba(20, 78, 50, 0.1), 0 -0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.05);
}
.select-menu-items {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.24px;
  color: #232529;
}
.user-select-chips {
  border-radius: 0.25rem;
}.page-navigator {
  width: 100%; /* Default for mobile */
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .page-navigator {
    width: 80%;
  }
}
@media (min-width: 1440px) {
  .page-navigator {
    width: 100%;
  }
}

@media (max-width: 1366px) {
  .page-navigator-container {
    width: 50%;
  }
}
@media (max-width: 1199px) {
  .footer--Container {
    flex-direction: column;
  }
  .page-navigator-container {
    width: 100%;
  }
  .footer--Container .pagination {
    justify-content: flex-end;
  }
}
.footer--Container {
  width: calc(100% - 350px) !important;
}.sheet-select {
  margin: 0rem 0.5rem;
}
.sheet-select .MuiOutlinedInput-notchedOutline {
  border: 0;
}
.sheet-select .MuiSelect-select {
  font-size: 0.75rem;
  color: #656669;
  padding: 0rem 0.25rem !important;
}
.footer--Container {
  display: flex;
  position: fixed;
  bottom: 0;
  transition: all 0.4s ease-in-out;
  background-color: white;
  z-index: 1201;
  width: calc(100% - 365px);
}
.footer--drawerContainer {
  display: flex;
  position: fixed;
  transition: all 0.4s ease-in-out;
  bottom: 0;
  background-color: white;
  z-index: 1201;
  width: calc(100% - 130px);
}.formHeader--Header {
  padding: 0.75rem 2rem 0.75rem 2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #f5f6f5;
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fff;
}._3zRJQ {
  fill: #232529;
  font-weight: 500;
}

._3rUKi,
._RuwuK {
  stroke: none;
}.fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: fixed;
  bottom: 50%;
  width: -webkit-fill-available;
  transform: translateY(50%);
}
.fallback--Text {
  width: 25%;
  text-align: center;
}.HrLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  margin: 0.9375rem 0;
  opacity: 0.6;
  font-size: 0.75rem;
  font-weight: 500;
}
.HrLine--Length {
  width: 40%;
}
@media screen and (max-width: 1600px) {
  .HrLine {
    font-size: 0.6875rem;
  }
}
@media screen and (max-width: 1440px) {
  .HrLine {
    font-size: 0.625rem;
  }
}
@media screen and (max-width: 1112px) {
  .HrLine {
    font-size: 0.5625rem;
  }
}
@media screen and (max-width: 450px) {
  .HrLine {
    font-size: 0.9375rem;
  }
  .HrLine--Length {
    width: 43%;
  }
}.infoCard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}.afterBorder {
  position: relative;
  margin-bottom: 15px;
}

.afterBorder::after {
  height: 1px;
  display: block;
  width: 100%;
  background: #eeeff1;
  border-right: 1px white;
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.inventoryReportsTitleBar {
  display: flex;
  padding: 0.75rem 0rem;
  justify-content: space-between;
  align-items: center;
  margin: 0 8px;
}

.inventoryReportsTitleBar--RightContent {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
}

.inventoryReportsTitleBar--RightContent--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125 !important;
}

.inventoryReportsTitleBar--LeftContent {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.inventoryReportsTitleBar--HeaderCard {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.inventoryReportsTitleBar--FilterAction {
  display: flex;
  font-size: 12px;
  align-items: center;
  text-wrap: nowrap;
  gap: 8px;
}

.inventoryReportsTitleBar--FilterAction .search-wrapper img {
  top: 0.6rem;
}

.inventoryReportsTitleBar--FilterAction--lvWrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventoryReportsTitleBar--FilterAction--Btn {
  border: 1px solid #f3f2f2;
  border-radius: 50px;
  color: #656669;
}

.inventoryReportsTitleBar--FilterWrapper {
  display: flex;
  font-size: 12px;
  align-items: center;
  gap: 12px;
  text-wrap: nowrap;
  flex-wrap: wrap;
}

.inventoryReportsTitleBar--FilterWrapper--Chip {
  display: flex;
  gap: 4px;
  border: 1px solid #ade7cb;
  border-radius: 50px;
  background-color: #ebf9f2;
  color: #289b64;
  padding: 2px 12px;
  align-items: center;
  cursor: pointer;
}

.inventoryReportsTitleBar--FilterWrapper--Chip--Text {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.inventoryReportsTitleBar--FilterWrapper--Chip--Text--Value {
  max-width: 88px;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.inventoryReportsTitleBar--ExtraButtonUi {
  margin-left: auto;
  margin-right: 30px;
}

.filter-bar {
  display: flex;
  padding: 0.75rem 0rem;
  align-items: center;
  justify-content: space-between;
}

.filter-bar .filter-bar--LeftContent {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.filter-bar .filter-bar--LeftContent h6 {
  color: #7b7c7f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.225rem;
}

.filter-bar .filter-bar--LeftContent .hide-btn {
  color: #7b7c7f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.018rem;
  background-color: #fff;
  box-shadow: unset;
  padding: 0rem 0.5rem;
}

.filter-bar .filter-bar--LeftContent .hide-btn:hover {
  box-shadow: unset;
}

.filter-bar .filter-bar--LeftContent .filter-chip {
  border: 0.063rem solid #f3f2f2;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
}

.filter-bar .filter-bar--LeftContent .subtask-switch {
  display: flex;
  align-items: center;
  gap: 0.313rem;
}

.filter-bar .filter-bar--LeftContent .subtask-switch .switch {
  width: 1.75rem;
  height: 1.063rem;
  margin-top: 0.375rem;
}

.filter-bar .filter-bar--LeftContent .subtask-switch .switch .slider:before {
  width: 0.875rem;
  height: 0.813rem;
}

.filter-bar .filter-bar--RightContent .enable-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #4AC08C;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.225rem;
  cursor: pointer;
}

.inventoryReportsTitleBar--RightContent ul {
  max-height: 400px;
  overflow-y: auto;
}

.inventoryReportsTitleBar--report-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.search-filter {
  display: flex;
  gap: 4px;
  width: 220px;
  border: 1px solid #ade7cb;
  border-radius: 50px;
  background-color: #ebf9f2;
  color: #289b64;
  padding: 4px 12px;
  align-items: center;
  cursor: pointer;
}

.search-filter .css-1age63q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.search-filter .css-1age63q p {
  font-size: 14px;
}

.search-filter .css-16hz2ux {
  height: 100%;
}

.search-filter .filter-select .MuiSelect-select {
  padding: 0px;
}.wrapper--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125 !important;
}.account-payble-tabs-wrap {
  min-height: 2.25rem;
  border-bottom: 1px solid #F3F2F2;
}
.account-payble-tabs-wrap .account-payble-tab-items {
  color: #7b7c7f;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
  text-transform: capitalize;
  min-height: 2.25rem;
}
.account-payble-tabs-wrap .account-payble-tab-items.Mui-selected {
  color: #232529;
}
.account-payble-tabs-wrap .account-payble-tab-items:hover {
  background-color: #f5f6f5;
  color: #7b7c7f;
}
.account-payble-tabs-wrap .MuiTabs-scroller .MuiTabs-indicator {
  background-color: #4AC08C;
}
.Tabs--Title {
  display: flex;
  gap: 0.5rem;
}.carousel .control-arrow,.carousel.carousel-slider .control-arrow{-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;-ms-transition:all .25s ease-in;-o-transition:all .25s ease-in;transition:all .25s ease-in;opacity:.4;filter:alpha(opacity=40);position:absolute;z-index:2;top:20px;background:none;border:0;font-size:32px;cursor:pointer}.carousel .control-arrow:focus,.carousel .control-arrow:hover{opacity:1;filter:alpha(opacity=100)}.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{margin:0 5px;display:inline-block;border-top:8px solid transparent;border-bottom:8px solid transparent;content:''}.carousel .control-disabled.control-arrow{opacity:0;filter:alpha(opacity=0);cursor:inherit;display:none}.carousel .control-prev.control-arrow{left:0}.carousel .control-prev.control-arrow:before{border-right:8px solid #fff}.carousel .control-next.control-arrow{right:0}.carousel .control-next.control-arrow:before{border-left:8px solid #fff}.carousel-root{outline:none}.carousel{position:relative;width:100%}.carousel *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.carousel img{width:100%;display:inline-block;pointer-events:none}.carousel .carousel{position:relative}.carousel .control-arrow{outline:0;border:0;background:none;top:50%;margin-top:-13px;font-size:18px}.carousel .thumbs-wrapper{margin:20px;overflow:hidden}.carousel .thumbs{-webkit-transition:all .15s ease-in;-moz-transition:all .15s ease-in;-ms-transition:all .15s ease-in;-o-transition:all .15s ease-in;transition:all .15s ease-in;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);position:relative;list-style:none;white-space:nowrap}.carousel .thumb{-webkit-transition:border .15s ease-in;-moz-transition:border .15s ease-in;-ms-transition:border .15s ease-in;-o-transition:border .15s ease-in;transition:border .15s ease-in;display:inline-block;margin-right:6px;white-space:nowrap;overflow:hidden;border:3px solid #fff;padding:2px}.carousel .thumb:focus{border:3px solid #ccc;outline:none}.carousel .thumb.selected,.carousel .thumb:hover{border:3px solid #333}.carousel .thumb img{vertical-align:top}.carousel.carousel-slider{position:relative;margin:0;overflow:hidden}.carousel.carousel-slider .control-arrow{top:0;color:#fff;font-size:26px;bottom:0;margin-top:0;padding:5px}.carousel.carousel-slider .control-arrow:hover{background:rgba(0,0,0,0.2)}.carousel .slider-wrapper{overflow:hidden;margin:auto;width:100%;-webkit-transition:height .15s ease-in;-moz-transition:height .15s ease-in;-ms-transition:height .15s ease-in;-o-transition:height .15s ease-in;transition:height .15s ease-in}.carousel .slider-wrapper.axis-horizontal .slider{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-horizontal .slider .slide{flex-direction:column;flex-flow:column}.carousel .slider-wrapper.axis-vertical{-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex}.carousel .slider-wrapper.axis-vertical .slider{-webkit-flex-direction:column;flex-direction:column}.carousel .slider{margin:0;padding:0;position:relative;list-style:none;width:100%}.carousel .slider.animated{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;transition:all .35s ease-in-out}.carousel .slide{min-width:100%;margin:0;position:relative;text-align:center}.carousel .slide img{width:100%;vertical-align:top;border:0}.carousel .slide iframe{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0}.carousel .slide .legend{-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;-webkit-transition:opacity .35s ease-in-out;-moz-transition:opacity .35s ease-in-out;-ms-transition:opacity .35s ease-in-out;-o-transition:opacity .35s ease-in-out;transition:opacity .35s ease-in-out}.carousel .control-dots{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1}@media (min-width: 960px){.carousel .control-dots{bottom:0}}.carousel .control-dots .dot{-webkit-transition:opacity .25s ease-in;-moz-transition:opacity .25s ease-in;-ms-transition:opacity .25s ease-in;-o-transition:opacity .25s ease-in;transition:opacity .25s ease-in;opacity:.3;filter:alpha(opacity=30);box-shadow:1px 1px 2px rgba(0,0,0,0.9);background:#fff;border-radius:50%;width:8px;height:8px;cursor:pointer;display:inline-block;margin:0 8px}.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{opacity:1;filter:alpha(opacity=100)}.carousel .carousel-status{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff}.carousel:hover .slide .legend{opacity:1}
.timePicker {
  border-radius: 0.25rem;
  width: 100%;
}
.timePicker input {
  padding: 0.5rem;
  font-size: 0.875rem;
}
.timePicker :disabled {
  -webkit-text-fill-color: unset;
}
.timePicker svg {
  font-size: medium;
}
.MuiPickersLayout-root .MuiPickersLayout-contentWrapper .MuiMultiSectionDigitalClockSection-item.Mui-selected {
  background-color: #4AC08C;
  border-radius: 0.5rem;
}
.MuiPickersLayout-root .MuiPickersLayout-contentWrapper .MuiMultiSectionDigitalClockSection-item:hover {
  border-radius: 0.5rem;
  background-color: #f5f6f5;
  color: #1F7C5E;
}
.MuiPickersLayout-root .MuiButtonBase-root.MuiButton-root {
  border-radius: 0.5rem;
  color: #4AC08C;
}
.MuiPickersLayout-root .MuiButtonBase-root.MuiButton-root:hover {
  border-radius: 0.5rem;
  background-color: #f5f6f5;
  color: #1F7C5E;
}
.requiredStar {
  color: #c64d4d;
}.add-role-drp ul {
  min-width: 12.875rem;
  border-radius: 0.5rem;
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
}
.add-role-drp ul .searchbar-box-list {
  border: 0;
  padding: 0.313rem 0.75rem 0.5rem 0.75rem;
}
.add-role-drp ul .all-attribute-title {
  padding: 0rem 0.938rem;
}
.add-role-drp ul .all-attribute-title .MuiTypography-root {
  font-size: 0.875rem;
}
.add-role-drp ul .role-drp-list .add-icon {
  min-width: 1.5rem;
}
.add-role-drp ul .role-drp-list .title span {
  font-size: 0.938rem;
  font-weight: 400;
  line-height: 1.125rem;
  letter-spacing: -0.02em;
  color: #656669;
}
.add-role-drp ul .role-drp-list .eye-icon {
  text-align: right;
  min-width: 2rem;
}
.add-role-drp ul .role-drp-list .eye-icon img {
  margin-left: auto;
}
.add-role-drp ul .role-drp-list:last-child .title span {
  color: #1f2125;
}
.add-role-drp ul .role-drp-list:last-child .eye-icon {
  position: relative;
  top: 0.188rem;
}
.add-role-drp ul .role-drp-list:last-child .eye-icon svg {
  fill: #7b7c7f;
}
.dropdown-inner--DestructiveActions {
  color: #c64d4d;
}
.dropdown-inner--DestructiveActions:hover {
  background-color: #fedfdf;
}
.action-items ul {
  display: flex;
  text-align: center;
}
.no-data {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.add-row-btn {
  color: #1f2125 !important;
}
.MuiTableSortLabel-iconDirectionAsc path:first-child {
  fill: #232529;
}
.MuiTableSortLabel-iconDirectionAsc path:last-child {
  fill: #bdbebf;
}
.MuiTableSortLabel-iconDirectionDesc path:first-child {
  fill: #232529;
}
.MuiTableSortLabel-iconDirectionDesc path:last-child {
  fill: #bdbebf;
}
.custom-table table th {
  background-color: #FBFBFB !important;
}
.custom-table table th svg {
  height: 16px !important;
  width: 16px !important;
}
.custom-table table th:nth-child(2) svg {
  height: 20px !important;
  width: 20px !important;
}
.custom-table table th button[aria-label=Move] {
  display: none;
  transition: all 0.3s ease-in-out;
}
.custom-table table th:hover button[aria-label=Move] {
  display: block;
}
.custom-table .MuiTouchRipple-root {
  display: none;
}
.custom-table table th span.MuiBadge-root {
  width: 16px;
}
.custom-table table td {
  font-size: 13px !important;
}
.custom-table tbody tr:last-of-type td:first-of-type {
  background-color: white;
}.module-tile-container {
  display: flex;
  width: 10.25rem;
  padding: 1.5rem 1rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.module-box {
  display: flex;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 0.75rem;
  justify-content: center;
  align-items: center;
}

.module-box.transparent {
  border: 1px solid rgba(31, 33, 37, 0.1);
}

.module-box img {
  object-fit: none;
}

.module-label {
  color: #1f2125;
}.main-card-nodal .card-wrapper {
  padding: 0.5rem 0;
  min-width: 17.125rem;
  border-radius: 0.5rem;
  background: #fff;
}
.main-card-nodal .card-wrapper .payable-header {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}
.main-card-nodal .card-wrapper .payable-header .payable-title {
  color: #919294;
  display: inline-block;
}
.main-card-nodal .card-wrapper .search-wrapper {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f3f2f2;
}
.main-card-nodal .card-wrapper .search-wrapper .MuiFormControl-root {
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #f5f6f5;
  background: #fbfbfb;
}
.main-card-nodal .card-wrapper .search-wrapper img {
  top: 1.2rem;
  left: 1.3rem;
}
.main-card-nodal .card-wrapper .list-items {
  padding: 0.5rem 0.75rem;
}
.main-card-nodal .card-wrapper .list-items .title {
  color: #1f2125;
  font-size: 0.813rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.016rem;
  margin-bottom: 0.125rem;
  text-transform: capitalize;
}
.main-card-nodal .card-wrapper .list-items .description {
  color: #656669;
  font-size: 0.813rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.015rem;
  text-transform: capitalize;
}
.main-card-nodal .card-wrapper .bottom-footer {
  display: flex;
  padding: 0.5rem 0.75rem;
  align-items: center;
  border-top: 1px solid #eeeff1;
  background: #fff;
  cursor: pointer;
}
.main-card-nodal .card-wrapper .bottom-footer svg {
  padding-right: 0.5rem;
}
.main-card-nodal .card-wrapper .bottom-footer p {
  color: #1f2125;
  font-size: 0.813rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.016rem;
}.MultiSelect .MuiSelect-select {
  padding-top: 4px !important;
  padding-bottom: 4px;
  padding-left: 8px;
}.reportsTitleBar {
  display: flex;
  padding: 0.5rem 0rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -5px;
}
.reportsTitleBar--FilterAction {
  display: flex;
  font-size: 12px;
  align-items: flex-start;
  text-wrap: nowrap;
}
.reportsTitleBar--FilterAction .search-wrapper img {
  top: 0.6rem;
}
.reportsTitleBar--FilterAction--lvWrapper {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #656669;
  align-items: center;
}
.reportsTitleBar--SearchBar {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
}
.reportsTitleBar--RightContent {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
}
.reportsTitleBar--RightContent--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125 !important;
}
.reportsTitleBar--LeftContent {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.reportsTitleBar--HeaderCard {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.reportsTitleBar--FilterWrapper {
  display: flex;
  font-size: 12px;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.reportsTitleBar--FilterWrapper--Btn {
  border: 1px solid #F3F2F2;
  border-radius: 50px;
  color: #656669;
}
.reportsTitleBar--FilterWrapper--Chip {
  display: flex;
  gap: 4px;
  border: 1px solid #ADE7CB;
  border-radius: 50px;
  background-color: #EBF9F2;
  color: #289B64;
  padding: 2px 12px;
  align-items: center;
  cursor: pointer;
}
.reportsTitleBar--FilterWrapper--Chip--Text {
  display: flex;
  gap: 4px;
  align-items: center;
}
.reportsTitleBar--FilterWrapper--Chip--Text--Value {
  max-width: 88px;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
.report-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: end;
  min-width: fit-content;
}
.filter-bar {
  display: flex;
  padding: 0.75rem 0rem;
  align-items: center;
  justify-content: space-between;
}
.filter-bar .filter-bar--LeftContent {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.filter-bar .filter-bar--LeftContent h6 {
  color: #7b7c7f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.225rem;
}
.filter-bar .filter-bar--LeftContent .hide-btn {
  color: #7b7c7f;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.018rem;
  background-color: #fff;
  box-shadow: unset;
  padding: 0rem 0.5rem;
}
.filter-bar .filter-bar--LeftContent .hide-btn:hover {
  box-shadow: unset;
}
.filter-bar .filter-bar--LeftContent .filter-chip {
  border: 0.063rem solid #f3f2f2;
  font-size: 1rem;
  font-weight: 400;
  line-height: 140%;
}
.filter-bar .filter-bar--LeftContent .subtask-switch {
  display: flex;
  align-items: center;
  gap: 0.313rem;
}
.filter-bar .filter-bar--LeftContent .subtask-switch .switch {
  width: 1.75rem;
  height: 1.063rem;
  margin-top: 0.375rem;
}
.filter-bar .filter-bar--LeftContent .subtask-switch .switch .slider:before {
  width: 0.875rem;
  height: 0.813rem;
}
.filter-bar .filter-bar--RightContent .enable-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: #4AC08C;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.225rem;
  cursor: pointer;
}
.search-filter {
  display: flex;
  gap: 4px;
  width: "100%";
  border: 1px solid #ade7cb;
  border-radius: 50px;
  background-color: #ebf9f2;
  color: #289b64;
  padding: 4px 12px;
  align-items: center;
  cursor: pointer;
}
.search-filter .css-1age63q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.search-filter .css-1age63q p {
  font-size: 14px;
}
.search-filter .css-16hz2ux {
  height: 100%;
}
.filter-select {
  width: 100% !important;
}
.search-filter .filter-select .MuiSelect-select {
  padding: 0px;
}.wrapper--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125 !important;
}.scheduleReport {
  padding: 0rem 2rem;
  width: 100%;
}
.scheduleReport--StatusChip--inprogress {
  background-color: #cdebf4 !important;
  color: #246e82;
}
.scheduleReport--StatusChip--pendingapproval {
  background-color: #f7eac0 !important;
  color: #82691a;
}
.scheduleReport--StatusChip--rejected {
  background-color: #eed2d2 !important;
  color: #883c3c;
}
.scheduleReport--StatusChip--completed {
  background-color: #D2F0E6 !important;
  color: #2EB273;
}
.scheduleReport--StatusChip--cancelled {
  background-color: #f86060 !important;
  color: #fbfbfb;
}
.form-container--Grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem;
}
.scheduleReport__addBtn {
  color: #1f2125 !important;
}.scheduleReportModal--Divider {
  border-color: #eeeff1;
}
.scheduleReportModal--Title {
  border-bottom: 1px solid #d3d3d4;
}
.scheduleReportModal--SectionTitle {
  padding-left: 1.5rem;
}
.scheduleReportModal--ActionContainer {
  padding: 0.5rem 1.5rem !important;
  background-color: #eeeff1;
}
.scheduleReportModal--ActionContainer--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}.appMenu {
  width: "100%";
}

.navList {
  width: 240px;
}

.menuItem {
  width: 240px;
}

.menuItemIcon {
  color: "#97c05c";
}

.drawer-expand-btn {
  position: fixed;
  top: 64.5px;
  left: 299px;
  transform: translateY(-50%);
  z-index: 1201;
  background-color: #fbfbfb;
  border: 1px solid #eeeff1;
  width: 20px;
  height: 30px;
  border-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.drawer-expand-btn_rtl {
  position: fixed;
  top: 64.5px;
  right: 299px;
  transform: translateY(-50%);
  z-index: 1201;
  background-color: #fbfbfb;
  border: 1px solid #eeeff1;
  width: 20px;
  height: 30px;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}

.sidebar-list {
  padding: 0.75rem 0.5rem 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0;
}

.sidebar-list .list-item-text-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sidebar-list .sidebar-search .MuiFormControl-root {
  padding: 0.375rem 0.75rem;
  background-color: #fff;
  border: 1px solid #f3f2f2;
  border-radius: 0.25rem;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}.top-content {
  display: flex;
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
}

.left-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
}

.right-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
}.account-payble-tabsui-wrap {
  min-height: 2.25rem;
}
.account-payble-tabsui-wrap .account-payble-tab-items {
  color: #7b7c7f;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
  text-transform: capitalize;
  min-height: 2.25rem;
  border: 1px solid #f3f2f2;
  border-radius: 50px;
  margin: 10px;
}
.account-payble-tabsui-wrap .account-payble-tab-items.Mui-selected {
  color: #232529;
  border: 1px solid #ebf9f2;
}
.account-payble-tabsui-wrap .account-payble-tab-items:hover {
  background-color: #ebf9f2;
  color: #7b7c7f;
  border: 1px solid #ade7cb;
}
.account-payble-tabsui-wrap .account-payble-tab-items.Mui-selected {
  background-color: #ebf9f2;
  color: #7b7c7f;
  border: 1px solid #ade7cb;
}
.account-payble-tabsui-wrap .account-payble-tab-items .text-display {
  display: flex;
}
.account-payble-tabsui-wrap .account-payble-tab-items .text-display img {
  padding-right: 5px;
}
.account-payble-tabsui-wrap .MuiTabs-scroller .MuiTabs-indicator {
  background-color: #fff;
}
.Tabs--Title {
  display: flex;
  gap: 0.5rem;
}.react-datepicker__header {
  border-bottom: none;
  background-color: white;
  padding: 0; /* Converted from pixels to rem */
}

.react-datepicker {
  box-shadow: 0px 0.5rem 2rem 0px rgba(0, 0, 0, 0.08), 0px 0.125rem 1rem 0px rgba(0, 0, 0, 0.04); /* Converted from pixels to rem */
  border: none;
}

.react-datepicker__today-button {
  padding: 0; /* Converted from pixels to rem */
  border-top: 0.0625rem solid #eee; /* Converted from pixels to rem */
  font-weight: normal;
}

.react-datepicker__day-name {
  color: gray;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #289b64;
  color: #fff;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #289b64;
}

.drop-down-style {
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0 0.625rem; /* Converted from pixels to rem */
}

.react-datepicker__close-icon {
  right: 1.25rem; /* Converted from pixels to rem */
}

.react-datepicker__close-icon::after {
  color: #313131;
  background-color: unset;
  font-size: 1rem; /* Converted from pixels to rem */
}

.react-datepicker-wrapper input {
  border-radius: 0.25rem; /* Converted from pixels to rem */
  border: 0.0625rem solid #b9b9b9; /* Converted from pixels to rem */
  width: 100%;
  height: 2.5rem; /* Converted from pixels to rem */
  color: #525462;
  font-weight: 400;
  font-size: 0.875rem; /* Converted from pixels to rem */
  padding: 0 0.625rem; /* Converted from pixels to rem */
  outline-offset: unset;
  outline: unset;
}

.react-datepicker__header {
  padding: 0.625rem 0; /* Converted from pixels to rem */
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  line-height: 1.875rem; /* Converted from pixels to rem */
}

.box-icon {
  display: inline;
  position: relative;
  top: 0.25rem;
}

.box-icon svg {
  font-size: 1rem;
  color: #7b7c7f;
}

.time-input .MuiInputBase-root .MuiInputBase-input {
  border-right: unset;
}

.time-input .MuiInputAdornment-root {
  padding: 0 0.625rem;
}

.time-input .MuiInputAdornment-root button {
  padding: unset;
}

.time-input .MuiInputAdornment-root .MuiSvgIcon-root {
  width: 1rem;
  height: 1rem;
}.upload-icon {
  display: inline-block;
  position: relative;
  border-radius: calc(var(--size) * 625rem);
}

.upload-icon.hoverable:hover {
  background-color: #d3d3d4;
}

.FileUploadCard--FileIcon .Avatar {
  background-color: #ebf9f2;
  padding: 0.375rem;
  border-radius: 0.25rem;
}

.FileUploadCard .MuiListItemText-root .MuiTypography-root {
  font-size: 0.75rem;
  color: #232529;
  line-height: 1.05rem;
}

.FileUploadCard .MuiListItemIcon-root {
  min-width: 2.75rem;
}

.upload .MuiDialog-paper {
  min-width: 38.875rem;
  border-radius: 1rem;
  border: 0.25rem solid rgb(128, 128, 128);
}

.upload .MuiDialog-paper .MuiButtonBase-root {
  padding: 0.25rem;
}

.upload--head {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}

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

.upload--content {
  padding: 1.5rem 1.375rem 2.25rem 1.375rem;
}

.upload--fileContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 16.25rem;
  border: 0.0625rem dashed #d3d3d4;
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: border 0.3s ease;
  text-align: center;
}

.upload--fileContent.drag-active {
  border-color: #4AC08C;
}

.upload--text {
  text-align: center;
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  margin-bottom: 0.5rem;
}

.upload--iconBox {
  display: flex;
  flex-direction: column;
}

.upload--actions {
  padding: 0.5rem 1rem;
}

.upload .upload--head .upload--title .dialog-box-title {
  color: #000;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .upload--head button svg {
  width: 1.25rem;
}

.upload .upload--head button svg path {
  fill: #292d32;
}

.upload .upload--content .input-label {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
  margin-bottom: 0.5rem;
}

.upload .autocomplete-input-upload {
  margin-left: 0rem;
  margin-right: 0.3125rem;
  width: 100%;
}

.upload .autocomplete-input-upload .MuiFormControl-root .MuiOutlinedInput-root {
  padding: 0rem 0.5rem;
}

.upload .autocomplete-input-upload .MuiFormControl-root .MuiOutlinedInput-root .MuiAutocomplete-clearIndicator {
  display: none;
  visibility: hidden;
}

.upload .autocomplete-input-upload .MuiOutlinedInput-notchedOutline {
  border-color: #ddd;
  border-width: 0.0625rem;
}

.upload .upload-btn {
  min-width: 6.25rem;
  color: #fff;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .public-check-label {
  margin-left: 0rem;
}

.upload .public-check-label .MuiFormControlLabel-label {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .people-access-accordion {
  border: 0rem;
  border-radius: 0rem;
  box-shadow: none;
  margin-top: 0rem;
}

.upload .people-access-accordion::before {
  background-color: unset;
}

.upload .people-access-accordion .MuiAccordionSummary-root {
  padding: 0rem;
  margin: 0rem;
  min-height: 4rem;
}

.upload .people-access-accordion .MuiAccordionSummary-root .MuiAccordionSummary-content .MuiTypography-root {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.upload .people-access-accordion .user-accordion-details {
  padding: 0rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list {
  padding: 0rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root {
  padding: 0rem;
  margin-bottom: 0.9375rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .primary-user-name {
  color: #1f2125;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .primary-user-name .secondary-email-text {
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .owner-role-badge {
  display: flex;
  padding: 0.25rem 0.375rem;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  background: #f5f6f5;
  overflow: hidden;
  color: #656669;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box .MuiSelect-select {
  padding: 0.5rem 0rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
  color: #232529;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box .MuiOutlinedInput-notchedOutline {
  border: 0rem;
}

.upload .people-access-accordion .user-accordion-details .accordion-list .MuiListItem-root .role-edit-select-box svg path {
  fill: #919294;
}

.upload .upload--actions {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  background-color: #eeeff1;
}

.upload .upload--actions .cancel-btn {
  display: flex;
  padding: 0.375rem 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  color: #1f2125;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  border-radius: 0.25rem;
  box-shadow: 0rem 0.25rem 0.625rem -0.125rem rgba(20, 78, 50, 0.05), 0rem 0.125rem 0.125rem -0.0625rem rgba(20, 78, 50, 0.1), 0rem -0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}

.upload .upload--actions .success-btn {
  display: flex;
  padding: 0.375rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  border-radius: 0.25rem;
  color: #fff;
  background: var(--PrimaryGreen-700, #289b64);
  box-shadow: 0rem 0.25rem 0.625rem -0.125rem rgba(20, 78, 50, 0.05), 0rem 0.125rem 0.125rem -0.0625rem rgba(20, 78, 50, 0.1), 0rem -0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.05);
}

.select-menu-items {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
  color: #232529;
}

.user-select-chips {
  border-radius: 0.25rem;
}

.dzu-dropzone {
  border: unset !important;
  background: transparent !important;
  height: 100%;
}

.dzu-inputLabel {
  text-align: center;
  color: #656669;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
  margin-bottom: 0.5rem;
}

.preview-box {
  display: flex;
  align-items: center;
  width: calc(100% - 1.875rem);
  padding: 0.625rem 3%;
  background: #fff;
  border-bottom: 0.0625rem solid #ddd;
  font-size: 0.875rem;
}

.preview-box img {
  max-height: 5rem;
  max-width: 5rem;
  border-radius: 0.25rem;
  margin-right: 0.625rem;
}

.document-cover {
  display: flex;
  padding: 0.75rem 0rem 0.25rem 0rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 0.0625rem solid #f5f6f5;
}

.document-name {
  display: flex;
  width: 28.125rem;
  align-items: flex-start;
  gap: 0.75rem;
}

.delete-icon {
  cursor: pointer;
}

.upload-list {
  width: 100%;
}

.drop-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.after-drop {
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
  align-items: center;
}

.after-drop img {
  width: 3rem;
  height: 3rem;
}

.after-drop p {
  font-weight: 500;
}

.device-wrap {
  display: flex;
  gap: 1.5rem;
}

.device-wrap .select-button {
  margin-top: 1rem;
}

.device-wrap .select-button img {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #eeeff1;
}

.device-wrap .select-button p {
  color: #656669;
}

.bottom-corner-box {
  display: inline-block;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2;
  max-height: 50%;
}

.bottom-corner-box .box-list {
  overflow-y: auto;
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
}

.bottom-corner-box .bottom-section {
  border-bottom: 0.063rem solid #eeeff1;
  padding: 0.5rem;
}

.bottom-corner-box .bottom-section .close-icon,
.bottom-corner-box .bottom-section .folder-icon {
  transform: translate(-50%, -79%);
  left: 50%;
  right: unset;
}

.avatar-container {
  position: relative;
  display: flex;
}

.close-icon,
.folder-icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: none;
}

.avatar-container:hover .avatar {
  display: none;
}

.avatar-container:hover .close-icon,
.avatar-container:hover .folder-icon {
  display: block;
}

.header-section {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 0.0625rem solid var(--Border-Default, #d3d3d4);
  background: var(--Neutral-50, #fff);
}

.import-text {
  color: #000;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.canceled-text {
  color: #656669;
}

.svgDiv {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.125rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: var(--Neutral-200, #f5f6f5);
}

.svg {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.body-section {
  display: flex;
  height: 20rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  background: #fff;
}

.document-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.document-body {
  display: flex;
  width: 35.375rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.document-cover {
  display: flex;
  padding: 0.75rem 0rem 0.25rem 0rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.document-name {
  display: flex;
  width: 34.375rem;
  align-items: flex-start;
  gap: 0.75rem;
  align-items: center;
}

.document-choices {
  display: flex;
  width: 9.625rem;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.document-icon-sm {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  background: var(--Accent-Red-100, #ffebeb);
}

.document-icon-lg {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  background: var(--Accent-Red-100, #ffebeb);
}

.document-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 0 0;
}

.svg-document {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.document-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem;
  align-self: stretch;
}

.document-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--Neutral-900, #232529);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.document-size {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--Text-Secondary, #656669);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.document-size .success-file {
  color: #289b64;
  margin: 0 0.75rem;
}

.document-size .fail-file {
  color: #f86060;
  margin: 0 0.75rem;
}

.checkbox {
  display: flex;
  height: 2.5625rem;
  align-items: center;
  gap: 0.25rem;
}

.delete-icon {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.checkbox-svg {
  width: 1.5rem;
  height: 1.5rem;
}

.checkbox-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--Text-Secondary, #656669);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4rem;
  letter-spacing: -0.015rem;
}

.svg-delete {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.button-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: var(--Button-Secondary_BG, #fff);
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
}

.button-body {
  display: flex;
  padding: 0.375rem 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.button-add {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  justify-content: center;
  align-items: center;
}

.svg-add {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.button-add-text {
  color: var(--Button-On_Secondary, #1f2125);
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: -0.018rem;
}

.submit-section {
  display: flex;
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  justify-content: flex-end;
  align-items: center;
  gap: 3.125rem;
  align-self: stretch;
  border-top: 0.0625rem solid var(--Border-Default, #d3d3d4);
  background: var(--Neutral-200, #f5f6f5);
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  flex: 1 0 0;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.btn-cancel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: #fff;
  color: #292d32;
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
}

.btn-upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  background: var(--Neutral-500, #a7a8a9);
  color: #ffffff;
  box-shadow: 0rem 0.125rem 0.3125rem -0.125rem rgba(20, 78, 50, 0.05), 0rem 0.0625rem 0.0625rem -0.125rem rgba(20, 78, 50, 0.1), 0rem -0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.05);
}

.top-section {
  display: flex;
  width: 350rem;
  padding: 0.5rem 0.75rem;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.75rem 0.75rem 0rem 0rem;
  background: var(--PrimaryGreen-100, #ebf9f2);
}

.top-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--Neutral-900, #232529);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.018rem;
}

.top-options {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.btn {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  justify-content: center;
  align-items: center;
}

.arrow-btn {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.svg-arrow-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.svg-cancel-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.bottom-section {
  display: flex;
  padding: 0.5rem;
  align-items: center;
  gap: 0.75rem;
  align-self: stretch;
  background: #fff;
}

.svg-icon {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  background: var(--PrimaryGreen-100, #ebf9f2);
}

.doc-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 0.25rem;
}

.svg-doc {
  width: 20rem;
  height: 20rem;
}

.file-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 0 0;
}

.file-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.25rem;
  flex: 1 0 0;
}

.file-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  align-self: stretch;
  overflow: hidden;
  color: var(--Neutral-900, #232529);
  text-overflow: ellipsis;
  font-family: Inter;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.015rem;
}

.file-status {
  display: flex;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
}

.svg-status {
  width: 20rem;
  height: 20rem;
  flex-shrink: 0;
}

.add-file {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0rem 0rem 0.125rem 0rem #e0e0e0, 0rem 0.0625rem 0.25rem -0.125rem rgba(24, 39, 75, 0.02), 0rem 0.25rem 0.25rem -0.125rem rgba(24, 39, 75, 0.06);
  border: unset;
}.SwitchList {
  padding: 1rem 0.5rem 0.4375rem 0.5rem;
  flex: 1;
  border-radius: 0.5rem;
  background: #ffffff;
  max-height: 100%;
  overflow-y: auto;
}
.SwitchList .MuiFormControlLabel-labelPlacementEnd {
  line-height: 0.9375rem;
  margin: unset;
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
}
.SwitchList .MuiFormControlLabel-label {
  font-size: 0.875rem;
  line-height: 1.225rem;
  color: #656669;
  margin: 0 0.5rem;
}
.SwitchList .MuiList-root {
  max-width: 100%;
  padding: unset;
}
.SwitchList .MuiListItem-root {
  display: flex;
  padding: 0.5rem 0.75rem;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
}
.SwitchList .MuiListItemText-root {
  margin: unset;
}
.SwitchList .list-secondary-content {
  width: 1.25rem;
  height: 1.25rem;
}
.SwitchList .MuiList-root .MuiTypography-root {
  color: #1f2125;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.28px;
}
.SwitchList .MuiList-root .MuiTypography-root span {
  color: #a7a8a9;
  position: relative;
  margin: 0 0.5rem;
}
.SwitchList .MuiList-root .MuiTypography-root span::after {
  position: absolute;
  content: "";
  top: 47%;
  left: -0.5rem;
  border-radius: 50%;
  border: 0.125rem solid #a7a8a9;
}
.SwitchList .switch {
  width: 1.5rem;
  height: 1rem;
}
.SwitchList .switch .slider:before {
  height: 0.875rem;
  width: 0.875rem;
  left: -0.0625rem;
  bottom: 0.0625rem;
}.listing-component {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.listing-component .fallback-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing-component .loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}.legends-circle {
  content: "";
  position: relative;
  top: 4px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 10px;
}.circle {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.bar {
  position: relative;
  z-index: 9999; /* Ensure bars are on top */
}.donut-chart-container {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
  padding-top: 10px;
}
.donut-chart-container .donut-chart-legend {
  width: 25rem;
  display: flex;
  flex-wrap: wrap;
}
.donut-chart-container .donut-chart-legend .legend {
  padding: 0 0.625rem;
  max-height: 2.5rem;
  margin-bottom: 0.938rem;
  width: 50%;
}
.donut-chart-container .donut-chart-legend .legend .legend-title {
  color: var(--Text-Secondary, #656669);
  margin-bottom: 0.125rem;
  width: 100%;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donut-chart-container .donut-chart-legend .legend .legend-value {
  font-size: 0.75rem;
}

.donut-chart-container.vertical {
  flex-direction: column;
  align-items: center;
}
.donut-chart-container.vertical .donut-chart-legend {
  width: auto;
  margin-top: 1.25rem;
}.donut-chart-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.donut-chart-container.vertical {
  flex-direction: column;
  align-items: center;
}
.donut-chart-container.vertical .donut-chart-legend {
  width: auto;
  margin-top: 1.25rem;
}

.donut-chart-container.horizontal {
  flex-direction: row;
  align-items: center;
}
.donut-chart-container.horizontal .donut-chart-legend {
  width: auto;
  margin-top: 1.25rem;
}

.donut-legend {
  display: flex;
  justify-content: center;
}

.donut-chart-legend {
  display: flex;
  justify-content: center;
  width: 150px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 46px;
  gap: 12px;
}
.donut-chart-legend .legend {
  padding: 0 0.75rem 0 0.75rem;
  max-height: 2.5rem;
  padding-right: 24px;
}
.donut-chart-legend .legend .legend-title {
  color: var(--Text-Secondary, #656669);
  margin-bottom: 0.125rem;
  width: 100%;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donut-chart-legend .legend .legend-value {
  font-size: 0.75rem;
}

.account-receivable-card {
  padding: 16px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
}

.donut-chart-legend.horizontal {
  flex-direction: column;
  align-items: flex-start;
}.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}

@media screen and (min-width: 450px) {
  .grid-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (min-width: 812px) {
  .grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1112px) {
  .grid-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1440px) {
  .grid-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 1600px) {
  .grid-wrapper {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media screen and (min-width: 1920px) {
  .grid-wrapper {
    grid-template-columns: repeat(6, 1fr);
  }
}.gridView--CardHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.gridView--CardBottom {
  margin-top: 0.75rem;
}
.gridView--Image {
  width: 1rem;
  height: 1rem;
  transform: rotate(90deg);
}
.gridView--StatusInactive {
  width: fit-content;
  padding: 0.25rem 0.375rem;
  text-align: center;
  background-color: #f5f6f5;
  color: #232529;
  border-radius: 0.5rem;
}
.gridView--StatusActive {
  padding: 0.25rem 0.375rem;
  text-align: center;
  background-color: #d0f0da;
  color: #226e4f;
  border-radius: 0.5rem;
  width: fit-content;
}
.gridView--Approved {
  background-color: #B6E9D6 !important;
  color: #279769 !important;
}
.gridView--Rejected {
  background-color: #eed2d2 !important;
  color: #883c3c !important;
}
.gridView--Submitted {
  background-color: #cdebf4 !important;
  color: #246e82 !important;
}
.gridView--Draft {
  background-color: #eeeff1 !important;
  color: #232529 !important;
}
.gridView--redirection {
  cursor: pointer;
  width: 100%;
}.forms {
  padding: 0rem 2rem;
  width: 100%;
}
.forms--CustomField {
  width: fit-content;
  padding: 0.25rem 0.375rem;
  text-align: center;
  background-color: #eeeff1;
  color: #232529;
  border-radius: 0.25rem;
}.MuiTableRow-root::after {
  display: none !important;
}

.dynamic-report-header {
  border: 1px solid;
  border-color: #f3f2f2;
  padding: 8px;
  height: 30px;
  background-color: #fafafa;
}

.dynamic-report-row {
  border: 1px solid;
  border-color: #f3f2f2;
  padding: 8px;
  height: 40px;
}

.dynamic-report table tr {
  display: table-header-group;
}.formParser--Grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.formParser--Accordion {
  margin: 1rem 0rem;
}
.formParser--Section:first-child .formParser--Section--SectionTitle:first-child {
  margin-top: 0;
}
.formParser--Section--SectionDivider {
  margin-top: 2rem;
  border-color: #eeeff1;
}
.avtarDisplay {
  width: 54px;
  height: 56px;
  gap: 10px;
  border-radius: 8px;
  margin: 5px 10px;
  background-color: #eaf2bf;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #505f07;
  font-weight: bold;
}
.m0 {
  margin: 0 !important;
}.ai-summary-panel {
  position: relative;
}
.ai-summary-panel__collapsed-toggle {
  width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: white;
  border: 1px solid #F3F2F2;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-left: 8px;
  margin-right: 8px;
  font-family: inherit;
}
.ai-summary-panel__collapsed-toggle:hover {
  border-color: #E0DFE0;
}
.ai-summary-panel__collapsed-toggle:disabled {
  cursor: default;
  opacity: 0.8;
}
.ai-summary-panel__collapsed-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: #4AC08C;
}
.ai-summary-panel__collapsed-toggle-icon svg {
  width: 12px;
  height: 12px;
  color: white;
}
.ai-summary-panel__collapsed-toggle-title {
  font-weight: 500;
  font-size: 13px;
  color: #1F2125;
}
.ai-summary-panel__collapsed-toggle-subtitle {
  font-weight: 400;
  font-size: 12px;
  color: #A7A8A9;
}
.ai-summary-panel__collapsed-toggle-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: #A7A8A9;
}
.ai-summary-panel__loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.ai-summary-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
}
.ai-summary-panel__loading-spinner-large {
  width: 28px;
  height: 28px;
  border: 3px solid #F3F2F2;
  border-top-color: #4AC08C;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.ai-summary-panel__loading-text {
  font-size: 13px;
  color: #656669;
}
.ai-summary-panel__expanded {
  background: white;
  border: 1px solid #F3F2F2;
  border-radius: 8px;
  overflow: visible;
  margin-left: 8px;
  margin-right: 8px;
}
.ai-summary-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #F5F6F5;
}
.ai-summary-panel__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ai-summary-panel__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #4AC08C;
}
.ai-summary-panel__header-icon svg {
  width: 13px;
  height: 13px;
  color: white;
}
.ai-summary-panel__header-title {
  font-weight: 500;
  font-size: 14px;
  color: #1F2125;
}
.ai-summary-panel__header-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: #E8F7F0;
  font-weight: 500;
  font-size: 10px;
  color: #4AC08C;
  text-transform: uppercase;
}
.ai-summary-panel__header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-summary-panel__header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  background: transparent;
  border: none;
  padding: 0;
}
.ai-summary-panel__header-btn:hover {
  background: #f5f6f5;
}
.ai-summary-panel__header-btn svg {
  width: 14px;
  height: 14px;
  color: #919294;
}
.ai-summary-panel__header-btn.copied svg {
  color: #2EB273;
}
.ai-summary-panel__body {
  padding: 12px 16px 14px;
}
.ai-summary-panel__error {
  font-size: 13px;
  color: #E85D3A;
  line-height: 1.65;
  padding: 4px 0;
}
.ai-summary-panel__summary {
  font-weight: 400;
  font-size: 13px;
  color: #3D3F44;
  line-height: 1.65;
}
.ai-summary-panel__summary-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: #7C3AED;
  margin-left: 2px;
  vertical-align: middle;
  animation: pulse 1s infinite;
}
.ai-summary-panel__visuals {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: fadeSlideIn 0.3s ease-out both;
  overflow: visible;
  align-items: stretch;
}
.ai-summary-panel__visuals > .ai-summary-panel__card {
  flex: 1;
  min-width: calc(50% - 6px);
  max-width: calc(50% - 6px);
}
.ai-summary-panel__card {
  background: #FAFBFC;
  border: 1px solid #F3F2F2;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  overflow: visible;
  min-height: 200px;
}
.ai-summary-panel__card-title {
  font-size: 11.5px;
  color: #656669;
  font-weight: 500;
  margin-bottom: 25px;
}
.ai-summary-panel__insights {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: fadeSlideIn 0.3s ease-out 0.1s both;
}
.ai-summary-panel__feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f5f6f5;
  animation: fadeSlideIn 0.3s ease-out 0.2s both;
}
.ai-summary-panel__feedback-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-summary-panel__feedback-thumbs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-summary-panel__feedback-label {
  font-size: 11.5px;
  color: #a7a8a9;
  letter-spacing: -0.23px;
  margin-right: 2px;
}
.ai-summary-panel__feedback-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
}
.ai-summary-panel__feedback-btn svg {
  width: 12px;
  height: 12px;
  color: #a7a8a9;
}
.ai-summary-panel__feedback-btn:hover {
  background: #f5f6f5;
}
.ai-summary-panel__feedback-btn--up {
  background: #ECFDF5;
}
.ai-summary-panel__feedback-btn--up svg {
  color: #059669;
}
.ai-summary-panel__feedback-btn--down {
  background: #FEF3F0;
}
.ai-summary-panel__feedback-btn--down svg {
  color: #E85D3A;
}
.ai-summary-panel__feedback-disclaimer {
  font-size: 11px;
  color: #a7a8a9;
  letter-spacing: -0.22px;
}
.ai-summary-panel__ask-ai-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: #F5F3FF;
  cursor: pointer;
  transition: background-color 0.2s;
  font-family: inherit;
}
.ai-summary-panel__ask-ai-btn:hover {
  background: #EDE9FE;
}
.ai-summary-panel__ask-ai-btn svg {
  width: 11px;
  height: 11px;
  color: #7C3AED;
}
.ai-summary-panel__ask-ai-btn span {
  font-size: 12px;
  color: #7C3AED;
  font-weight: 500;
  letter-spacing: -0.24px;
}
.ai-summary-panel__header-btn.active svg {
  color: #7C3AED;
}
.ai-summary-panel__chat {
  border-top: 1px solid #f3f2f2;
  animation: fadeSlideIn 0.25s ease-out both;
}
.ai-summary-panel__chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fafbfc;
  border-bottom: 1px solid #f5f6f5;
}
.ai-summary-panel__chat-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-summary-panel__chat-header-icon {
  width: 12px;
  height: 12px;
  color: #7C3AED;
}
.ai-summary-panel__chat-header-title {
  font-size: 12px;
  color: #656669;
  letter-spacing: -0.24px;
  font-weight: 500;
}
.ai-summary-panel__chat-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
}
.ai-summary-panel__chat-close-btn:hover {
  background: #f0f0f0;
}
.ai-summary-panel__chat-close-btn svg {
  width: 13px;
  height: 13px;
  color: #919294;
}
.ai-summary-panel__chat-suggestions {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f6f5;
}
.ai-summary-panel__chat-suggestions-label {
  font-size: 11px;
  color: #a7a8a9;
  letter-spacing: -0.22px;
  margin-bottom: 8px;
}
.ai-summary-panel__chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-summary-panel__chat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: white;
  border: 1px solid #f3f2f2;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  font-family: inherit;
}
.ai-summary-panel__chat-chip:hover {
  border-color: #d0d0d1;
  background: #fafbfc;
}
.ai-summary-panel__chat-chip span {
  font-size: 11.5px;
  color: #3D3F44;
  letter-spacing: -0.23px;
}
.ai-summary-panel__chat-chip-icon {
  width: 11px;
  height: 11px;
  color: #919294;
}
.ai-summary-panel__chat-chip--small {
  padding: 4px 10px;
}
.ai-summary-panel__chat-chip--small span {
  font-size: 11px;
  color: #656669;
  letter-spacing: -0.22px;
}
.ai-summary-panel__chat-chip--small .ai-summary-panel__chat-chip-icon {
  width: 10px;
  height: 10px;
}
.ai-summary-panel__chat-messages {
  max-height: 350px;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-summary-panel__chat-message--user {
  display: flex;
  justify-content: flex-end;
}
.ai-summary-panel__chat-message--ai {
  display: flex;
  justify-content: flex-start;
}
.ai-summary-panel__chat-ai-row {
  display: flex;
  gap: 10px;
  max-width: 92%;
}
.ai-summary-panel__chat-ai-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-summary-panel__chat-ai-avatar svg {
  width: 11px;
  height: 11px;
  color: white;
}
.ai-summary-panel__chat-ai-text {
  font-size: 12.5px;
  color: #3D3F44;
  line-height: 1.6;
  letter-spacing: -0.25px;
  min-width: 0;
}
.ai-summary-panel__chat-ai-text p {
  margin: 0 0 6px;
}
.ai-summary-panel__chat-ai-text p:last-child {
  margin-bottom: 0;
}
.ai-summary-panel__chat-ai-text strong {
  font-weight: 600;
}
.ai-summary-panel__chat-ai-text em {
  font-style: italic;
}
.ai-summary-panel__chat-ai-text ul, .ai-summary-panel__chat-ai-text ol {
  margin: 4px 0 6px 16px;
  padding: 0;
}
.ai-summary-panel__chat-ai-text li {
  margin-bottom: 2px;
}
.ai-summary-panel__chat-ai-text code {
  background: #F0EEFF;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 11.5px;
  font-family: monospace;
}
.ai-summary-panel__chat-ai-text pre {
  background: #F0EEFF;
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 6px 0;
}
.ai-summary-panel__chat-ai-text pre code {
  background: none;
  padding: 0;
}
.ai-summary-panel__chat-ai-text h1, .ai-summary-panel__chat-ai-text h2, .ai-summary-panel__chat-ai-text h3 {
  font-weight: 600;
  margin: 8px 0 4px;
  line-height: 1.3;
}
.ai-summary-panel__chat-ai-text h1 {
  font-size: 14px;
}
.ai-summary-panel__chat-ai-text h2 {
  font-size: 13px;
}
.ai-summary-panel__chat-ai-text h3 {
  font-size: 12.5px;
}
.ai-summary-panel__chat-ai-text a {
  color: #7C3AED;
  text-decoration: underline;
}
.ai-summary-panel__chat-ai-text blockquote {
  border-left: 3px solid #D8B4FE;
  padding-left: 8px;
  margin: 4px 0;
  color: #6B7280;
}
.ai-summary-panel__chat-user-bubble {
  background: #F5F3FF;
  border-radius: 12px 12px 4px 12px;
  padding: 8px 14px;
  max-width: 75%;
}
.ai-summary-panel__chat-user-bubble p {
  font-size: 12.5px;
  color: #3D3F44;
  line-height: 1.5;
  letter-spacing: -0.25px;
}
.ai-summary-panel__chat-typing {
  display: flex;
  gap: 10px;
  align-items: center;
}
.ai-summary-panel__chat-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.ai-summary-panel__chat-typing-dots span {
  width: 5px;
  height: 5px;
  background: #c4b5fd;
  border-radius: 50%;
  animation: chatBounce 1.2s infinite ease-in-out;
}
.ai-summary-panel__chat-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.ai-summary-panel__chat-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
.ai-summary-panel__chat-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
.ai-summary-panel__chat-disclaimer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 0;
  color: #9CA3AF;
  /* Reset Typography margin from AIDisclaimer */
}
.ai-summary-panel__chat-disclaimer-wrap .MuiTypography-root {
  margin-top: 0 !important;
}
.ai-summary-panel__chat-disclaimer-ln {
  flex: 1;
  height: 1px;
  background: #F2F3F4;
}
.ai-summary-panel__chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #f5f6f5;
  background: white;
}
.ai-summary-panel__chat-input {
  flex: 1;
  font-size: 13px;
  color: #1f2125;
  letter-spacing: -0.26px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
}
.ai-summary-panel__chat-input::placeholder {
  color: #a7a8a9;
}
.ai-summary-panel__chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  background: #f5f6f5;
  padding: 0;
}
.ai-summary-panel__chat-send-btn svg {
  width: 14px;
  height: 14px;
  color: #a7a8a9;
}
.ai-summary-panel__chat-send-btn--active {
  background: #7C3AED;
}
.ai-summary-panel__chat-send-btn--active svg {
  color: white;
}
.ai-summary-panel__chat-send-btn--active:hover {
  background: #6D28D9;
}
.ai-summary-panel__chat-send-btn:disabled {
  cursor: default;
}
.ai-summary-panel__insight-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ai-summary-panel__insight-chip::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.ai-summary-panel__insight-chip--critical {
  background: rgba(232, 93, 58, 0.08);
}
.ai-summary-panel__insight-chip--critical::before {
  background: #E85D3A;
}
.ai-summary-panel__insight-chip--critical svg {
  color: #E85D3A;
}
.ai-summary-panel__insight-chip--warning {
  background: rgba(217, 119, 6, 0.08);
}
.ai-summary-panel__insight-chip--warning::before {
  background: #D97706;
}
.ai-summary-panel__insight-chip--warning svg {
  color: #D97706;
}
.ai-summary-panel__insight-chip--info {
  background: rgba(5, 150, 105, 0.08);
}
.ai-summary-panel__insight-chip--info::before {
  background: #059669;
}
.ai-summary-panel__insight-chip--info svg {
  color: #059669;
}
.ai-summary-panel__insight-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ai-summary-panel__insight-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ai-summary-panel__insight-chip-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #3D3F44;
}
.ai-summary-panel__insight-chip-text {
  font-size: 11px;
  color: #6B7280;
}
.ai-summary-panel__insight-chip-arrow {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.2s;
  color: #9CA3AF;
  width: 12px;
  height: 12px;
}
.ai-summary-panel__insight-chip:hover .ai-summary-panel__insight-chip-arrow {
  opacity: 1;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes chatBounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
}.vai {
  padding: 0;
  background: #fff;
  font-family: inherit;
  padding-bottom: 10px;
}
.vai__select-wrap > .MuiTypography-root {
  display: none !important;
}
.vai__loading, .vai__empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 16px;
  color: #94a3b8;
}
.vai__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
}
.vai__header-icon {
  color: #7c3aed;
}
.vai__header-title {
  color: #7c3aed !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
}
.vai__divider {
  height: 1px;
  background-color: #f1f5f9;
  margin: 0;
}
.vai__block {
  padding: 14px 16px;
}
.vai__block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.vai__block-icon--dark {
  color: #475569;
}
.vai__block-icon--green {
  color: #10b981;
}
.vai__block-icon--bulb {
  color: #7c3aed;
  animation: pulseBulb 2s infinite ease-in-out;
}
.vai__block-body {
  color: #64748b;
  line-height: 1.55;
  font-size: 13px;
}
.vai__block-body--muted {
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 12px;
  display: block;
}
.vai__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
}
.vai__badge--green {
  background-color: #ecfdf5;
  color: #059669;
}
.vai__price-list {
  margin-top: 4px;
}
.vai__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 13px;
}
.vai__price-row:last-child {
  border-bottom: none;
}
.vai__price-name {
  color: #334155;
  font-weight: 400;
  flex: 1;
  padding-right: 16px;
  line-height: 1.4;
  word-break: break-word;
}
.vai__price-val {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3px;
  font-weight: 600;
  font-size: 13px;
}
.vai__price-val--up {
  color: #ef4444;
}
.vai__price-val--down {
  color: #10b981;
}
.vai__price-val--flat {
  color: #94a3b8;
}
.vai__load-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  cursor: pointer;
}
.vai__load-more-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #d1fae5;
  background: #fff;
  color: #10b981;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.vai__load-more-pill:hover {
  background: #ecfdf5;
  color: #059669;
}
.vai__select-wrap {
  margin-bottom: 12px;
}
.vai__compare-btn {
  background-color: #10b981 !important;
  text-transform: none !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px !important;
  border-radius: 8px !important;
  letter-spacing: 0.02em;
}
.vai__compare-btn:hover {
  background-color: #059669 !important;
}
.vai__compare-btn:disabled {
  background-color: #a7f3d0 !important;
}
.vai__recs {
  background: #ffffff; /* White background */
  margin: 0;
  border: none;
}
.vai__recs-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}
.vai__recs-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: #e6f6ef;
  color: #00a669;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vai__recs-title {
  color: #0f172a;
  font-size: 15px;
  margin-bottom: 2px;
}
.vai__recs-subtitle {
  color: #94a3b8;
  font-size: 13px;
}
.vai__recs-list {
  display: flex;
  flex-direction: column;
}
.vai__rec-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}
.vai__rec-item:first-of-type {
  padding-top: 0;
}
.vai__rec-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.vai__rec-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vai__rec-rank {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #e6f6ef;
  color: #00a669;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vai__rec-rank--first {
  background: #00a669;
  color: #fff;
  box-shadow: 0 0 0 4px #e6f6ef;
  margin: 4px; /* Offset for the box-shadow */
}
.vai__rec-name {
  color: #00a669; /* Dark green */
  font-size: 16px;
  font-weight: 500;
}
.vai__rec-reason {
  color: #7b949f; /* Grayish blue */
  font-size: 14px;
  line-height: 1.5;
}
.vai__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 12px;
  /* Hide scrollbar for clean look but keep it scrollable */
}
.vai__chips::-webkit-scrollbar {
  height: 4px;
}
.vai__chips::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}
.vai__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  padding: 0 10px;
  height: 28px;
  border-radius: 14px;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
}
.vai__chip-close {
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}
.vai__chip-close:hover {
  color: #475569;
}
.vai__compare-btn {
  font-size: 13px !important;
  text-transform: none !important;
}

.ai-vendor-tab.Mui-selected {
  color: #10b981 !important;
}

.vai-tab-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseBulb {
  0% {
    opacity: 0.4;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.95);
  }
}
@keyframes pulseDot {
  0% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}@keyframes cardswipe {
  100% {
    transform: translate(5vw, 10vh) rotate(0);
  }
}
@keyframes cardreverseswipe {
  0% {
    transform: translate(5vw, 10vh) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(-45deg);
  }
}
@keyframes cardrotate {
  100% {
    transform: rotateX(15deg) rotateY(10deg);
  }
}
@keyframes cardreverserotate {
  0% {
    transform: rotateX(15deg) rotateY(10deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(15deg);
  }
}
@keyframes tabletreversemoveup {
  0% {
    transform: rotate(-35deg) translate(8vw, 7vh);
  }
  100% {
    transform: rotate(-35deg) translate(8vw, 12vh);
  }
}
@keyframes textfadein {
  0% {
    transform: translateY(10vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes navbarexpand {
  0% {
    width: 0;
  }
  100% {
    width: 45vw;
  }
}
@keyframes navbarshrink {
  0% {
    width: 45vw;
  }
  100% {
    width: 0;
  }
}
@media screen and (max-width: 1112px) {
  @keyframes tabletmoveup {
    100% {
      transform: rotate(-35deg) translate(15vw, 7vh);
    }
  }
  @keyframes tabletreversemoveup {
    0% {
      transform: rotate(-35deg) translate(15vw, 7vh);
    }
    100% {
      transform: rotate(-35deg) translate(15vw, 12vh);
    }
  }
}
@media screen and (max-width: 812px) {
  @keyframes cardswipe {
    100% {
      transform: translate(7vw, 5vh);
    }
  }
}
@media screen and (max-width: 450px) {
  @keyframes swipemovedown {
    100% {
      transform: rotate(-35deg) translate(11vw, 3vh);
    }
  }
  @keyframes tabletmoveup {
    100% {
      transform: rotate(-35deg) translate(15vw, 0vh);
    }
  }
  @keyframes swipereversemovedown {
    0% {
      transform: rotate(-35deg) translate(11vw, 3vh);
    }
    100% {
      transform: rotate(-35deg) translate(11vw, -2vh);
    }
  }
  @keyframes tabletreversemoveup {
    0% {
      transform: rotate(-35deg) translate(15vw, 0vh);
    }
    100% {
      transform: rotate(-35deg) translate(15vw, 5vh);
    }
  }
  @keyframes navbarexpand {
    0% {
      width: 0;
    }
    100% {
      width: 70vw;
    }
  }
  @keyframes navbarshrink {
    0% {
      width: 70vw;
    }
    100% {
      width: 0;
    }
  }
}
@media screen and (max-width: 360px) {
  @keyframes tabletmoveup {
    100% {
      transform: rotate(-35deg) translate(15vw, 2vh);
    }
  }
}
.Landing {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: auto;
  width: 100%;
}
.Landing--SubTitle {
  font-size: 1.5625rem;
  font-weight: 300;
  padding-bottom: 0.8125rem;
}
.Landing--Para {
  padding: 3.125rem 0;
  font-weight: 300;
  font-size: 1.4375rem;
  line-height: 55px;
  font-family: "Inter", sans-serif;
  width: 85%;
}
.Landing--Home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}
.Landing--HomeAnimation {
  width: 40%;
  z-index: 2;
}
.Landing--HomeAnimationVideo {
  width: 100%;
  margin-left: 5vw;
  transform: translateY(5vh);
}
.Landing--HomeContent {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  width: 50%;
  padding-top: 8vh;
}
.Landing--HomeContentTop {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}
.Landing--HomeContentBottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 75%;
  position: relative;
}
.Landing--HomeContentBottomArrow {
  position: absolute;
  top: 0;
  left: -200px;
  z-index: 1;
}
.Landing--HomeContentVisa {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin-top: 3.125rem;
  width: 75%;
}
.Landing--HomeContentVisaTitle {
  color: #a9a9a9;
  font-weight: 300;
  font-size: 1rem;
}
.Landing--HomeContentVisaPic {
  height: 3vh;
  padding-left: 0.625rem;
}
.Landing--Animation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  width: 100vw;
}
.Landing--AnimationVideo {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
}
.Landing--AnimationVideoOpacity {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.Landing--AnimationVideoContent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}
.Landing--AnimationText {
  position: relative;
  margin-top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  background: #000;
  padding-top: 6.25rem;
}
.Landing--AnimationTextContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  margin-bottom: 35vh;
  width: 70%;
}
.Landing--AnimationTextContent:nth-child(4) {
  margin-bottom: 20vh;
}
.Landing--AnimationTextContentImg {
  height: 12vh;
  margin-bottom: 0.9375rem;
}
.Landing--AnimationTextContentButton {
  margin-top: 5vh;
}
.Landing--Features {
  width: 100%;
  margin: 15vh 0;
  text-align: center;
  position: relative;
}
.Landing--FeaturesSticky {
  position: sticky;
  position: -webkit-sticky;
  top: 14vh;
  width: 100%;
  height: 90vh;
}
.Landing--FeaturesCards {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: -70vh;
}
.Landing--Security {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  position: relative;
  width: 100%;
  height: auto;
  padding: 15vh 10vw;
  border-radius: 2.5rem;
  background: radial-gradient(#4d4d4d, #000000);
}
.Landing--SecurityContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
}
.Landing--SecurityContentFeatures {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 2.5rem;
  width: 85%;
}
.Landing--SecurityContentFeaturesColumn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}
.Landing--SecurityMobile {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  width: 100%;
}
.Landing--SecurityImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
  width: 250px;
  height: 250px;
}
.Landing--Brands {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  height: auto;
  width: 100%;
  padding: 10vh 0;
}
.Landing--BrandsTitle {
  font-size: 1.875rem;
  font-weight: 500;
  padding-bottom: 15vh;
}
.Landing--BrandsSubTitle {
  font-size: 1.4375rem;
  font-weight: 400;
  padding-top: 1.25rem;
}
.Landing--BrandsContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 55%;
  flex-wrap: wrap;
}
.Landing--BrandsContainerImg {
  height: 12vh;
  max-width: 10vw;
  margin-bottom: 1.25rem;
  margin-right: 1.875rem;
}
.Landing--Carousel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  border-radius: 2.5rem;
  position: relative;
  overflow-x: hidden;
  background: none;
}
.Landing--CarouselAnimationVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 1920px) {
  .Landing--SubTitle {
    font-size: 1.5625rem;
  }
  .Landing--Para {
    font-size: 1.25rem;
    padding: 2.375rem 0;
  }
  .Landing--HomeContentBottom {
    width: 85%;
  }
  .Landing--HomeContentVisa {
    width: 85%;
    margin-top: 1.5625rem;
  }
  .Landing--BrandsTitle {
    font-size: 1.5rem;
  }
  .Landing--BrandsSubTitle {
    font-size: 1.3125rem;
  }
}
@media screen and (max-width: 1600px) {
  .Landing--SubTitle {
    font-size: 1.25rem;
  }
  .Landing--Para {
    font-size: 1.0625rem;
    padding: 2.1875rem 0;
    line-height: 40px;
  }
  .Landing--HomeContentVisaTitle {
    font-size: 0.875rem;
  }
  .Landing--BrandsTitle {
    font-size: 1.4375rem;
  }
  .Landing--BrandsSubTitle {
    font-size: 1.1875rem;
  }
}
@media screen and (max-width: 1440px) {
  .Landing--SubTitle {
    font-size: 1rem;
  }
  .Landing--Para {
    font-size: 0.875rem;
    padding: 2.0625rem 0;
    line-height: 35px;
  }
  .Landing--HomeContent {
    width: 42%;
  }
  .Landing--HomeContentBottom {
    width: 75%;
  }
  .Landing--HomeContentVisa {
    width: 75%;
  }
  .Landing--HomeContentVisaTitle {
    font-size: 0.75rem;
  }
  .Landing--AnimationTextContentImg {
    height: 11vh;
  }
  .Landing--BrandsContainer {
    width: 55%;
  }
  .Landing--BrandsTitle {
    font-size: 1.3125rem;
  }
  .Landing--BrandsSubTitle {
    font-size: 1.03125rem;
    padding-top: 0.625rem;
  }
  .Landing--SecurityContent {
    width: 100%;
  }
  .Landing--SecurityContentFeatures {
    width: 100%;
  }
}
@media screen and (max-width: 1112px) {
  .Landing--SubTitle {
    font-size: 1.75rem;
  }
  .Landing--Para {
    font-size: 1.125rem;
    padding: 1.875rem 0;
  }
  .Landing--Home {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
  }
  .Landing--HomeContent {
    width: 65%;
    padding-bottom: 5vh;
    align-items: center;
  }
  .Landing--HomeContentTop {
    align-items: center;
  }
  .Landing--HomeContentBottom {
    width: 90%;
  }
  .Landing--HomeAnimation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
  }
  .Landing--HomeAnimationVideo {
    margin: 10vh 0;
    width: 55%;
  }
  .Landing--Security {
    padding: 15vh 3vw;
  }
  .Landing--BrandsContainer {
    width: 60%;
  }
  .Landing--BrandsContainerImg {
    height: auto;
    max-width: 14vw;
  }
}
@media screen and (max-width: 812px) {
  .Landing--SubTitle {
    font-size: 1.5625rem;
  }
  .Landing--HomeAnimationVideo {
    width: 70%;
  }
  .Landing--AnimationContentTitle {
    line-height: 35px;
  }
  .Landing--Security {
    justify-content: center;
  }
  .Landing--SecurityContent {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    width: 80%;
  }
  .Landing--SecurityContentFeatures {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 3.125rem;
  }
  .Landing--SecurityImg {
    height: 30vh;
    margin: 1.875rem 0;
  }
  .Landing--BrandsContainer {
    width: 70%;
  }
}
@media screen and (max-width: 450px) {
  .Landing--SubTitle {
    font-size: 1.25rem;
  }
  .Landing--Para {
    font-size: 0.90625rem;
    width: 90%;
    line-height: 30px;
    padding: 0.625rem 0 1.875rem 0;
    text-align: center;
  }
  .Landing--Home {
    height: auto;
    min-height: 100vh;
    justify-content: space-around;
  }
  .Landing--HomeAnimation {
    margin: 11vh 0 5vh 0;
  }
  .Landing--HomeAnimationVideo {
    width: 95%;
    margin: 0;
  }
  .Landing--HomeContent {
    width: 90%;
    align-items: center;
    padding-top: 0;
  }
  .Landing--HomeContentBottom {
    justify-content: center;
  }
  .Landing--HomeContentVisaTitle {
    font-size: 1rem;
  }
  .Landing--AnimationTextContent {
    width: 90%;
  }
  .Landing--AnimationTextContentImg {
    height: 10vh;
  }
  .Landing--Features {
    margin: 15vh 0 5vh 0;
  }
  .Landing--FeaturesSticky {
    top: 12vh;
  }
  .Landing--Security {
    padding: 10vh 3vw;
  }
  .Landing--SecurityImg {
    height: 30vh;
  }
  .Landing--SecurityContentFeatures {
    align-items: center;
    margin-top: 0.625rem;
  }
  .Landing--Brands {
    padding: 7vh 0 0 0;
  }
  .Landing--BrandsTitle {
    font-size: 1.25rem;
    width: 60%;
    text-align: center;
    line-height: 30px;
    padding-bottom: 5vh;
  }
  .Landing--BrandsSubTitle {
    font-size: 1.0625rem;
    padding: 0 0 5vh 0;
  }
  .Landing--BrandsContainer {
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .Landing--BrandsContainerImg {
    max-width: 30vw;
    margin-bottom: 3.75rem;
    margin-right: 0;
  }
}
@media screen and (max-width: 395px) {
  .Landing--SubTitle {
    font-size: 1.1875rem;
  }
  .Landing--Para {
    font-size: 0.8125rem;
    line-height: 25px;
  }
}
@media screen and (max-width: 320px) {
  .Landing--Home {
    min-height: 120vh;
  }
}form {
  width: 100%;
  margin: 0 auto;
}

.form {
  background: #0e101c;
  max-width: 80%;
  margin: 0 auto;
}

.App {
  max-width: 100%;
  margin: 0 auto;
}

.formSection--FullWidth {
  width: 100%;
}

.formSection--Active {
  border: 2px dotted #3d8264;
  border-radius: 1rem;
}

.formSection--Relation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.formSection--Tab {
  display: flex;
  gap: 0.5rem;
}

.formSection--Tab .MuiTabPanel-root {
  padding: 0;
}

.formSection--Tab .Mui-selected {
  color: "#232529";
}

.formSection--Buttons {
  display: flex;
  gap: 0.75rem;
}

.formSection--PreviewButton {
  width: fit-content;
  color: #1f2125 !important;
}

.formSection--Section {
  border-radius: 0.5rem;
  border: 2px dotted #919294;
  padding: 0.75rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.formSection--Form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.formSection--GridContainer {
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 0.5rem;
  overflow-y: scroll;
  min-height: 75vh;
  max-height: 78vh;
}

.formSection--Grid {
  display: flex;
}

.formSection--RightGrid {
  position: sticky;
  width: 30%;
  min-height: 75vh;
  max-height: 78vh;
  overflow-y: scroll;
}

.formSection--Text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.formSection--FieldContainer {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.formSection--FieldContainer .MuiFormControlLabel-root {
  margin: 0;
}

.formSection--SubFieldContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formSection--SubFieldContainer .MuiFormControlLabel-root {
  margin: 0;
}

.formSection--SelectOption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.formSection--MultiOptions {
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
}

.formSection--MultiOptions svg {
  cursor: pointer;
}

.formSection--Button {
  width: fit-content;
  color: #4AC08C !important;
}

.formSection--Button :disabled {
  color: rgba(0, 0, 0, 0.25);
}.companySelectionModal--Divider {
  border-color: #d3d3d4;
}
.companySelectionModal--DialogTitle {
  border-bottom: 1px solid #bdbebf;
}
.companySelectionModal--SectionTitle {
  padding-left: 1.5rem;
}
.companySelectionModal--DialogContents {
  padding: 1.5rem !important;
}
.companySelectionModal--DialogAction {
  justify-content: flex-end !important;
  padding: 0.5rem 1.5rem !important;
  background-color: #d3d3d4;
}
.companySelectionModal--DialogAction--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}:root,
.templates,
.pb {

  /* ── Brand ──────────────────────────────────────────────── */
  --brand-green: #2EB273;
  --brand-green-deep: #1A8A56;
  --brand-green-dark: #146B43;
  --brand-navy: #001866;
  --brand-navy-soft: #1B2C6E;

  /* ── Primary scale (green) ──────────────────────────────── */
  --green-50: #F1FBF6;
  --green-100: #E2F5EC;
  --green-200: #C8EBD8;
  --green-300: #A7DEC2;
  --green-400: #6DCB9D;
  --green-500: #2EB273;
  --green-600: #1A8A56;
  --green-700: #146B43;
  --green-800: #0E4D31;
  --green-900: #073220;

  /* ── Neutrals — warm-tinted, calm ───────────────────────── */
  --n-0: #FFFFFF;
  --n-25: #FCFCFD;
  --n-50: #F7F8F9;
  --n-75: #F2F3F5;
  --n-100: #ECEDEF;
  --n-150: #E1E3E6;
  --n-200: #D2D5D9;
  --n-300: #B6BABF;
  --n-400: #9498A0;
  --n-450: #767B83;
  /* AA-capable mid-grey — quaternary text floor (4.5:1 on white) */
  --n-500: #6D7178;
  --n-600: #54585F;
  --n-700: #3D4046;
  --n-800: #25272C;
  --n-900: #15171B;
  --n-950: #0B0C0F;

  /* ── Surfaces ───────────────────────────────────────────── */
  --surface-canvas: var(--n-25);
  /* page bg */
  --surface-raised: var(--n-0);
  /* cards, top bar, main panels */
  --surface-sunken: var(--n-50);
  /* sidebars, toolbars */
  --surface-muted: var(--n-75);
  /* inactive inputs, subtle wells */
  --surface-hover: var(--n-75);
  --surface-active: var(--n-100);
  --surface-overlay: rgba(15, 17, 21, 0.32);
  /* modal/sheet scrim (added 2A) */
  --surface-overlay-strong: rgba(15, 17, 21, 0.56);
  /* fullscreen scrim (added 2A) */
  --surface-inverse: var(--n-900);
  /* tooltip, snackbar surface (added 2A) */
  --text-on-inverse: var(--n-0);
  /* text on inverse surface (added 2A) */

  /* ── Borders ────────────────────────────────────────────── */
  --border-subtle: var(--n-100);
  --border-default: var(--n-150);
  --border-strong: var(--n-200);
  --border-divider: var(--n-100);
  /* inline cell dividers (added 2A) */
  --border-focus: var(--green-500);
  --border-focus-ai: var(--ai-fg);
  /* added 2A */
  --border-focus-danger: var(--danger);
  /* added 2A */

  /* ── Text ───────────────────────────────────────────────── */
  --text-primary: var(--n-900);
  --text-secondary: var(--n-700);
  --text-tertiary: var(--n-500);
  --text-quaternary: var(--n-450);
  /* a11y 4.3 — was n-400 (2.89:1, sub-AA on real text) */
  --text-disabled: var(--n-300);
  --text-inverse: var(--n-0);
  --text-brand: var(--green-700);
  /* a11y 4.4 — was green-600 (4.36:1, just-misses AA for text) */
  --text-brand-strong: var(--green-700);

  /* ── Action role — 3-tier brand indirection (primitive → brand → role)
     Components consume --color-action ONLY; a new product/white-label
     theme reskins by overriding --brand-action, never by touching a
     component (gap-audit F1). Fill is green-700 so white text clears AA
     at 6.53:1 — brand-green #2EB273 (2.72:1) stays for logo/identity. ── */
  --brand-action: var(--green-700);
  /* tier 2 — overridable per product/theme */
  --brand-action-hover: var(--green-800);
  --brand-action-active: var(--green-900);
  --color-action: var(--brand-action);
  /* tier 3 — the role components use */
  --color-action-hover: var(--brand-action-hover);
  --color-action-active: var(--brand-action-active);
  --color-on-action: #FFFFFF;
  /* text/icon on action fill */

  /* ── Semantic colors ────────────────────────────────────── */
  --success: #0C8C6A;
  /* OWN teal-shifted ramp (~+15° off brand green) so brand green never signals routine status (1.1/7.1) */
  --success-bg: #D8F3EB;
  --success-bg-strong: #B6E8D8;

  --warning: #B26B0F;
  --warning-bg: #FEF1DD;
  --warning-bg-strong: #FCDFB1;

  --danger: #C2363A;
  --danger-bg: #FBE3E5;
  --danger-bg-strong: #F5C7CB;

  --info: #2A6FDB;
  --info-bg: #E6EEF9;
  --info-bg-strong: #CDDDF3;

  --neutral-bg: var(--n-100);
  --neutral-fg: var(--n-700);

  /* ── Row selection (brand-tinted, dark-aware) ──────────── */
  --row-selected-bg: #EAF1FB;
  /* neutral/info tint — NOT brand green (1.1) */
  --row-selected-bg-hover: #D9E7F8;

  /* ── Semantic strong-fg (text on *-bg-strong) — added 2A ── */
  --success-fg-strong: #07543F;
  /* teal-dark — matches de-branded success ramp */
  --warning-fg-strong: #5C3604;
  --danger-fg-strong: #7A1A1F;
  --info-fg-strong: #133A7E;

  /* ── AI accent (purple) — for AI-suggested fields, agents ── */
  --ai-fg: #6D45D9;
  --ai-bg: #EFE9FC;
  --ai-bg-strong: #DDD0F8;
  --ai-fg-deep: #5535B8;
  /* filled-AI button bg (added 2A) */
  --ai-on-fill: #FFFFFF;
  /* text on ai-fg-deep (added 2A) */

  /* ── Tag palette (8 hues, low-chroma) ───────────────────── */
  --tag-slate-bg: #ECEDEF;
  --tag-slate-fg: #3D4046;
  --tag-green-bg: #E2F5EC;
  --tag-green-fg: #1A6B43;
  --tag-blue-bg: #E6EEF9;
  --tag-blue-fg: #1F4FA8;
  --tag-purple-bg: #EFE9FC;
  --tag-purple-fg: #5535B8;
  --tag-amber-bg: #FEF1DD;
  --tag-amber-fg: #8A540B;
  --tag-rose-bg: #FCE5E8;
  --tag-rose-fg: #A8232A;
  --tag-teal-bg: #DDF3F1;
  --tag-teal-fg: #156B66;
  --tag-pink-bg: #FBE4F1;
  --tag-pink-fg: #9D2B6F;

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* compact scale — Attio-tight
     Half-step tokens (3xs, 2_5xs) added during audit to absorb stray sizes
     (9.5px, 10.5px, 11.5px) that were hardcoded across components. */
  --text-3xs: 9px;
  /* @restricted — numeric count-chips ONLY, never words (a11y 1.4); enforced by the font-size disallow-list in .stylelintrc.json. Legit count-chip uses opt in with a stylelint-disable-line comment. */
  --text-2_5xs: 10px;
  /* meta, kbd, eyebrows — section heads */
  --text-2xs: 10px;
  /* @deprecated — duplicate of --text-2_5xs; migrate to --text-2_5xs (1.2) */
  --text-xs: 11px;
  /* table meta, captions, footer text */
  --text-sm: 12px;
  /* default body in dense UI, buttons, chips, table cells */
  --text-md: 13px;
  /* preferred body, primary buttons */
  --text-base: 14px;
  /* page titles in narrow chrome */
  --text-lg: 15px;
  /* page title default */
  --text-xl: 18px;
  /* h2 */
  --text-2xl: 22px;
  /* h1 */
  --text-3xl: 26px;
  /* display */
  --text-4xl: 32px;
  /* hero */
  --text-5xl: 44px;
  /* hero page title */

  --leading-1: 1;
  /* @kind font */
  /* single-line dense cells (added 2A) */
  --leading-tight-1: 1.15;
  /* @kind font */
  /* dense headings (added 2A) */
  --leading-tight: 1.25;
  /* @kind font */
  --leading-snug: 1.35;
  /* @kind font */
  --leading-normal: 1.5;
  /* @kind font */

  /* Font weights — explicit tokens so HC theme can shift +100 (added 2A) */
  --fw-regular: 400;
  /* @kind font */
  --fw-medium: 500;
  /* @kind font */
  --fw-semibold: 600;
  /* @kind font */
  --fw-bold: 700;
  /* @kind font */

  --tracking-tight: -0.018em;
  /* @kind font */
  /* display */
  --tracking-snug: -0.011em;
  /* @kind font */
  /* headings */
  --tracking-normal: -0.003em;
  /* @kind font */
  /* body — Attio is barely-tracked */
  --tracking-wide: 0.04em;
  /* @kind font */
  /* uppercase eyebrows */

  /* ── Spacing — 4px grid ─────────────────────────────────── */
  --s-0: 0px;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 12px;
  --s-7: 14px;
  /* added 2A — absorbs ~80 stray 14px values across composites */
  --s-8: 16px;
  --s-10: 20px;
  --s-12: 24px;
  --s-16: 32px;
  --s-20: 40px;
  --s-24: 48px;
  --s-32: 64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  /* default — buttons, inputs, chips */
  --r-lg: 8px;
  /* cards, popovers */
  --r-xl: 10px;
  /* sheets, modals */
  --r-2xl: 14px;
  --r-full: 9999px;

  /* ── Shadows — ultra subtle ─────────────────────────────── */
  --shadow-xs: 0 1px 0 rgba(15, 17, 21, .04);
  --shadow-sm: 0 1px 2px rgba(15, 17, 21, .04),
    0 0 0 1px rgba(15, 17, 21, .04);
  --shadow-md: 0 2px 4px rgba(15, 17, 21, .04),
    0 1px 2px rgba(15, 17, 21, .04),
    0 0 0 1px rgba(15, 17, 21, .05);
  --shadow-lg: 0 12px 32px -8px rgba(15, 17, 21, .14),
    0 4px 8px -2px rgba(15, 17, 21, .06),
    0 0 0 1px rgba(15, 17, 21, .04);
  --shadow-xl: 0 24px 48px -12px rgba(15, 17, 21, .22),
    0 8px 16px -4px rgba(15, 17, 21, .08),
    0 0 0 1px rgba(15, 17, 21, .04);
  --shadow-focus: 0 0 0 3px rgba(46, 178, 115, .18);
  --shadow-focus-ai: 0 0 0 3px rgba(109, 69, 217, .18);
  --shadow-focus-danger: 0 0 0 3px rgba(194, 54, 58, .18);
  /* added 2A */
  --shadow-inset-divider-b: inset 0 -1px 0 var(--border-subtle);
  /* added 2A */
  --shadow-inset-divider-t: inset 0 1px 0 var(--border-subtle);
  /* added 2A */

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* @kind other */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* @kind other */
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  /* @kind other */
  /* modal entry (added 2A) */
  --ease-decelerate: cubic-bezier(0, 0, .2, 1);
  /* @kind other */
  /* sheet entry (added 2A) */
  --dur-fast: 120ms;
  /* @kind other */
  --dur-base: 180ms;
  /* @kind other */
  --dur-slow: 260ms;
  /* @kind other */

  /* ── Component heights — Attio-compact ──────────────────── */
  --h-xs: 20px;
  --h-sm: 24px;
  --h-md: 28px;
  /* default buttons, inputs */
  --h-lg: 32px;
  --row-h: 30px;
  /* table row */
  --row-h-c: 28px;
  /* table row, compact */

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-w: 220px;
  --sidebar-w-mini: 56px;
  --topbar-h: 44px;
  --subbar-h: 40px;
  --content-pad-x: 20px;
  --content-pad-y: 16px;

  /* ── Responsive scale standards ─────────────────────────────
     Five breakpoints (added 2A). Tokens above are *desktop* values.
     Mobile/tablet overrides live in responsive.css. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-mobile: 640px;
  /* @deprecated alias — use --bp-md/--bp-sm (1.2) */
  --bp-tablet: 1024px;
  /* @deprecated alias — use --bp-lg (1.2) */
  --bp-lg: 1280px;
  --bp-xl: 1440px;
  --bp-2xl: 1920px;

  /* Container-query breakpoints — for composites that need to
     respond to their container width, not the viewport (added 2A) */
  --cq-sm: 360px;
  --cq-md: 600px;
  --cq-lg: 900px;

  /* Touch-target floor for mobile (WCAG 2.5.5 ≥ 44px) */
  --touch-min: 44px;
  /* @kind spacing */

  /* Interactive hit-target floor — decoupled from painted size (T1).
     Fine pointer 32px; coarse (touch) bumped to --touch-min below. */
  --hit-min: 32px;
  /* @kind spacing */

  /* ── Z-index scale (added 2A) — every overlay must use these.
     Raw values (49, 48, 30, 2, 1) flagged in audit are replaced. */
  --z-base: 1;
  /* @kind other */
  --z-sticky: 20;
  /* @kind other */
  --z-dropdown: 30;
  /* @kind other */
  --z-drawer: 35;
  /* @kind other */
  --z-popover: 40;
  /* @kind other */
  --z-tooltip: 45;
  /* @kind other */
  --z-modal-scrim: 48;
  /* @kind other */
  --z-modal: 50;
  /* @kind other */
  --z-toast: 60;
  /* @kind other */
  --z-debug: 99;
  /* @kind other */

  /* Density mode — set by responsive.css per breakpoint.
     Components consume these instead of hardcoding heights. */
  --h-control: var(--h-md);
  /* default control height */
  --h-control-sm: var(--h-sm);
  --h-row: var(--row-h);
  --pad-x: var(--content-pad-x);
  --pad-y: var(--content-pad-y);

}

/* ═══════════════════════════════════════════════════════════════
   ERPForce PDF / Document Template Builder
   Builder chrome + the paginated A4 document (.pbd-*)
   Light theme · matches Reports app · uses v2 tokens
   ═══════════════════════════════════════════════════════════════ */

html,
body {
  height: 100%;
}

body {
  background: var(--surface-sunken);
  overflow: hidden;
}

#root {
  height: 100%;
}

.pb,
.pb *,
.pb *::before,
.pb *::after {
  box-sizing: border-box;
}

.pb {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ── top bar ────────────────────────────────────────────────── */
.pb-top {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
  z-index: var(--z-sticky);
}

.pb-brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.pb-brand img {
  height: 18px;
  width: auto;
  display: block;
}

.pb-brand-tag {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-quaternary);
  padding: 3px 7px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
}

.pb-crumb {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.pb-crumb svg {
  width: 13px;
  height: 13px;
}

.pb-crumb b {
  color: var(--text-primary);
  font-weight: 600;
}

.pb-doc-input {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 3px 7px;
  max-width: 240px;
  background: transparent;
}

.pb-doc-input:hover {
  border-color: var(--border-default);
}

.pb-doc-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
  background: var(--surface-raised);
}

.pb-top-sp {
  flex: 1;
}

/* generic buttons */
.pbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 30px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.pbtn svg {
  width: 14px;
  height: 14px;
}

.pbtn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pbtn--primary {
  background: var(--color-action);
  border-color: transparent;
  color: var(--color-on-action);
  box-shadow: var(--shadow-sm);
}

.pbtn--primary:hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}

.pbtn--ai {
  background: var(--ai-fg-deep);
  border-color: transparent;
  color: #fff;
}

.pbtn--ai:hover {
  background: var(--ai-fg);
  color: #fff;
}

.pbtn--ghost {
  border-color: transparent;
  background: transparent;
}

.pbtn--ghost:hover {
  background: var(--surface-hover);
}

.pbtn--sm {
  height: 26px;
  padding: 0 var(--s-4);
  font-size: var(--text-xs);
}

.pbtn--icon {
  width: 30px;
  padding: 0;
  justify-content: center;
}

.pbtn.is-on {
  background: var(--green-50);
  border-color: var(--green-300);
  color: var(--text-brand-strong);
}

.pbtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* segmented */
.pb-seg {
  display: inline-flex;
  background: var(--surface-muted);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}

.pb-seg button {
  height: 24px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.pb-seg button svg {
  width: 12px;
  height: 12px;
}

.pb-seg button.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

.pb-seg button:not(.is-active):hover {
  color: var(--text-secondary);
}

/* ── body 3-column workspace ────────────────────────────────── */
.pb-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* left rail */
.pb-rail {
  width: 248px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pb-rail--collapsed {
  width: 0;
  overflow: hidden;
  border: 0;
}

.pb-rail-tabs {
  display: flex;
  padding: var(--s-4) var(--s-4) 0;
  gap: var(--s-2);
}

.pb-rail-tab {
  flex: 1;
  height: 28px;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.pb-rail-tab svg {
  width: 13px;
  height: 13px;
}

.pb-rail-tab.is-active {
  background: var(--surface-active);
  color: var(--text-primary);
}

.pb-rail-body {
  flex: 1;
  overflow: auto;
  padding: var(--s-4);
  scrollbar-width: thin;
}

/* field tree */
.pb-fnote {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-muted);
  border-radius: var(--r-md);
}

.pb-fnote code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-brand-strong);
  background: var(--green-50);
  padding: 1px 4px;
  border-radius: 3px;
}

.pb-fgroup {
  margin-bottom: var(--s-2);
}

.pb-fgroup-h {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.pb-fgroup-h:hover {
  background: var(--surface-hover);
}

.pb-fgroup-h svg.pb-fchev {
  width: 13px;
  height: 13px;
  color: var(--text-quaternary);
  transition: transform var(--dur-fast);
}

.pb-fgroup-h.is-open svg.pb-fchev {
  transform: rotate(90deg);
}

.pb-fgroup-ic {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--text-tertiary);
}

.pb-fgroup-ic svg {
  width: 13px;
  height: 13px;
}

.pb-fgroup-c {
  font-size: var(--text-2xs);
  color: var(--text-quaternary);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.pb-fields {
  display: flex;
  flex-direction: column;
  padding: var(--s-1) 0 var(--s-3) 30px;
  gap: 1px;
}

.pb-field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.pb-field:hover {
  background: var(--green-50);
}

.pb-field-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-brand-strong);
  white-space: nowrap;
}

.pb-field-lbl {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-field-ins {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: var(--brand-green);
  opacity: 0;
  flex-shrink: 0;
}

.pb-field:hover .pb-field-ins {
  opacity: 1;
}

.pb-field-ins svg {
  width: 12px;
  height: 12px;
}

.pb-field--loop .pb-field-tag {
  color: var(--ai-fg);
}

/* template switcher list */
.pb-tlist {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pb-titem {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
}

.pb-titem:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.pb-titem.is-active {
  border-color: var(--green-400);
  background: var(--green-50);
}

.pb-titem-ic {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pb-titem-ic svg {
  width: 15px;
  height: 15px;
}

.pb-titem-t {
  font-size: var(--text-sm);
  font-weight: 600;
}

.pb-titem-s {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

/* ── center: editor + preview ───────────────────────────────── */
.pb-center {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}

/* code editor */
.pb-editor {
  width: 44%;
  min-width: 360px;
  max-width: 620px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #fbfbfc;
  border-right: 1px solid var(--border-default);
  min-height: 0;
}

.pb-editor--hidden {
  display: none;
}

.pb-editor-bar {
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.pb-editor-bar-t {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pb-editor-bar-t svg {
  width: 13px;
  height: 13px;
  color: var(--text-tertiary);
}

.pb-editor-dirty {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
}

.pb-editor-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
}

.pb-gutter {
  flex-shrink: 0;
  padding: 12px 0;
  text-align: right;
  background: #f4f5f7;
  color: var(--text-quaternary);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  user-select: none;
  overflow: hidden;
  border-right: 1px solid var(--border-subtle);
}

.pb-gutter-inner span {
  display: block;
  padding: 0 10px 0 12px;
}

.pb-code-scroll {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.pb-code-area,
.pb-code-hl {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  word-wrap: normal;
  box-sizing: border-box;
}

.pb-code-hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  color: var(--n-800);
  overflow: visible;
  will-change: transform;
}

.pb-code-area {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: var(--n-900);
  border: 0;
  outline: none;
  resize: none;
  -webkit-text-fill-color: transparent;
  scrollbar-width: thin;
}

.pb-code-area::selection {
  background: rgba(46, 178, 115, .24);
  -webkit-text-fill-color: transparent;
}

/* token colors */
.tk-mus {
  color: var(--ai-fg);
}

.tk-blk {
  color: #1f7a4d;
  font-weight: 600;
}

.tk-tag {
  color: #2a6fdb;
}

.tk-attr {
  color: #8a540b;
}

.tk-str {
  color: #1a8a56;
}

.tk-com {
  color: var(--text-quaternary);
  font-style: italic;
}

/* preview surface */
.pb-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #4b4f54;
  min-height: 0;
}

.pb-preview-bar {
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
}

.pb-preview-bar-t {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.pb-preview-pages {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.pb-zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.pb-zoom-val {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  min-width: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pb-zbtn {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

.pb-zbtn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pb-preview-scroll {
  flex: 1;
  overflow: auto;
  padding: 28px;
  scrollbar-width: thin;
}

.pb-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform-origin: top center;
}

/* selection halo on a doc block */
.pb-sel-outline {
  outline: 2px solid var(--ai-fg);
  outline-offset: 2px;
  border-radius: 2px;
}

.pbd [data-block] {
  cursor: default;
}

.pb-pick .pbd [data-block] {
  cursor: pointer;
}

.pb-pick .pbd [data-block]:hover {
  outline: 1.5px dashed var(--info);
  outline-offset: 2px;
}

/* ── AI panel (right dock) ──────────────────────────────────── */
.pb-ai {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pb-ai--collapsed {
  width: 0;
  overflow: hidden;
  border: 0;
}

.pb-ai-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.pb-ai-spark {
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  background: var(--ai-fg);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(85, 53, 184, .3);
}

.pb-ai-spark svg {
  width: 15px;
  height: 15px;
}

.pb-ai-head-t {
  font-size: var(--text-sm);
  font-weight: 600;
}

.pb-ai-head-s {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 1px;
}

.pb-ai-scroll {
  flex: 1;
  overflow: auto;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  scrollbar-width: thin;
}

.pb-msg {
  display: flex;
  gap: var(--s-4);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.pb-msg-av {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.pb-msg-av svg {
  width: 13px;
  height: 13px;
}

.pb-msg--ai .pb-msg-av {
  background: var(--ai-bg);
  color: var(--ai-fg);
}

.pb-msg--user .pb-msg-av {
  background: var(--surface-active);
  color: var(--text-secondary);
}

.pb-msg-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
  color: var(--text-secondary);
}

.pb-msg-body b {
  color: var(--text-primary);
  font-weight: 600;
}

.pb-msg-body code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: var(--surface-muted);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text-brand-strong);
}

.pb-msg--user .pb-msg-body {
  color: var(--text-primary);
}

.pb-msg-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ai-fg);
  background: var(--ai-bg);
  border-radius: var(--r-sm);
  padding: 3px 7px;
}

.pb-msg-tag svg {
  width: 11px;
  height: 11px;
}

.pb-msg-undo {
  margin-top: var(--s-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pb-msg-undo:hover {
  color: var(--text-primary);
}

.pb-ai-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.pb-ai-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-fg);
  opacity: .4;
  animation: pb-blink 1.2s infinite;
}

.pb-ai-typing i:nth-child(2) {
  animation-delay: .2s;
}

.pb-ai-typing i:nth-child(3) {
  animation-delay: .4s;
}

@keyframes pb-blink {

  0%,
  60%,
  100% {
    opacity: .25;
  }

  30% {
    opacity: 1;
  }
}

.pb-ai-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle);
  padding: var(--s-4);
}

/* AI scope selector — pick which part of the document to improve */
.pb-scope {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.pb-scope-lbl {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
}

.pb-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
}

.pb-scope-btn:hover {
  border-color: var(--ai-bg-strong);
}

.pb-scope-btn>svg {
  width: 13px;
  height: 13px;
  color: var(--ai-fg);
}

.pb-scope-btn>svg:last-child {
  width: 12px;
  height: 12px;
  color: var(--text-quaternary);
  margin-left: -1px;
}

.pb-scope-btn.is-scoped {
  color: var(--ai-fg-deep);
  background: var(--ai-bg);
  border-color: var(--ai-bg-strong);
}

.pb-scope-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 248px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--s-2);
  scrollbar-width: thin;
}

.pb-scope-menu button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: left;
}

.pb-scope-menu button:hover {
  background: var(--ai-bg);
  color: var(--ai-fg-deep);
}

.pb-scope-menu button.is-current {
  color: var(--ai-fg-deep);
  font-weight: 600;
}

.pb-scope-menu button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ai-fg);
}

.pb-scope-menu button span {
  flex: 1;
}

.pb-scope-menu button .pb-scope-chk,
.pb-scope-menu button svg:last-child:not(:first-child) {
  color: var(--brand-green);
}

.pb-scope-sep {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  padding: var(--s-3) var(--s-3) var(--s-1);
}

.pb-scope-hint {
  font-size: var(--text-2_5xs);
  color: var(--ai-fg);
  background: var(--ai-bg);
  border-radius: var(--r-full);
  padding: 3px 9px;
}

.pb-msg-scope {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2_5xs);
  font-weight: 700;
  color: var(--ai-fg-deep);
  background: var(--ai-bg);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  margin-bottom: 4px;
  vertical-align: middle;
}

.pb-msg-scope svg {
  color: var(--ai-fg);
}

.pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 var(--s-4);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
}

.pb-chip svg {
  width: 12px;
  height: 12px;
  color: var(--ai-fg);
}

.pb-chip:hover {
  background: var(--ai-bg);
  border-color: var(--ai-bg-strong);
  color: var(--ai-fg-deep);
}

.pb-ai-input {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
  background: var(--surface-raised);
}

.pb-ai-input:focus-within {
  border-color: var(--border-focus-ai);
  box-shadow: var(--shadow-focus-ai);
}

.pb-ai-input textarea {
  flex: 1;
  border: 0;
  outline: none;
  resize: none;
  font-size: var(--text-sm);
  line-height: 1.45;
  max-height: 96px;
  background: transparent;
}

.pb-ai-send {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--ai-fg-deep);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pb-ai-send svg {
  width: 14px;
  height: 14px;
}

.pb-ai-send:disabled {
  background: var(--surface-active);
  color: var(--text-quaternary);
}

/* inline suggestion card (selected element) */
.pb-inline {
  border: 1px solid var(--ai-bg-strong);
  border-radius: var(--r-md);
  background: color-mix(in oklch, var(--ai-bg) 45%, var(--surface-raised));
  padding: var(--s-4);
}

.pb-inline-h {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ai-fg-deep);
  margin-bottom: var(--s-3);
}

.pb-inline-h svg {
  width: 13px;
  height: 13px;
}

.pb-inline-acts {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pb-inline-act {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 28px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.pb-inline-act svg {
  width: 13px;
  height: 13px;
  color: var(--ai-fg);
}

.pb-inline-act:hover {
  border-color: var(--ai-bg-strong);
  color: var(--text-primary);
}

/* toast */
.pb-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  animation: pb-toast-in var(--dur-base) var(--ease-out);
}

.pb-toast svg {
  width: 14px;
  height: 14px;
  color: var(--green-400);
}

@keyframes pb-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

/* ═══════════════ GALLERY (landing) ═══════════════════════════ */
.pb-gallery {
  flex: 1;
  overflow: auto;
  background: var(--surface-canvas);
}

.pb-gal-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 32px 64px;
}

.pb-gal-eye {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-brand);
}

.pb-gal-h {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-top: var(--s-3);
}

.pb-gal-sub {
  font-size: var(--text-base);
  color: var(--text-tertiary);
  margin-top: var(--s-3);
  max-width: 620px;
  line-height: 1.5;
}

.pb-gal-ai {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-12);
  padding: var(--s-8);
  border: 1px solid var(--ai-bg-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, color-mix(in oklch, var(--ai-bg) 50%, var(--surface-raised)), var(--surface-raised) 80px);
}

.pb-gal-ai-spark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--ai-fg);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(85, 53, 184, .3);
}

.pb-gal-ai-spark svg {
  width: 22px;
  height: 22px;
}

.pb-gal-ai-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
}

.pb-gal-ai-field:focus-within {
  border-color: var(--border-focus-ai);
  box-shadow: var(--shadow-focus-ai);
}

.pb-gal-ai-field input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: var(--text-md);
  background: transparent;
}

.pb-gal-sec {
  margin-top: var(--s-16);
}

.pb-gal-sec-h {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pb-gal-sec-h .pb-fgroup-c {
  margin-left: 0;
}

.pb-gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--s-6);
}

.pb-card {
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
}

.pb-card-primary {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2_5xs);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-on-action);
  background: var(--color-action);
  border-radius: var(--r-full);
  padding: 3px 9px 3px 7px;
  box-shadow: var(--shadow-sm);
}

.pb-card-primary svg {
  width: 11px;
  height: 11px;
}

/* template-variant picker (toolbar) */
.pb-varpick {
  position: relative;
}

.pb-varpick .pb-stnpick-menu {
  right: auto;
  left: 0;
  width: 332px;
}

.pb-varpick-dot {
  width: 11px;
  height: 11px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.pb-varpick-star {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-on-action);
  flex-shrink: 0;
}

.pb-varpick-star svg {
  width: 10px;
  height: 10px;
}

.pb-varpick-tag {
  margin-left: auto;
  font-size: var(--text-2_5xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-green);
  background: var(--green-50, rgba(46, 178, 115, .1));
  border: 1px solid var(--green-100, rgba(46, 178, 115, .25));
  border-radius: var(--r-full);
  padding: 2px 7px;
}

.pb-varpick-menu .pb-stnpick-foot button:disabled {
  opacity: .6;
  cursor: default;
}

.pb-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pb-card-thumb {
  height: 156px;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.pb-card-mini {
  width: 116px;
  background: #fff;
  box-shadow: var(--shadow-md);
  transform: scale(1);
  border-radius: 2px;
  overflow: hidden;
}

.pb-card-meta {
  padding: var(--s-5);
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
}

.pb-card-ic {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pb-card-ic svg {
  width: 15px;
  height: 15px;
}

.pb-card-t {
  font-size: var(--text-sm);
  font-weight: 600;
}

.pb-card-s {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.4;
}

/* accent helpers */
.acc-green {
  background: var(--green-100);
  color: var(--green-700);
}

.acc-blue {
  background: var(--info-bg);
  color: var(--info);
}

.acc-purple {
  background: var(--ai-bg);
  color: var(--ai-fg);
}

.acc-amber {
  background: var(--warning-bg);
  color: var(--warning);
}

.acc-teal {
  background: var(--tag-teal-bg);
  color: var(--tag-teal-fg);
}

.acc-rose {
  background: var(--tag-rose-bg);
  color: var(--tag-rose-fg);
}

.acc-slate {
  background: var(--tag-slate-bg);
  color: var(--tag-slate-fg);
}

.acc-navy {
  background: #E3E8F7;
  color: var(--brand-navy);
}

/* ═══════════════ PREVIEW-FIRST BUILDER ═══════════════════════ */
/* slim option bar (à la print preview) */
.pb-bar {
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
  z-index: var(--z-sticky);
}

.pb-bar-title {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}

.pb-bar-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 30px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.pb-bar-back:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pb-bar-back svg {
  width: 15px;
  height: 15px;
}

.pb-bar-doc {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pb-bar-doc-ic {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pb-bar-doc-ic svg {
  width: 14px;
  height: 14px;
}

.pb-bar-name {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 3px 7px;
  max-width: 220px;
  background: transparent;
}

.pb-bar-name:hover {
  border-color: var(--border-default);
}

.pb-bar-name:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.pb-bar-sp {
  flex: 1;
}

.pb-bar-grp {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pb-bar-grp+.pb-bar-grp {
  padding-inline-start: var(--s-5);
  border-inline-start: 1px solid var(--border-subtle);
}

.pb-bar-lbl {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-quaternary);
}

.pb-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.pb-toggle input {
  accent-color: var(--brand-green);
  width: 14px;
  height: 14px;
}

/* dark stage + preview */
.pb-stage {
  flex: 1;
  position: relative;
  min-height: 0;
  display: flex;
  background: #4b4f54;
  overflow: hidden;
}

.pb-stage-scroll {
  flex: 1;
  overflow: auto;
  padding: 30px 24px 80px;
  scrollbar-width: thin;
}

.pb-stage .pb-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform-origin: top center;
}

/* floating zoom pill */
.pb-zoomfloat {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-popover);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(20, 23, 27, .82);
  backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  padding: 5px 8px;
  box-shadow: var(--shadow-lg);
}

.pb-zoomfloat button {
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: #d4d6d9;
}

.pb-zoomfloat button.pb-zf-text-btn {
  width: auto;
  padding: 0 10px;
  gap: 4px;
  display: flex;
  font-size: var(--text-xs);
  font-weight: 500;
}

.pb-zoomfloat button:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.pb-zoomfloat .pb-zoom-val {
  color: #fff;
  font-size: var(--text-xs);
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pb-zoomfloat .pb-zoom-pages {
  color: #9da1a6;
  font-size: var(--text-xs);
  padding-left: var(--s-3);
  margin-left: var(--s-2);
  border-left: 1px solid rgba(255, 255, 255, .16);
}

/* slide-in customize drawer */
.pb-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 408px;
  background: var(--surface-raised);
  border-left: 1px solid var(--border-default);
  box-shadow: -12px 0 32px -16px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--dur-slow) var(--ease-out), width var(--dur-base);
  z-index: var(--z-drawer);
  min-height: 0;
}

.pb-drawer--wide {
  width: 660px;
}

.pb-drawer--closed {
  transform: translateX(101%);
  box-shadow: none;
}

.pb-drawer-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.pb-dtab {
  height: 32px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.pb-dtab svg {
  width: 14px;
  height: 14px;
}

.pb-dtab.is-active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--brand-green);
}

.pb-dtab:not(.is-active):hover {
  color: var(--text-secondary);
}

.pb-drawer-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.pb-drawer-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pb-drawer-close svg {
  width: 15px;
  height: 15px;
}

.pb-drawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* brand / header-footer form */
.pb-form {
  flex: 1;
  overflow: auto;
  padding: var(--s-6);
  scrollbar-width: thin;
}

.pb-form-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background: var(--ai-bg);
  border-radius: var(--r-md);
  color: var(--ai-fg-deep);
  display: flex;
  gap: var(--s-3);
}

.pb-form-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pb-form-sec {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-quaternary);
  margin: var(--s-6) 0 var(--s-4);
}

.pb-fld {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.pb-fld label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.pb-fld input,
.pb-fld textarea {
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  font-size: var(--text-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.pb-fld textarea {
  height: auto;
  padding: var(--s-3) var(--s-4);
  resize: vertical;
  min-height: 52px;
  line-height: 1.45;
}

.pb-fld input:focus,
.pb-fld textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.pb-fld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.pb-fld-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ai-fg-deep);
}

/* swatches */
.pb-swatches {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pb-swatch {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}

.pb-swatch.is-sel {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--surface-raised) inset;
}

/* HTML tab layout inside drawer */
.pb-htmltab {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
}

.pb-htmltab .pb-rail {
  width: 220px;
}

.pb-htmltab .pb-editor {
  width: auto;
  flex: 1;
  min-width: 0;
  max-width: none;
  border-right: 0;
}

.pb-ai-dock {
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════
   v3 — classic ERP designer shell (left rail · canvas · dock)
   ═══════════════════════════════════════════════════════════════ */
.pb-bar-div {
  width: 1px;
  height: 20px;
  background: var(--border-default);
}

.pb-bar-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
  margin-left: var(--s-2);
  white-space: nowrap;
}

.pb-bar-stat svg {
  width: 12px;
  height: 12px;
}

.pb-bar-stat.is-saved {
  color: var(--text-tertiary);
}

.pb-bar-stat.is-dirty {
  color: var(--warning-fg-strong);
  background: var(--warning-bg);
}

.pb-bar-dirty {
  color: var(--warning);
  display: grid;
  place-items: center;
}

.pb-bar-dirty svg {
  width: 12px;
  height: 12px;
}

.pb-srv {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-brand-strong);
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: var(--r-full);
  padding: 3px 9px;
  margin-right: var(--s-2);
}

.pb-srv svg {
  width: 12px;
  height: 12px;
}

.pb-work {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* left rail */
.pb-side {
  width: 312px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pb-side-head {
  flex-shrink: 0;
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.pb-side-h-t {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-quaternary);
}

.pb-side-h-s {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-left: auto;
}

.pb-side-collapse {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  margin-left: var(--s-3);
  flex-shrink: 0;
}

.pb-side-collapse:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pb-side-collapse svg {
  width: 15px;
  height: 15px;
}

.pb-side-scroll {
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
}

/* control sections */
.cx-sec {
  border-bottom: 1px solid var(--border-subtle);
}

.cx-sec-h {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  height: 42px;
  padding: 0 var(--s-6);
  text-align: left;
}

.cx-sec-h:hover {
  background: var(--surface-hover);
}

.cx-sec-ic {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.cx-sec-ic svg {
  width: 14px;
  height: 14px;
}

.cx-sec-t {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.cx-sec-chev {
  width: 15px;
  height: 15px;
  color: var(--text-quaternary);
  transition: transform var(--dur-fast);
}

.cx-sec.is-open .cx-sec-chev {
  transform: rotate(180deg);
}

.cx-sec-body {
  padding: var(--s-3) var(--s-6) var(--s-6);
}

.cx-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-muted);
  border-radius: var(--r-sm);
}

.cx-divline {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--s-5) 0;
}

.cx-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 34px;
  padding: var(--s-2) 0;
}

.cx-row-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}

.cx-row-lbl {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.cx-row-sub {
  font-size: var(--text-2_5xs);
  color: var(--text-quaternary);
}

.cx-row-c {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.cx-row:has(.cx-seg.is-full),
.cx-row:has(.cx-area),
.cx-row:has(.cx-range) {
  align-items: flex-start;
  flex-direction: column;
  gap: var(--s-3);
}

.cx-row:has(.cx-seg.is-full) .cx-row-c,
.cx-row:has(.cx-area) .cx-row-c,
.cx-row:has(.cx-range) .cx-row-c {
  margin-left: 0;
  width: 100%;
  justify-content: stretch;
}

/* toggle switch */
.cx-switch {
  width: 34px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--n-200);
  position: relative;
  transition: background var(--dur-base);
  flex-shrink: 0;
}

.cx-switch.is-on {
  background: var(--brand-green);
}

.cx-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.cx-switch.is-on .cx-switch-dot {
  transform: translateX(14px);
}

/* segmented */
.cx-seg {
  display: inline-flex;
  background: var(--surface-muted);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}

.cx-seg.is-full {
  display: flex;
  width: 100%;
}

.cx-seg button {
  height: 26px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.cx-seg.is-full button {
  flex: 1;
}

.cx-seg button svg {
  width: 13px;
  height: 13px;
}

.cx-seg button.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

.cx-seg button:not(.is-active):hover {
  color: var(--text-secondary);
}

/* select */
.cx-select {
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  font-size: var(--text-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  min-width: 150px;
  cursor: pointer;
}

.cx-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* range */
.cx-range {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
}

.cx-range input[type=range] {
  flex: 1;
  accent-color: var(--brand-green);
  height: 4px;
}

.cx-range-v {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

/* text inputs */
.cx-input {
  height: 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  font-size: var(--text-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  width: 100%;
  min-width: 0;
}

.cx-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.cx-area {
  height: auto;
  min-height: 54px;
  padding: var(--s-3) var(--s-4);
  resize: vertical;
  line-height: 1.45;
}

/* swatches */
.cx-swatches {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cx-swatch {
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
}

.cx-swatch.is-sel {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--surface-raised) inset;
}

/* line-items editor */
.cx-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.cx-item {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: var(--surface-canvas);
}

.cx-item-top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.cx-item-n {
  width: 18px;
  height: 18px;
  border-radius: var(--r-xs);
  background: var(--surface-active);
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cx-item-name {
  flex: 1;
}

.cx-item-move {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.cx-item-move button {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

.cx-item-move button:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.cx-item-move button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.cx-item-move button svg {
  width: 13px;
  height: 13px;
}

.cx-item-del:hover {
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.cx-item-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.cx-item-grid--2 {
  grid-template-columns: 1fr 1fr;
}

.cx-item-grid label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cx-item-grid label span {
  font-size: var(--text-2_5xs);
  color: var(--text-quaternary);
  font-weight: 600;
  letter-spacing: .02em;
}

.cx-item-grid .cx-input {
  height: 28px;
  padding: 0 var(--s-3);
}

.cx-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 32px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.cx-add:hover {
  border-color: var(--brand-green);
  color: var(--text-brand-strong);
  background: var(--green-50);
}

.cx-add svg {
  width: 14px;
  height: 14px;
}

/* table-column / document-field editors */
.cx-cols {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cx-col {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-canvas);
}

.cx-col-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.cx-grip {
  color: var(--text-disabled);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: grab;
}

.cx-grip svg {
  width: 14px;
  height: 14px;
}

.cx-col-lbl {
  flex: 1;
  height: 28px;
}

.cx-col-bind {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.cx-col-bind .cx-select {
  flex: 1;
  min-width: 0;
  height: 28px;
}

.cx-col-bind .cx-seg {
  flex-shrink: 0;
}

.cx-col-bind .cx-seg button {
  width: 26px;
  padding: 0;
}

.cx-ph-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ai-fg-deep);
  background: var(--ai-bg);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

/* lens bar above the canvas */
.pb-lensbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-popover);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: max-content;
  max-width: min(calc(100% - 24px), 640px);
}

.pb-lens {
  display: inline-flex;
  background: rgba(20, 23, 27, .82);
  backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  padding: 3px;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.pb-lens button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-5);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #c4c7cb;
  white-space: nowrap;
}

.pb-lens button svg {
  width: 13px;
  height: 13px;
}

.pb-lens button.is-active {
  background: #fff;
  color: var(--n-900);
}

.pb-edithint-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  color: #d4d6d9;
  background: rgba(20, 23, 27, .7);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: var(--r-full);
  max-width: 100%;
  min-width: 0;
}

.pb-edithint-inline svg {
  width: 12px;
  height: 12px;
  color: var(--green-400);
  flex-shrink: 0;
}

.pb-edithint-inline--ph svg {
  color: var(--ai-bg-strong);
}

/* field picker dropdown (Edit lens) */
.pb-fp {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
}

.pb-fp-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
}

.pb-fp-head svg {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.pb-fp-head input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.pb-fp-list {
  overflow-y: auto;
  padding: var(--s-2);
  scrollbar-width: thin;
}

.pb-fp-grp+.pb-fp-grp {
  margin-top: var(--s-2);
}

.pb-fp-grp-h {
  font-size: var(--text-2_5xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  padding: var(--s-2) var(--s-3) var(--s-1);
}

.pb-fp-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: left;
}

.pb-fp-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pb-fp-item.is-current {
  color: var(--text-brand-strong);
  font-weight: 600;
}

.pb-fp-item-l {
  flex: 1;
}

.pb-fp-item svg {
  width: 14px;
  height: 14px;
  color: var(--brand-green);
  flex-shrink: 0;
}

.pb-fp-empty {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.pb-fp-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-2_5xs);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  line-height: 1.4;
}

/* placeholder chips in the document (Placeholders lens) */
.pbd .pbd-ph {
  font-family: var(--font-mono);
  font-size: .82em;
  color: var(--ai-fg-deep);
  background: #efe9fc;
  border: 1px solid #ddd0f8;
  border-radius: 3px;
  padding: 0 4px;
  white-space: normal;
  word-break: break-all;
}

/* read-only template-source note */
.pb-editor-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  font-size: var(--text-xs);
  color: var(--text-brand-strong);
  background: var(--green-50);
  border-bottom: 1px solid var(--border-subtle);
  line-height: 1.45;
}

.pb-editor-note svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand-green);
}

/* edit hint chip */
.pb-edithint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-popover);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: rgba(20, 23, 27, .86);
  backdrop-filter: blur(6px);
  color: #eceef0;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
}

.pb-edithint svg {
  width: 14px;
  height: 14px;
  color: var(--green-400);
}

.pb-edithint button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #aeb2b7;
}

.pb-edithint button:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.pb-edithint button svg {
  width: 12px;
  height: 12px;
  color: inherit;
}

/* right dock */
.pb-dock {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-left: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.pb-dock--wide {
  width: 600px;
}

.pb-dock-resizer {
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.pb-dock-resizer:hover {
  background: linear-gradient(90deg, transparent, rgba(46, 178, 115, .35), transparent);
}

.pb-dock .pb-htmltab {
  flex: 1;
}

.pb-dock-close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}

.pb-dock-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pb-dock-close svg {
  width: 15px;
  height: 15px;
}

.pb-zoomwrap {
  transform-origin: top center;
}

/* editor read-only / warn note + custom-lock banner */
.pb-editor-note--warn {
  color: var(--warning-fg-strong);
  background: var(--warning-bg);
}

.pb-editor-note--warn svg {
  color: var(--warning);
}

.cx-lockbanner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin: var(--s-5) var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--warning-fg-strong);
  background: var(--warning-bg);
  border: 1px solid var(--warning-bg-strong);
  border-radius: var(--r-md);
}

.cx-lockbanner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--warning);
}

.cx-lockbanner-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.cx-lockbanner-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-weight: 600;
  color: var(--warning-fg-strong);
  background: #fff;
  border: 1px solid var(--warning-bg-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.cx-lockbanner-btn:hover {
  background: var(--warning-bg-strong);
}

.cx-lockbanner-btn svg {
  margin-top: 0;
}

.cx-customnote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.cx-customnote p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-tertiary);
}

.cx-customnote .cx-lockbanner-btn {
  width: auto;
  white-space: nowrap;
}

.cx-lockbanner-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Dynamic Table editor (cx-tbl-*) ─────────────────────── */
.cx-tbl-editor {
  padding: 0 var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cx-tbl-source {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
}

.cx-tbl-source .cx-ph-tag {
  flex: 1;
  font-size: var(--text-2_5xs);
}

.cx-tbl-cols-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Add Table Dialog ─────────────────────────────────────── */
.cx-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
}

.cx-dialog {
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  width: 420px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.cx-dialog-head {
  display: flex;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.cx-dialog-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  border-radius: var(--r-sm);
}

.cx-dialog-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.cx-dialog-close svg {
  width: 14px;
  height: 14px;
}

.cx-dialog-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.cx-dialog-body .cx-hint {
  margin: 0;
}

.cx-dialog-lbl {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
}

.cx-dialog-body .cx-ph-tag {
  font-size: var(--text-2_5xs);
}

.cx-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border-subtle);
}

/* V2 SVG and Button reset - required for icons (overrides hardcoded fills like white on white) */
:where(.pb, .templates, .cx-dialog) button,
button:where(.pbtn, .pb-bar-back) {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
  letter-spacing: inherit;
}

:where(.pb, .templates, .pbtn, .te-sidebar, .cx-dialog, .pb-bar) svg:not(.MuiSvgIcon-root) {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}/* ═══════════════════════════════════════════════════════════════
   ERPForce PDF Builder — the document (.pbd-*)
   A real A4 paginated document. Same CSS drives screen preview,
   measurement pass, and @media print output.
   Tunable per-doc via CSS vars set by AI / inline edits:
     --pbd-accent      heading rules, doctype, grand total
     --pbd-head-weight letterhead company weight
   data-density="compact" tightens the line-item table.
   ═══════════════════════════════════════════════════════════════ */

.pbd {
  --pbd-accent: #1B2C6E;
  --pbd-ink: #14171b;
  --pbd-muted: #6a6f76;
  --pbd-faint: #9aa0a6;
  --pbd-line: #e4e6e9;
  --pbd-line-strong: #c9ccd0;
  --pbd-fill: #f6f7f8;
  --pbd-head-weight: 700;
  --pbd-pad-y: 6.5px;
  color: var(--pbd-ink);
  font-family: 'Inter', sans-serif;
  font-size: 11px; line-height: 1.45;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ── Page shell (built by the paginator / editor) ─────────────── */
.pbd-page { width: var(--pbd-page-w, 794px); min-height: var(--pbd-page-h, 1123px); background: #fff; position: relative; flex-shrink: 0;
  box-shadow: 0 6px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; }
.pbd-page-inner { flex: 1; padding: 54px 52px 56px; display: flex; flex-direction: column; overflow-x: auto; }

/* running header / footer */
.pbd-runhead { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-bottom: .8px solid var(--pbd-line); font-size: 8px; color: var(--pbd-muted); }
.pbd-runhead img { height: 11px; opacity: .9; }
.pbd-runhead .rh-l { font-weight: 700; color: var(--pbd-ink); }
.pbd-runhead .rh-r { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
.pbd-runfoot { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 16px; border-top: .8px solid var(--pbd-line); font-size: 8px; color: var(--pbd-muted); }
.pbd-runfoot .rf-l { color: var(--pbd-muted); }
.pbd-runfoot .rf-r { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── letterhead ─────────────────────────────────────────────── */
.pbd-lh { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
  padding-bottom: 14px; border-bottom: 2.5px solid var(--pbd-accent); }
.pbd-lh-co { display: flex; flex-direction: column; gap: 2px; max-width: 56%; }
.pbd-logo { height: var(--pbd-logo-h, 24px); width: auto; display: block; margin-bottom: 7px; }

/* compact letterhead — saves vertical space on the masthead */
.pbd[data-head="compact"] .pbd-lh { padding-bottom: 9px; gap: 18px; }
.pbd[data-head="compact"] .pbd-logo { margin-bottom: 4px; }
.pbd[data-head="compact"] .pbd-co-name { font-size: 12.5px; }
.pbd[data-head="compact"] .pbd-co-line { font-size: 8px; line-height: 1.35; }
.pbd[data-head="compact"] .pbd-doctype { font-size: 19px; }
.pbd[data-head="compact"] .pbd-ref { margin-top: 4px; font-size: 9px; }
.pbd[data-head="compact"] .pbd-status { margin-top: 5px; }
.pbd-co-name { font-size: 14px; font-weight: var(--pbd-head-weight); letter-spacing: -.01em; color: var(--pbd-ink); }
.pbd-co-line { font-size: 9px; color: var(--pbd-muted); }
.pbd-lh-doc { text-align: right; flex-shrink: 0; }
.pbd-doctype { font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--pbd-accent); text-transform: uppercase; line-height: 1.08; }
.pbd-ref { font-size: 9.5px; color: var(--pbd-muted); margin-top: 7px; font-family: 'JetBrains Mono', monospace; }
.pbd-ref b { color: var(--pbd-ink); font-weight: 600; }
.pbd-status { display: inline-block; margin-top: 8px; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; }
.pbd-status--draft { color: #8a540b; background: #fef1dd; }
.pbd-status--paid { color: #156b43; background: #e2f5ec; }
.pbd-status--due { color: #a8232a; background: #fce5e8; }

/* ── parties (bill to / ship to / from) ─────────────────────── */
.pbd-parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.pbd-parties--2 { grid-template-columns: 1fr 1fr; }
.pbd-party-h { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pbd-faint); margin-bottom: 5px; }
.pbd-party-name { font-size: 11.5px; font-weight: 600; color: var(--pbd-ink); }
.pbd-party-line { font-size: 9.5px; color: var(--pbd-muted); line-height: 1.5; }

/* ── meta strip ─────────────────────────────────────────────── */
.pbd-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 18px; margin-top: 18px;
  padding: 12px 16px; background: var(--pbd-fill); border: 1px solid var(--pbd-line); border-radius: 6px; }
.pbd-meta-item { display: flex; flex-direction: column; gap: 1px; }
.pbd-meta-k { font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pbd-faint); }
.pbd-meta-v { font-size: 10.5px; font-weight: 600; color: var(--pbd-ink); }
.pbd-meta--3 { grid-template-columns: repeat(3, 1fr); }
.pbd-meta--2 { grid-template-columns: repeat(2, 1fr); }

/* ── section heading ────────────────────────────────────────── */
.pbd-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pbd-accent);
  margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--pbd-line); }
.pbd-intro { font-size: 10px; color: var(--pbd-muted); line-height: 1.55; margin-top: 16px; }

/* ── line-item table (the hard part) ────────────────────────── */
.pbd-items-wrap { margin-top: 14px; }
.pbd-items { width: 100%; border-collapse: collapse; }
.pbd-items thead th { font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: var(--pbd-accent); text-align: right; padding: 7px 9px; white-space: nowrap; }
.pbd-items thead th:first-child { text-align: left; border-radius: 3px 0 0 0; }
.pbd-items thead th:last-child { border-radius: 0 3px 0 0; }
.pbd-items thead th.l { text-align: left; }
.pbd-items tbody td { font-size: 10px; padding: var(--pbd-pad-y) 9px; text-align: right; border-bottom: 1px solid var(--pbd-line);
  color: #2c2f35; white-space: nowrap; vertical-align: top; }
.pbd-items tbody td.l { text-align: left; }
.pbd-items tbody tr:nth-child(even) td { background: #fafbfb; }
.pbd-items .it-no { color: var(--pbd-faint); font-size: 9px; width: 22px; }
.pbd-items .it-desc { white-space: normal; max-width: 230px; }
.pbd-items .it-desc b { font-weight: 600; color: var(--pbd-ink); }
.pbd-items .it-sku { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--pbd-faint); margin-top: 1px; }
.pbd-items .it-tax { color: var(--pbd-muted); font-size: 9px; }
.pbd-items .it-disc { color: #156b43; }
.pbd-items tfoot td { font-size: 9.5px; padding: 6px 9px; }

/* "continued" caption when a table breaks across pages */
.pbd-items-cont { font-size: 8px; font-style: italic; color: var(--pbd-faint); padding: 4px 9px 0; text-align: right; }

/* density */
.pbd[data-density="compact"] { --pbd-pad-y: 4px; }
.pbd[data-density="compact"] .pbd-items thead th { padding: 5px 8px; }
.pbd[data-density="comfortable"] { --pbd-pad-y: 9px; }

/* ── totals ─────────────────────────────────────────────────── */
.pbd-totals-wrap { display: flex; justify-content: flex-end; margin-top: 14px; }
.pbd-totals { width: 280px; }
.pbd-tot-row { display: flex; justify-content: space-between; padding: 5px 10px; font-size: 10px; color: var(--pbd-muted); }
.pbd-tot-row .pbd-tot-v { color: var(--pbd-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pbd-tot-row--sub { border-top: 1px solid var(--pbd-line); }
.pbd-tot-row--disc .pbd-tot-v { color: #156b43; }
.pbd-tot-grand { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 10px; margin-top: 4px;
  background: var(--pbd-accent); color: #fff; border-radius: 5px; }
.pbd-tot-grand .pbd-tot-k { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.pbd-tot-grand .pbd-tot-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pbd-amountwords { margin-top: 10px; font-size: 9px; color: var(--pbd-muted); font-style: italic; }
.pbd-amountwords b { font-style: normal; color: var(--pbd-ink); }

/* ── notes / terms / signature ──────────────────────────────── */
.pbd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
.pbd-notes-h { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pbd-faint); margin-bottom: 5px; }
.pbd-notes-body { font-size: 9.5px; color: var(--pbd-muted); line-height: 1.55; }
.pbd-notes-body ol, .pbd-notes-body ul { margin: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 3px; }
.pbd-pay { font-size: 9.5px; color: var(--pbd-muted); line-height: 1.7; }
.pbd-pay b { color: var(--pbd-ink); font-weight: 600; }
.pbd-pay .k { display: inline-block; min-width: 92px; color: var(--pbd-faint); }

.pbd-sign { display: flex; gap: 48px; margin-top: 36px; }
.pbd-sign-line { flex: 1; max-width: 220px; }
.pbd-sign-rule { border-top: 1px solid var(--pbd-ink); padding-top: 5px; font-size: 9px; color: var(--pbd-muted); }
.pbd-sign-rule b { color: var(--pbd-ink); display: block; font-size: 10px; }

.pbd-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--pbd-line); display: flex; justify-content: space-between;
  font-size: 8.5px; color: var(--pbd-faint); }
.pbd-foot b { color: var(--pbd-muted); }

/* paid / draft stamp overlay */
.pbd-stamp { position: absolute; top: 180px; right: 60px; transform: rotate(-14deg); border: 3px solid; border-radius: 8px;
  padding: 6px 18px; font-size: 26px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .16; pointer-events: none; }
.pbd-stamp--paid { color: #156b43; border-color: #156b43; }
.pbd-stamp--due { color: #a8232a; border-color: #a8232a; }

/* ── inline WYSIWYG edit affordances ─────────────────────────── */
.pb-editable [data-edit] { cursor: text; border-radius: 2px; transition: background .12s, box-shadow .12s; }
.pb-editable [data-edit]:hover { background: rgba(46,178,115,.10); box-shadow: 0 0 0 2px rgba(46,178,115,.16); }
.pb-editable [data-edit].is-editing { background: #fff; box-shadow: 0 0 0 2px var(--brand-green); outline: none; }
.pb-editable [data-edit].is-editing:empty::before { content: 'Type…'; color: var(--pbd-faint); }
.pbd-ed:focus { outline: none; }

/* ── template WYSIWYG edit affordances (Edit lens) ── */
.pb-tpl-editable .pbd-lit { cursor: text; border-radius: 2px; transition: background .12s, box-shadow .12s; }
.pb-tpl-editable .pbd-lit:hover { background: rgba(46,178,115,.10); box-shadow: 0 0 0 2px rgba(46,178,115,.16); }
.pb-tpl-editable .pbd-lit.is-editing { background: #fff; box-shadow: 0 0 0 2px var(--brand-green); outline: none; }
/* field chips: friendly, click-to-pick (not monospace, no raw paths) */
.pb-tpl-editable .pbd-ph { font-family: inherit; font-size: .92em; cursor: pointer; padding: 0 4px 0 6px;
  display: inline-flex; align-items: center; gap: 3px; transition: box-shadow .12s, background .12s; }
.pb-tpl-editable .pbd-ph::after { content: '▾'; font-size: .72em; opacity: .55; margin-left: 1px; }
.pb-tpl-editable .pbd-ph:hover { background: #e6dcff; box-shadow: 0 0 0 2px rgba(110,86,207,.30); }

/* field-inspector pills (Fields preview mode) */
.pbd-ph { font-family: 'JetBrains Mono', monospace; font-size: .82em; color: var(--ai-fg-deep);
  background: #efe9fc; border: 1px solid #ddd0f8; border-radius: 3px; padding: 0 4px; white-space: normal; word-break: break-all; }

/* ── financial report rows ──────────────────────────────────── */
.pbd-items tr.is-section td, .pbd-items tr.is-section th { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pbd-faint); padding-top: 13px; border-bottom: 0; background: #fff !important; }
.pbd-items tr.is-sub td { font-weight: 700; color: var(--pbd-ink); border-top: 1px solid var(--pbd-line-strong); background: var(--pbd-fill) !important; }
.pbd-items tr.is-grand td { font-weight: 700; font-size: 11px; color: #fff; background: var(--pbd-accent) !important; }
.pbd-items .pd-indent { padding-left: 22px; }
.pbd-items .pd-neg { color: #b4282d; }
.pbd-items .pd-pos { color: #156b43; }

/* KPI strip (reports) */
.pbd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.pbd-kpi { border: 1px solid var(--pbd-line); border-radius: 5px; padding: 9px 11px; }
.pbd-kpi-l { font-size: 8px; color: var(--pbd-faint); text-transform: uppercase; letter-spacing: .04em; }
.pbd-kpi-v { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; color: var(--pbd-ink); }
.pbd-kpi-s { font-size: 8px; color: var(--pbd-muted); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   KSA bilingual (ZATCA) Tax Invoice  ·  .kx-*
   Self-contained English/Arabic invoice. Arabic runs RTL with the
   Kufi face; table styling is scoped under .kx-items-wrap so it
   survives the paginator's continuation rebuild (which keeps the
   wrap attributes but resets the table to class="pbd-items").
   ═══════════════════════════════════════════════════════════════ */
.kx-ar, .kx-ar-h, .kx-ar-sm, .kx-col-ar, .kx-title-ar,
.kx-tot-ar, [dir="rtl"] { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; }

/* ── header ─────────────────────────────────────────────────── */
.kx-head { border-bottom: 2.5px solid var(--pbd-accent); padding-bottom: 12px; }
.kx-head-row { display: flex; align-items: center; gap: 16px; }
.kx-logo { height: 26px; width: auto; }
.kx-title-block { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
.kx-title { font-size: 22px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pbd-ink); }
.kx-title-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pbd-accent); }
.kx-title-ar { font-size: 23px; font-weight: 700; color: var(--pbd-accent); }
.kx-head-tag { font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center;
  color: var(--pbd-accent); border: 1.2px solid var(--pbd-accent); border-radius: 5px; padding: 4px 7px; line-height: 1.25; }
.kx-head-no { display: flex; justify-content: space-between; margin-top: 9px; }
.kx-head-no-en, .kx-head-no-ar { display: flex; align-items: baseline; gap: 7px; }
.kx-head-no .kx-k { font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pbd-faint); }
.kx-head-no-ar .kx-k { text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.kx-head-no b { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--pbd-accent); }

/* ── seller / buyer cards ───────────────────────────────────── */
.kx-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.kx-party { border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
.kx-party-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 11px;
  background: var(--pbd-fill); border-bottom: 1px solid var(--pbd-line); }
.kx-party-bar span:first-child { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pbd-accent); }
.kx-party-bar .kx-ar { font-size: 11px; font-weight: 700; color: var(--pbd-accent); }
.kx-party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 12px; }
.kx-col-ar { text-align: right; }
.kx-name { font-size: 11px; font-weight: 700; color: var(--pbd-ink); line-height: 1.35; }
.kx-col-ar .kx-name { font-size: 12px; }
.kx-line { font-size: 8.5px; color: var(--pbd-muted); line-height: 1.5; margin-top: 1px; }
.kx-col-ar .kx-line { font-size: 9.5px; }
.kx-kv { display: flex; gap: 6px; font-size: 8.5px; margin-top: 4px; }
.kx-col-ar .kx-kv { flex-direction: row-reverse; }
.kx-kv span { color: var(--pbd-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 46px; }
.kx-col-ar .kx-kv span { text-transform: none; letter-spacing: 0; min-width: 64px; }
.kx-kv b { font-family: 'JetBrains Mono', monospace; color: var(--pbd-ink); font-weight: 600; }

/* ── meta strip ─────────────────────────────────────────────── */
.kx-meta { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px;
  border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
.kx-meta-item { padding: 6px 10px; border-right: 1px solid var(--pbd-line); display: flex; flex-direction: column; gap: 3px; }
.kx-meta-item:last-child { border-right: 0; }
.kx-meta-k { font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pbd-faint);
  display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.kx-meta-k .kx-ar { font-size: 8.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pbd-muted); font-style: normal; }
.kx-meta-v { font-size: 9.5px; font-weight: 700; color: var(--pbd-ink); font-variant-numeric: tabular-nums; }

/* ── line-item table (scoped to the wrap so splits keep styling) ── */
.kx-items-wrap { margin-top: 8px; }
.kx-items-wrap .pbd-items thead th { font-size: 7.5px; line-height: 1.2; padding: 5px 6px; vertical-align: top; }
.kx-items-wrap .pbd-items thead th .kx-ar-h { display: block; font-size: 8px; font-weight: 600; opacity: .9; margin-top: 2px; }
.kx-items-wrap .pbd-items tbody td { font-size: 9px; padding: 3.5px 6px; vertical-align: middle; }
.kx-items-wrap .pbd-items .it-no { width: 18px; }
.kx-items-wrap .kx-sku { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--pbd-ink); }
.kx-items-wrap .kx-desc { white-space: normal; min-width: 150px; max-width: 220px; }
.kx-items-wrap .kx-desc b { font-weight: 600; color: var(--pbd-ink); display: block; }
.kx-items-wrap .kx-desc .kx-ar { display: block; font-size: 9px; color: var(--pbd-muted); margin-top: 2px; direction: rtl; }
.kx-items-wrap .kx-unit { display: block; }
.kx-items-wrap .kx-ar-sm { display: block; font-size: 8px; color: var(--pbd-muted); margin-top: 1px; }
.kx-items-wrap .kx-rate { color: var(--pbd-muted); }

/* edit mode: the field chips ("Total with tax", "Tax amount"…) are wider than
   the sample numbers they stand in for, and headers/chips are nowrap — across
   11 columns that pushes the table past the page edge. Let headers and chips
   wrap in template-edit mode so the width:100% table can shrink back to fit. */
.pb-tpl-editable .pbd-items thead th { white-space: normal; }
.pb-tpl-editable .pbd-items tbody td { padding-left: 4px; padding-right: 4px; }
.pb-tpl-editable .pbd-items tbody .pbd-ph {
  font-size: .8em; line-height: 1.12; padding: 0 2px; }

/* ── totals (ZATCA grid: EN label · value · AR label) ───────── */
.kx-totals { margin-top: 10px; }
.kx-tot-grid { border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
.kx-tot-row { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center;
  border-bottom: 1px solid var(--pbd-line); }
.kx-tot-row:last-child { border-bottom: 0; }
.kx-tot-en { font-size: 9.5px; font-weight: 600; color: var(--pbd-ink); padding: 4px 12px; }
.kx-tot-v { font-size: 10.5px; font-weight: 700; color: var(--pbd-ink); text-align: center; padding: 4px 12px;
  font-variant-numeric: tabular-nums; border-left: 1px solid var(--pbd-line); border-right: 1px solid var(--pbd-line); background: #fff; }
.kx-tot-ar { font-size: 10px; font-weight: 600; color: var(--pbd-muted); text-align: right; padding: 4px 12px; }
.kx-tot-grand { background: var(--pbd-fill); }
.kx-tot-grand .kx-tot-en, .kx-tot-grand .kx-tot-ar { font-weight: 800; color: var(--pbd-ink); }
.kx-tot-grand .kx-tot-v { font-size: 12px; }
.kx-tot-due { background: var(--pbd-accent); }
.kx-tot-due .kx-tot-en, .kx-tot-due .kx-tot-ar { color: #fff; font-weight: 800; }
.kx-tot-due .kx-tot-v { color: #fff; font-size: 13px; background: transparent; border-color: rgba(255,255,255,.28); }

.kx-words { margin-top: 8px; border: 1px dashed var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
.kx-words-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 12px; }
.kx-words-row:first-child { border-bottom: 1px solid var(--pbd-line); }
.kx-words-k { font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pbd-faint); white-space: nowrap; }
.kx-words-row[dir="rtl"] .kx-words-k { text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.kx-words-v { font-size: 9.5px; font-weight: 600; color: var(--pbd-ink); }
.kx-words-row[dir="rtl"] .kx-words-v { font-size: 10.5px; }

/* ── QR + bank details ──────────────────────────────────────── */
.kx-bankqr { display: flex; gap: 16px; margin-top: 10px; align-items: stretch; }
.kx-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--pbd-line-strong); border-radius: 7px; padding: 11px; width: 152px; flex-shrink: 0; }
.kx-qr img { width: 124px; height: 124px; display: block; }
.kx-qr-cap { font-size: 7px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pbd-faint); text-align: center; line-height: 1.35; }
.kx-qr-cap .kx-ar { display: block; font-size: 8.5px; text-transform: none; letter-spacing: 0; color: var(--pbd-muted); margin-top: 1px; }
.kx-bank { flex: 1; border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
.kx-bank-h { display: flex; justify-content: space-between; padding: 5px 11px; background: var(--pbd-fill); border-bottom: 1px solid var(--pbd-line); }
.kx-bank-h span:first-child { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pbd-accent); }
.kx-bank-h .kx-ar { font-size: 11px; font-weight: 700; color: var(--pbd-accent); }
.kx-bank-tbl { width: 100%; border-collapse: collapse; }
.kx-bank-tbl td { font-size: 9px; padding: 4px 11px; border-bottom: 1px solid var(--pbd-line); color: var(--pbd-ink); }
.kx-bank-tbl tr:last-child td { border-bottom: 0; }
.kx-bank-tbl tr:nth-child(even) td { background: #fafbfb; }
.kx-bank-k { width: 130px; color: var(--pbd-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 7.5px; }
.kx-bank-k .kx-ar { float: right; text-transform: none; letter-spacing: 0; font-size: 9px; color: var(--pbd-muted); font-weight: 600; }
.kx-bank-tbl td:not(.kx-bank-k) { font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ── footer note ────────────────────────────────────────────── */
.kx-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--pbd-line); text-align: center;
  font-size: 8.5px; color: var(--pbd-faint); line-height: 1.5; }


@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .pb-top, .pb-bar, .pb-rail, .pb-editor, .pb-ai, .pb-drawer, .pb-side, .pb-dock, .pb-edithint, .pb-lensbar, .pb-lens, .pb-edithint-inline, .pb-preview-bar, .pb-zoomfloat, .tweaks-panel, .pb-toast { display: none !important; }
  .pb, .pb-body, .pb-work, .pb-center, .pb-preview, .pb-stage, .pb-stage-scroll { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  .pb-editable [data-edit]:hover { background: none !important; box-shadow: none !important; }
  .pb-preview-scroll, .pb-stage-scroll { overflow: visible !important; padding: 0 !important; background: #fff !important; }
  .pb-pages { transform: none !important; gap: 0 !important; display: block !important; }
  .pb-zoomwrap { transform: none !important; margin: 0 !important; width: auto !important; }
  .pbd-page { box-shadow: none !important; margin: 0 auto !important; page-break-after: always; break-after: page; }
  .pbd-page:last-child { page-break-after: auto; break-after: auto; }
  .pbd-items thead th, .pbd-tot-grand, .pbd-meta, .pbd-status, .pbd-items tr.is-grand td, .pbd-items tr.is-sub td, .pbd-runhead, .pbd-runfoot, .pbd-stamp,
  .kx-items-wrap .pbd-items thead th, .kx-tot-due, .kx-tot-grand, .kx-party-bar, .kx-bank-h, .kx-meta {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.pbd-page-inner table:not(.pbd-items) { min-width: max-content; }
/* ═══════════════════════════════════════════════════════════════
   ERPForce PDF Builder — Stationery Master
   The reusable header + footer + watermark that every document
   template inherits. Brand colour (--st-brand) is independent of
   the per-document accent (--pbd-accent).
   Builds on styles.css (chrome) + doc.css (.pbd document).
   ═══════════════════════════════════════════════════════════════ */

.st { --st-brand: #2EB273; }

/* the A4 sheet is a flex column: header · body(grows) · footer */
.st .pbd-page { display: flex; flex-direction: column; overflow: hidden; }
.st .pbd-page > * { position: relative; z-index: 1; }
.st .pbd-page-inner { flex: 1; padding: 26px 52px 22px; }

/* ── watermark (behind everything, centred over the whole page) ── */
.st .pbd-page > .st-wm { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.st-wm img { display: block; max-width: 70%; height: auto; filter: grayscale(1); }

/* ════════════════ HEADER MASTER ══════════════════════════════ */
.st-head { display: flex; align-items: flex-start; gap: 28px; padding: 30px 52px 14px;
  border-bottom: 2.5px solid var(--st-brand); }
.st-logo { width: auto; display: block; }
.st-id { display: flex; flex-direction: column; gap: 2px; }
.st-name-en { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--pbd-ink); line-height: 1.2; }
.st-name-ar { font-family: 'Noto Kufi Arabic', 'Cairo', 'IBM Plex Sans Arabic', 'Tahoma', sans-serif; font-size: 15px; font-weight: 600;
  color: #3a3f46; line-height: 1.4; direction: rtl; unicode-bidi: embed; }
.st-tagline { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; color: var(--st-brand); margin-top: 2px; }
.st-head-col { display: flex; flex-direction: column; gap: 3px; }

/* variant — standard: logo left, identity right */
.st-head--standard { justify-content: space-between; }
.st-head--standard .st-id,
.st-head--standard .st-name-en,
.st-head--standard .st-name-ar,
.st-head--standard .st-tagline { text-align: right; width: 100%; align-items: flex-end; }

/* variant — split (client letterhead): logo+web left, bilingual name right */
.st-head--split { justify-content: space-between; }
.st-head--split .st-id,
.st-head--split .st-name-en,
.st-head--split .st-name-ar,
.st-head--split .st-tagline { text-align: right; width: 100%; align-items: flex-end; }

/* variant — centered */
.st-head--centered { flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 26px; }
.st-head--centered .st-id,
.st-head--centered .st-name-en,
.st-head--centered .st-name-ar,
.st-head--centered .st-tagline { text-align: center; width: 100%; align-items: center; }
.st-head--centered .st-logo { margin-bottom: 2px; }

/* variant — compact (continuation pages / dense docs) */
.st-head--compact { align-items: center; justify-content: space-between; padding: 11px 52px; gap: 16px; }
.st-head--compact .st-head-cmp-l { display: flex; align-items: center; gap: 10px; }
.st-head--compact .st-name-en { font-size: 11.5px; }
.st-head--compact .st-tagline { margin-top: 0; }

/* ════════════════ BODY · doc-title bar ═══════════════════════ */
/* the body masthead (doctype / number) — separate from the letterhead.
   uses the DOCUMENT accent, proving it is independent of --st-brand. */
.st .pbd-page-inner > .st-doctitle:first-child { margin-top: 4px; }
.st-doctitle { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 4px; }
.st-doctitle-l { display: flex; flex-direction: column; align-items: flex-start; }
.st-doctype { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--pbd-accent); text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.st-doctype-rule { width: 38px; height: 3px; background: var(--pbd-accent); border-radius: 2px; margin-top: 7px; }
.st-doctitle-r { text-align: right; flex-shrink: 0; }

/* ════════════════ FOOTER MASTER ══════════════════════════════ */
.st-foot { margin-top: auto; }
.st-foot-band { background: var(--st-brand); color: #fff; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 22px; padding: 7px 52px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  font-family: 'JetBrains Mono', monospace; }
.st-foot-band span { position: relative; }
.st-foot-band span + span::before { content: '|'; position: absolute; left: -12px; opacity: .5; font-weight: 400; }
.st-foot-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 8px 52px 0; font-size: 9px; color: var(--pbd-muted); }
.st-foot-contact span { display: inline-flex; align-items: center; gap: 5px; position: relative; }
.st-foot-contact span + span::before { content: '·'; position: absolute; left: -9px; color: var(--pbd-faint); }
.st-foot-contact svg { width: 11px; height: 11px; color: var(--st-brand); flex-shrink: 0; }
.st-foot-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 52px 14px; font-size: 8px; color: var(--pbd-faint); }
.st-foot-meta .st-foot-pg { font-variant-numeric: tabular-nums; margin-left: auto; }

/* continuation pages — slim single-line footer (no reg band / contact) */
.st-foot--compact { border-top: 1px solid rgba(20,23,27,.08); }
.st-foot--compact .st-foot-meta { padding-top: 8px; padding-bottom: 12px; }

/* ════════════════ PRE-PRINTED reserved margins ═══════════════ */
.st-reserve { display: grid; place-items: center; flex-shrink: 0;
  background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(99,102,108,.06) 7px, rgba(99,102,108,.06) 8px); }
.st-reserve--top { border-bottom: 1.5px dashed var(--border-strong); }
.st-reserve--bot { border-top: 1.5px dashed var(--border-strong); }
.st-reserve span { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-quaternary); background: rgba(255,255,255,.7); padding: 3px 10px; border-radius: var(--r-full); }
.st-reserve svg { width: 12px; height: 12px; }

/* ════════════════ APP CHROME extras ═════════════════════════ */
/* dock the toolbar on top; canvas scroll fills the rest */
.st-stage { flex-direction: column; }
/* a clean, non-overlapping toolbar above the canvas */
.st-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; width: 100%;
  padding: var(--s-3) var(--s-5); background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs); }
.st-toolbar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.st-toolbar-lbl svg { width: 13px; height: 13px; color: var(--green-500); }
.st-toolbar-sp { flex: 1; }

/* sample-content toggle */
.st-sample-tg { display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-3) 0 5px;
  border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
  background: var(--surface-muted); border: 1px solid var(--border-subtle); }
.st-sample-tg:hover { background: var(--surface-sunken); }
.st-sample-tg.is-on { color: var(--green-700); background: var(--green-50); border-color: var(--green-200); }
.st-sample-tg .cx-switch { pointer-events: none; }
.st-sample-tg.is-on .cx-switch { background: var(--green-500); }
.st-sample-tg.is-on .cx-switch .cx-switch-dot { transform: translateX(14px); }

.st-docchips { display: flex; gap: 4px; }
.st-docchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--r-full);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--surface-muted);
  border: 1px solid var(--border-subtle); white-space: nowrap; }
.st-docchip svg { width: 12px; height: 12px; }
.st-docchip:hover { background: var(--surface-sunken); color: var(--text-primary); }
.st-docchip.is-active { background: var(--n-900); color: #fff; border-color: var(--n-900); }
.st-docchip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* blank letterpad placeholder (default view) */
.st-blank { flex: 1; display: grid; place-items: center; min-height: 360px; }
.st-blank span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pbd-faint);
  border: 1px dashed var(--border-subtle); border-radius: var(--r-full); padding: 4px 14px; opacity: .55; }

/* ── Edit / Preview lens, re-skinned light for the docked toolbar ── */
.st-toolbar .pb-lens { background: var(--surface-muted); border: 1px solid var(--border-subtle); box-shadow: none; backdrop-filter: none; padding: 2px; }
.st-toolbar .pb-lens button { color: var(--text-tertiary); height: 26px; padding: 0 var(--s-4); }
.st-toolbar .pb-lens button.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.st-edithint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-brand-strong); }
.st-edithint svg { width: 13px; height: 13px; color: var(--green-500); }

/* ── inline-editable text affordance (on the page) ────────────── */
.st-ed { cursor: text; border-radius: 3px; outline: none; transition: box-shadow var(--dur-fast), background var(--dur-fast); }
.st-head.is-edit .st-ed, .st-foot.is-edit .st-ed-inline { /* box-shadow removed as FreeWrap handles outlines */ }
.st-head.is-edit .st-ed { padding: 0 3px; margin: 0 -3px; }
.st-ed:hover { background: rgba(46,178,115,.05); }
.st-ed:focus { background: rgba(46,178,115,.05); }
.st-ed[data-empty="true"]::before { content: attr(data-ph); color: var(--pbd-faint); font-style: italic; opacity: .7; }
.st-ed-inline[data-empty="true"]::before { content: attr(data-ph); opacity: .6; font-style: italic; }
.st-ed-inline { cursor: text; border-radius: 3px; outline: none; padding: 0 2px; transition: box-shadow var(--dur-fast), background var(--dur-fast); }
.st-foot-band .st-ed-inline:hover { background: rgba(255,255,255,.22); }
.st-foot-band .st-ed-inline:focus { background: rgba(255,255,255,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.st-foot-contact .st-ed-inline:hover, .st-foot-meta .st-ed-inline:hover { background: rgba(46,178,115,.12); box-shadow: 0 0 0 1px rgba(46,178,115,.45); }
.st-foot-contact .st-ed-inline:focus, .st-foot-meta .st-ed-inline:focus { background: rgba(46,178,115,.06); box-shadow: 0 0 0 1.5px var(--brand-green); }

/* ── logo replace slot on the canvas (edit mode) ──────────────── */
.st-logo-slot { position: relative; display: inline-flex; align-items: center; cursor: pointer; border-radius: var(--r-sm); }
.st-logo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-logo-slot .st-logo-hint { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 9px; font-weight: 600; color: #fff;
  background: var(--n-900); padding: 3px 7px; border-radius: var(--r-full); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); z-index: 5; }
.st-logo-slot .st-logo-hint svg { width: 10px; height: 10px; }
.st-logo-slot:hover { box-shadow: 0 0 0 2px rgba(46,178,115,.5); }
.st-logo-slot:hover .st-logo-hint { opacity: 1; }

/* ── logo upload control in the rail ──────────────────────────── */
.st-logo-up { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0 var(--s-2); }
.st-logo-up-preview { width: 78px; height: 46px; flex-shrink: 0; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  background: var(--surface-muted); display: grid; place-items: center; padding: 6px; }
.st-logo-up-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-logo-up-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.cx-btn { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); height: 30px; padding: 0 var(--s-4);
  border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 600; color: #fff; background: var(--n-900); cursor: pointer; white-space: nowrap; }
.cx-btn:hover { background: var(--n-800); }
.cx-btn svg { width: 13px; height: 13px; }
.cx-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cx-btn--ghost { background: var(--surface-muted); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.cx-btn--ghost:hover { background: var(--surface-sunken); color: var(--text-primary); }
.cx-btn--sm { height: 28px; }

/* ── stationery PRESET bar (top bar of the Master editor) ─────── */
.st-presetbar { display: inline-flex; align-items: center; gap: var(--s-2); }
.st-preset-pick { position: relative; display: inline-flex; align-items: center; }
.st-preset-select { -webkit-appearance: none; appearance: none; height: 30px; max-width: 190px; padding: 0 26px 0 11px;
  border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--surface-muted); cursor: pointer;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); text-overflow: ellipsis; }
.st-preset-select:hover { background: var(--surface-sunken); }
.st-preset-caret { position: absolute; right: 8px; width: 13px; height: 13px; color: var(--text-tertiary); pointer-events: none; }
.st-preset-name { height: 30px; width: 168px; padding: 0 10px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.st-preset-name:hover { border-color: var(--border-subtle); background: var(--surface-muted); }
.st-preset-name:focus { border-color: var(--brand-green); background: var(--surface-raised); box-shadow: 0 0 0 3px var(--green-100, rgba(46,178,115,.18)); outline: none; }
.st-preset-acts { display: inline-flex; gap: 2px; }
.st-preset-acts button { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center;
  color: var(--text-tertiary); }
.st-preset-acts button:hover { background: var(--surface-sunken); color: var(--text-primary); }
.st-preset-acts button:disabled { opacity: .35; pointer-events: none; }
.st-preset-acts button svg { width: 14px; height: 14px; }
.st-preset-acts button:last-child:hover { background: var(--danger-bg); color: var(--danger); }
.pb-bar-stat-count { font-size: var(--text-2_5xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-quaternary); padding: 0 var(--s-2); }

/* ── builder toolbar: stationery picker dropdown ─────────────── */
/* lift the top bar above the floating lens pill (z-popover) so the
   stationery dropdown isn't painted over by the Edit/Preview controls */
.pb-bar { z-index: var(--z-tooltip); }
.pb-stnpick { position: relative; }
.pb-stnpick-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 30px; max-width: 220px; padding: 0 8px 0 10px;
  border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--surface-muted);
  font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); cursor: pointer; }
.pb-stnpick-btn:hover { background: var(--surface-sunken); }
.pb-stnpick-btn.is-open { border-color: var(--brand-green); box-shadow: 0 0 0 3px var(--green-100, rgba(46,178,115,.16)); }
.pb-stnpick-btn > svg { width: 13px; height: 13px; color: var(--text-tertiary); flex-shrink: 0; }
.pb-stnpick-btn > svg:last-child { color: var(--text-quaternary); }
.pb-stnpick-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-stnpick-dot { width: 11px; height: 11px; border-radius: var(--r-full); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

.pb-stnpick-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 288px; z-index: 60;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.18)); padding: var(--s-2); }
.pb-stnpick-grp { font-size: var(--text-2_5xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-quaternary); padding: var(--s-3) var(--s-3) var(--s-2); }
.pb-stnpick-grp:not(:first-child) { border-top: 1px solid var(--border-subtle); margin-top: var(--s-2); }
.pb-stnpick-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); text-align: left; cursor: pointer; color: var(--text-primary); }
.pb-stnpick-item:hover { background: var(--surface-muted); }
.pb-stnpick-item.is-sel { background: var(--green-50, rgba(46,178,115,.08)); }
.pb-stnpick-item > .pb-stnpick-dot { margin: 2px 1px; }
.pb-stnpick-ic { width: 13px; display: grid; place-items: center; color: var(--text-tertiary); }
.pb-stnpick-ic svg { width: 14px; height: 14px; }
.pb-stnpick-itemt { flex: 1; display: flex; flex-direction: column; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; min-width: 0; }
.pb-stnpick-itemt small { font-size: var(--text-2_5xs); font-weight: 500; color: var(--text-tertiary); margin-top: 2px;
  text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-stnpick-item > svg { width: 15px; height: 15px; color: var(--brand-green); flex-shrink: 0; }
.pb-stnpick-foot { border-top: 1px solid var(--border-subtle); margin-top: var(--s-2); padding-top: var(--s-2); }
.pb-stnpick-foot button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.pb-stnpick-foot button:hover { background: var(--surface-muted); color: var(--text-primary); }
.pb-stnpick-foot button svg { width: 14px; height: 14px; color: var(--text-tertiary); }

/* ── builder: body masthead/footer SUPPRESSED when a stationery owns them ──
   Every template body ships with its own .pbd-lh company letterhead and
   .pbd-foot footer. When the document uses a Stationery preset / Pre-printed
   / Blank, the stationery (or nothing) provides those — so we hide the body's
   built-in company block + footer but KEEP the doc-type/number bar. Applied to
   the live pages AND the off-screen measure surface so pagination stays exact. */
.pb-stn .pbd-lh .pbd-logo,
.pb-stn .pbd-lh .pbd-lh-co { display: none !important; }
.pb-stn .pbd-lh { border-bottom: none; padding-bottom: 0; margin-bottom: 2px; gap: 0; }
.pb-stn .pbd-lh-doc { text-align: left; }
.pb-stn .pbd-foot { display: none !important; }

/* mode segmented in the top bar */
.st-mode { display: inline-flex; background: var(--surface-muted); border-radius: var(--r-md); padding: 2px; gap: 2px; }.st-mode button { height: 26px; padding: 0 var(--s-4); border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 600;
  color: var(--text-tertiary); display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.st-mode button svg { width: 13px; height: 13px; }
.st-mode button.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs); }

/* registration-items editor (rail) */
.st-reg { display: flex; flex-direction: column; gap: var(--s-3); }
.st-reg-row { display: flex; align-items: center; gap: var(--s-2); }
.st-reg-row .cx-input { height: 28px; }
.st-reg-row .st-reg-lbl { width: 92px; flex-shrink: 0; }
.st-reg-del { width: 26px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-tertiary); flex-shrink: 0; }
.st-reg-del:hover { background: var(--danger-bg); color: var(--danger); }
.st-reg-del svg { width: 13px; height: 13px; }

/* rail brand-colour swatches incl. a custom picker */
.st-brandsw { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.st-brandsw .cx-swatch { width: 26px; height: 26px; }
.st-brandsw .st-swatch-custom { position: relative; width: 26px; height: 26px; border-radius: var(--r-md); overflow: hidden;
  border: 1px dashed var(--border-strong); display: grid; place-items: center; cursor: pointer; }
.st-brandsw .st-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.st-brandsw .st-swatch-custom svg { width: 13px; height: 13px; color: var(--text-tertiary); }

/* preprinted hint card in rail */
.st-prehint { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); font-size: var(--text-xs);
  line-height: 1.5; color: var(--ai-fg-deep); background: var(--ai-bg); border-radius: var(--r-md); }
.st-prehint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* small caption under variant picker */
.st-variantnote { font-size: var(--text-2_5xs); color: var(--text-quaternary); margin-top: var(--s-3); line-height: 1.4; }

/* print */
@media print {
  /* A4 with NO browser margins → removes the date/title chrome AND keeps
     the 794×1123px page on a single sheet (no footer spilling to page 2) */
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 794px; height: auto !important; margin: 0 !important; background: #fff !important; }
  .pb-bar, .pb-side, .st-toolbar, .st-stage > .st-toolbar, .pb-zoomfloat, .pb-toast, .pb-lensbar, .pb-lens { display: none !important; }
  .pb, .pb-work, .pb-stage, .st-stage, .pb-stage-scroll { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; padding: 0 !important; }
  .pb-zoomwrap { transform: none !important; margin: 0 !important; width: auto !important; }
  .pb-pages { gap: 0 !important; transform: none !important; }
  .pbd-page { box-shadow: none !important; margin: 0 !important; min-height: 1122px !important; break-after: page; page-break-after: always; }
  .pbd-page:last-child { break-after: auto; page-break-after: auto; }
  .st-ed, .st-ed-inline { box-shadow: none !important; background: none !important; }
  .st-logo-slot .st-logo-hint { display: none !important; }
  .st-reserve { background: none !important; border: none !important; }
  .st-reserve span { display: none !important; }
  .st-head, .st-foot-band, .pbd-items thead th, .pbd-tot-grand, .st-doctype, .pbd-status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.st-free-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.st-free-content > * {
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  word-break: break-word;
  pointer-events: none !important;
}
/* ═══════════════════════════════════════════════════════════════
   ERPForce Stationery — creative letterhead directions  ·  v2
   Six distinct "letter pad" treatments, all on the same A4 sheet
   (794×1123) and the same brand kit:
     · green mark #2EB273 / deep #1A8A56 · ink #1A1F26
     · Inter (text) + JetBrains Mono (codes) + Noto Kufi Arabic (RTL)
   Each is a full pad: header + (blank body) + footer.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --lp-green: #2EB273;
  --lp-green-deep: #1A8A56;
  --lp-green-dark: #146B43;
  --lp-ink: #1A1F26;
  --lp-ink-soft: #3D4046;
  --lp-muted: #6D7178;
  --lp-faint: #9aa0a8;
  --lp-line: #e6e8eb;
  --lp-line-soft: #f0f1f3;
  --lp-mg: 64px;            /* baseline content margin */
}

/* the sheet */
.lp { width: 794px; height: 1123px; background: #fff; position: relative; overflow: hidden;
  font-family: 'Inter', sans-serif; color: var(--lp-ink); display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; }
.lp * { box-sizing: border-box; }
.lp-mono { font-family: 'JetBrains Mono', monospace; }
.lp-ar { font-family: 'Noto Kufi Arabic', 'Tahoma', sans-serif; }

/* layering: decorative elements behind, content in front */
.lp > * { position: relative; z-index: 1; }
.lp > .lp-wm { position: absolute; z-index: 0; }

/* faint corner watermark shared by all — subtle, never over content */
.lp-wm { position: absolute; inset: 0; pointer-events: none; }
.lp-wm img { position: absolute; right: -60px; bottom: 88px; width: 360px; filter: grayscale(1); opacity: .035; }

/* the blank body area (where document content would flow) */
.lp-body { flex: 1; position: relative; }
.lp-bodyhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--lp-faint);
  opacity: .45; white-space: nowrap; }

.lp-logo { display: block; width: auto; }
.lp-name-en { font-weight: 700; letter-spacing: -.01em; line-height: 1.12; }
.lp-name-ar { font-weight: 600; line-height: 1.45; color: var(--lp-ink-soft); display: inline-block; }

/* ───────────────────────────────────────────────────────────────
   1 · LEFT SPINE — a full-height colour spine carries the brand
   ─────────────────────────────────────────────────────────────── */
.lp--spine { padding-left: 44px; }
.lp--spine .sp-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 44px;
  background: linear-gradient(180deg, var(--lp-green), var(--lp-green-deep)); z-index: 2; }
.lp--spine .sp-rail .sp-mark { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 22px; }
.lp--spine .sp-rail span { position: absolute; bottom: 40px; left: 50%; transform: translate(-50%,0) rotate(180deg);
  writing-mode: vertical-rl; color: rgba(255,255,255,.92); font-size: 8.5px; letter-spacing: .34em;
  text-transform: uppercase; font-weight: 600; }
.lp--spine .sp-head { display: flex; justify-content: space-between; align-items: flex-start;
  padding: 70px 64px 0 40px; }
.lp--spine .sp-logo { height: 38px; }
.lp--spine .lp-name-en { font-size: 16px; }
.lp--spine .lp-name-ar { font-size: 14px; margin-top: 3px; }
.lp--spine .sp-head-r { text-align: right; padding-top: 2px; }
.lp--spine .sp-tag { margin-top: 8px; font-size: 9px; color: var(--lp-green-deep); letter-spacing: .04em; }
.lp--spine .sp-foot { padding: 0 64px 56px 40px; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px; }
.lp--spine .sp-foot::before { content: ''; position: absolute; left: 40px; right: 64px; top: -22px;
  height: 1px; background: var(--lp-line); }
.lp--spine .sp-foot-l { font-size: 9px; color: var(--lp-muted); line-height: 1.85; }
.lp--spine .sp-foot-r { font-size: 8.5px; color: var(--lp-faint); text-align: right; line-height: 1.85; letter-spacing: .03em; }

/* ───────────────────────────────────────────────────────────────
   2 · MONOGRAM CREST — centred, formal, double-rule divider
   ─────────────────────────────────────────────────────────────── */
.lp--crest { align-items: center; text-align: center; }
.lp--crest .cr-head { padding: 78px 80px 0; display: flex; flex-direction: column; align-items: center;
  gap: 16px; width: 100%; }
.lp--crest .cr-mark { width: 52px; }
.lp--crest .lp-name-en { font-size: 22px; letter-spacing: .015em; }
.lp--crest .lp-name-ar { font-size: 16px; margin-top: -2px; }
.lp--crest .cr-rule { display: flex; align-items: center; gap: 14px; width: 300px; margin-top: 6px; }
.lp--crest .cr-rule::before, .lp--crest .cr-rule::after { content: ''; height: 1px; flex: 1; background: var(--lp-line); }
.lp--crest .cr-rule span { font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--lp-green-deep); font-weight: 600; white-space: nowrap; }
.lp--crest .cr-foot { width: 100%; padding: 0 80px 56px; display: flex; flex-direction: column;
  align-items: center; gap: 12px; }
.lp--crest .cr-foot-rule { width: 64px; height: 2px; background: var(--lp-green); }
.lp--crest .cr-reg { display: flex; gap: 22px; font-size: 9px; color: var(--lp-muted); letter-spacing: .02em; }
.lp--crest .cr-reg b { color: var(--lp-ink); font-weight: 600; }
.lp--crest .cr-contact { font-size: 8.5px; color: var(--lp-faint); letter-spacing: .05em; }

/* ───────────────────────────────────────────────────────────────
   3 · COLOUR BLOCK — bold solid header, logo reversed white
   ─────────────────────────────────────────────────────────────── */
.lp--block .bl-head { background: linear-gradient(120deg, var(--lp-green-deep), var(--lp-green));
  padding: 52px 64px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.lp--block .bl-mark { width: 46px; filter: brightness(0) invert(1); }
.lp--block .bl-head-r { text-align: right; }
.lp--block .lp-name-en { font-size: 20px; color: #fff; }
.lp--block .lp-name-ar { font-size: 15px; color: rgba(255,255,255,.92); margin-top: 2px; }
.lp--block .bl-tag { margin-top: 9px; font-size: 9px; color: rgba(255,255,255,.85);
  letter-spacing: .1em; text-transform: uppercase; }
.lp--block .bl-foot { padding: 0 64px 52px; }
.lp--block .bl-foot-rule { height: 3px; width: 56px; background: var(--lp-green); margin-bottom: 16px; }
.lp--block .bl-foot-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; font-size: 9px; color: var(--lp-muted); letter-spacing: .02em; }
.lp--block .bl-foot-row b { color: var(--lp-ink); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────
   4 · HAIRLINE MINIMAL — Swiss, one rule, lots of air
   ─────────────────────────────────────────────────────────────── */
.lp--min .mn-head { padding: 72px 64px 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.lp--min .mn-logo { width: 92px; }
.lp--min .mn-head-r { text-align: right; }
.lp--min .lp-name-en { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.lp--min .lp-name-ar { font-size: 12px; margin-top: 3px; font-weight: 500; }
.lp--min .mn-rule { height: 1px; background: var(--lp-ink); margin: 0 64px; }
.lp--min .mn-foot { padding: 18px 64px 56px; display: flex; justify-content: space-between; align-items: flex-end; }
.lp--min .mn-foot-rule { height: 1px; background: var(--lp-line); margin: 0 64px 18px; }
.lp--min .mn-foot-l, .lp--min .mn-foot-r { font-size: 8.5px; color: var(--lp-faint); letter-spacing: .07em; line-height: 1.9; }
.lp--min .mn-foot-r { text-align: right; }
.lp--min .mn-dot { color: var(--lp-green); }

/* ───────────────────────────────────────────────────────────────
   5 · CORNER ACCENT — geometric angled shape, modern
   ─────────────────────────────────────────────────────────────── */
.lp--corner .cn-shape { position: absolute; top: 0; right: 0; width: 260px; height: 188px; z-index: 0;
  background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-deep) 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 0); }
.lp--corner .cn-shape2 { position: absolute; top: 0; right: 0; width: 140px; height: 140px; z-index: 0;
  background: rgba(255,255,255,.16); clip-path: polygon(100% 0, 100% 100%, 0 0); }
.lp--corner .cn-head { padding: 76px 64px 0; }
.lp--corner .cn-logo { width: 118px; margin-bottom: 18px; }
.lp--corner .lp-name-en { font-size: 18px; }
.lp--corner .lp-name-ar { font-size: 14px; margin-top: 2px; }
.lp--corner .cn-tag { margin-top: 9px; font-size: 9px; color: var(--lp-green-deep); letter-spacing: .04em; }
.lp--corner .cn-foot { padding: 0 64px 56px; display: flex; align-items: center; gap: 16px; }
.lp--corner .cn-foot-bar { width: 32px; height: 32px; flex-shrink: 0; background: var(--lp-green);
  clip-path: polygon(0 0, 100% 100%, 0 100%); }
.lp--corner .cn-foot-txt { font-size: 9px; color: var(--lp-muted); line-height: 1.75; letter-spacing: .02em; }
.lp--corner .cn-foot-txt b { color: var(--lp-ink); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────
   6 · INDUSTRIAL MONO — technical, monospace, full footer band
   ─────────────────────────────────────────────────────────────── */
.lp--mono .mo-head { padding: 64px 64px 0; }
.lp--mono .mo-top { display: flex; align-items: center; gap: 20px; }
.lp--mono .mo-logo { width: 104px; }
.lp--mono .mo-id { border-left: 2px solid var(--lp-green); padding-left: 18px; }
.lp--mono .lp-name-en { font-size: 17px; }
.lp--mono .lp-name-ar { font-size: 13px; margin-top: 2px; }
.lp--mono .mo-meta { margin-top: 22px; display: flex; gap: 0; border: 1px solid var(--lp-line);
  border-radius: 8px; overflow: hidden; }
.lp--mono .mo-meta div { flex: 1; padding: 11px 16px; border-right: 1px solid var(--lp-line); }
.lp--mono .mo-meta div:last-child { border-right: 0; }
.lp--mono .mo-meta .k { font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-faint); }
.lp--mono .mo-meta .v { font-size: 10px; color: var(--lp-ink); margin-top: 3px; }
.lp--mono .mo-foot-band { background: var(--lp-ink); color: #fff; padding: 14px 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 8.5px;
  letter-spacing: .06em; }
.lp--mono .mo-foot-band .g { color: var(--lp-green); }
.lp--mono .mo-foot-contact { padding: 11px 64px 0; font-size: 8.5px; color: var(--lp-faint);
  text-align: center; letter-spacing: .06em; }
.black-outlined-btn {
  color: #1f2125 !important;
}.companySelectionModal--Divider {
  border-color: #d3d3d4;
}
.companySelectionModal--DialogTitle {
  border-bottom: 1px solid #bdbebf;
}
.companySelectionModal--SectionTitle {
  padding-left: 1.5rem;
}
.companySelectionModal--DialogContents {
  padding: 1.5rem !important;
}
.companySelectionModal--DialogAction {
  justify-content: flex-end !important;
  padding: 0.5rem 1.5rem !important;
  background-color: #d3d3d4;
}
.companySelectionModal--DialogAction--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}.templates {
  padding: 0rem 2rem;
  width: 100%;
}.editSectionModal--Divider {
  border-color: #d3d3d4;
}
.editSectionModal--DialogTitle {
  padding: 0.75rem 1.5rem !important;
  border-bottom: 1px solid #bdbebf;
}
.editSectionModal--SectionTitle {
  padding-left: 1.5rem;
}
.editSectionModal--DialogContents {
  padding: 1.5rem !important;
}
.editSectionModal--DialogAction {
  justify-content: flex-end !important;
  padding: 0.5rem 1.5rem !important;
  background-color: #d3d3d4;
}
.editSectionModal--DialogAction--WhiteBtn {
  background-color: #fff !important;
  color: #1f2125;
}.pbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 30px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  cursor: pointer;
  font-family: var(--font-sans);
}

.pbtn svg {
  width: 14px;
  height: 14px;
}

.pbtn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.pbtn--primary {
  background: var(--color-action);
  border-color: transparent;
  color: var(--color-on-action);
  box-shadow: var(--shadow-sm);
}

.pbtn--primary:hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
}

.pbtn--ghost {
  border-color: transparent;
  background: transparent;
}

.pbtn--ghost:hover {
  background: var(--surface-hover);
}

.pbtn--sm {
  height: 26px;
  padding: 0 var(--s-4);
  font-size: var(--text-xs);
}

.pbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pb-seg {
  display: inline-flex;
  background: var(--surface-muted);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}

.pb-seg button {
  height: 24px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.pb-seg button svg {
  width: 12px;
  height: 12px;
}

.pb-seg button.is-active {
  background: var(--surface-raised);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

.pb-seg button:not(.is-active):hover {
  color: var(--text-secondary);
}

.pb-lens {
  display: inline-flex;
  background: rgba(20, 23, 27, 0.82);
  backdrop-filter: blur(6px);
  border-radius: var(--r-full);
  padding: 3px;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.pb-lens button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-5);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #c4c7cb;
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.pb-lens button svg {
  width: 13px;
  height: 13px;
}

.pb-lens button.is-active {
  background: #fff;
  color: var(--n-900);
}

.pb-bar-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
  margin-left: var(--s-2);
  white-space: nowrap;
}

.pb-bar-stat svg {
  width: 12px;
  height: 12px;
}

.pb-bar-stat.is-dirty {
  color: var(--warning-fg-strong);
  background: var(--warning-bg);
}

.pb-bar-dirty {
  color: var(--warning);
  display: grid;
  place-items: center;
}

.pb-bar-dirty svg {
  width: 12px;
  height: 12px;
}

.cx-switch {
  width: 34px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--n-200);
  position: relative;
  transition: background var(--dur-base);
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0;
}

.cx-switch.is-on {
  background: var(--brand-green);
}

.cx-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out);
}

.cx-switch.is-on .cx-switch-dot {
  transform: translateX(14px);
}

.st-sample-tg {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-full);
  padding-right: var(--s-4);
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.st-docchips {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: var(--s-2);
}

.st-docchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.st-docchip svg {
  width: 14px;
  height: 14px;
  color: inherit;
}

.st-docchip:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.st-docchip.is-active {
  background: var(--n-900);
  color: #fff;
  border-color: var(--n-900);
}

.st-docchip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}.dashboard-heading {
  margin-bottom: 1.5rem;
}

.dashboard-container {
  padding: 2rem 8.25rem;
}

.dashboard-title {
  color: #1f2125;
}

.dashboard-subtitle {
  color: #656669;
}

.module-container {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}.inventoryReportsTitleBar--RightContent ul {
  max-height: 180px;
  padding-bottom: 20px;
  z-index: 9999;
}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
@keyframes cardswipe {
  100% {
    transform: translate(5vw, 10vh) rotate(0);
  }
}
@keyframes cardreverseswipe {
  0% {
    transform: translate(5vw, 10vh) rotate(0);
  }
  100% {
    transform: translate(0, 0) rotate(-45deg);
  }
}
@keyframes cardrotate {
  100% {
    transform: rotateX(15deg) rotateY(10deg);
  }
}
@keyframes cardreverserotate {
  0% {
    transform: rotateX(15deg) rotateY(10deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(15deg);
  }
}
@keyframes tabletreversemoveup {
  0% {
    transform: rotate(-35deg) translate(8vw, 7vh);
  }
  100% {
    transform: rotate(-35deg) translate(8vw, 12vh);
  }
}
@keyframes textfadein {
  0% {
    transform: translateY(10vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes navbarexpand {
  0% {
    width: 0;
  }
  100% {
    width: 45vw;
  }
}
@keyframes navbarshrink {
  0% {
    width: 45vw;
  }
  100% {
    width: 0;
  }
}
@media screen and (max-width: 1112px) {
  @keyframes tabletmoveup {
    100% {
      transform: rotate(-35deg) translate(15vw, 7vh);
    }
  }
  @keyframes tabletreversemoveup {
    0% {
      transform: rotate(-35deg) translate(15vw, 7vh);
    }
    100% {
      transform: rotate(-35deg) translate(15vw, 12vh);
    }
  }
}
@media screen and (max-width: 812px) {
  @keyframes cardswipe {
    100% {
      transform: translate(7vw, 5vh);
    }
  }
}
@media screen and (max-width: 450px) {
  @keyframes swipemovedown {
    100% {
      transform: rotate(-35deg) translate(11vw, 3vh);
    }
  }
  @keyframes tabletmoveup {
    100% {
      transform: rotate(-35deg) translate(15vw, 0vh);
    }
  }
  @keyframes swipereversemovedown {
    0% {
      transform: rotate(-35deg) translate(11vw, 3vh);
    }
    100% {
      transform: rotate(-35deg) translate(11vw, -2vh);
    }
  }
  @keyframes tabletreversemoveup {
    0% {
      transform: rotate(-35deg) translate(15vw, 0vh);
    }
    100% {
      transform: rotate(-35deg) translate(15vw, 5vh);
    }
  }
  @keyframes navbarexpand {
    0% {
      width: 0;
    }
    100% {
      width: 70vw;
    }
  }
  @keyframes navbarshrink {
    0% {
      width: 70vw;
    }
    100% {
      width: 0;
    }
  }
}
@media screen and (max-width: 360px) {
  @keyframes tabletmoveup {
    100% {
      transform: rotate(-35deg) translate(15vw, 2vh);
    }
  }
}.react-tel-input .selected-flag .arrow {
  right: 0rem;
}/* ExpandableGridSummary.scss */
.expandable-grid-summary {
  position: relative;
}
.expandable-grid-summary__toggle-button {
  top: 50%;
  left: -24px;
  z-index: 1301;
  background-color: var(--mui-palette-background-paper);
  border: 1px solid var(--mui-palette-divider);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  box-shadow: var(--mui-shadows-3);
  opacity: 1;
  visibility: visible;
}
.expandable-grid-summary__toggle-button:hover {
  background-color: var(--mui-palette-action-hover);
  box-shadow: var(--mui-shadows-4);
}
.expandable-grid-summary__toggle-button--collapsed-floating {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 1300;
  background-color: var(--mui-palette-primary-main);
  color: var(--mui-palette-primary-contrastText);
  border: 2px solid var(--mui-palette-background-paper);
  width: 48px;
  height: 48px;
  box-shadow: var(--mui-shadows-4);
}
.expandable-grid-summary__toggle-button--collapsed-floating:hover {
  background-color: var(--mui-palette-primary-dark);
  box-shadow: var(--mui-shadows-6);
}
.expandable-grid-summary__toggle-button--mobile {
  position: fixed;
  top: 50%;
  right: 8px;
  z-index: 1400;
  border-radius: 8px 0 0 8px;
}
.expandable-grid-summary__content {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--mui-palette-background-paper);
  border-left: 1px solid var(--mui-palette-divider);
  border-radius: 8px 0 0 8px;
}
.expandable-grid-summary__content--expanded {
  overflow: auto;
  min-width: 0;
}
.expandable-grid-summary__content--collapsed {
  overflow: hidden;
}
.expandable-grid-summary__collapsed-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: var(--mui-palette-text-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.expandable-grid-summary__collapsed-indicator:hover {
  background-color: var(--mui-palette-action-hover);
}
.expandable-grid-summary__collapsed-indicator__text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Ensure grid container allows overflow for toggle button */
.expandable-grid-container .MuiGrid-item {
  overflow: visible !important;
  transition: flex-basis 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure parent container allows overflow */
.MuiGrid-container {
  overflow: visible;
}

/* Mobile drawer specific styles */
.expandable-summary-drawer .MuiDrawer-paper {
  width: 90vw;
  max-width: 400px;
}
@media (max-width: 600px) {
  .expandable-summary-drawer .MuiDrawer-paper {
    width: 95vw;
  }
}

/* Smooth collapse animation */
.MuiCollapse-horizontal .MuiCollapse-wrapperInner {
  height: 100%;
}

/* Custom scrollbar for summary content */
.expandable-grid-summary__content--expanded::-webkit-scrollbar {
  width: 6px;
}
.expandable-grid-summary__content--expanded::-webkit-scrollbar-track {
  background: var(--mui-palette-action-hover);
  border-radius: 3px;
}
.expandable-grid-summary__content--expanded::-webkit-scrollbar-thumb {
  background: var(--mui-palette-action-disabled);
  border-radius: 3px;
}
.expandable-grid-summary__content--expanded::-webkit-scrollbar-thumb:hover {
  background: var(--mui-palette-action-focus);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .expandable-grid-summary__toggle-button {
    border: 2px solid var(--mui-palette-text-primary);
  }
  .expandable-grid-summary__collapsed-indicator {
    border-left: 2px solid var(--mui-palette-text-primary);
  }
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .expandable-grid-summary,
  .MuiGrid-item,
  .MuiCollapse-root {
    transition: none !important;
  }
}.components-wrapper {
  width: 100vw;
}

@media screen and (max-width: 450px) {
  .button-wrapper .button-wrapper-variants {
    display: flex;
    flex-direction: column;
  }
  .chip-wrapper-variants {
    display: flex;
    flex-direction: column;
  }
}.edisabled {
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
  filter: opacity(0.5);
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pb-1 {
  padding-bottom: 0.625rem;
}

.pb-2 {
  padding-bottom: 1.25rem;
}

.pt-1 {
  padding-top: 0.625rem;
}

.pl-1 {
  padding-left: 0.625rem;
}

.pr-1 {
  padding-right: 0.625rem;
}

.pr-2 {
  padding-right: 1.25rem;
}

.pt-0 {
  padding-top: 0px !important;
}

.pl-2 {
  padding-left: 1.25rem !important;
}

.p-0 {
  padding: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-1 {
  margin-top: 0.625rem !important;
}

.mb-2 {
  margin-bottom: 1.25rem !important;
}

.mb-1 {
  margin-bottom: 0.625rem !important;
}

.mt-2 {
  margin-top: 1.25rem !important;
}

.mb-1-2 {
  margin-bottom: 0.75rem !important;
}

.mr-2 {
  margin-right: 1.25rem !important;
}

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

.justify-content-center {
  justify-content: center !important;
}

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

.flex-direction-column {
  flex-direction: column !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-space-evenly {
  justify-content: space-evenly !important;
}

.fd-column,
.fd-col {
  flex-direction: column !important;
}

.ai-center {
  align-items: center !important;
}

.ai-start {
  align-items: flex-start !important;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-start {
  justify-content: flex-start !important;
}

.jc-end {
  justify-content: end !important;
}

.fd-col {
  flex-direction: column !important;
}

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

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

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

.w-100 {
  width: 100% !important;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-40 {
  width: 60%;
}

.w-60 {
  width: 60%;
}

.h-100 {
  height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.row {
  width: 100%;
  display: flex;
  margin: 0.625rem;
}

.col-9 {
  width: 75%;
}

.col-8 {
  width: 66.64%;
}

.col-7 {
  width: 58.31%;
}

.col-6 {
  width: 50%;
}

.col-5 {
  width: 41.65%;
}

.col-4 {
  width: 33.32%;
}

.col-3 {
  width: 25%;
}

.col {
  width: 33.33%;
}

.h1 {
  font-size: 1.75rem;
  line-height: 140%;
  letter-spacing: -0.035rem;
}

.h2 {
  font-size: 1.5rem;
  line-height: 140%;
  letter-spacing: -0.03rem;
}

.h3 {
  font-size: 1.25rem;
  letter-spacing: -0.025rem;
}

.h4 {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
}

.h5 {
  font-size: 1rem;
  letter-spacing: -0.02rem;
}

.s1 {
  font-size: 1.125rem;
  letter-spacing: -0.0225rem;
}

.s2 {
  font-size: 1rem;
  letter-spacing: -0.02rem;
}

.s3 {
  font-size: 0.875rem;
  letter-spacing: -0.0175rem;
}

.s4 {
  font-size: 0.8125rem;
  letter-spacing: -0.01625rem;
}

.s5 {
  font-size: 0.75rem;
  letter-spacing: -0.015rem;
}

.normal {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 600;
}