@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');/* ============================================================
   CRM DASHBOARD — All styles. Colors via CSS variables only.
   ============================================================ */

:root {
  --primary: #4f46e5;
  --primary-dark: #2219b3;
  --primary-light: #7f79ec;
  --primary-100: #eae9fc;
  --primary-200: #d4d2f9;

  --bg-page: #eeeef5;
  --bg-card: #ffffff;

  --text-h: #111827;
  --text-body: #374151;
  --text-sub: #6b7280;
  --text-muted: #9ca3af;

  --border: #e5e7eb;
  --border-light: #f3f4f6;

  --green: #16a34a;
  --green-bg: #dcfce7;
  --red: #dc2626;
  --red-bg: #fee2e2;
  --yellow: #d97706;
  --yellow-bg: #fef3c7;
  --orange: #ea580c;
  --orange-bg: #ffedd5;
  --cyan: #0891b2;
  --cyan-bg: #e0f2fe;
  --teal: #0d9488;
  --teal-bg: #ccfbf1;
  --blue: #2563eb;
  --blue-bg: #dbeafe;
  --indigo: #4338ca;
  --indigo-bg: #e0e7ff;
  --pink: #db2777;
  --pink-bg: #fce7f3;
  --purple: #7c3aed;
  --purple-bg: #ede9fe;

  --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-body);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────────── */
.crm-dashboard {
  padding: 14px 14px 32px;
  min-height: 100vh;
}

/* ── Card base ──────────────────────────────────────── */
.dc {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: 100%;
  overflow: hidden;
}
.dc-body {
  padding: 16px 18px 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-h);
  margin-bottom: 1px;
}
.dc-sub {
  font-size: 11.5px;
  color: var(--text-sub);
}

/* ── Top bar ────────────────────────────────────────── */
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dash-topbar h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-h);
}
.dash-topbar .upd {
  font-size: 11px;
  color: var(--text-muted);
}
.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-refresh:hover {
  background: var(--primary-100);
}
.btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Animations ─────────────────────────────────────── */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation: spin 0.8s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: -500px 0;
  }
  100% {
    background-position: 500px 0;
  }
}
.skeleton {
  background: linear-gradient(90deg, #ebebf0 25%, #f5f5fa 50%, #ebebf0 75%);
  background-size: 500px 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────
   COMPANY PULSE
   ───────────────────────────────────────────────────── */
.cp-card {
  background: linear-gradient(145deg, #f5f3ff 0%, #eaf3ff 55%, #f0f5ff 100%);
  /* border: 1px solid var(--primary-200); */
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  height: 100%;
  overflow: hidden;
}
.cp-body {
  /* padding: 18px 20px 16px; */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cp-h {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-h);
  margin-bottom: 1px;
}
.cp-sub {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 11px;
}

/* filter row */
.cp-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}
.cp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d1d5db;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
}
.cp-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.cp-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* range row */
.cp-ranges {
  display: flex;
  gap: 3px;
}
.cp-range {
  border: none;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.13s;
}
.cp-range.act {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.cp-range:hover:not(.act) {
  background: var(--primary-100);
  color: var(--primary);
}

/* custom dates */
.cp-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.cp-date-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-h);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}
.cp-date-input:focus {
  border-color: var(--primary);
}
.cp-sep {
  font-size: 11px;
  color: var(--text-muted);
}
.cp-apply {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* forecast */
.cp-forecast-lbl {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 1px;
}
.cp-forecast-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-h);
  margin-bottom: 9px;
}

/* stats row */
.cp-stats {
  display: flex;
  gap: 22px;
  margin-bottom: 11px;
}
.cp-stat label {
  font-size: 11px;
  color: var(--text-sub);
  display: block;
  margin-bottom: 1px;
}
.cp-stat .sv {
  font-size: 18px;
  font-weight: 800;
}
.sv-cyan {
  color: #06b6d4;
}
.sv-green {
  color: var(--green);
}
.sv-red {
  color: var(--red);
}

/* legend */
.cp-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 5px;
}
.cp-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-sub);
}
.cp-legend-line {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* chart */
.cp-chart-wrap {
  flex: 1;
  min-height: 0;
}
.cp-chart {
  width: 100%;
  overflow: visible;
  display: block;
}

/* x labels */
.cp-xlabels {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 11px;
}
.cp-xlabels span {
  font-size: 11px;
  color: var(--text-muted);
}

/* action btns */
.cp-actions {
  display: flex;
  gap: 8px;
}
.btn-filled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #6366f1, #d946ef);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-filled:hover {
  background: var(--primary-dark);
}
.btn-outline-cp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-body);
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-outline-cp:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(255, 255, 255, 0.9);
}

/* ─────────────────────────────────────────────────────
   REVENUE MTD
   ───────────────────────────────────────────────────── */
.rev-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rev-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--purple-bg);
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 6px;
}
.rev-big {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.rev-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-h);
}
.rev-up {
  background: var(--green-bg);
  color: var(--green);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 12.5px;
  font-weight: 700;
}
.rev-down {
  background: var(--red-bg);
  color: var(--red);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 12.5px;
  font-weight: 700;
}
.rev-target {
  font-size: 12px;
  color: var(--text-sub);
}
.rev-target strong {
  color: var(--text-body);
}
.rev-sparkline {
  width: 130px;
  height: 50px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   OPEN PIPELINE
   ───────────────────────────────────────────────────── */
.pipe-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--teal-bg);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 5px;
}
.pipe-big {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 3px;
  flex-wrap: wrap;
}
.pipe-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-h);
}
.pipe-badge {
  background: var(--teal-bg);
  color: var(--teal);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}
.pipe-sub {
  font-size: 12px;
  color: var(--text-sub);
}
.pipe-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 50px;
  flex-shrink: 0;
}
.pipe-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
}

/* ─────────────────────────────────────────────────────
   LEAD FUNNEL
   ───────────────────────────────────────────────────── */
.fn-badges {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fn-badge-won {
  background: var(--green-bg);
  color: var(--green);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 600;
}
.fn-badge-drop {
  background: var(--yellow-bg);
  color: var(--yellow);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 600;
}

.fn-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.fn-label {
  font-size: 12px;
  color: var(--text-sub);
  min-width: 72px;
  text-align: right;
  padding-right: 10px;
}
.fn-bar-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fn-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  height: 26px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: width 0.5s ease;
}

.fn-footer {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
.fn-footer-item label {
  font-size: 11px;
  color: var(--text-sub);
  display: block;
  margin-bottom: 1px;
}
.fn-footer-item .val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-h);
}

/* ─────────────────────────────────────────────────────
   LEAD SOURCES  (donut)
   ───────────────────────────────────────────────────── */
.ls-donut-wrap {
  position: relative;
  flex-shrink: 0;
}
.ls-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ls-donut-center .big {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-h);
}
.ls-donut-center .small {
  font-size: 10.5px;
  color: var(--text-sub);
}

.ls-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.ls-leg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.ls-leg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ls-leg-name {
  flex: 1;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-leg-cnt {
  font-weight: 700;
  color: var(--text-h);
}

.ls-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.ls-footer-item label {
  font-size: 11px;
  color: var(--text-sub);
  display: block;
  margin-bottom: 1px;
}
.ls-footer-item .val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-h);
}
.ls-footer-item .pct {
  color: var(--green);
  font-size: 11.5px;
  margin-left: 4px;
}

/* ─────────────────────────────────────────────────────
   FOLLOW-UPS FOCUS
   ───────────────────────────────────────────────────── */
.fu-badge-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.fu-badge-overdue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--red-bg);
  color: var(--red);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.fu-badge-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--orange-bg);
  color: var(--orange);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

.fu-priority-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.fu-list {
  overflow-y: auto;
  max-height: 240px;
}
.fu-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.fu-item:last-child {
  border-bottom: none;
}
.fu-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 11px;
}
.fu-icon-red {
  background: var(--red-bg);
  color: var(--red);
}
.fu-icon-orange {
  background: var(--orange-bg);
  color: var(--orange);
}

.fu-content {
  flex: 1;
  min-width: 0;
}
.fu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fu-meta {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 1px;
}

.fu-btns {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  align-items: flex-start;
  margin-top: 1px;
}
.fu-btn {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-xs);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.fu-btn:hover {
  background: var(--primary-100);
  border-color: var(--primary);
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────
   TODAY / AGENDA
   ───────────────────────────────────────────────────── */
.td-badge-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.td-badge-meet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-100);
  color: var(--primary);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.td-badge-tasks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--yellow-bg);
  color: var(--yellow);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

.td-section-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-h);
  margin-bottom: 6px;
}

.ag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.ag-row:last-child {
  border-bottom: none;
}
.ag-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  min-width: 38px;
}
.ag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ag-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-h);
}
.ag-tag {
  border-radius: var(--radius-xs);
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.tag-appt {
  background: var(--blue-bg);
  color: var(--blue);
}
.tag-int {
  background: var(--indigo-bg);
  color: var(--indigo);
}
.tag-event {
  background: var(--pink-bg);
  color: var(--pink);
}
.tag-online {
  background: var(--teal-bg);
  color: var(--teal);
}
.tag-confirm {
  background: var(--green-bg);
  color: var(--green);
}

.td-qa-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-h);
  margin: 10px 0 6px;
}
.td-qa {
  display: flex;
  gap: 7px;
}
.td-qa-btn {
  background: var(--border-light);
  border: none;
  border-radius: var(--radius-xs);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.12s;
}
.td-qa-btn:hover {
  background: var(--primary-100);
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────
   DEALS BY STAGE
   ───────────────────────────────────────────────────── */
.ds-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.ds-label {
  font-size: 12px;
  color: var(--text-sub);
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.ds-bar-outer {
  flex: 1;
  background: #f3f4f6;
  border-radius: 5px;
  height: 20px;
  overflow: hidden;
}
.ds-bar-inner {
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding-left: 7px;
  transition: width 0.45s ease;
}
.ds-bar-n {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.ds-val {
  font-size: 12px;
  font-weight: 500;
  min-width: 46px;
  text-align: right;
  color: var(--text-sub);
}

.ds-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.ds-footer-item label {
  font-size: 11px;
  color: var(--text-sub);
  display: block;
  margin-bottom: 1px;
}
.ds-footer-item .vs {
  font-size: 15px;
  font-weight: 800;
}
.vs-stuck {
  color: var(--orange);
}
.vs-high {
  color: var(--green);
}

/* ─────────────────────────────────────────────────────
   COMMERCIAL THROUGHPUT
   ───────────────────────────────────────────────────── */
.ct-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ct-leg-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-sub);
}
.ct-leg-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.ct-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 85px;
  margin-bottom: 2px;
}
.ct-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.ct-chart {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 110px;
  margin: 14px 0 10px;
}

.ct-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ct-stack {
  width: 38px;
  height: 100%;
  display: flex;
  flex-direction: column-reverse; /* important for stacking */
  justify-content: flex-start;
  border-radius: 6px;
  overflow: hidden;
}

.ct-stack-bar {
  width: 100%;
  transition: height 0.3s ease;
}

.ct-wlbl {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.ct-stack-bar:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.ct-stack-bar:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.ct-wlbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ct-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.ct-footer-item label {
  font-size: 11px;
  color: var(--text-sub);
  display: block;
  margin-bottom: 1px;
}
.ct-footer-item .vf {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-h);
}
.vf-green {
  color: var(--green) !important;
}
.vf-red {
  color: var(--red) !important;
}

/* ─────────────────────────────────────────────────────
   TEAM PERFORMANCE
   ───────────────────────────────────────────────────── */
.tp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-light);
}
.tp-row:last-child {
  border-bottom: none;
}

.tp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.tp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-h);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-met {
  font-size: 12.5px;
  font-weight: 500;
  min-width: 58px;
  color: var(--text-h);
}

.tp-win {
  display: inline-block;
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  min-width: 42px;
  text-align: center;
}
.tp-win-g {
  background: var(--green-bg);
  color: var(--green);
}
.tp-win-b {
  background: var(--blue-bg);
  color: var(--blue);
}
.tp-win-r {
  background: var(--red-bg);
  color: var(--red);
}

.tp-act {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 72px;
}
.tp-act-n {
  font-size: 12.5px;
  font-weight: 600;
}
.tp-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}
.tp-bar {
  width: 4px;
  border-radius: 2px 2px 0 0;
}

.tp-more {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
}
.tp-more:hover {
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────
   ERROR + REFRESH TOAST
   ───────────────────────────────────────────────────── */
.dash-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 10px;
  text-align: center;
}
.dash-error .ei {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.dash-error h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.dash-error p {
  font-size: 13px;
  color: var(--text-sub);
  margin: 0;
}

.refresh-toast {
  position: fixed;
  top: 14px;
  right: 18px;
  background: var(--primary-100);
  color: var(--primary);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.18);
}
.refresh-toast .sp {
  width: 12px;
  height: 12px;
  border: 2px solid var(--primary-200);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.backgroundWhite {
  background-color: var(--bg-card);
  padding: 18px 20px 16px;
}

.headerCard {
  padding: 18px 20px 0px 16px;
  background: linear-gradient(
    135deg,
    rgba(209, 171, 250, 0.9),
    rgba(249, 181, 220, 0.9),
    rgba(153, 217, 251, 0.9),
    rgba(165, 243, 252, 0.9)
  );
  /* border-radius: 16px; */
}

.dc {
  position: relative;
  border-radius: 20px;
  /* padding: 22px; */
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f3f4f6);
}

.rev-bg {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 90%;
  height: 75%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

.dc-body {
  position: relative;
  z-index: 2;
}
.rev-sparkline {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 45%;
  height: 60%;
  opacity: 0.9;
  pointer-events: none;
}

.pipe-card {
  position: relative;
  overflow: hidden;
}

.pipe-bg {
  position: absolute;
  bottom: 20px;
  right: 10px;
  width: 90%;
  height: 75%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.dc-body {
  position: relative;
  z-index: 2;
}

.pipe-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 100%;
  width: 30%;
}

.pipe-bar {
  width: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.elw-page-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-color);
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

.elw-page {
  display: flex;
  flex-direction: column;
  height: 80%;
  padding: 24px 32px;
  overflow-y: auto;
}

.elw-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}

.elw-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 4px 0;
}

.elw-page-subtitle {
  font-size: 13px;
  color: var(--accent-color);
  margin: 0;
}

.elw-form-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.elw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 2;
  min-width: 220px;
}

.elw-field-small {
  flex: 1;
  min-width: 140px;
}

.elw-field-toggle {
  flex: 0 0 auto;
  min-width: 100px;
}

.elw-field-btn {
  flex: 0 0 auto;

}

.elw-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
}

/* Toggle switch */
.elw-toggle {
  width: 42px;
  height: 24px;
  border-radius: 20px;
  background: var(--color-neutral-500);
  border: none;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.elw-toggle.on {
  background: var(--primary-purple-400);
}

.elw-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
}

.elw-toggle.on .elw-toggle-knob {
  transform: translateX(18px);
}

/* Table section */
.elw-table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

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

.elw-table-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.elw-page-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-color);
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

.elw-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  padding: 24px 32px;
  overflow: hidden; 
  box-sizing: border-box;
}

.elw-table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; 
}

.elw-table-header {
  flex-shrink: 0;
}

.elw-table-section .table-container,
.elw-table-section .reusable-table {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.spin-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.awsm-processing {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-top: 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fbff, #eef6ff);
}

.awsm-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
}

.awsm-wave span {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: #2563eb;
  animation: awsmWave 1s ease-in-out infinite;
}

.awsm-wave span:nth-child(2) {
  animation-delay: 0.1s;
}
.awsm-wave span:nth-child(3) {
  animation-delay: 0.2s;
}
.awsm-wave span:nth-child(4) {
  animation-delay: 0.3s;
}
.awsm-wave span:nth-child(5) {
  animation-delay: 0.4s;
}
.awsm-wave span:nth-child(6) {
  animation-delay: 0.5s;
}
.awsm-wave span:nth-child(7) {
  animation-delay: 0.6s;
}
.awsm-wave span:nth-child(8) {
  animation-delay: 0.7s;
}

@keyframes awsmWave {
  0%,
  100% {
    height: 8px;
    opacity: 0.4;
  }

  50% {
    height: 28px;
    opacity: 1;
  }
}

.awsm-processing-text {
  font-size: 14px;
  color: #1e3a8a;
  font-weight: 500;
}

.recording-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
  height: 14px;
}

.recording-wave span {
  width: 2px;
  border-radius: 999px;
  background: #ef4444;
  animation: recordingWave 0.8s ease-in-out infinite;
}

.recording-wave span:nth-child(1) {
  height: 5px;
  animation-delay: 0s;
}

.recording-wave span:nth-child(2) {
  height: 10px;
  animation-delay: .1s;
}

.recording-wave span:nth-child(3) {
  height: 14px;
  animation-delay: .2s;
}

.recording-wave span:nth-child(4) {
  height: 10px;
  animation-delay: .3s;
}

.recording-wave span:nth-child(5) {
  height: 5px;
  animation-delay: .4s;
}

@keyframes recordingWave {
  0%,100% {
    transform: scaleY(.4);
    opacity: .5;
  }

  50% {
    transform: scaleY(1.4);
    opacity: 1;
  }
}/* =========================================================
   AdminSidebar.module.css
   CRM Lah Sidebar
   Expanded + Minimized + Hover Submenus
   Compact Icons + Stable Hover
   ========================================================= */

/* =========================================================
   GLOBAL RESET
   ========================================================= */

* {
  box-sizing: border-box;
}

/* :global(html) {
  scroll-behavior: smooth;
} */

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  padding: 0;
  background: #f8f9fb;
}

/* =========================================================
   ROOT VARIABLES
   ========================================================= */

/* :global(:root) {
  --admin-sidebar-width: var(--sidebar-expanded-width);

  --sidebar-expanded-width: clamp(190px, 14vw, 204px);

  --sidebar-minimized-width: 88px;

  --sidebar-border: #ececec;

  --sidebar-text: #333333;
  --sidebar-muted: #777777;

  --sidebar-icon: #555555;
  --sidebar-blue: #0029ce;
  --sidebar-blue-border: #c9bbff;
  --sidebar-blue-bg: #f8f6ff;

  --sidebar-hover: #ffffff;

  --ecs-crm-sidebar-transition: 0.25s ease;

  --sidebar-radius: 14px;
} */
:root {
  --ecs-crm-admin-sidebar-width: var(--ecs-crm-sidebar-minimized-width);

  --ecs-crm-sidebar-expanded-width: clamp(190px, 14vw, 204px);
  --ecs-crm-sidebar-minimized-width: 88px;

  --ecs-crm-sidebar-border: #ececec;
  --ecs-crm-sidebar-text: #333333;
  --ecs-crm-sidebar-muted: #777777;
  --ecs-crm-sidebar-icon: #555555;

  --ecs-crm-sidebar-primary: #0029ce;
  --ecs-crm-sidebar-primary-border: #c9bbff;
  --ecs-crm-sidebar-primary-bg: #f8f6ff;

  --ecs-crm-sidebar-hover: #ffffff;
  --ecs-crm-sidebar-transition: 0.25s ease;
  --ecs-crm-sidebar-radius: 14px;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

._sidebar_y4k3r_161 {
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  width: var(--ecs-crm-admin-sidebar-width);
  border-right: 1px solid var(--ecs-crm-sidebar-border);

  height: 100vh;

  background: #ffffff;
  display: flex;
  flex-direction: column;

  z-index: 9998;

  overflow: visible;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  transition:
    width var(--ecs-crm-sidebar-transition),
    box-shadow var(--ecs-crm-sidebar-transition);

  isolation: isolate;
}

/* =========================================================
   EXPANDED SIDEBAR
   ========================================================= */

._sidebarExpanded_y4k3r_227 {
  width: var(--ecs-crm-sidebar-expanded-width);
}

._sidebarExpanded_y4k3r_227 ._menuItem_y4k3r_235 ._menuLabel_y4k3r_235 {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  font-size: 13px !important;
  line-height: 17px !important;
  color: inherit !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235 ._menuLabel_y4k3r_235 {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  font-size: 9.5px !important;
  line-height: 12px !important;
  color: inherit !important;
}

._activeMenuItem_y4k3r_291 ._menuLabel_y4k3r_235 {
  color: #0029ce !important;
}

/* =========================================================
   MINIMIZED SIDEBAR
   ========================================================= */

._sidebarMinimized_y4k3r_265 {
  width: var(--ecs-crm-sidebar-minimized-width);
}

/* =========================================================
   LOGO SECTION
   ========================================================= */

._logoSection_y4k3r_323 {
  position: relative;

  width: 100%;

  height: 75px;
  min-height: 75px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;

  /* border-bottom: 1px solid #f2f2f2; */

  background: #fff;

  flex-shrink: 0;

  overflow: visible;

  z-index: 3000;
}

/* =========================================================
   LOGO LINK
   ========================================================= */

._logoLink_y4k3r_381 {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  text-decoration: none;

  overflow: hidden;
}

/* =========================================================
   LOGO
   ========================================================= */

/* =========================================================
   LOGO
   Responsive to sidebar width
   ========================================================= */

._logo_y4k3r_323 {
  display: block;

  width: clamp(50px, 82%, 115px);

  height: auto;

  max-width: 100%;
  max-height: 43px;

  object-fit: contain;

  user-select: none;

  transition:
    width var(--ecs-crm-sidebar-transition),
    max-height var(--ecs-crm-sidebar-transition);
}

/* =========================================================
   MINIMIZED LOGO
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._logoSection_y4k3r_323 {
  padding: 8px;
}

._sidebarMinimized_y4k3r_265 ._logo_y4k3r_323 {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}

/* =========================================================
   MENU SCROLLBAR - SUPER SLIM
   ========================================================= */

._menuContainer_y4k3r_505 {
  flex: 1;
  width: 100%;
  min-height: 0;

  overflow-x: hidden;
  overflow-y: auto;

  scroll-behavior: auto;

  padding: 12px 8px 20px;

  scrollbar-width: thin;
  scrollbar-color: #d6d6d6 transparent;
}

/* Chrome / Edge */
._menuContainer_y4k3r_505::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

._menuContainer_y4k3r_505::-webkit-scrollbar-track {
  width: 2px !important;
  background: transparent !important;
}

._menuContainer_y4k3r_505::-webkit-scrollbar-thumb {
  width: 2px !important;
  background: #d6d6d6 !important;
  border-radius: 10px !important;
}

._menuContainer_y4k3r_505::-webkit-scrollbar-thumb:hover {
  background: #bdbdbd !important;
}

/* =========================================================
   MENU ITEM
   ========================================================= */

._menuItem_y4k3r_235 {
  position: relative;

  width: 100%;

  min-width: 0;

  min-height: 47px;

  margin: 0 0 5px;

  padding: 6px 10px;

  border: 1px solid transparent;

  border-radius: 9px;

  background: #ffffff;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 9px;

  text-decoration: none !important;

  color: var(--ecs-crm-sidebar-text) !important;

  font-family: inherit;

  cursor: pointer;

  outline: none;

  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

/* =========================================================
   MENU ITEM HOVER
   ========================================================= */

._menuItem_y4k3r_235:hover {
  background: var(--ecs-crm-sidebar-hover);

  border-color: #eeeeee;

  color: #272a38 !important;
}

/* =========================================================
   MENU FOCUS
   ========================================================= */

._menuItem_y4k3r_235:focus-visible {
  outline: 2px solid rgba(63, 134, 245, 0.3);

  outline-offset: 1px;
}

/* =========================================================
   DROPDOWN BUTTON
   ========================================================= */

._dropdownButton_y4k3r_733 {
  appearance: none;

  font-family: inherit;

  text-align: left;

  outline: none;
}

._dropdownButton_y4k3r_733:focus {
  outline: none;
}

/* =========================================================
   MENU ICON
   ========================================================= */

._menuIcon_y4k3r_769 {
  width: 21px;
  height: 21px;

  min-width: 21px;

  flex: 0 0 21px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: var(--ecs-crm-sidebar-icon);

  font-size: 17px;

  transition:
    color 0.16s ease,
    transform 0.16s ease;
}

/* =========================================================
   MENU ICON SVG
   ========================================================= */

._menuIcon_y4k3r_769 svg {
  width: 18px;
  height: 18px;

  stroke-width: 1.8;
}

/* =========================================================
   MENU ICON HOVER
   ========================================================= */

._menuItem_y4k3r_235:hover ._menuIcon_y4k3r_769 {
  color: #3b3f4f;
}

/* =========================================================
   MENU LABEL
   ========================================================= */

._menuLabel_y4k3r_235 {
  flex: 1;

  min-width: 0;

  overflow: hidden;

  font-size: 13px;

  font-weight: 500;

  line-height: 17px;

  white-space: nowrap;

  text-overflow: ellipsis;

  /* color: inherit; */
  color: #333333 !important;
}

/* =========================================================
   ACTIVE MENU
   ========================================================= */

._activeMenuItem_y4k3r_291 {
  background: var(--ecs-crm-sidebar-primary-bg) !important;
  border-color: var(--ecs-crm-sidebar-primary-border) !important;
  color: var(--ecs-crm-sidebar-primary) !important;

  box-shadow: 0 2px 6px rgba(63, 134, 245, 0.07);

  font-weight: 600;
}

/* =========================================================
   ACTIVE ICON
   ========================================================= */

._activeMenuItem_y4k3r_291 ._menuIcon_y4k3r_769 {
  color: #0029ce;
}

/* =========================================================
   ACTIVE LABEL
   ========================================================= */
._activeMenuItem_y4k3r_291 ._menuLabel_y4k3r_235 {
  color: #0029ce !important;
  font-weight: 600;
}

._dropdownWrapper_y4k3r_961 {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;
}

/* =========================================================
   MINIMIZED HOVER BRIDGE
   ========================================================= */

/*
 * Important for hover submenu.
 * This creates a safe positioning context.
 */

._sidebarMinimized_y4k3r_265 ._dropdownWrapper_y4k3r_961 {
  z-index: 10;
}

/* =========================================================
   DROPDOWN ACTIVE
   ========================================================= */

._dropdownActive_y4k3r_1013 > ._dropdownButton_y4k3r_733 {
  color: #0029ce !important;
}

/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

._dropdownArrow_y4k3r_1029 {
  width: 20px;
  height: 20px;

  min-width: 20px;

  flex: 0 0 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #8d91a0;

  font-size: 15px;

  transition:
    color 0.16s ease,
    transform 0.16s ease;
}

/* =========================================================
   DROPDOWN ARROW SVG
   ========================================================= */

._dropdownArrow_y4k3r_1029 svg {
  width: 16px !important;
  height: 16px !important;

  min-width: 16px;
  min-height: 16px;

  stroke-width: 2.2;
}

/* =========================================================
   ACTIVE DROPDOWN ARROW
   ========================================================= */

._dropdownActive_y4k3r_1013 ._dropdownArrow_y4k3r_1029 {
  color: #0029ce;
}

/* =========================================================
   EXPANDED SUBMENU
   ========================================================= */

._subMenu_y4k3r_1125 {
  width: 100%;

  margin-top: -1px;

  margin-bottom: 6px;

  padding: 5px;

  background: #f8f9fc;

  border: 1px solid #eeeeee;

  border-radius: 10px;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);

  animation: _submenuOpen_y4k3r_1 0.14s ease;
}

/* =========================================================
   SUBMENU ANIMATION
   ========================================================= */

@keyframes _submenuOpen_y4k3r_1 {
  from {
    opacity: 0;

    transform: translateY(-3px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* =========================================================
   SUBMENU ITEM
   ========================================================= */

._subMenuItem_y4k3r_1209 {
  position: relative;

  width: 100%;

  min-height: 46px;

  margin: 0 0 3px;

  padding: 9px 11px;

  border-radius: 8px;

  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 10px;

  text-decoration: none !important;

  color: #555b6e !important;

  font-size: 14px;

  font-weight: 500;

  line-height: 18px;

  text-align: left;

  transition:
    background 0.14s ease,
    color 0.14s ease;
}

/* =========================================================
   LAST SUBMENU
   ========================================================= */

._subMenuItem_y4k3r_1209:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SUBMENU HOVER
   ========================================================= */

._subMenuItem_y4k3r_1209:hover {
  background: #edf3ff;

  color: #0029ce !important;
}

/* =========================================================
   SUBMENU ICON
   ========================================================= */

._subMenuIcon_y4k3r_1329 {
  width: 22px;

  height: 22px;

  min-width: 22px;

  flex: 0 0 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #646a7c;

  font-size: 18px;
}

/* =========================================================
   SUBMENU ICON SVG
   ========================================================= */

._subMenuIcon_y4k3r_1329 svg {
  width: 19px;

  height: 19px;

  stroke-width: 1.8;
}

/* =========================================================
   SUBMENU ICON HOVER
   ========================================================= */

._subMenuItem_y4k3r_1209:hover ._subMenuIcon_y4k3r_1329 {
  color: #0029ce;
}

/* =========================================================
   SUBMENU LABEL
   ========================================================= */

._subMenuLabel_y4k3r_1417 {
  flex: 1;

  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}

/* =========================================================
   ACTIVE SUBMENU
   ========================================================= */

._activeSubMenuItem_y4k3r_1449 {
  background: #eaf2ff !important;

  color: #0029ce !important;

  font-weight: 600;
}

/* =========================================================
   ACTIVE SUBMENU ICON
   ========================================================= */

._activeSubMenuItem_y4k3r_1449 ._subMenuIcon_y4k3r_1329 {
  color: #0029ce;
}

/* =========================================================
   MINIMIZED MENU
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235 {
  width: 62px;
  height: 62px;
  min-height: 62px;

  margin: 0 auto 10px;

  padding: 6px 3px;

  border: 1px solid #ededed;

  border-radius: 14px;

  background: #fff;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 0px;

  text-align: center;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  transition: all 0.25s ease;
}

/* =========================================================
   MINIMIZED MENU HOVER
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235:hover {
  transform: translateY(-2px);

  color: #0029ce !important;

  background: #fff;

  border-color: #d7dfff;

  box-shadow: 0 8px 18px rgba(48, 86, 255, 0.12);
}

/* =========================================================
   MINIMIZED MENU ICON - COMPACT + ICON SVG
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 {
  width: 20px;
  height: 20px;

  min-width: 20px;

  flex: 0 0 20px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #555;

  font-size: 18px;

  margin-bottom: 5px;

  transition: color 0.25s ease;
}

._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 svg {
  width: 18px;
  height: 18px;

  stroke-width: 2;
}

/* =========================================================
   MINIMIZED MENU ICON HOVER COLOR
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235:hover ._menuIcon_y4k3r_769 {
  color: #0029ce !important;
}

._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235:hover ._menuIcon_y4k3r_769 svg {
  color: #0029ce !important;
  stroke: #0029ce !important;
}

/* =========================================================
   MINIMIZED LABEL
   ========================================================= */

/* .sidebarMinimized .menuLabel {
  width: 100%;

  flex: none;

  min-width: 0;

  text-align: center;

  font-size: 9.5px;

  line-height: 12px;

  white-space: normal;

  overflow: visible;

  text-overflow: unset;

  word-break: break-word;
} */

._sidebarMinimized_y4k3r_265 ._menuLabel_y4k3r_235 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  min-width: 0 !important;

  flex: none;

  color: #333333 !important;
  text-align: center;

  font-size: 9.5px !important;
  line-height: 12px !important;

  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* =========================================================
   MINIMIZED ACTIVE
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._activeMenuItem_y4k3r_291 {
  background: #f8f6ff !important;

  border: 1.5px solid #c9bbff !important;

  color: #0029ce !important;

  box-shadow: 0 6px 18px rgba(98, 77, 255, 0.1);

  transform: none;
}

/* =========================================================
   MINIMIZED ACTIVE INDICATOR
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._activeMenuItem_y4k3r_291::before {
  left: -1px;

  width: 3px;

  height: 32px;
}

._sidebarMinimized_y4k3r_265 ._activeMenuItem_y4k3r_291 ._menuIcon_y4k3r_769 {
  color: #0029ce !important;
}

._sidebarMinimized_y4k3r_265 ._activeMenuItem_y4k3r_291 ._menuLabel_y4k3r_235 {
  color: #0029ce !important;
  font-weight: 600;
}

/* =========================================================
   MINIMIZED DROPDOWN - BOTTOM RIGHT TRIANGLE
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._dropdownArrow_y4k3r_1029 {
  position: absolute;

  right: 0;
  bottom: 0;

  width: 0;
  height: 0;

  min-width: 0;

  border-left: 9px solid transparent;
  border-bottom: 9px solid #969aa7;

  pointer-events: none;

  display: block;
}

/* No SVG in minimized mode */
._sidebarMinimized_y4k3r_265 ._dropdownArrow_y4k3r_1029 svg {
  display: none;
}

/* =========================================================
   MINIMIZED DROPDOWN BUTTON
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._dropdownButton_y4k3r_733 {
  position: relative;
}

/* =========================================================
   HOVER SUBMENU
   ========================================================= */

._hoverSubMenu_y4k3r_1925 {
  position: fixed;

  width: 225px;

  /*
   * Show approximately 6 submenu items.
   * Extra items will scroll.
   */
  max-height: 285px;

  overflow-x: hidden;
  overflow-y: auto;

  padding: 8px;

  background: #ffffff;

  border: 1px solid #e6e6e6;

  border-radius: 11px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  z-index: 999999;

  animation: _hoverMenuOpen_y4k3r_1 0.14s ease;

  /* scrollbar-width: thin; */

  scrollbar-color: #d9d9d9 transparent;
}

/* =========================================================
   HOVER BRIDGE
   ========================================================= */

/*
 * Mouse can travel through the small gap between
 * sidebar item and floating submenu.
 */

/* =========================================================
   HOVER SUBMENU SCROLLBAR
   ========================================================= */

._hoverSubMenu_y4k3r_1925::-webkit-scrollbar {
  width: 4px;
}

._hoverSubMenu_y4k3r_1925::-webkit-scrollbar-track {
  background: transparent;
}

._hoverSubMenu_y4k3r_1925::-webkit-scrollbar-thumb {
  background: #dddddd;

  border-radius: 10px;
}

/* =========================================================
   HOVER SUBMENU ANIMATION
   ========================================================= */

@keyframes _hoverMenuOpen_y4k3r_1 {
  from {
    opacity: 0;

    transform: translateX(-4px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

/* =========================================================
   HOVER SUBMENU TITLE
   ========================================================= */

._hoverSubMenuTitle_y4k3r_2089 {
  padding: 6px 8px 8px;

  font-size: 10px;

  font-weight: 700;

  color: #6c7282;

  text-transform: uppercase;

  letter-spacing: 0.4px;

  border-bottom: 1px solid #eeeeee;

  margin-bottom: 4px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

/* =========================================================
   HOVER SUBMENU ITEM
   ========================================================= */

._hoverSubMenu_y4k3r_1925 ._subMenuItem_y4k3r_1209 {
  min-height: 38px;

  margin-bottom: 2px;

  padding: 6px 8px;

  border-radius: 7px;

  font-size: 11.5px;

  gap: 8px;
}

/* =========================================================
   HOVER SUBMENU ICON
   ========================================================= */

._hoverSubMenu_y4k3r_1925 ._subMenuIcon_y4k3r_1329 {
  width: 19px;
  height: 19px;

  min-width: 19px;

  flex: 0 0 19px;
}

/* =========================================================
   HOVER SUBMENU SVG
   ========================================================= */

._hoverSubMenu_y4k3r_1925 ._subMenuIcon_y4k3r_1329 svg {
  width: 15px;
  height: 15px;
}

/* =========================================================
   BOTTOM USER AREA
   ========================================================= */

._sidebarBottom_y4k3r_2225 {
  position: relative;

  width: 100%;

  flex-shrink: 0;

  padding: 8px;

  border-top: 1px solid #eeeeee;

  background: #ffffff;
}

/* =========================================================
   USER WRAPPER
   ========================================================= */

._userWrapper_y4k3r_2261 {
  position: relative;

  width: 100%;
}

/* =========================================================
   PROFILE ROW
   ========================================================= */

._profileRow_y4k3r_2281 {
  width: 100%;

  min-height: 42px;

  display: flex;

  align-items: center;

  gap: 5px;
}

/* =========================================================
   PROFILE BUTTON
   ========================================================= */

._profileButton_y4k3r_2313 {
  flex: 1;

  min-width: 0;

  height: 40px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 3px 6px;

  border: none;

  border-radius: 8px;

  background: transparent;

  color: #303342;

  font-family: inherit;

  cursor: pointer;

  text-align: left;

  overflow: hidden;

  transition:
    background 0.15s ease,
    color 0.15s ease;
}

/* =========================================================
   PROFILE BUTTON HOVER
   ========================================================= */

._profileButton_y4k3r_2313:hover {
  background: #f3f5f9;

  color: #0029ce;
}

/* =========================================================
   PROFILE BUTTON FOCUS
   ========================================================= */

._profileButton_y4k3r_2313:focus-visible {
  outline: 2px solid rgba(63, 134, 245, 0.25);

  outline-offset: 1px;
}

/* =========================================================
   PROFILE AVATAR
   ========================================================= */

._profileButton_y4k3r_2313 ._avatar_y4k3r_2433 {
  width: 32px;
  height: 32px;

  min-width: 32px;

  flex: 0 0 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #a7aeba;

  border: 2px solid #eef0f4;

  color: #ffffff;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  user-select: none;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* =========================================================
   AVATAR HOVER
   ========================================================= */

._profileButton_y4k3r_2313:hover ._avatar_y4k3r_2433 {
  transform: scale(1.04);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   PROFILE NAME
   ========================================================= */

._profileName_y4k3r_2529 {
  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #303342;

  font-size: 12px;

  font-weight: 600;
}

/* =========================================================
   SIDEBAR TOGGLE
   ONLY BOTTOM
   ========================================================= */

._sidebarToggle_y4k3r_2575 {
  width: 30px;

  min-width: 30px;

  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  padding: 0;

  border: 1px solid #e5e7eb;

  border-radius: 7px;

  background: #ffffff;

  color: #747a89;

  cursor: pointer;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

/* =========================================================
   TOGGLE SVG
   ========================================================= */

._sidebarToggle_y4k3r_2575 svg {
  width: 15px;

  height: 15px;

  stroke-width: 2;
}

/* =========================================================
   TOGGLE HOVER
   ========================================================= */

._sidebarToggle_y4k3r_2575:hover {
  background: #eef4ff;

  border-color: #cbdcff;

  color: #0029ce;

  transform: scale(1.03);
}

/* =========================================================
   MINIMIZED PROFILE ROW
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._sidebarBottom_y4k3r_2225 {
  padding: 8px 6px;
}

._sidebarMinimized_y4k3r_265 ._profileRow_y4k3r_2281 {
  justify-content: center;

  gap: 4px;
}

._sidebarMinimized_y4k3r_265 ._profileButton_y4k3r_2313 {
  flex: 1;

  width: auto;

  min-width: 0;

  justify-content: center;

  padding: 3px;
}

._sidebarMinimized_y4k3r_265 ._profileName_y4k3r_2529 {
  display: none;
}

._sidebarMinimized_y4k3r_265 ._profileButton_y4k3r_2313 ._avatar_y4k3r_2433 {
  width: 31px;

  height: 31px;

  min-width: 31px;
}

._sidebarMinimized_y4k3r_265 ._sidebarToggle_y4k3r_2575 {
  width: 28px;

  min-width: 28px;

  height: 28px;
}

._sidebarMinimized_y4k3r_265 ._sidebarToggle_y4k3r_2575 svg {
  width: 14px;

  height: 14px;
}

/* =========================================================
   USER MENU
   ========================================================= */

._userMenu_y4k3r_2805 {
  position: absolute;

  /*
   * Expanded:
   * popup opens to right of sidebar
   */
  left: calc(100% + 8px);

  bottom: 0;

  width: 210px;

  overflow-y: auto;

  padding: 7px;

  background: #ffffff;

  border: 1px solid #eeeeee;

  border-radius: 11px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  z-index: 99999;

  animation: _userMenuOpen_y4k3r_1 0.15s ease;

  scrollbar-width: thin;

  scrollbar-color: #d9d9d9 transparent;
}

/* =========================================================
   USER MENU SCROLLBAR
   ========================================================= */

._userMenu_y4k3r_2805::-webkit-scrollbar {
  width: 4px;
}

._userMenu_y4k3r_2805::-webkit-scrollbar-track {
  background: transparent;
}

._userMenu_y4k3r_2805::-webkit-scrollbar-thumb {
  background: #dddddd;

  border-radius: 10px;
}

/* =========================================================
   USER MENU ANIMATION
   ========================================================= */

@keyframes _userMenuOpen_y4k3r_1 {
  from {
    opacity: 0;

    transform: translateX(-4px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

/* =========================================================
   USER MENU ITEM
   ========================================================= */

._userMenuItem_y4k3r_2953 {
  width: 100%;

  min-height: 35px;

  padding: 7px 9px;

  border: none;

  border-radius: 7px;

  background: transparent;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #333333;

  font-family: inherit;

  font-size: 12px;

  font-weight: 500;

  text-align: left;

  cursor: pointer;

  outline: none;

  transition:
    background 0.14s ease,
    color 0.14s ease;
}

/* =========================================================
   USER MENU ICON
   ========================================================= */

._userMenuItem_y4k3r_2953 svg {
  width: 15px;

  height: 15px;

  flex-shrink: 0;
}

/* =========================================================
   USER MENU HOVER
   ========================================================= */

._userMenuItem_y4k3r_2953:hover {
  background: #f1f5ff;

  color: #0029ce;
}

/* =========================================================
   USER MENU FOCUS
   ========================================================= */

._userMenuItem_y4k3r_2953:focus-visible {
  outline: 2px solid rgba(63, 134, 245, 0.2);

  outline-offset: -2px;
}

/* =========================================================
   USER MENU DIVIDER
   ========================================================= */

._userMenuDivider_y4k3r_3101 {
  width: 100%;

  height: 1px;

  margin: 5px 0;

  background: #eeeeee;
}

/* =========================================================
   LOGOUT
   ========================================================= */

._logoutItem_y4k3r_3129 {
  color: #e53e3e;
}

._logoutItem_y4k3r_3129:hover {
  background: #fff4f4;

  color: #d63030;
}

/* =========================================================
   MAIN CONTENT LAYOUT
   ========================================================= */

.home-section {
  width: 100%;
  min-height: 100vh;

  margin: 0 !important;

  /*
   * Sidebar is position: fixed.
   * Reserve exactly the current sidebar width
   * for the page content.
   */
  padding-left: var(--ecs-crm-admin-sidebar-width) !important;
  padding-right: 0 !important;

  box-sizing: border-box;

  transition: padding-left var(--ecs-crm-sidebar-transition);
}

.home-content {
  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box;

  overflow-x: hidden;
}

.admin-sidebar-layout {
  min-height: 100vh;

  padding-left: 0 !important;
  padding-right: 0 !important;

  margin-right: 0 !important;

  box-sizing: border-box;

  transition:
    margin-left var(--ecs-crm-sidebar-transition),
    width var(--ecs-crm-sidebar-transition);
}

.sidebar-page-content {
  width: 100%;

  min-width: 0;

  padding-left: 0 !important;
  margin-left: 0 !important;

  box-sizing: border-box;
}

.auth-section {
  width: 100%;
  min-height: 100vh;

  margin: 0 !important;
  padding: 0 !important;
}

.sidebar-page-content {
  width: 100%;

  min-width: 0;

  box-sizing: border-box;
}

/* =========================================================
   REMOVE DASHBOARD OUTER LEFT GAP
   ========================================================= */

.admin-sidebar-layout > * {
  margin-left: 0 !important;
}

.admin-sidebar-layout > *:first-child {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1401px) {
  ._sidebarExpanded_y4k3r_227 {
    width: var(--ecs-crm-sidebar-expanded-width);
  }

  ._sidebarMinimized_y4k3r_265 {
    width: var(--ecs-crm-sidebar-minimized-width);
  }
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (max-width: 1400px) {
  ._logo_y4k3r_323 {
    max-width: 155px;
  }

  ._menuContainer_y4k3r_505 {
    padding-left: 7px;

    padding-right: 7px;
  }
}

/* =========================================================
   SMALL DESKTOP
   ========================================================= */

@media (max-width: 1200px) {
  ._sidebarExpanded_y4k3r_227 {
    width: var(--ecs-crm-sidebar-expanded-width);
  }

  ._sidebarMinimized_y4k3r_265 {
    width: var(--ecs-crm-sidebar-minimized-width);
  }

  ._menuItem_y4k3r_235 {
    padding-left: 8px;

    padding-right: 8px;

    gap: 8px;
  }

  ._menuLabel_y4k3r_235 {
    font-size: 12.5px;
  }

  ._logo_y4k3r_323 {
    max-width: 140px;
  }

  ._sidebarToggle_y4k3r_2575 {
    width: 28px;

    min-width: 28px;

    height: 28px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  ._sidebarExpanded_y4k3r_227 {
    width: var(--ecs-crm-sidebar-expanded-width);
  }

  ._sidebarMinimized_y4k3r_265 {
    width: var(--ecs-crm-sidebar-minimized-width);
  }

  ._logoSection_y4k3r_323 {
    height: 66px;

    min-height: 66px;
  }

  ._logo_y4k3r_323 {
    max-width: 120px;

    max-height: 38px;
  }

  ._sidebarMinimized_y4k3r_265 ._logo_y4k3r_323 {
    max-width: 68px;

    max-height: 32px;
  }

  ._menuContainer_y4k3r_505 {
    padding: 10px 6px 14px;
  }

  ._menuItem_y4k3r_235 {
    min-height: 44px;

    padding: 6px 7px;

    gap: 7px;
  }

  ._menuIcon_y4k3r_769 {
    width: 20px;

    height: 20px;

    min-width: 20px;

    flex-basis: 20px;
  }

  ._menuIcon_y4k3r_769 svg {
    width: 17px;

    height: 17px;
  }

  ._menuLabel_y4k3r_235 {
    font-size: 11.5px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235 {
    min-height: 62px;

    padding: 5px 3px;

    gap: 3px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 {
    width: 21px;

    height: 21px;

    min-width: 21px;

    flex-basis: 21px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 svg {
    width: 18px;

    height: 18px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuLabel_y4k3r_235 {
    font-size: 9px;

    line-height: 11px;
  }

  ._hoverSubMenu_y4k3r_1925 {
    width: 215px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  ._sidebarExpanded_y4k3r_227,
  ._sidebarMinimized_y4k3r_265 {
    width: 78px;
  }

  ._logoSection_y4k3r_323 {
    height: 64px;

    min-height: 64px;

    padding: 7px 5px;
  }

  ._logo_y4k3r_323 {
    max-width: 65px;

    max-height: 34px;
  }

  ._sidebarMinimized_y4k3r_265 ._logo_y4k3r_323 {
    max-width: 62px;

    max-height: 32px;
  }

  ._menuContainer_y4k3r_505 {
    padding: 8px 4px 12px;
  }

  ._menuItem_y4k3r_235 {
    min-height: 61px;

    margin-bottom: 5px;

    padding: 5px 2px;

    border-radius: 10px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 3px;
  }

  ._menuIcon_y4k3r_769 {
    width: 21px;

    height: 21px;

    min-width: 21px;

    flex-basis: 21px;
  }

  ._menuIcon_y4k3r_769 svg {
    width: 18px;

    height: 18px;
  }

  ._menuLabel_y4k3r_235 {
    width: 100%;

    flex: none;

    text-align: center;

    font-size: 8.5px;

    line-height: 11px;

    white-space: normal;

    overflow: visible;

    text-overflow: unset;
  }

  ._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235 {
    min-height: 61px;

    margin-bottom: 5px;

    padding: 5px 2px;

    gap: 3px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 {
    width: 21px;

    height: 21px;

    min-width: 21px;

    flex-basis: 21px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 svg {
    width: 18px;

    height: 18px;
  }

  ._sidebarMinimized_y4k3r_265 ._menuLabel_y4k3r_235 {
    font-size: 8.5px;

    line-height: 11px;
  }

  ._sidebarBottom_y4k3r_2225 {
    min-height: 60px;

    padding: 6px 3px;
  }

  ._profileRow_y4k3r_2281 {
    gap: 3px;
  }

  ._profileButton_y4k3r_2313 {
    height: 36px;

    padding: 2px;
  }

  ._profileButton_y4k3r_2313 ._avatar_y4k3r_2433 {
    width: 29px;

    height: 29px;

    min-width: 29px;

    font-size: 11px;
  }

  ._sidebarToggle_y4k3r_2575 {
    width: 26px;

    min-width: 26px;

    height: 26px;
  }

  ._sidebarToggle_y4k3r_2575 svg {
    width: 13px;

    height: 13px;
  }

  ._userMenu_y4k3r_2805 {
    left: calc(100% + 6px);

    width: 190px;
  }

  ._hoverSubMenu_y4k3r_1925 {
    width: 205px;
  }

  ._subMenu_y4k3r_1125 {
    position: absolute;

    left: calc(100% + 4px);

    top: 0;

    width: 205px;

    margin: 0;

    z-index: 99999;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {
  ._sidebarExpanded_y4k3r_227,
  ._sidebarMinimized_y4k3r_265 {
    width: 72px;
  }

  ._logoSection_y4k3r_323 {
    height: 60px;

    min-height: 60px;
  }

  ._logo_y4k3r_323 {
    max-width: 58px;

    max-height: 30px;
  }

  ._sidebarMinimized_y4k3r_265 ._logo_y4k3r_323 {
    max-width: 56px;

    max-height: 29px;
  }

  ._menuItem_y4k3r_235,
  ._sidebarMinimized_y4k3r_265 ._menuItem_y4k3r_235 {
    min-height: 58px;

    margin-bottom: 5px;

    padding: 4px 2px;

    border-radius: 9px;
  }

  ._menuIcon_y4k3r_769,
  ._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 {
    width: 20px;

    height: 20px;

    min-width: 20px;

    flex-basis: 20px;
  }

  ._menuIcon_y4k3r_769 svg,
  ._sidebarMinimized_y4k3r_265 ._menuIcon_y4k3r_769 svg {
    width: 17px;

    height: 17px;
  }

  ._menuLabel_y4k3r_235,
  ._sidebarMinimized_y4k3r_265 ._menuLabel_y4k3r_235 {
    font-size: 8px;

    line-height: 10px;
  }

  ._sidebarToggle_y4k3r_2575 {
    width: 25px;

    min-width: 25px;

    height: 25px;
  }

  ._sidebarBottom_y4k3r_2225 {
    min-height: 58px;
  }

  ._profileButton_y4k3r_2313 ._avatar_y4k3r_2433 {
    width: 27px;

    height: 27px;

    min-width: 27px;
  }

  ._hoverSubMenu_y4k3r_1925 {
    width: 195px;
  }

  ._subMenu_y4k3r_1125 {
    width: 195px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  ._sidebar_y4k3r_161,
  ._menuItem_y4k3r_235,
  ._menuIcon_y4k3r_769,
  ._sidebarToggle_y4k3r_2575,
  ._avatar_y4k3r_2433,
  ._subMenuItem_y4k3r_1209,
  ._profileButton_y4k3r_2313 {
    transition: none;
  }

  ._subMenu_y4k3r_1125,
  ._hoverSubMenu_y4k3r_1925,
  ._userMenu_y4k3r_2805 {
    animation: none;
  }
}

/* =========================================================
   MINIMIZED SIDEBAR - ULTRA SLIM SCROLLBAR
   ========================================================= */

._sidebarMinimized_y4k3r_265 ._menuContainer_y4k3r_505 {
  overflow-x: hidden;
  overflow-y: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #d6d6d6 transparent;
}

/* Chrome / Edge */
._sidebarMinimized_y4k3r_265 ._menuContainer_y4k3r_505::-webkit-scrollbar {
  width: 2px !important;
  height: 2px !important;
}

._sidebarMinimized_y4k3r_265 ._menuContainer_y4k3r_505::-webkit-scrollbar-track {
  width: 2px !important;
  background: transparent !important;
}

._sidebarMinimized_y4k3r_265 ._menuContainer_y4k3r_505::-webkit-scrollbar-thumb {
  width: 2px !important;
  background: #d6d6d6 !important;
  border-radius: 10px !important;
}

._sidebarMinimized_y4k3r_265 ._menuContainer_y4k3r_505::-webkit-scrollbar-thumb:hover {
  background: #bdbdbd !important;
}

/* =========================================================
   LOGIN PAGE - REMOVE SIDEBAR SPACE
   ========================================================= */

.home-section:has(.login-container) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
}

.home-section:has(.login-container) .home-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* =========================================================
   INCREASE EXPANDED SUBMENU FONT SIZE
========================================================= */

._subMenu_y4k3r_1125 ._subMenuItem_y4k3r_1209 {
  font-size: 11px !important;
  line-height: 20px;

  min-height: 48px;
}

._subMenu_y4k3r_1125 ._subMenuLabel_y4k3r_1417 {
  font-size: 11px !important;
  font-weight: 500;
}

/* =========================================================
    CRM EMBEDDED INSIDE ECS WORKPLACE
    ========================================================= */

[data-crm-embedded="true"] ._sidebar_y4k3r_161 {
  top: var(--ecs-host-header-height, 30px);

  height: calc(100vh - var(--ecs-host-header-height, 60px));

  bottom: auto;
}

/* =========================================================
   FINANCE WORKFLOW FULLSCREEN MODAL
   ========================================================= */

/*
 * Hide CRM sidebar while the workflow modal is open.
 */
body.ecs-finance-workflow-modal-open ._sidebar_y4k3r_161 {
  display: none !important;
}

/*
 * Remove the reserved sidebar space.
 */
body.ecs-finance-workflow-modal-open .home-section {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/*
 * Ensure CRM content occupies the full viewport.
 */
body.ecs-finance-workflow-modal-open .home-content {
  width: 100% !important;
  max-width: 100% !important;

  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* ================================================================
   master-table.css
   Styles for Master list page + LeadsView sidebar
   Compact fonts/spacing — no horizontal scroll in sidebar
   ================================================================ */

/* ─── CSS VARIABLES ─── */
:root {
  --pr: #4f46e5;
  --pr-lt: #6366f1;
  --pr-100: #e0e7ff;
  --pr-200: #c7d2fe;

  --green: #22c55e;
  --green-bg: #dcfce7;
  --green-t: #15803d;
  --yellow: #f59e0b;
  --yellow-bg: #fef3c7;
  --yellow-t: #92400e;
  --red: #ef4444;
  --red-bg: #fee2e2;
  --red-t: #b91c1c;
  --blue: #3b82f6;
  --blue-bg: #dbeafe;
  --blue-t: #1d4ed8;
  --teal: #0d9488;
  --teal-bg: #ccfbf1;
  --teal-t: #0f766e;
  --pink: #db2777;
  --pink-bg: #fce7f3;
  --pink-t: #be185d;
  --orange: #f97316;
  --orange-bg: #ffedd5;
  --orange-t: #c2410c;
  --gray: #6b7280;
  --gray-bg: #f3f4f6;
  --gray-t: #374151;
  --indigo-bg: #e0e7ff;
  --indigo-t: #4338ca;

  --t1: #111827;
  --t2: #374151;
  --t3: #6b7280;
  --t4: #9ca3af;

  --border: #e5e7eb;
  --border2: #f3f4f6;
  --bg: #f5f6fa;
  --surface: #ffffff;

  --r: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sh: 0 3px 10px rgba(0, 0, 0, 0.07);
}

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

/* ═══════════════════════════════
   MASTER SECTION + LAYOUT
═══════════════════════════════ */
.ms-section {
  background: var(--bg);
  min-height: 100vh;
  font-family: "Inter", "Urbanist", sans-serif;
  font-size: 12px;
}

.ms-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.ms-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ms-wrap {
  padding: 13px 16px;
}

/* RIGHT SIDEBAR */
.ms-sidebar {
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: 10px;
  height: 84vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ═══════════════════════════════
   PAGE HEADER
═══════════════════════════════ */
.ms-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  gap: 5px;
  margin-bottom: 13px;
}

.ms-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
  margin: 0;
  letter-spacing: -0.3px;
}

.ms-subtitle {
  font-size: 10.5px;
  color: var(--t3);
  margin: 2px 0 0;
}

.ms-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════
   BUTTONS
═══════════════════════════════ */
.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
}

.ms-btn--primary {
  background: var(--pr);
  color: #fff;
  border-color: var(--pr);
}

.ms-btn--primary:hover {
  background: #4338ca;
  color: #fff;
}

.ms-btn--outline {
  background: var(--surface);
  color: var(--t2);
  border-color: var(--border);
}

.ms-btn--outline:hover {
  background: #f9fafb;
}

/* ═══════════════════════════════
   TOGGLE SWITCH
═══════════════════════════════ */
.ms-toggle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.ms-toggle-lbl {
  font-size: 10.5px;
  color: var(--t3);
  white-space: nowrap;
}

.ms-sw {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 17px;
  flex-shrink: 0;
}

.ms-sw input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ms-sw__track {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.ms-sw__track::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ms-sw input:checked+.ms-sw__track {
  background: var(--pr);
}

.ms-sw input:checked+.ms-sw__track::before {
  transform: translateX(15px);
}

.ms-sw--sm {
  width: 26px;
  height: 14px;
}

.ms-sw--sm .ms-sw__track::before {
  width: 9px;
  height: 9px;
  top: 2.5px;
  left: 2.5px;
}

.ms-sw--sm input:checked+.ms-sw__track::before {
  transform: translateX(12px);
}

/* ═══════════════════════════════
   STAT CARDS
═══════════════════════════════ */
.ms-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 13px;
}

@media (max-width: 1200px) {
  .ms-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .ms-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ms-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  text-decoration: none;
  transition: all 0.18s;
  cursor: pointer;
}

.ms-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh);
  text-decoration: none;
}

.ms-card__ico {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ms-card--new .ms-card__ico {
  background: #ede9fe;
  color: var(--pr);
}

.ms-card--inprocess .ms-card__ico {
  background: var(--yellow-bg);
  color: var(--yellow);
}

.ms-card--lost .ms-card__ico {
  background: var(--red-bg);
  color: var(--red);
}

.ms-card--won .ms-card__ico {
  background: var(--green-bg);
  color: var(--green);
}

.ms-card--conv .ms-card__ico {
  background: var(--blue-bg);
  color: var(--blue);
}

.ms-card--new:hover {
  border-color: var(--pr-200);
}

.ms-card--inprocess:hover {
  border-color: #fde68a;
}

.ms-card--lost:hover {
  border-color: #fca5a5;
}

.ms-card--won:hover {
  border-color: #86efac;
}

.ms-card--conv:hover {
  border-color: #93c5fd;
}

.ms-card>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ms-card__lbl {
  font-size: 10px;
  color: var(--t3);
  font-weight: 500;
}

.ms-card__val {
  font-size: 19px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.1;
}

.ms-card__sub {
  font-size: 9.5px;
  color: var(--t4);
  font-weight: 400;
}

/* ═══════════════════════════════
   CHARTS
═══════════════════════════════ */
.ms-charts {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr 1.2fr;
  gap: 11px;
  margin-bottom: 13px;
}

@media (max-width: 1100px) {
  .ms-charts {
    grid-template-columns: 1fr 1fr;
  }

  .ms-chart-card--activity {
    grid-column: 1/-1;
  }
}

.ms-chart-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 13px 14px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}

.ms-chart-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  flex-wrap: wrap;
  gap: 5px;
}

.ms-chart-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t1);
}

.ms-chart-lbl {
  font-size: 10.5px;
  color: var(--t3);
}

.ms-sel {
  padding: 2px 6px;
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--t3);
  background: var(--surface);
  cursor: pointer;
  outline: none;
}

.ms-chart-ico-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ms-cmp-btn {
  padding: 2px 7px;
  font-size: 10.5px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--t3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}

.ms-activity-body {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ms-donut-wrap {
  position: relative;
  flex-shrink: 0;
}

.ms-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.ms-donut-center span {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
}

.ms-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ms-leg-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ms-leg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ms-leg-txt {
  font-size: 10.5px;
  color: var(--t3);
}

/* ═══════════════════════════════
   TABLE CARD
═══════════════════════════════ */
.ms-table-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.ms-tbl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
  gap: 7px;
}

.ms-tbl-top__l {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ms-tbl-top__r {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.ms-tbl-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t1);
}

.ms-tbl-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pr-100);
  color: var(--pr);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}

.ms-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ms-search__ico {
  position: absolute;
  left: 7px;
  color: var(--t4);
  pointer-events: none;
}

.ms-search__inp {
  padding: 5px 9px 5px 26px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 11px;
  color: var(--t1);
  outline: none;
  width: 200px;
  background: var(--surface);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ms-search__inp:focus {
  border-color: var(--pr);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.ms-search__inp::placeholder {
  color: var(--t4);
}

.ms-tbtn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.15s;
}

.ms-tbtn--primary {
  background: var(--pr);
  color: #fff;
  border-color: var(--pr);
}

.ms-tbtn--primary:hover {
  background: #4338ca;
}

.ms-tbtn--outline {
  background: var(--surface);
  color: var(--t2);
  border-color: var(--border);
}

.ms-tbtn--outline:hover {
  background: #f9fafb;
}

.ms-tbtn--ghost {
  background: transparent;
  color: var(--t3);
  border-color: var(--border);
}

.ms-filt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 13px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
  gap: 5px;
}

.ms-filt-row__l {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.ms-filt-row__r {
  display: flex;
  gap: 7px;
  align-items: center;
}

.ms-filt-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ms-filt-sel {
  padding: 3px 20px 3px 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--t2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.ms-filt-sel:focus {
  border-color: var(--pr);
}

.ms-filt-arrow {
  position: absolute;
  right: 5px;
  color: var(--t4);
  pointer-events: none;
}

.ms-density-lbl {
  font-size: 10.5px;
  color: var(--t3);
}

.ms-tags-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-bottom: 1px solid var(--border2);
  flex-wrap: wrap;
}

.ms-atag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f3f4f6;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--t2);
}

.ms-atag__x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--t3);
  display: flex;
  align-items: center;
}

.ms-atag__x:hover {
  color: var(--red);
}

.ms-clear-all {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--pr);
  font-weight: 600;
  padding: 0 3px;
}

.ms-clear-all:hover {
  text-decoration: underline;
}

.ms-tbl-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 13px;
  border-top: 1px solid var(--border2);
  flex-wrap: wrap;
  gap: 7px;
}

.ms-bulk-btns {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.ms-bbtn {
  padding: 4px 11px;
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t2);
  cursor: pointer;
  transition: all 0.15s;
}

.ms-bbtn:hover {
  background: #f9fafb;
}

.ms-bbtn--primary {
  background: var(--pr);
  color: #fff;
  border-color: var(--pr);
}

.ms-bbtn--primary:hover {
  background: #4338ca;
}

.ms-bbtn--danger {
  color: var(--red);
  border-color: #fca5a5;
}

.ms-bbtn--danger:hover {
  background: var(--red-bg);
}

.ms-pag {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ms-pag-lbl {
  font-size: 10.5px;
  color: var(--t3);
}

.ms-pag-sel {
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 10.5px;
  color: var(--t2);
  background: var(--surface);
  cursor: pointer;
  outline: none;
}

.ms-pag-info {
  font-size: 10.5px;
  color: var(--t3);
  white-space: nowrap;
}

.ms-pag-nav {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  cursor: pointer;
  color: var(--t3);
  transition: all 0.15s;
}

.ms-pag-nav:hover:not(:disabled) {
  background: var(--pr-100);
  color: var(--pr);
}

.ms-pag-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══════════════════════════════
   TABLE CELL STYLES
═══════════════════════════════ */
.c-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t1);
}

.c-company {
  font-size: 10px;
  color: var(--t3);
  margin-top: 1px;
}

.c-phone {
  font-size: 11px;
  font-weight: 500;
  color: var(--t2);
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.c-email {
  font-size: 10.5px;
  color: var(--t3);
  display: flex;
  align-items: center;
}

.c-owner-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pr-100);
  color: var(--pr);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-owner-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--t2);
}

.c-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.c-badge--new {
  background: var(--indigo-bg);
  color: var(--indigo-t);
}

.c-badge--green {
  background: var(--green-bg);
  color: var(--green-t);
}

.c-badge--blue {
  background: var(--blue-bg);
  color: var(--blue-t);
}

.c-badge--red {
  background: var(--red-bg);
  color: var(--red-t);
}

.c-badge--yellow {
  background: var(--yellow-bg);
  color: var(--yellow-t);
}

.c-badge--gray {
  background: var(--gray-bg);
  color: var(--gray-t);
}

.c-badge--orange {
  background: var(--orange-bg);
  color: var(--orange-t);
}

.c-badge--teal {
  background: var(--teal-bg);
  color: var(--teal-t);
}

.c-badge--pink {
  background: var(--pink-bg);
  color: var(--pink-t);
}

.c-source {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--t2);
}

.c-li {
  width: 15px;
  height: 15px;
  background: #0077b5;
  color: #fff;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  flex-shrink: 0;
}

.c-ago {
  font-size: 10.5px;
  color: var(--t3);
}

.c-ns-date {
  font-size: 10px;
  color: var(--t3);
}

.c-ns-lbl {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--pr);
  margin-top: 1px;
}

.c-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.c-tag {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  background: var(--gray-bg);
  color: var(--gray-t);
}

.c-tag--urgent {
  background: var(--red-bg);
  color: var(--red-t);
}

.c-row-acts {
  display: flex;
  align-items: center;
  gap: 2px;
}

.c-act {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t3);
  cursor: pointer;
  transition: all 0.15s;
}

.c-act:hover {
  background: var(--pr-100);
  color: var(--pr);
  border-color: var(--pr-200);
}

.c-act--eye:hover {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

/* ═══════════════════════════════
   MUI OVERRIDES
═══════════════════════════════ */
.ms-table-card .MuiPaper-root {
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}

.ms-table-card .MuiTableHead-root .MuiTableCell-root {
  background: #eef2ff !important;
  color: var(--pr) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 7px 9px !important;
  border-bottom: 2px solid var(--pr-200) !important;
}

.ms-table-card .MuiTableBody-root .MuiTableCell-root {
  padding: 7px 9px !important;
  font-size: 11px !important;
  border-bottom: 1px solid var(--border2) !important;
}

.ms-table-card .MuiTableBody-root .MuiTableRow-root:hover td {
  background: #f5f3ff !important;
}

.ms-table-card .MuiToolbar-root {
  display: none !important;
}

.ms-table-card .MuiTableFooter-root {
  display: none !important;
}

/* ═══════════════════════════════════════════════════
   LEADS VIEW SIDEBAR  (LeadsView.jsx)
   No horizontal scroll — all content wraps cleanly
═══════════════════════════════════════════════════ */
.lv-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 11px;
  overflow-x: hidden;
  /* no x-scroll ever */
  word-break: break-word;
}

.lv-shell--empty {
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  color: var(--t4);
  gap: 10px;
  text-align: center;
}

.lv-empty-ico {
  display: block;
  margin-bottom: 6px;
}

/* ── Header ── */
.lv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.lv-header__left {
  flex: 1;
  min-width: 0;
}

.lv-header__title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--t1);
  letter-spacing: -0.2px;
}

.lv-header__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--t3);
}

.lv-header__name {
  font-weight: 600;
  color: var(--t2);
}

.lv-header__dot {
  color: var(--t4);
}

.lv-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t3);
  padding: 2px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.lv-close-btn:hover {
  background: var(--border2);
  color: var(--t1);
}

/* ── Status badges ── */
.lv-sbadge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.lv-sbadge--new {
  background: var(--indigo-bg);
  color: var(--indigo-t);
}

.lv-sbadge--green {
  background: var(--green-bg);
  color: var(--green-t);
}

.lv-sbadge--blue {
  background: var(--blue-bg);
  color: var(--blue-t);
}

.lv-sbadge--red {
  background: var(--red-bg);
  color: var(--red-t);
}

.lv-sbadge--yellow {
  background: var(--yellow-bg);
  color: var(--yellow-t);
}

.lv-sbadge--gray {
  background: var(--gray-bg);
  color: var(--gray-t);
}

.lv-sbadge--orange {
  background: var(--orange-bg);
  color: var(--orange-t);
}

/* ── Quick actions ── */
.lv-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 7px 13px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.lv-ab {
  padding: 3px 8px;
  border-radius: var(--r);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t2);
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
}

.lv-ab:hover {
  background: var(--pr-100);
  border-color: var(--pr-200);
  color: var(--pr);
}

.lv-ab--more {
  margin-left: auto;
}

/* ── Tabs ── */
.lv-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  /* tabs can scroll if too many */
  scrollbar-width: none;
}

.lv-tabs::-webkit-scrollbar {
  display: none;
}

.lv-tab {
  padding: 6px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  white-space: nowrap;
}

.lv-tab:hover {
  color: var(--pr);
}

.lv-tab--active {
  color: var(--pr);
  border-bottom-color: var(--pr);
}

/* ── Body ── */
.lv-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Section ── */
.lv-sec {
  padding: 10px 13px;
  border-bottom: 1px solid var(--border2);
}

.lv-sec-ttl {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 7px;
}

.lv-inforow {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--t2);
}

.lv-inforow:last-child {
  margin-bottom: 0;
}

.lv-ico {
  color: var(--t4);
  flex-shrink: 0;
  margin-top: 1px;
}

.lv-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* ── Score ── */
.lv-scorerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.lv-score-main {
  font-size: 11px;
  color: var(--t2);
  margin: 0 0 2px;
}

.lv-score-main strong {
  font-weight: 700;
  color: var(--t1);
}

.lv-score-prob {
  font-size: 10.5px;
  color: var(--t3);
  margin: 0;
}

/* ── Pipeline ── */
.lv-pipe {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.lv-pipe-step {
  display: flex;
  align-items: center;
  gap: 3px;
}

.lv-pipe-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--r);
  background: var(--gray-bg);
  border: 1px solid var(--border);
  min-width: 46px;
  text-align: center;
  font-size: 10px;
}

.lv-pipe-node.lv-done {
  background: #dcfce7;
  border-color: #86efac;
}

.lv-pipe-node.lv-current {
  background: var(--pr-100);
  border-color: var(--pr-200);
}

.lv-pipe-name {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--t2);
}

.lv-pipe-node.lv-done .lv-pipe-name {
  color: var(--green-t);
}

.lv-pipe-node.lv-current .lv-pipe-name {
  color: var(--pr);
}

.lv-pipe-sub {
  font-size: 8px;
  color: var(--t4);
  margin-top: 1px;
}

.lv-pipe-arrow {
  color: var(--t4);
  flex-shrink: 0;
}

.lv-pipe-lost {
  padding: 3px 7px;
  border-radius: var(--r);
  background: var(--red-bg);
  border: 1px solid #fca5a5;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--red-t);
}

/* ── Meta grid ── */
.lv-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.lv-key {
  display: block;
  font-size: 9px;
  color: var(--t4);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 1px;
  font-weight: 600;
}

.lv-val {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
}

/* ── HTML content ── */
.lv-html-content {
  font-size: 10.5px;
  color: var(--t3);
  line-height: 1.5;
  overflow: hidden;
  max-height: 100px;
  overflow-y: auto;
}

/* LOST active style */
.lv-pipe-node.lv-lost-active {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-weight: 600;
}

/* override current when lost */
.lv-pipe-node.lv-current.lv-lost-active {
  background: #fee2e2;
  color: #dc2626;
}

.lv-html-content p {
  margin: 0 0 4px;
}

/* ── Task button ── */
.lv-task-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r);
  border: 1px dashed var(--border);
  background: var(--surface);
  color: var(--t3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  transition: all 0.15s;
}

.lv-task-btn:hover {
  border-color: var(--pr);
  color: var(--pr);
  background: var(--pr-100);
}

/* ── Activity mini list (overview tab) ── */
.lv-act-mini-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lv-act-mini {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.lv-aic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lv-aic--ac {
  background: #ede9fe;
  color: var(--pr);
}

.lv-aic--fu {
  background: var(--blue-bg);
  color: var(--blue-t);
}

.lv-aic--wa {
  background: var(--green-bg);
  color: var(--green-t);
}

.lv-aic--em {
  background: #dbeafe;
  color: #1d4ed8;
}

.lv-act-mini-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lv-act-mini-type {
  font-size: 10.5px;
  color: var(--t2);
  font-weight: 500;
}

.lv-act-mini-date {
  font-size: 9.5px;
  color: var(--t4);
}

/* ── Activity full card list ── */
.lv-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lv-act-card {
  background: var(--border2);
  border-radius: var(--r-md);
  padding: 9px 10px;
  border: 1px solid var(--border);
}

.lv-act-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.lv-act-card-info {
  flex: 1;
  min-width: 0;
}

.lv-act-card-type {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t1);
}

.lv-act-card-date {
  display: block;
  font-size: 9.5px;
  color: var(--t3);
}

.lv-act-owners {
  font-size: 9.5px;
  color: var(--t3);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.lv-act-remarks {
  font-size: 10.5px;
  color: var(--t2);
  line-height: 1.45;
  max-height: 70px;
  overflow: hidden;
  overflow-y: auto;
}

.lv-act-remarks p {
  margin: 0 0 3px;
}

/* ── Activity status badges ── */
.lv-act-status {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.lv-act-status--approved {
  background: #dcfce7;
  color: #15803d;
}

.lv-act-status--pending {
  background: #fef3c7;
  color: #92400e;
}

.lv-act-status--rejected {
  background: #fee2e2;
  color: #b91c1c;
}

/* ── Attachments ── */
.lv-attachments {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.lv-attach-img {
  width: 50px;
  height: 50px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  display: block;
  flex-shrink: 0;
}

.lv-attach-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lv-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 10px;
  color: var(--t2);
  text-decoration: none;
}

.lv-attach-file:hover {
  background: var(--pr-100);
  color: var(--pr);
  border-color: var(--pr-200);
}

/* ── Files grid ── */
.lv-files-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.lv-file-tile {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
}

.lv-file-tile:hover {
  border-color: var(--pr);
}

.lv-file-thumb {
  width: 100%;
  height: 64px;
  object-fit: cover;
  display: block;
}

.lv-file-icon {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border2);
  color: var(--t3);
}

.lv-file-name {
  font-size: 9.5px;
  color: var(--t2);
  padding: 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface);
}

/* ── Tab empty state ── */
.lv-tab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  gap: 8px;
  color: var(--t4);
  font-size: 11px;
  text-align: center;
}

/* ── Error / skeleton ── */
.lv-error {
  padding: 10px 13px;
  background: var(--red-bg);
  color: var(--red-t);
  font-size: 11px;
  border-bottom: 1px solid #fca5a5;
}

.lv-skeleton {
  padding: 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lv-skel-line {
  height: 11px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  border-radius: 999px;
  animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ── Footer ── */
.lv-footer {
  padding: 8px 13px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.lv-open-full-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 6px;
  border-radius: var(--r);
  border: 1px solid var(--pr);
  background: var(--pr-100);
  color: var(--pr);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.lv-open-full-btn:hover {
  background: var(--pr);
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ms-wrap {
    padding: 10px 12px;
  }

  .ms-sidebar {
    width: 255px;
    min-width: 235px;
  }

  .ms-search__inp {
    width: 160px;
  }
}

@media (max-width: 768px) {
  .ms-layout--open .ms-main {
    display: none;
  }

  .ms-sidebar {
    width: 100%;
    min-width: 100%;
    border-left: none;
    position: relative;
    height: auto;
  }

  .ms-tbl-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Thin light scrollbar for sidebar ── */
.ms-sidebar,
.lv-body,
.css-ftn3sw-MuiTableContainer-root {
  scrollbar-width: thin;
  scrollbar-color: #e2e2e2 transparent;
}

.ms-sidebar::-webkit-scrollbar,
.lv-body::-webkit-scrollbar {
  width: 2px;
}

.ms-sidebar::-webkit-scrollbar-track,
.lv-body::-webkit-scrollbar-track {
  background: transparent;
}

.ms-sidebar::-webkit-scrollbar-thumb,
.lv-body::-webkit-scrollbar-thumb {
  background: #e2e2e2;
  border-radius: 999px;
}

.ms-sidebar::-webkit-scrollbar-thumb:hover,
.lv-body::-webkit-scrollbar-thumb:hover {
  background: #c7c7c7;
}

.activity-stepper {
  position: relative;
  padding: 4px 0;
}

.stepper-row {
  position: relative;
  display: flex;
  height: 60px;
  align-items: flex-start;
  padding: 6px 0;
  gap: 12px;
}

.stepper-icon-wrapper {
  position: relative;
  width: 28px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stepper-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cbd5e1;
  /* default gray */
  box-shadow: 0 0 0 3px white;
  z-index: 2;
}

/* Color per type - adjust to match your ActIcon classes */
.stepper-icon:has(.lv-aic--ac) {
  background: #3b82f6;
}

/* call */
.stepper-icon:has(.lv-aic--em) {
  background: #6366f1;
}

/* email */
.stepper-icon:has(.lv-aic--wa) {
  background: #22c55e;
}

/* whatsapp */
.stepper-icon:has(.lv-aic--fu) {
  background: #f59e0b;
}

/* follow up */

/* Vertical line - only between items */
.stepper-line {
  position: absolute;
  top: 26px;
  bottom: -6px;
  width: 2px;
  background: #cbd5e1;
  left: 13px;
  z-index: 1;
  height: 32px;
}

.stepper-content {
  flex: 1;
  min-width: 0;
}

.stepper-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stepper-time {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
}

/* Optional: slightly dim repeated same messages */
.stepper-text:where(:not(:first-of-type)) {
  color: #475569;
}

@media (max-width: 700px) {
  .ms-header {
    flex-wrap: nowrap;
  }

  .ms-header-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

.c-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.c-owner-av {
  width: 26px;
  height: 26px;
  min-width: 26px;
}

.c-act {
  width: 28px;
  height: 28px;
}

.c-badge {
  padding: 2px 10px;
}


/* Business Card Upload Styles */
.ms-bcard-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: var(--primary-purple-400);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ms-bcard-btn:hover {
  background: var(--primary-purple-500);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.ms-bcard-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Business Card Modal */
.ms-bcard-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease;
}

.ms-bcard-modal {
  background: var(--bg-color);
  border-radius: 16px;
  width: 480px;
  max-width: 92vw;
  padding: 28px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
}

.ms-bcard-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ms-bcard-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ms-bcard-modal-close {
  background: none;
  border: none;
  color: var(--color-grey);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 20px;
}

.ms-bcard-modal-close:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

.ms-bcard-dropzone {
  border: 2px dashed var(--input-border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--card-bg);
  position: relative;
}

.ms-bcard-dropzone:hover {
  border-color: var(--primary-purple-400);
  background: var(--secondary-color);
}

.ms-bcard-dropzone.dragging {
  border-color: var(--primary-purple-400);
  background: var(--secondary-color);
  transform: scale(1.02);
}

.ms-bcard-dropzone.has-file {
  border-color: var(--color-green);
  background: var(--color-green-light);
}

.ms-bcard-dropzone-icon {
  font-size: 48px;
  color: var(--primary-purple-400);
  margin-bottom: 12px;
}

.ms-bcard-dropzone-text {
  color: var(--text-color);
  font-size: 14px;
  margin-bottom: 6px;
}

.ms-bcard-dropzone-sub {
  color: var(--color-grey);
  font-size: 12px;
}

.ms-bcard-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-color);
  border-radius: 8px;
  margin-top: 12px;
  border: 1px solid var(--border-color);
}

.ms-bcard-file-info svg {
  color: var(--color-green);
  flex-shrink: 0;
}

.ms-bcard-file-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-color);
  word-break: break-all;
}

.ms-bcard-file-size {
  font-size: 12px;
  color: var(--color-grey);
}

.ms-bcard-file-remove {
  background: none;
  border: none;
  color: var(--color-red);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.ms-bcard-file-remove:hover {
  background: var(--color-red-light);
}

.ms-bcard-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.ms-bcard-btn-cancel {
  padding: 8px 20px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.ms-bcard-btn-cancel:hover {
  background: var(--hover-bg);
}

.ms-bcard-btn-upload {
  padding: 8px 24px;
  border-radius: 8px;
  border: none;
  background: var(--primary-purple-400);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-bcard-btn-upload:hover:not(:disabled) {
  background: var(--primary-purple-500);
  transform: translateY(-1px);
}

.ms-bcard-btn-upload:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ms-bcard-progress-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  z-index: 10;
}

.ms-bcard-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.ms-bcard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-purple-400), var(--primary-purple-300));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.ms-bcard-progress-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-purple-400);
}

/* Progress display in header */
.ms-progress-header {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 12px;
  background: var(--secondary-color);
  border-radius: 20px;
  border: 1px solid var(--primary-purple-200);
  animation: slideInRight 0.4s ease;
}

.ms-progress-header .ms-progress-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--primary-purple-200);
  border-top-color: var(--primary-purple-400);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.ms-progress-header .ms-progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
}

.ms-progress-header .ms-progress-percent {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-purple-400);
}

.ms-progress-header .ms-progress-bar-mini {
  width: 80px;
  height: 4px;
  background: var(--primary-purple-200);
  border-radius: 4px;
  overflow: hidden;
}

.ms-progress-header .ms-progress-bar-mini-fill {
  height: 100%;
  background: var(--primary-purple-400);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* changed */
/* Header Layout - Fix */
/* .ms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
} */

.ms-header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
  min-width: 0;
}

.ms-header-title-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* .ms-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  line-height: 1.2;
}

.ms-subtitle {
  font-size: 13px;
  color: var(--color-grey);
  margin: 2px 0 0 0;
  line-height: 1.4;
} */

/* Progress Display - Centered */
.ms-progress-header {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 14px;
  background: var(--secondary-color);
  border-radius: 24px;
  border: 1px solid var(--primary-purple-200);
  animation: slideInRight 0.4s ease;
  flex-shrink: 0;
  margin: 0 auto;
}

.ms-progress-header .ms-progress-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--primary-purple-200);
  border-top-color: var(--primary-purple-400);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.ms-progress-header .ms-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
}

.ms-progress-header .ms-progress-percent {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-purple-400);
  min-width: 38px;
  text-align: center;
}

.ms-progress-header .ms-progress-bar-mini {
  width: 80px;
  height: 4px;
  background: var(--primary-purple-200);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.ms-progress-header .ms-progress-bar-mini-fill {
  height: 100%;
  background: var(--primary-purple-400);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.ms-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* For mobile responsiveness */
@media (max-width: 992px) {
  .ms-header {
    flex-direction: column;
    align-items: stretch;
  }

  .ms-header-left {
    flex-wrap: wrap;
  }

  .ms-progress-header {
    margin: 8px 0;
    width: 100%;
    justify-content: center;
  }

  .ms-header-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .ms-progress-header {
    flex-wrap: wrap;
    padding: 8px 14px;
    border-radius: 16px;
    justify-content: center;
  }

  .ms-progress-header .ms-progress-label {
    font-size: 11px;
  }

  .ms-progress-header .ms-progress-bar-mini {
    width: 60px;
  }
}/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}
/* ================================================================
   master-add.css
   Unique prefix: ma-
   Compact font/spacing, mobile responsive
   ================================================================ */

/* ─── Variables ─── */
:root {
  --ma-pr: #4f46e5;
  --ma-pr-lt: #6366f1;
  --ma-pr-100: #e0e7ff;
  --ma-pr-200: #c7d2fe;
  --ma-green: #22c55e;
  --ma-green-bg: #dcfce7;
  --ma-t1: #111827;
  --ma-t2: #272b32;
  --ma-t3: #6b7280;
  --ma-t4: #9ca3af;
  --ma-border: #e5e7eb;
  --ma-border2: #f3f4f6;
  --ma-bg: #f5f6fa;
  --ma-surface: #ffffff;
  --ma-r: 6px;
  --ma-r-md: 9px;
  --ma-r-lg: 12px;
  --ma-sh-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ma-sh: 0 3px 12px rgba(0, 0, 0, 0.08);
}

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

/* ═══════════════════════════════
   PAGE SHELL
═══════════════════════════════ */
.ma-page {
  background: var(--ma-bg);
  min-height: 100vh;
  font-family: "Inter", "Urbanist", sans-serif;
  font-size: 12px;
  padding-bottom: 64px;
  /* space for sticky footer */
}

/* ═══════════════════════════════
   BREADCRUMB
═══════════════════════════════ */
.ma-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px 0;
  font-size: 11px;
  color: var(--ma-t3);
}

.ma-bc-link {
  color: var(--ma-t3);
  text-decoration: none;
}

.ma-bc-link:hover {
  color: var(--ma-pr);
  text-decoration: underline;
}

.ma-bc-sep {
  color: var(--ma-t4);
}

.ma-bc-cur {
  color: var(--ma-t2);
  font-weight: 600;
}

/* ═══════════════════════════════
   PAGE HEADER
═══════════════════════════════ */
.ma-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px 14px;
}

.ma-page-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ma-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ma-r);
  border: 1px solid var(--ma-border);
  background: var(--ma-surface);
  color: var(--ma-t3);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}

.ma-back-btn:hover {
  background: var(--ma-pr-100);
  color: var(--ma-pr);
  border-color: var(--ma-pr-200);
}

.ma-page-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ma-t1);
  margin: 0;
  letter-spacing: -0.3px;
}

.ma-page-sub {
  font-size: 10.5px;
  color: var(--ma-t3);
  margin: 2px 0 0;
}

.ma-page-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Auto follow-up toggle group */
.ma-auto-followup {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ma-auto-followup__lbl {
  font-size: 11px;
  color: var(--ma-t2);
  font-weight: 500;
  white-space: nowrap;
}

/* ═══════════════════════════════
   TOGGLE SWITCH
═══════════════════════════════ */
.ma-sw {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}

.ma-sw input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ma-sw__track {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.ma-sw__track::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.ma-sw input:checked + .ma-sw__track {
  background: var(--ma-pr);
}

.ma-sw input:checked + .ma-sw__track::before {
  transform: translateX(16px);
}

.ma-sw--sm {
  width: 28px;
  height: 15px;
}

.ma-sw--sm .ma-sw__track::before {
  width: 10px;
  height: 10px;
  top: 2.5px;
  left: 2.5px;
}

.ma-sw--sm input:checked + .ma-sw__track::before {
  transform: translateX(13px);
}

.ma-sw--xs {
  width: 24px;
  height: 13px;
  margin-left: 5px;
}

.ma-sw--xs .ma-sw__track::before {
  width: 9px;
  height: 9px;
  top: 2px;
  left: 2px;
}

.ma-sw--xs input:checked + .ma-sw__track::before {
  transform: translateX(11px);
}

/* ═══════════════════════════════
   BUTTONS
═══════════════════════════════ */
.ma-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--ma-r);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
  line-height: 1;
}

.ma-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.ma-btn--primary {
  background: var(--ma-pr);
  color: #fff;
  border-color: var(--ma-pr);
}

.ma-btn--primary:hover:not(:disabled) {
  background: #4338ca;
}

.ma-btn--outline-primary {
  background: var(--ma-surface);
  color: var(--ma-pr);
  border-color: var(--ma-pr-200);
}

.ma-btn--outline-primary:hover:not(:disabled) {
  background: var(--ma-pr-100);
}

.ma-btn--ghost {
  background: transparent;
  color: var(--ma-t3);
  border-color: var(--ma-border);
}

.ma-btn--ghost:hover {
  background: var(--ma-border2);
  color: var(--ma-t2);
}

/* Spinner */
.ma-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ma-spin 0.6s linear infinite;
  display: inline-block;
}

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

/* ═══════════════════════════════
   BODY LAYOUT
═══════════════════════════════ */
.ma-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 20px;
}

.ma-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ma-sidebar {
  width: 270px;
  min-width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ═══════════════════════════════
   SECTION CARD
═══════════════════════════════ */
.ma-section {
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r-lg);
  padding: 18px 20px;
  box-shadow: var(--ma-sh-sm);
}

.ma-section-head {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ma-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ma-t1);
  margin: 0 0 3px;
}

.ma-section-sub {
  font-size: 10.5px;
  color: var(--ma-t3);
  margin: 0;
}

/* ═══════════════════════════════
   GRID + FIELDS
═══════════════════════════════ */
.ma-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
}

@media (min-width: 900px) {
  .ma-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ma-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.ma-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ma-t2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.ma-req {
  color: #ef4444;
}

.ma-hint {
  font-weight: 400;
  color: var(--ma-t4);
  font-size: 10px;
}

/* Inputs */
.ma-input,
.ma-select,
.ma-textarea {
  padding: 7px 10px;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r);
  font-size: 11.5px;
  color: var(--ma-t1);
  background: var(--ma-surface);
  outline: none;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
  width: 100%;
  font-family: inherit;
}

.ma-input::placeholder,
.ma-textarea::placeholder {
  color: var(--ma-t4);
}

.ma-input:focus,
.ma-select:focus,
.ma-textarea:focus {
  border-color: var(--ma-pr);
  box-shadow: 0 0 0 2.5px rgba(79, 70, 229, 0.1);
}

.ma-input--err {
  border-color: #ef4444;
}

.ma-input--err:focus {
  box-shadow: 0 0 0 2.5px rgba(239, 68, 68, 0.1);
}

.ma-input--pl {
  padding-left: 26px;
}

.ma-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  cursor: pointer;
}

.ma-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.ma-err-txt {
  font-size: 10px;
  color: #ef4444;
}

/* ── Phone input override ── */
.ma-phone-wrap {
  width: 100% !important;
}

.ma-phone-input {
  width: 100% !important;
  height: 34px !important;
  font-size: 11.5px !important;
  border: 1px solid var(--ma-border) !important;
  border-radius: var(--ma-r) !important;
  padding-left: 44px !important;
  color: var(--ma-t1) !important;
  background: var(--ma-surface) !important;
  transition:
    border-color 0.18s,
    box-shadow 0.18s !important;
}

.ma-phone-input:focus {
  border-color: var(--ma-pr) !important;
  box-shadow: 0 0 0 2.5px rgba(79, 70, 229, 0.1) !important;
}

.ma-phone-flag {
  border: 1px solid var(--ma-border) !important;
  border-right: none !important;
  border-radius: var(--ma-r) 0 0 var(--ma-r) !important;
  background: var(--ma-border2) !important;
  padding: 0 6px !important;
}

.ma-phone-wa-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 10px;
  color: var(--ma-t3);
  font-weight: 400;
}

/* ── Autocomplete ── */
.ma-autocomplete {
  position: relative;
}

.ma-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r-md);
  max-height: 200px;
  overflow-y: auto;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  box-shadow: var(--ma-sh);
  scrollbar-width: thin;
  scrollbar-color: #e2e2e2 transparent;
}

.ma-dropdown::-webkit-scrollbar {
  width: 2px;
}

.ma-dropdown::-webkit-scrollbar-thumb {
  background: #e2e2e2;
  border-radius: 999px;
}

.ma-dropdown li {
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--ma-t2);
  cursor: pointer;
  transition: background 0.1s;
}

.ma-dropdown li:hover {
  background: var(--ma-pr-100);
  color: var(--ma-pr);
}

/* ── Priority Buttons ── */
.ma-priority-btns {
  display: flex;
  gap: 6px;
}

.ma-priority-btn {
  flex: 1;
  padding: 5px 8px;
  border-radius: var(--ma-r);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--ma-border);
  background: var(--ma-surface);
  color: var(--ma-t3);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.ma-priority-btn:hover {
  border-color: var(--ma-border);
  color: var(--ma-t2);
  background: var(--ma-border2);
}

.ma-priority-btn--low {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}

.ma-priority-btn--medium {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.ma-priority-btn--high {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* ── Lead Score Slider ── */
.ma-score-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ma-score-lbl,
.ma-score-val,
.ma-score-max {
  font-size: 10.5px;
  color: var(--ma-t3);
  white-space: nowrap;
  flex-shrink: 0;
}

.ma-score-val {
  color: var(--ma-t1);
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}

.ma-range {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--ma-border);
  outline: none;
  cursor: pointer;
  accent-color: var(--ma-pr);
}

/* ── Tags input ── */
.ma-tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r);
  min-height: 34px;
  cursor: text;
  background: var(--ma-surface);
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

.ma-tags-input:focus-within {
  border-color: var(--ma-pr);
  box-shadow: 0 0 0 2.5px rgba(79, 70, 229, 0.1);
}

.ma-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--ma-pr-100);
  color: var(--ma-pr);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}

.ma-tag button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ma-pr);
  display: flex;
  align-items: center;
  padding: 0;
}

.ma-tag button:hover {
  color: #4338ca;
}

.ma-tags-inp {
  border: none;
  outline: none;
  font-size: 11px;
  color: var(--ma-t1);
  background: transparent;
  flex: 1;
  min-width: 100px;
}

.ma-tags-inp::placeholder {
  color: var(--ma-t4);
}

/* ── Currency wrap ── */
.ma-currency-wrap {
  position: relative;
}

.ma-currency-sym {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  color: var(--ma-t3);
  pointer-events: none;
}

/* ── Checkbox row ── */
.ma-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ma-t2);
  cursor: pointer;
  user-select: none;
}

.ma-checkbox {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--ma-border);
  cursor: pointer;
  accent-color: var(--ma-pr);
  flex-shrink: 0;
}

/* ── Notes grid ── */
.ma-notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 700px) {
  .ma-notes-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ReactQuill ── */
.ma-quill-wrap .ql-container {
  font-size: 11.5px !important;
  border-radius: 0 0 var(--ma-r) var(--ma-r) !important;
  border-color: var(--ma-border) !important;
  min-height: 100px;
}

.ma-quill-wrap .ql-toolbar {
  border-radius: var(--ma-r) var(--ma-r) 0 0 !important;
  border-color: var(--ma-border) !important;
  padding: 5px 8px !important;
}

.ma-quill-wrap .ql-toolbar button {
  width: 22px !important;
  height: 22px !important;
  padding: 2px !important;
}

.ma-quill-wrap .ql-editor {
  min-height: 90px;
  font-size: 11.5px;
}

.ma-quill-wrap .ql-editor.ql-blank::before {
  font-size: 11.5px;
  color: var(--ma-t4);
  font-style: normal;
}

/* ── Drag & drop zone ── */
.ma-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--ma-border);
  border-radius: var(--ma-r-md);
  padding: 28px 16px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  min-height: 130px;
  background: var(--ma-border2);
}

.ma-dropzone:hover,
.ma-dropzone--over {
  border-color: var(--ma-pr);
  background: var(--ma-pr-100);
}

.ma-dropzone--over .ma-dropzone__ico {
  color: var(--ma-pr);
}

.ma-file-hidden {
  display: none;
}

.ma-dropzone__ico {
  color: var(--ma-t4);
  transition: color 0.18s;
}

.ma-dropzone__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ma-t2);
}

.ma-dropzone__sub {
  font-size: 10.5px;
  color: var(--ma-t4);
}

/* ═══════════════════════════════
   SIDEBAR CARDS
═══════════════════════════════ */
.ma-card {
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r-lg);
  padding: 14px 15px;
  box-shadow: var(--ma-sh-sm);
}

.fu-card,
.ac-card {
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r-lg);
  padding: 14px 15px;
  box-shadow: var(--ma-sh-sm);
  max-height: 500px;
  overflow-y: scroll;
}

.ma-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ma-t1);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ma-card-title-ico {
  color: var(--ma-t3);
  flex-shrink: 0;
}

.ma-card-title-ico--yellow {
  color: #f59e0b;
}

/* Smart Suggestions */
.ma-suggestions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ma-sug-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--ma-t2);
  line-height: 1.45;
}

.ma-sug-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ma-sug-ico--green {
  background: #dcfce7;
  color: #15803d;
}

.ma-sug-ico--blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.ma-sug-ico--purple {
  background: #ede9fe;
  color: #6d28d9;
}

/* Quick Actions */
.ma-qa-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ma-qa-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ma-t2);
  background: var(--ma-surface);
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.ma-qa-btn:hover {
  background: var(--ma-pr-100);
  border-color: var(--ma-pr-200);
  color: var(--ma-pr);
}

/* Follow-up Task */
.ma-followup-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ma-followup-lbl {
  font-size: 11px;
  color: var(--ma-t2);
  font-weight: 500;
}

.ma-followup-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ma-fu-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ma-fu-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Activity Preview */
.ma-activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 10px;
  gap: 6px;
  text-align: center;
}

.ma-activity-empty__ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ma-border2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ma-activity-empty p {
  font-size: 11px;
  color: var(--ma-t4);
  margin: 0;
  line-height: 1.45;
}

/* ═══════════════════════════════
   STICKY FOOTER
═══════════════════════════════ */
.ma-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ma-surface);
  border-top: 1px solid var(--ma-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ma-footer-hint {
  font-size: 11px;
  color: var(--ma-t3);
}

.ma-footer-req {
  color: var(--ma-pr);
  font-weight: 600;
}

.ma-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Attachment 2-col layout ── */
.ma-attach-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: flex-start;
}

@media (max-width: 600px) {
  .ma-attach-layout {
    grid-template-columns: 1fr;
  }
}

.ma-dropzone--compact {
  min-height: 110px;
  padding: 18px 12px;
}

/* ── Files list (right column) ── */
.ma-attach-files-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e2e2e2 transparent;
}

.ma-attach-files-wrap::-webkit-scrollbar {
  width: 2px;
}

.ma-attach-files-wrap::-webkit-scrollbar-thumb {
  background: #e2e2e2;
  border-radius: 999px;
}

.ma-attach-empty {
  font-size: 11px;
  color: var(--ma-t4);
  padding: 10px 0;
}

/* ── Each file row ── */
.ma-attach-row-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--ma-border);
  border-radius: var(--ma-r);
  background: var(--ma-surface);
  transition: background 0.15s;
}

.ma-attach-row-item:hover {
  background: var(--ma-border2);
}

/* 20×20 thumbnail */
.ma-attach-thumb {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ma-border2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ma-border);
}

.ma-attach-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ma-attach-row-name {
  flex: 1;
  font-size: 10.5px;
  color: var(--ma-t2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.ma-attach-row-type {
  font-size: 9px;
  font-weight: 700;
  color: var(--ma-t4);
  background: var(--ma-border2);
  padding: 1px 5px;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: 0.4px;
}

/* action icon buttons */
.ma-attach-row-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--ma-border);
  background: var(--ma-surface);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: all 0.15s;
}

.ma-attach-row-btn--dl {
  color: var(--ma-pr);
}

.ma-attach-row-btn--dl:hover {
  background: var(--ma-pr-100);
  border-color: var(--ma-pr-200);
}

.ma-attach-row-btn--rm {
  color: #ef4444;
}

.ma-attach-row-btn--rm:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* ═══════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════ */
@media (max-width: 1024px) {
  .ma-body {
    flex-direction: column;
  }

  .ma-sidebar {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 700px) {
  .ma-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════ */
@media (max-width: 640px) {
  .ma-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ma-page-header__right {
    width: 100%;
    justify-content: flex-end;
  }

  .ma-page-title {
    font-size: 15px;
  }

  .ma-body {
    padding: 0 12px;
  }

  .ma-section {
    padding: 14px 14px;
  }

  .ma-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .ma-score-wrap {
    flex-wrap: wrap;
  }

  .ma-priority-btns {
    gap: 4px;
  }

  .ma-btn {
    font-size: 11px;
    padding: 5px 10px;
  }

  .ma-sticky-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .ma-footer-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .ma-fu-row {
    grid-template-columns: 1fr;
  }

  .ma-auto-followup__lbl {
    font-size: 10px;
  }

  .ma-breadcrumb {
    padding: 8px 12px 0;
  }
}

@media (max-width: 480px) {
  .ma-grid {
    grid-template-columns: 1fr !important;
  }

  .ma-notes-grid {
    grid-template-columns: 1fr;
  }

  .ma-body {
    padding: 0 10px;
  }
}

/* Dark selected text */
.ma-input-select {
  color: #111827 !important;
  /* dark text */
  padding-right: 35px;
  cursor: pointer;
}

/* Wrapper for arrow positioning */
.ma-select-wrapper {
  position: relative;
  width: 100%;
}

/* Down Arrow */
.ma-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #6b7280;
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* Rotate when open */
.ma-select-arrow.open {
  transform: translateY(-50%) rotate(180deg);
}

/* Placeholder color fix */
.ma-input::placeholder {
  color: #9ca3af;
}

.ma-multiselect-box {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #fff;
}

.ma-multiselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ma-placeholder {
  color: #9ca3af;
  font-size: 13px;
}

.ma-tag {
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ma-tag-remove {
  cursor: pointer;
}

.ma-arrow {
  transition: transform 0.2s;
}

.ma-arrow.open {
  transform: rotate(180deg);
}

.ma-dropdown-box {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fff;
  margin-top: 4px;
  z-index: 1000;
  position: relative;
}

.ma-search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}

.ma-options-list {
  max-height: 160px;
  overflow-y: auto;
}

.ma-option {
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.ma-option:hover {
  background: #f3f4f6;
}

.ma-option.selected {
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 600;
}

.ma-no-data {
  padding: 8px 10px;
  font-size: 12px;
  color: #9ca3af;
}
.ma-dropdown-box {
  position: absolute;
  z-index: 1055; /* Bootstrap modal z-index is 1050+ */
  width: 100%;
}
/* ============================================================
   master-view.css  –  Styles for MasterView component
   Place this file at:  src/styles/master-view.css
   ============================================================ */

/* ── Layout ── */
.mv-section {
  min-height: 100vh;
  background: #f8f9fb;
}

/* equal-height row so all 3 columns stretch together */
.mv-equal-row {
  align-items: stretch;
}

/* ── Base card ── */
.mv-card {
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  background: #fff;
  padding: 18px;
}

/* ─────────────────────────────────────────────
   SCROLL CARDS  –  fixed height + Y-axis scroll
   ───────────────────────────────────────────── */

/* Left column info card */
.mv-scroll-card {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 910px;
  min-height: 200px;
}

/* Tab body scroll area */
.mv-tab-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  min-height: 120px;
  padding-right: 4px;
}

/* The tab card itself is a flex column so it fills the remaining center height */
.mv-tabs-card {
  display: flex;
  flex-direction: column;
  /* Let flex-grow push it; cap so page doesn't grow unbounded */
  max-height: 620px;
  overflow: hidden;
}

/* Custom scrollbar (webkit) */
.mv-scroll-card::-webkit-scrollbar,
.mv-tab-scroll::-webkit-scrollbar {
  width: 5px;
}
.mv-scroll-card::-webkit-scrollbar-track,
.mv-tab-scroll::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 4px;
}
.mv-scroll-card::-webkit-scrollbar-thumb,
.mv-tab-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}
.mv-scroll-card::-webkit-scrollbar-thumb:hover,
.mv-tab-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ── Avatar ── */
.mv-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  flex-shrink: 0;
}

/* ── Tag pill ── */
.mv-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  color: #374151;
  background: #f9fafb;
}

/* ── Label / value typography ── */
.mv-label {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mv-value {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
}
.mv-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

/* ── Pipeline stage ── */
.mv-stage-step {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
}
.mv-stage-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid #d1d5db;
  color: #6b7280;
  background: #fff;
  white-space: nowrap;
}
.mv-stage-pill.active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.mv-stage-arrow {
  color: #d1d5db;
  font-size: 14px;
  margin: 0 2px;
}

/* ── Quick action buttons ── */
.mv-qa-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}
.mv-qa-btn:hover {
  background: #f3f4f6;
}

/* ── Insight rows ── */
.mv-insight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.mv-insight-label {
  color: #6b7280;
  flex: 1;
  text-transform: capitalize;
}
.mv-insight-val {
  font-weight: 600;
  font-size: 12px;
}

/* ── Activity timeline ── */
.mv-activity-card {
  display: flex;
  gap: 12px;
  padding: 4px;

}
.mv-activity-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 4px;
}
.mv-activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px currentColor;
}
.mv-activity-line {
  width: 2px;
  flex-grow: 1;
  background: #e5e7eb;
  margin-top: 4px;
  min-height: 20px;
}
.mv-activity-card:last-child .mv-activity-line {
  display: none;
}

/* Follow-up ID badge */
.mv-fu-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  background: #ede9fe;
  color: #6366f1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Activity attachment chip */
.mv-act-file-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  text-decoration: none;
  transition: background 0.15s;
}
.mv-act-file-chip:hover {
  background: #f3f4f6;
}

/* ── Activity view link ── */
.mv-view-link {
  cursor: pointer;
  color: #6366f1;
  font-size: 11px;
  font-weight: 600;
}
.mv-view-link:hover {
  text-decoration: underline;
}

/* ── Filter chips ── */
.mv-filter-btn {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}
.mv-filter-btn.active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}

/* ── Tabs ── */
.mv-tabs-custom .nav-link {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  border: none;
  padding: 8px 14px;
}
.mv-tabs-custom .nav-link.active {
  color: #6366f1;
  border-bottom: 2px solid #6366f1;
  background: transparent;
}

/* Tab count badge */
.mv-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  margin-left: 3px;
}
.mv-tabs-custom .nav-link.active .mv-tab-count {
  background: #ede9fe;
  color: #6366f1;
}

/* ── Progress bar ── */
.mv-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
}
.mv-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* ── Header action buttons ── */
.mv-header-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}
.mv-header-btn:hover {
  background: #f3f4f6;
}
.mv-header-btn--primary {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.mv-header-btn--primary:hover {
  background: #4f46e5;
}

/* ── Connections card ── */
.mv-conv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 5px;
}
.mv-conv-key { color: #6b7280; }
.mv-conv-yes { color: #22c55e; font-weight: 600; }
.mv-conv-no  { color: #ef4444; font-weight: 600; }

/* ── Related links ── */
.mv-related-link {
  font-size: 12px;
  color: #6366f1;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.mv-related-link:hover {
  text-decoration: underline;
}

/* ── Empty state ── */
.mv-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px;
  color: #9ca3af;
  text-align: center;
}
.mv-empty-icon {
  font-size: 32px;
  margin-bottom: 10px;
  filter: grayscale(0.2);
}
.mv-empty-state p {
  font-size: 13px;
  margin: 0;
  color: #9ca3af;
}

/* ============================================================
   NOTES TAB  –  Description / Bank Info / Extra Contacts
   ============================================================ */

.mv-notes-section {
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

.mv-notes-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #f0f0f0;
}

.mv-notes-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.mv-notes-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Description / rich-text block */
.mv-desc-block {
  background: #fff;
  padding: 14px;
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
}
.mv-desc-block p { margin-bottom: 6px; }
.mv-desc-block p:last-child { margin-bottom: 0; }

/* ============================================================
   FILES TAB  –  Attachment cards grouped by type
   ============================================================ */

/* Section heading per file-type group */
.mv-files-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.mv-files-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.mv-files-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.mv-files-section-count {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  display: block;
  margin-top: 1px;
}

/* Individual file card */
.mv-file-card {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #f9fafb;
  transition: box-shadow 0.15s, transform 0.15s;
}
.mv-file-card:hover {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.14);
  transform: translateY(-2px);
}

/* Image preview */
.mv-file-img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}
.mv-file-img:hover {
  opacity: 0.9;
}

/* Icon placeholder for non-images */
.mv-file-icon-wrap {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}

/* Footer row inside each file card */
.mv-file-footer {
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e5e7eb;
  gap: 6px;
  background: #fff;
}
.mv-file-name {
  font-size: 11px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.mv-file-dl {
  font-size: 14px;
  color: #6366f1;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #ede9fe;
  background: #faf5ff;
  transition: background 0.15s;
}
.mv-file-dl:hover {
  background: #ede9fe;
}

/* ============================================================
   FIXED BOTTOM FOOTER  –  Previous / Next navigation
   ============================================================ */
.mv-fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.07);
}

.mv-footer-side {
  min-width: 120px;
}
.mv-footer-side--right {
  text-align: right;
}

.mv-footer-spacer {
  height: 64px;
}

/* ── Responsive tweaks ── */
@media (max-width: 992px) {
  .mv-scroll-card {
    max-height: 500px;
  }
  .mv-tabs-card {
    max-height: none;
    overflow: visible;
  }
  .mv-tab-scroll {
    max-height: 340px;
  }
}

@media (max-width: 768px) {
  .mv-scroll-card {
    max-height: none;
    overflow-y: visible;
  }
  .mv-tab-scroll {
    max-height: 300px;
  }
  .mv-fixed-footer {
    padding: 8px 12px;
  }
}.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACmCAMAAAACnqETAAADAFBMVEUAAAD30gQCKn0GJJ4MP4kMlD43WGf9/f329vcBAQHhAADx8vHvAwL8AQL7UlL4RUUzqDP2MjLp6un2Jyj0Ghn2PTr9fHvi5OJYuln7Xl75+UPpNzXUAQH29jH6cXC+AAIAJwBNtE/23Ff5aGdDr0TJAQHsZV3qR0IAOQB3x3fdRD/Z2NvuWFLkcG7fVlH4kI4AAlXO0M8BATsdS6MCagIBfQEASgPoKSc4VKL442q4xeQAigD46eetAABYd9jvf3nZMiwAAoD30zz55X5ng9tPbKZnwGXz8x77+lY7OTjzzikABGsenh72pKNPldEAWgHgGBgAACH88/Gqt95JR0OWAwP3uLd/qdr53kMBBJJ3d3XMPTpWer8NnAwABKPH1O1VVFIuLSz13NtZnlf2kEh9keLn7vfZ4vNkZGHzvwJIXZRfZLuDwfv4y8tvk79LlUblzsxorGcCBusFKuYCCcdmfq5jqvlxt/tzktEABLb8/HL2tlTAw8SLlMFpj/ZlpNhBZ81BYbQcGxuToN9SYdjXY2Lz7lD0dCQ6S9Dm0EUCYPdDlvWWvd2AnviXqc11eMZTqPc3cPMCRev16ZrRUE0Hf/tNT7HIJyTptDVTffSsTkvhtgQ0T4jigoFUx/g+hsX9/QUHzQY1dbJ7sHV02Pduvd0leiK1XmaTrfpCQPgELrrdsrY1NamgyPrh03iPxosvX92ysbCgoZzk5kP1YD7t6AILnu+45LykNS40qvXDdHnR6tBennz6u3TSxU1Or9Swz6wqzCsPZKzglJbIqEY8hDhyAgFzbJxuOC+Li4d9sJLFsnhwbvH2d1A3kzAqPZQITsN76nq2dzaZdKJf4F6RJkb078YFiM+tnWZGh2F+dDibykYoMcsnekdI1UhCAwWb25qVkEq43km9yBrclQMGwfyZ3/zZ2QK9gJxsJWCBUk32QwqOSYKRxh6Xdm3B4oMW22EPZzawnR72kgZltCqPxrdH1dkBkqDdWwwMwMO9O2sqKXHvipPGJkzlRVLhJjVIs9KrAAAAB3RSTlMA/v3+/Pn9Fk05qAAAUU9JREFUeNp0nAlYVNcVxzHazoroGBkXhAgCCjMsroDoKIgKdFABBwQUnSAoCqLRFBfcCBIM4kbqShO1hlSrCJqQQmNssVFqjBarsdjFJWlMTOLXJDZt8/X7+j/n3pk3vNq/bb8+3nbP79137/+dd954qTVt8uTJL73OMhqNer03ady4cWOhWbNmjV+0FfKGjMb36Y9/1fXUst9cb2y8/lpb797z5k2dOjXVD9Ljn59fcHBwQEDAgGch3l9on6feeeedn0r9kvT222+/sErRgvcDArwV8f5tN/rcvPnMZ22pqVFRSVGjR38k9Rsp9fLql/MXLj20VGjt2rVeak2Og/auI/kHBQ3We/tCo0ZNhwYNGj58/NaWlpbOyMhIX1//2/jTrICvckhXruQsWbJw4cL3tzhPORynSk5lZWVtglL9IkmdDQ05NqvVGhLwbKSUL+Tvb9yH/2sj+eN0IZZ3fvq3Hnp71ZtCOyofdnTYSzq9xX7UtsF9+/Y1FpeZT54sc2aUlq6Jy89YM/qj2oZaoeOkMR8dV/Tee++NWb04rrA5MRYKDAyc/NKCpwDIyKhE9LEzZ/r4DLQAAE6EyEeM6AcNH7m1pTMnB+fHX7tG9Bs0Xt+GwM/frqm5tz950aKDk6rsiA0xbUrbRAii/BDeV9bGhQsPRlyOCAuZ9GykZwT++n2RHPnVYQU+oaFDPQD8jEQAPiDdaLPaHGVXbn/O7YHQuIH9B/gYgzts1iqrtSopKWlNRkzS6I8arFaOFvTfew8AfiYil/rN6sWTKwtbArOzExISUl7+vwCuQNt8Bg71AQCcTwNpWeFbW3IIQEmJr08XgIzX2xDcvZrs7Jru5EWXwwKSwh2RkQ77w7Q0bXp6YRoDaKO+kZl8MCwsYpJ3pEf8liAAoPhDhqUMQ/wAkF+oqKiosJYA7HxotdnTtVe6Pr/S0h+AI90QffU3T9obGuwdD5PqkmJiMtbM+ajWI/60TX0COhoarAAE1dfXV80FgMmLi1oSKP7/B6ASAGyBV4YM7D/Bx8/bF7g5fgmgEwCCSiJtJQRgxEi9zZqVdYUu9pW0tLCIgOvxdR0dpxx5aWl7EzV7CYDV+tXnCzMzkzMvE4AFlTuhZaSf/OQny1L32RC+JcHikzJ06NAJoe+YNKRbsbG3xPlWZTxssNmdOP/J27ffudLJ60V7DAaT1lxRVvfwYe3Jlrq4uJiKjAwAcIWP+BkAhV/i7HA0uAG8BAIUf8qfzvwvgJcQf+XMK4GWi8OGTpgQ6uftzwC0LIM2WgcASwaXOBwlA7v6/YgAhFRt2pRGeu0/UyImbal77eHDo2kVAJAeKwE0fl6P63/5nSlTAKBCiR8AovbZEL9lf8I5AMD5booAE7OzY8X5fhGJi0/nTzTcMh+80iIBaF0APqvIu3EjqfRGcV3S4aSKYk8AaW4ADU4gOFlfn8sAXnoJBDpTCMDL87zU2kwATl+x1Nw+P2HChKHBBMDHFT8DwGjX11FSYu/f/aMf9XtOjwAacf2hmxRg7ywXDrr30kb7NVhDquo/z0y+nJs7ZUoYA5DxM4BFmcnJyV93PzjbvQhK3urqAYF7xflWVT5ssDaU4Ox7T9+6Ei4BaN0AUkvXJEExMTGHD9cdFgA2yfgZQAP1f0dJw0lrfS4BmIb4z5yZBgL/H8DibbehGROenQ0AQRhvZPwQAGDQ8wlqsFkmdP9ofr/n/OgK2ml1xxQECAAy/tdee++91wCA1mfWJy/KXUTr536T+O67764X2r9//T+3JkPdDx50f7qItDXfff+zeAxY1lYV0VCmPV1Ts5fGAGUYDbHpo0qT6vKTignAtWvXiuf0StwGZZPQybMPAYC8/xF/bj0AUPwvvzytKCdl6dMAvJxRuXjxkCHnL86YMXs2A8B4m4yWQTrdIp0uByMajcATJrwzXwCIiIjAFSrbJwGI+FlH00YH8/rQy5enQPsYgBK/BLCI1c0Afonhn/XjH8MNLP9o1Y4Pfg795N9hYQ23bt1q4fb07z+A/ITR2J8AFJnqOP7iuj7Fc35TK+9/bkPaM+NGiSnsB6wRIwGA4n/5T5Pzc5aeeAqAP1VCM4niWRqVgr1p1sEYlskNJQC4BQZbLJi0MAgCgBUKqYo3VEVEhIWFTZqXtYmVxiIAtB4QeDUAvMuSFBgAJCkwAKHlLAKw4wMIFG5URVgdLdwedEq6BuCgj1qzpi4uiVScYa6I0fWKJQVC2aRDY0eNWrlyECwMMIDDc2vZ6UF0F7z8tB5w4kTvtZ+ygklGkk4lvZ6sne45SDg8aJIQ2z+4Mmg0qcfauXPnfvPNN9XV/1S0VSWyf1Ls4FZ5aIHu/blGKb2UOM0ckq4PmsZ2b8yYMb2l4FbhX8ePHwmhuSPXkhaQ5q0tXzBvntdUUq9eSyFu9njXxpA74Leg198yktRWVI4OkAkymw2Q3WO90+nnN3u2H0QkHI6JpHHj2GvTYdsupd68GfVZ4yTJqJeUaNKhQ+rzCUvOMXEr//4vD3333XdLe+rRJx4iqumDnT2O5zW1HII1hPLy8pJGjz9GWgk9D61Al4fWkWay9VRbUa1GEVCYDRoonu0dr++n0ZQ0dMCNdDRYHVrtuImjWHQ80lvfl4WfhJetw1CFm6h+rkazd28iJHvyIe/IHt7ZOBY7o4GPH4smPqf7nRwz/sH6bmmi2HtvYiBUYPxEcZakt701PdsPAIhb3DBbYmIIAOK+F9HXJ6z7t799AwDI48+cOQRi66m2ogoAYVwIQEkQb8DrJza1azRWq9NpjUjXtg+aNXHU9EEQHW/YsGFD3toHMFZbgzUsDNPkPgAgpScG1vA4TgB8PZATAAoc6IasWPHhhwCQkyNCdwMIJCVqDabA8+cAAJFLYVD92dvpjvQe7ZcA7p0/350dEzNmy+iRAHBPrO9+AwB41Of4h2HoFdZYhsfL7ej7QmbSBdED/GkDXv+ju9Pv4i9mM+g09Rs1duKoQSQR/4whb7msbFhufHy8M2xup6AZ3sHzWOChaveIWQCtn00A7s/84MDuD4bd+fBDcYEukrVna5fwMQPAsqnQZOqqLtBzezysvHd6z/YLANndUELMGAmgXqzPfeON3+IE8PHbuL2YegYCAO+/fz/io2VMM+5HpR/BGXIPGCzix3oAaBo13aApK9Mahg8fNAo9ANsPGi7iB4BLZRUPH9advJGb6zx+3Jk7FwFtCNekNzQUabW3cAv0Ek9uUA0U+PGsY4NmzrxQVBS3e82wGQDA7bvI8SsAsgNP7y26HV4GALyeJzGaY5J18fZ4GT+3DwBK8/K2ZF/s7v46ZYwEsMJHrJ/gApBJ8QPAs9gh2BYBnT077OwUnvcBwB0/nCEAQPFBdADefv5dPEu3p2u18e39Bg2aPou2h9wNmP3wi7bGL9qsuVOcizoBgM/X0BBtamggK2wGABn+WSLw8awm9P4Du3ecys+aMWPGt6J9medF/EsBIBbxJxSFm4vM5moJAOGL+AHAO90jfglgy5bshO7uFAIQM2fkyhUr6sX6fW+MJQDYX1wvWI/+uOIc79mziJec4ESxDPGy6AF9RfzYHgBw02s7yswNhf1GDJ8+lvcfPgKrxfoAa0S9uP9HTV95LHdur8TzuF7W5OSqDdEGAFiaiIjk9U8hAMdw+1Ts3r37VPOMGR/K9l3k+CUA9P9b4c6y8LKC6upqAiDj3wpxD1Dix/m9Uku3KAD6xMx5DgC6xfrLYwnAEuw/jOJnAMHjpnvECwA8aK5YseK3EA2aogf0pQNIAIOaXI8S0/sBAPaHaLUEIOJHPmjUsWACACN7/qLVmoz2Zjabv3x8X+oBdP/DWeih94d9sHv3BzO+fOOND6l9C93xL00BgOy97dHo/ZHm6EcAwM8OHlZ+YLpFtF9eQAGA9+81pg8DQCzdU3D9Ef/YN3AC8OP4Z5D1DBg7XYmfAKitqYl7AA8AvDxxVLtGW1VVVhYRZjC0jhg/Tuzv3j6gCuEjfghGYd/cXrFk5BNqai4K633k938h/Zp15C8Tx68E7X7Dtm2b8QZEAH743j8gYQQwC8TGlp08Z7ZWC+k/4eFf6pc//Sje3+TZ/pFeqXkQ7hoIhhoAnve8ogRgCQZBMQsgTgBgXykpAoDKmpoIuJP/wMvzwaOKHkisVfUnDYZZ2J/k3n4ST/94UiHt2/d+Lx7yttFAXnP+60W6+X9ggQFzGDdeOJT791fQNAgAv/qHFFMAAJou7AWQBCAkKXzknW71bD96APnWQ4c+hthRsv1Ty2WNA4InwYYpzhJSW1MT+lmkxx9awyfNhQVmvf9+c9M4kVt1by8tsmuLub3I/in6er7URGkh1SZ1znfk/xR9o2oP7F8Pax1vbO8RgJcwhYp8BvpMcD1t+0GffPJ7xUo+CA54Yc+DPXv2vGA0vkBavfqIW+xeH3kr8iJ9QxJegQNpu/TMzZupnzXOkQ7+OkumeCCOU+Si2Sr7kR6RkQZ/iA0y62PWVKlUiLy8fsz1MSd6s+YhLz1vu0t7ILS4T1Rqn2cU9fF6YQdpMZIAG6dNmzZ5bX+7PZKGsXi0CM9xwZ+0DmuVnejxsHMDJu3Zu24vkrT+QTtYq4/8nvWHPzyeCa2HUySRbzMKAO9CGhZ15Pku67uGlaS7frzoeFat26uY2CpzijiIrbKfLdH2buy7eKLkR8oAaXWhQNLH8+qEKirKy0tLS6O8bXVZQpvg8dPmbV/O+jH0IvRClLY06hkPAcBGqLa19ckBzC0HVg+0R9rQFpqFtWER1oBPhr3+eutPocevPzIaBwTseTORAu/rQ7sd2AgA4g69T1PlfmGVsX9fn8ESALk4ER5Gsb/Mny2tbzGkPQwASH1s2iTDBwC2yhYeVdgq+yXODAwpCCzAozT7Dml12fqR8VGcOMtk9A0pkUvsI7YvR+DQrl2vQLtWpdbFPAVAq8lgMrcygKEEoKQsJKTMYQgLDQn4ZN3r60T43ngSrH5g1rBcWaINAoCMX1plXq8GoBUAXNYX4RcfPqzVXa8tqk3bpATAVtnCVpytsp8tsCBifcJVil8BoFhfu7OE5RCyGn0HWxweQLYvf/HF2tp1T568IgD0Gf2MJilKBSCrPf5Cc3h76e4zuwmAv8ZqQ5cLMwwNA4DWn+IfwoeqX3/8kQvAQC2rGQCU+NkqywuiAqAVACa6rO/hYsR/uBi3wKZd7wGA1gPAcEvfhAQAmEEA4DwLEgo4/tmzwyYdYqurWF+9zWKxhCKlTjnV2WEBxkhHX5/G8jSZEZoKALWJWbuyYgWBVRgA6vqk9hgDNh54YtI2t2jbn5wBgAl2m1XTYAmxhFoNU5DG/uRnHuG/d/yjEa0X7kID+99tgu6OxTytxK8A0KoAaCGexz+rWHPpUtKaG4e1hwnAhhNZlLtMhwyG+HhDGVvl0PXZ2fv7w3oMe8vPijuf4of2AQCyutDmzWdI1zcv0Psr8SOFF2As0Th8Qr84CiEzcjSKni09b4l5C+al4r9uAcCBA1nthuYKc3spA4i0hWgNdFazgbK8n3iEjzct380S1rd/f+mkAECJH87O21/2v76eALQM4MiRX0+MKqXsFXSYAei8/d3WXLHaoQNTUga4AYSGiesPTSEASvwEwCrin4D4GYAv4m9MS5M5yalGX1uixccntCDwKqf5n5FSboGNBw4caG03m1tbz5zZs3v1bAAAKvtJDAuzAeD1c0r4DEBY4f4DKH4C8AclfgYQxFl0etRWAAj+RwjA6DUyfuoC3xt02F6JnwDQ8UNpeQAB+DTY6op/HxJLU+au3jj5JYRPwvR5ZoFN3v12oVxjkE+oXbG+4o71WH5dJa9VALD7wBPMArvP7AEAfaTVgm3NZkzcszHoBCvhM4BvhTcfMOCB8OZH/sDxp0hrCwA8PvKjNqkaAPaL80sAyvU3fF+sU1tptspDaRkA3gKAEIoforwaAPhZ3f2de4RWeUvAARqDKH65ZDKE7/nxriexm17ZtO0JxvhXX1n1Q5UAYCMQTCsvn7ybEuYL9JE2q9jfZJoSBgADEP5xt757MJM0xMcHUUOfzr9Pywlua+vtThhJAOvdPYDc/LjRayC+CxiDTm2l2SpbeJmPHywzyhLDXH1ICI96wEAcAlIr4ABKSThuXt4c75ByyJ2Zj9qDWbD2SSJmAdaqBSp5CdPoB5frx9LDdEVDG6C5cKnB/xz1kdB3rAcP2Bb7+X0q9GtOXirWU7HGEgBSwI/CoehosrIT2f7pFKmtNFvlYF4W/jvAI6kMoX2y1kBIZKBHu1PDwfNI7A1ZbP+UIgPMAn08hFnAIOROal3P6pnlzSQlK8pHf4F2s+AwjSRNvDsCadl76bQif9tbqDBdNvzPfxcy8+nCw1OULDDrOukEi7PXnngo+IDLY8UZZMmGOmsMn09yPTI8VwjhWEUkXIY4mYVu2/7qq9tJXuqsLoxJj+XMZqEWUmdnskabf8olWOI9Rl9Ik07vqeh1id/EpqZRUGKOhksqxveuZGm0Idx3g//+BPrd734n793wXnuFEoUOXc+ClJcrC4wiI8rv0On4GNUbbh8TBRtwDOPVWerxv2P9SuiPukKcBwd0xRPusuLSH+/xUmd1r9dm5XsuZzZ35kBLxCt+ANBoihA5CY6YAODEmnS8KRpIr7cBgJp2uyDkahcmi+EAUE7SpvPQFRrw9yfcvk5nPHUyApDokQWPBQCOXN7DafPo+ABH1RN8fL0t6OrVq1X3eC7C8dVZ6vHu2P/4xz//WQDAQ44rnmhXFlrYYxeAW+mJ6bcSEyUAEFCyqJdPfkX6HLp8+fJXBEBTyAR2uAD0tWjSfbh9BGAUxX/1zi8HVXcpAHZq03m9BNBptXY4ET8DUOKXANJk/AxAFETYbO/ayJ3aACAwcH3gep/Qru4PUZ8w/nW8X9gWOMSdZR7bRG81jkOU1XjeDUArFOey4i++WFW1vr4NAMTLaFjLvekuAJvylYKIXIcvFcQItzLB9o5G44CzylcA+Pe1+GjS+fojwGDO4hbcOfuXX35bnZ0deIgB7Nyp1QqrygB+1Wb9lbOBAUQTAOV1XuwhdRZXI7Q3UVplfSKS45aEc0MH9p/yTveKkQCw7WrIXneWmYDMrD3++Mnx47x8Iqt8GiTs4+bJ8y6V3Xj4sOLkjV27qjA9AYCBvGJsQkLgXraKBAAEOsCdZPfLdbjjRwQAUOJvxy7t/BK+NKuPhqVYTX6PEHJ101+qq8MWLcrUqdf/ne5Pa+OvMLPRPB3dBw+ychaDSkers7gaFiAliv31sSHr14euv0o8n322XoeAHXhwOyuydsMYwJDax0+ePD5OywCA8NM4fAIwdWfdtIqKvKyMXbuKDPWFRS8wAG3r3lvtF0RBAveANuqv7K2Dc+3K9Z/g7gGtlKRja9sjPjSQF6/eqc7+9ttztKz3Z6uarl22BcqL+jvdo1URvyqzGbSUpOTX6XlkW0mvpaqzuBLA6dOxOD4DKMA7koRzaMyUf3+xczUCvlVgic+m+CWAIUNqjz95vEkBwJdfAniVhj6+/xuRjGyTAO42XRjVxJMfACjxE4CuveRlC2SO7d13NJD59yJFSQD0QRj+tPHu7flhpqv6y+pv/9lF7wn0QexZ4g1bBIBZBCAnIsJaEm+QAJT4f/Naqrmndd2wCFMPhuHTp3OWQDk6vS1hfcL+6v6I/iU8vgPAkAs1+5vPIn62zt6+56AsdNChjx49OqcvwsEQPx2OjwcAIv5d+YW5hfkSgNZ814wNGADHP0HEo58Q8PXe2Fjx/JkCxd7T8uXn+CUA3P4AILcPFu8NuqrDziF+lND4hfCjigAQsywKozQN0Esc8eJ89LTHLk8+7ZmV+LnBnJX2KNAA8KvVQ//9xWTYkDNnJq9VW2m5XF8vl2lSx/X3AMDhU35kee7yXS94mfh8St78RNZDOetAEwBAmaRjoS6t4a7M0TKFcWxNtfE+cvvgsWKCjs3U8jwFAGxd0w150DIAkHO0QSjaSPM3Pa6BI+RnVtojAPAErBRo6AeHtN1YDP8uRra1aiutXgYALTZ1H287pn+SxAAA0pFB0aQT7wuzKbOQwV93kfC/Qt13j/TI0k5kg2Yqox1YY0VBwlKdWXgx6VvLzKlRrPEjRU53Q7QQdpenE/bW7G7JBpZOpUmfLVi9arXQWkhtpdXLZP8WzFsQFx3Hh2vm/CjrBZaX9UbvmzenotZWWmpZ3AOJUgvCtkq/2u2Vy0lmbiOfZhxLqSWuyC/FpS5qbCyiW/6LUm/om2rv6mrvR9VGyCRkNErs6uOprS2bcpaZ91Bbd0CTmsTiPd/i8gtuzxGVPpoIebTY61qJ+aT9pJOytEnQ6NfiSBlxcbWsMTRG7LBtdFvJ8nxI9FAyKEhgkJRa4jqHpigjQxMZqamry/fV1Hk3eWRx198zmjTpmEZovSbe7tRGq4+ntraGnlY9nJfT47Wu5YAGVIKSZIEF7y8KOrg9R5C++r2iI6/W9myvF2p3/YNwyqQYcl/Fc14TkcNAk+r60AkPhBzg0wkA4GNi2fyDCMAg5VURKkfz4uwOzWJN0GBNuR0Qrnk3jTrrqlh68O1wvDlyNCBp6R+k0Tqq7ACgOp7K2koA6b7xSgFGeuTgvkElWBYAEDgidxVY8P5c0DGMrbLTgx908tVTPdo73uumw+4baW94WByTlp+fFuMCkJGhBqD1ACCeFP2pTg/WVzkgTpiXUV6GtCCeD4Li82N29vYGoDs1/Lrvy379ngcADaWtg0JwMAe8ufp46gIM+brdYnEKL4/lSF5fItqjFE6ms6/g/UVBB18Qb1xgeno4x7qqf/XUKdr81i2ZIfJaU1LR0YEsbUxMWmnFUQEgP5/sYFxceXlWn1XIGR6w0JzDWosGZ2SIBgeFwJvDeBBvtxWVz5Ior2Xle486i4KIO1fP3aEXkiv0QQ47pa9CQoTTnP304227d08ejwMsszRaylwAZIGDvwCw/RQ8ObRRaBUXcIiCDpwPAN6NvQoN5vgHngOA5XT7NDVJa+31WUXSjRsxa27EXEuLawGAo3HU/+OysnBjlpdmPeNnExkYV16+HO3NEKMQJjgrGizjl1a0MTLI4xL2vek9KrBg+IiuhBRUFhMAfrojiae74Kcf715m8j0+ngDgj/vBR9QOAyArUmj2njc5cJmkOLCKa5u5PTO4YMM7cR0REPELAMtxxA0bpDX3SsXYFwNdu5bWmZN0bc7RjNraOMSPHpBRCgCrKWcYKq//njNrp4kGmyCQCQlGg5X40WDZA3z6u3vAnUEjRtw5d+5LAJi/Qm9xcOstFht9JxHp9/TjDeteKJyd7AFhuVPKhFX39vcXXd4hssjbuQO4IGxkAD6iPZy1Rg9Yj/g5/IGPAGD58kJ42Q0bwnE8AUDG39mZl5eToyMAiL62Fok2AkD34O7QM26jlIcG14oui6sYEjymrpxeyuUJlaZuqViWnz5Y0x8AQpt7J6V6Hxs+4k4N2chD386f/6EeRseB9lso89oBY6I+3lhVAQYDSHfud5qEkUEWGftj574ii2xWUqJyPTqfKOjg/WlQ5P7v4wJwSguhoJEV7hW1huOHKO1xDQD45aJWWyoAUAPOhBEAgwtAbZ2YhC2haDA/bbkfNvKmxmRobJF5mgEDNL/Q2EPKU72nD7rPPhq5rwf9CIDdageAUK2hod4GAKrj/U8BRiQ/ju8/R/7UJ4Ssbl9HutbpL63uUws2RH/k5bKe1vrKq8td1nsflDsXAES5OXQY9da639SS6uQswAC0ByyTlR6QAQkbEgIBQNbicggY8qCpdRpb3M6dNAguS4rTWC4ZjwVCXIABCitgdZ2RGNBDMAs4bSUAoDre/xRgsCFYvx5hkbkVVjfIv6/L6j61YIMLOs7ysuvttdSRV+vcnqEecycAiFpbFtUbiEpbzpiy6NKsDlhL/pS1ZQuq6TZwkjCYJOtuSVNJpZ8nIQeaf/NmPlKyz9R+b4T++cj46JF+9iM9JK2un5+0uurjkX2T5Qsso5Df/7O6smCj5/a93oI+5eUjKu0JVpLMJK/r18PDZRaWq4i3k0ykcHbLKmcqaoVlCvcQtGjEjyZ6emF1Fre3CpDa6vKZhbHn8wdLueytnqU8n7CTFSllugeMik0WaJd6CrUZDTfmwep/cY3S5M/hmqjP73V9Mj0uKjnA7ZQtFebiRWiVt8x/yrHW6GE1SYf8Hraa2psUa2m0QWRlQ0QWd8FiUrkrL5XK+ytm13iiUog3mzZtQbANsrpL7CfpySCz+G8BXEChYRVAxj1vSsmCDVUBxTfFTq3zpDO+Li5/Q9OFlrg6tdX2MovZCn6MtXM7PS8LAPQ+HQA48IcPeardqFesJtf6HvL2bby97tat9unCCQIAz/ORkWKeBwB3PgafKWxOFVYXCYvjwuqe4NAlnpcIgIhcFkQAAAfOfwwNIwAALR4IkKEpMJp6ZrWj1QUUgx2Yde32G/hIB+VVx6LUVlsCcF2Dyt4MQBzvFQgAKP62pvA2CUBaTZmF/RjLEV+dn7nuVvuo4fQRFQBYoHRH31DKAgdX5EMSb0ZGXIy0uiU+JcLqEoBprvgZgBK/BKDEHxYBAIMEAG16NQDoJYAdO7QCQAKnL043N5+mbpB4qNEZ77CXlFRk5FMJfFOd/OyOxJ/deZ1A99+8Weue5gjALphFLL+yezcB2AhZmy5Y2Wnh9feSCGE1ET8DAM2D3WeHDKFuMGi80R/hl+CjqvgSBsBlc5V0vMpCqigRF4viN7AVXV252B3+S8jaKtdTZoH5q7IIaUUjJnEBhYHWxysA3ty4482Nb2r5+KyMuvw64fQqnBknT2aU7aQe0PX8MqoXaKUsaCvivWvQmiQA7qHQ5t7bkSt5RctWYzcD2MEAwsNDJICvFi7sewf6knRnIltPn8vdxGNYvGkcAPj42OPt9hJfTqpyAws1GRnaImRBXQAQf4mBG7i2snwnaxlp51R1FjnEYRfqgBo69nHO0YD1ngAKNxbiP7S9BFAXV1EhnN7D8KLw5riiirq4lXUHK47VIf6mC63tTU3trU3T78IJilJSpQcAwK5XeLlQAXCg6oMbVYife8DCep8RSqkpACD+e0hL70UPGD5S70/pLXQ6pyhY4BzfYi20uNDgBoD4Bxi4gQyQZnVZPK3OMquXOecIdgQA0vMGuPwbD+yg9RIA4o8T20+tAFvxlV59Te6y0Vh5wWQytLYaTOgBAFCp3KNiEPzxrldUADD8VV06/wUWfw4AZDUVqzoSy2GXHwyZiTGgHwGhLHGoj7Mk0jmUAVS4D54BxcVcr90E5fUfkJTGb36ox4gSDwg9hkthP4RQCDtu3Ic6dYEDF1CYPAHweowBwgqPbVoJyXJXfFCxrCgjDv8Jr4urO51bk1GBLDOUQ+IssxesKKlSqveeH7+iBnAAqo/YTTogsq49rOfB7m23brUOp2UGQNH4DJ1gEVnledP47pKvfLdEqd/9occo8TMAJX4CoFXilwBg+lQA5HoFAIcvviiZWsHXH4q5nVDzk9HqLLNXUaFLJlORqahuz4uQOCDPAkblUYvkx1bTw3oGt3Xi4ivLsoDBnVWeygNc3mYSsoQA4PnyFwDIMCglD8EjXc3/kAQAPbPE4Wx9PW6BF6RDkW1ci2+K+JsngQE9AB2QOwEudGNdRoU6y+zl/ohMmjWyf6uiyfduWEVSnJ0wZLw4UvkMTaebCCuqLOtVFQxKGasQdwSYZdcZPWweSykFFuKwlZxoOBdQXIiGmvUkVxJ5g5TaSivnHs3SqeQ1UZUl7Q1p9Bp3kQWvFicXNvvQfGX7cR8fmqs6oPozOp1KAqgClSyw1AKSnqVA/PbTXj3E7RWnn/81jrcb4loHme7+n/Pz5krWuu3GM5+hVnmOfAICAFVWtzdVE9g05VApHvNTPawnW8fLiYmPeXvofmCNztv2lRxRuG/p1AUXOl6rrDd6WFGyyqsXQ4oXnKe3sRIT2f5YAsY2PV4nNJPUS2nv/a9wQJ3yewPiW2OcP3wDN8LQvIHP3zO+7/kXJ8IvrYGuJBUDgEhqyruaAJSXa0I0eaSjRwGA1otw2DrqOs8HBt6hzb+tSbi4RAdn17jE/UI7UwJw+Po6xLOFjmsroj//fEMmr+eCCovl6lUfeqHu47d2scsG0WA5eSqMj1AovM/QiAB8JXZnnRvBul6u9k4/v9Ccmbzwn8ZIgROwwDPET6sxdeaEa5xOTfiSnHA+//OeWetce0cDVAzl5BwGgNb29lb570L73fZ+AFCqsWg4fgCIYuspLidbVxzwNgggzZOQ0o2AyNpG2JWHKQZgJ6sdycvR3CGdDbYyE6kFABD/+uyEgoFcUBHQEAHVV1XxZyNhcwUAy/r1FP+UiIBZo0zmY+2etcQc//3uzE5T54P1evSokvj4SB/w7I/jAUB4Z3N6ZF8f3/TmJRsYwMILraQLUOvwz8ocHR2ODlSo5V65sg8ANKx0B7IsJGGtLaraXXF+Nir0/r77fPb58wkXM1HAAACUpbZjvQJAfJY00EnLRt8gdPXPIyIuiwoRLqi4mlBQkFI9gQFQUWpDhNNZbwWAXADg+AMD9w8dOmVKaMAsg2FQ+3BYFs/2TL+/EIN4Z8qjgXqjf4kdpoP7kwCgMWkdMGNDI03hOD+11+xhrWWt8uHiwyfbGk+6AdjtjkhhPV3Fx2F0/tnyszixP9cCy8/UshP2y8/Q7Brg9sHeImvLX42JlLADy+E4HrxxZlhY8gSuEGGrjOrnagAg4wMA9RH4lCu+w5lLADpQ+mlxxm8LvFUytKTEcnCWofV5fOVzzAmVlDk7yAneP4/4M79GcSoBcJb4l8SHIH4+Hj8oNoeGLtv8kNojASjWGlnwS5eK16BMM6eidMlhFwBtpK/Bw3qGqqyn2J+SkASAPtM6fz7l62QG4O8RvwQQL95qOGnZDeCyLGaGVeYesL8ayxKANl6Lt125+/DV2CVTZZGzcrHZPDmvbPLm8O/RA4a39+uux+WQF2T6/ZZMxJ/yDbcHPcBGPYDjFwBM2lPL8jafyTCF4/zUXrOHlY7iStXDEDlUAPCNdzgdeHqz8z9Hwzx8SQoAR4/S6/yYo1FsPbUKADipewnZeMvxZcrS7q2LuNY3TMYPAQAUSfHbeDma/1xmtdIYYMYYQE5yYEFKyjdoLwMIC4sHAPzHSQAqKovi8L5w2uT8yrz8uPLiWStN7Su60COnkADg8fkWU2dmZkr/ZwWAoCCMAUEU/7M4np9BE57TrM3avLm8sHnhBkM0ffbX4S4mdoSNXiPiv3b7ypIlt2/rvNjaYnwXFQb99QRAO5QB4Fvio6PZeor4OAury7mYXfMtWeFvD/X6OpNqfbtkXpYLIkTBhX1w30gDA6D9Mfp2d/cTn6kZg7gQoLpaFlQsKH/J9Sj6p1/8Yktq76LFIDAtP39yXn5dXv4zs5DFqFB06Us8jYZn7v/GVRCBW4qrC4aKMQA9wJyzJFqbn2+IXrgkmgHkDqRV8nwE4DDU53DO7dt0C6gLCqZi+tdatHlyGhjN1lPL4vVbAwPvu2aVOyn7dd4h92ReVhREqAsuxk6XqyFplT0LMILXyklQUpiaVJlfWRkXt7g8P6M8I2Na1KyVpTt2vPjiRgjO/MAq3RKopsDd3lNFbuVDWTj/hmYTj3ctzQYCEIFRVzkfirUheRdcAwB1lpXsnyHAFOVyj2w9hdPk9UsPjVM+Oxv/9cdzx49VliF1wcVY1S84eBg9JavMLlyqeOrhw6mpl4qjooqfiSruM+sErLmHYP7++sijvduVYgfa7gX1+XV6Y48TzoF6WOFPDilfxZHUWWB1VlY+Fe12qTe0wCOIQKkE+SaAQcp6E1JvlZRSYaH+AyCPn1sTnxMqmq2SOsurXl5L6vUWnYFb4KXWJ3v39viFBXXWVFpT/EFY0wOiSjg//03Wmd5ZdRcSL9SJdyN4MRK4cuX69bHvtjWyLn4claHNqFCssfN/ACSSlF+MGKC8+fSFjHPbWOJ4Bw/+1VsldXvVy2sXQ+ug2Fgy108DwIHXPr4gfmHhs4fQDegL0g2dPhI20/2ISwA4B52fv5EeQncAwGk0/HReHj/u5qUGrny+oCBWNPhg48GuKK3GcMkKcR2DddI8IfQYIffvA8hfjEDBBklG4A8AHDj0DnTwr656mAApdZZXvcxWe+bM27e3bQujn/J6CoDH/FFkQs1dBnCiklL4izERbebSUmEMTE3HzOIzOQaw42+dnX/bCBGAFjS/heNXADQ27u+6eLHrIABkGOouKVmdsgyhiooMoU/58/ga1vnzNV/j9beUqB94v02JnwDopFxPzOqCCvUyAZi8rQa/d5f9fwAkcg/APXteApgGFWq0hZM9ANx9fkWTJ4CizOQiAWDBYnR8cf1BYHNq4PMAEAgACfsPgkBXVMWlS+gBso6lapJGqKVFI6T+BQpTz6ywuSzeKVVG6tCxtrZsdQPgeLu65C9W8LLyCxEAgFlm2+2IiHsAMOWpAKgHXKAe8AQE3j5BxMrp/NO4tJQBtFOKpp2sJAPYsTwuOTnuRQbwfcWNG5eEMLdc0kkABxMu7t+f0nWzK75nlrdMxpe8SAGgxA8fYVJlhf+nFpkVvUSn6RQAOCtd39WVi3gJQKS4f0R9bxAATAaAewUFADDlqQD+W9y1hkVRRmGyy+6ygrYleMVCM4sQoRvQKiFSBlG56CZiYYigEIgFlcJWhIJ0YUuUCLMbT1mhS4ClaRJPEQRElhbhpRD1qSyhInvq6f6e832zMzta/arebm4zOzvnnW9n3j3fOe9H8f/gev6HH57vpPZyMAbK0pESpAfz/YKA5YuWvb9skdnMBGCq6PO2lpbMz6l19pWhUZdg8h1ljvLHSOCiZUxASxyw/eM9F7Cbn1LHNGWugYHyv3pJgIcDhSRAla5B/zQCZNvdnj2y7U73/lAiYFVJ3/33980jJXkqAsDA84e+aaorq5MEYCaLlBjiVwgw73z//eadZgAEIAV3O6YB9qN4CASQ1t/KMkP82BEE4Mu/5+ieoyDA6pnVzd3G6Ni3r0P8aVqwNA94nJDcetfnWyRuB7Z80rqDvv8MPA+36y1M9W13escIEACVNW9eX9+8vyIghr0Fnq/r/IEdFnq/xP1fwbHjprFqZyYCvHDaYzRXGBkHJAoCArby5qtJa4KAGctAwIzqTR9/vP3j7Xu20whQ69gwAs7UgbPIfGyRRUYxs1LMCzy6tnWTGj8R8CkDnUfyDyc5WOiyxCtmQmTOGxcXd20cm7mdTIALI4DwvHBYGOopjceO9czaggDcA0TBA+4BIGCSsp1mr8YIAgKrqqs/BrbvOWr1lMa5egJ0WWQQAIhqXgAEqE9BQu+3OuilvL7W+FZKOAmHvYuBkwl4rV81WCB4CmNtgncag+XfKyr0bWyiq7kK2MDQdb2dPALUtzPWywznWolWoFcD/fv1Ul6pE1DKjVmkiloGPgMvPTh/qpGOWjsGoPeZUlF9+ypv//pVTspyLe5S3n/paR5YynvfweDt+qzzEAn5CWhkdySGR2NKMD4+1oH/c5WAsv9lO9qSqJZ5k5LbNgukKuerrxUmKrSXzyTQ2moSuJEgiiouIKBfAPBTpWO0IzJS9rAsWNAWPLR0ZQw9VyIisH1UQcnXnJVdSYjg/U/Twcdvl5/fewzejv0ZSlZ2SDmhsLs7t5w+I2yIozwjwwGxjFcZkflh+iz1L7VBtW+jzc3pzM8CwoyGUM7hBcjz5YIKqTSBaWrWWbTxcVZ6IHhgYNMAZ6Vv7ADEk4J9jgUBE1TpiConQzls5WJji2IHStN+8vErCEzzpSqlEVtnVG0dylnZEioQmMf7y7jnzXMTEDjBF/aHAG/n/YHD54us8xDE7WjurLVXuPDDlAjIiUzPyTcY8ImRKSBAZH0PHJAFF4+/jfDwd2wl5c5jw8xB9cSAzVeeL0tleZ8gpYik6yRlQp0KMSkrXb3uq2EXvpv8LmWluWNFEIAqBDcBqnSMTiQCEH7R/D2lu1ItkJZdBWm+aWkj0qq2YjtnZbkKawbvf4TQ39/d3d/Pf/TZFVjg+xID22l/jv6aiyYOP4DECBNQX9HgKMx3VRAB0Q5k9nNiiYCUICaA4p84ejTCp/25zQ21zCCgvHxmJUZAoYEJkOcLLzQMDE5fsRcaLDQ+BA5to8IwImCA4qcn7cePX6cSAG8zI0nj8WJ6fJQqHeMdiZH5dPk3IXyjOf/rkC5fhF9QUFp69jkoNOSsLBdIzOD9ScGcf+gio/GiQ+dfjxcYMV2SAN6O/YGJzcaJQuoSARXfFDkiwztiYjPzw8opNZcSaTBGRpYnwhwT+59/WEijfux/heI4URk+8+aamZWzzTKNPUyebxKZwRURwskLbSqatCj+nTsPCQJ8/Dyn35kAY27nV7VaAiZdDAjT03gUfdLl79rVbcxw5M+mvjykMEePSyutikPpKkvXEtkxzwQA2wzANv6jT0RBYJcggLfT/ofroKK2NSOi4ZOHOEBAaE650VEUkwkC+LGNf5SkJRFwzWiaGm08QbW+xxxZe/dWOvdmhs901EzP1BAgpO9UR74U4sBZbSYm4KNtOz8iIAlLSlGVSgoB/vUDQWb+bSAIGMnnTlL0ivgcXP62Tbu6zZE54bDW+toPI6CrNC6utPQcGgEsXRE/CGDlxe1Tt8Ay8NAtz9KffWBmtpXCv/NO1RFip9G80+hfh+MTAfmFFbGO0AUdMZnhsbPLUzLSMQjQ05kY5J8YGUv7L2scfaB/XOMLtH+8MysWU9tAT0tfX7gkwGgdIaWvvlZZEPAhj4DPQIDOoYIJ2GdsQFkiDDLcBJyvFjzE5+Dmtys7qDwW1ZIgAFJza0HaCIRf+v3XisMD1+IKAoRIsaRmp2/nP/pEzPAkgM3TcAecOFwc35Gf73C5CuubY9rDQQCMkVPgCms04kVkfvhs3v/9/nHj+hE/E1CE+LmYt69vtyQAOWSY1UkCZPyybQ7KkupCP9yG+ImAG2vUyXYyiLyCCfBvaPDXEGA8Xy14iM9v67Tj4u++dPduJiCgYF7p2WdXVZ177tenfT9CODzw58Wx9OQMlq/9ppvsvufSn/EVmAECKEGnOkIMP7TN/9A1fHwiIL+jor4+ph7FuUxAeUo+EwBvcBDA+7//Pp8PEyDiZ4AAPl8iQErfE4cPc8GSBNr4hDK/Wrb9ieOp8YGAffvEF078NmDpeI1a4DC1vjYxJ5YQDuArMCuwC4MItjaY7Kq6lmtz5VOApScr2DE3QcvjP4APPZ9fYpyyljdetMkWFnJ2lghIsVgc+UYjnoL+QeGz9ftP5cd/bCxYIJhk1tn6F7XC+qzzeP32K94ABAEXAyCApOONkwGRtT1rSLxaPQzAP4qwdKk34wvOEn/xKnDUmzBGB9477w4gj7frfX01hg8MvMbfYRZLmHAX4/35DfyOydjbo5pZJn1zvSXUUmEBVb4L6D+f/yMKQKYRvPKSBgeTUKp7gdT0c3XSNSlaZqzjo4upse0DAVFcDHytgmt3rwDqLNQXbekwAaLAwky1x3w8ofRVua/P4iImwwcGNQ198OBBLy2mMlQSnQGLF/vOnD5scyCjTPEpVnZhFjRtdkrbHX8U4JVUUVFfUeF4z2wjWHN9NtZ5SNFop8PBZXzF6dmjID0/ePjh4vLyYsXn4davd0mI/uKh8CWm2Wwz5uN2ki8xS1tRsMDHQy2ytnfzTn3tMLLQhocNAcETpOPEwaHeBz0IQLM5Q5ixzX4iIzVjZUZ2yr0ls8gQvEw6RNCdZm8+vmLjbXZjsGfbnTGdunBEgYa31/6KehdKS9dMkVlfH79JfdousCSnK7ANPviRlgBIz4TmDx7+xlUyq6T+vpkzUeM0EwSkKSil2l2y2AQBNTWoxiSLTZa2ggA+HipRAf65DxABOBN3HpMImGS42cClc+w4sXmoNfVlDwI4cDm7Ezt7UmpMQkRIRMLqEkYZHCJYOmeGH99xfDcISDWkTvHwPU7npplhskADBDhcaE5fY7EycimrmqvxCU5yBoIAZ0YqbEKH5W678VgFcsz7R4/u3MsIy7ZZFaQCtZMFAYsWGY3bXmACRgoCjGaWtg8h06Ma3N3+4Dlau/xRAd6CAJmCIQJsqanW0zUE5GjihxvdsOyYkEC/iLensB98SZl0iNiLG+bx3cczZ4832g1TZPxyBKRsYTM04XiBr0CM0+VyrrmYSwKmjB+6o2CS77qFC5WSl2hnW1tloiUE99yQoIuoDW3WrP19eAYMGwY16uuN2IDsXbtkSQwREGrYtuydDiLgHZNa22tmKawYQsRUiIIFs2cWOMgA3Ky+tuy2W63eY4d4jgCKX5qxPZFhD5oVaX9xeiPiBwGKQ0T4pszdxzcdnz0+WG2rpPoD5fMofiYgz4HLDygjYKhrfqDvsGTFwQEEVGbh8o84e5h950RuQ5vVtx8MjEP8RIA4YEJX6S7hQEG+xKGGmnfeWW5sJgLU2l4LZX0VApo3SkcIszZ+aeCw+D5gJq8Qcesv3t6bdyN9oBCwocKloKmpyTW4KmHx4mGLnVOyED9QdmxvZlvbk20gYNPu3cfDmQAZPxOwfosYfTTbRZ4kXhdQ/z6AEUfCYLz3QGDwsGS+/A8IAootCfh2+gUdIqlMI2B0H+KfQfFTZ6c6AjgLS77Eoc3L33lnUUcz+RKrtb0Wer86AmKE9jfrsrj06j5NQcMvYzdu5OsvQStKuGd3z8g0Bc7CzY/RyASobYAQckPCTdK3mJukqP6A70G4Aymf52W1EZRvsTWXtHM20hUSndEZVrQt4vKPFFJ58jdNfXPm9I07wZnJfaZt8maxU6D5PCKgbhkufkcz+RKTtJUE8PvlPeD55/kxcPfa0++RM/EA2d9ByRnuY8cV4RU2NSo1dcpULQHlhoxYEf4ZggAZ/jyE31g1NV+N/9iQ3aZp5Fs8nCDOn9sBRDl0SBSyxl5jgy/RZnWnQfunwdWcgPRG3NEgKviZkNs8XErJyW8coJo4jh+pWZNH29pVw88jX2I00eBGENRMvsQsRQUB/H4qxmasB2BuFp0jg+dmrefCxk4iAjhLTO5x08JgTD9pWpibAHiRWSIRvyDgSRDA8SN8ip8IcMdfXX0MBJBvscZHGN5iiJ8IyL5wTDYISLUB6n28FtpftrkxC0d98JCy+9e5peR57FEk8SkI0ElN8iVGaVxNjdFcCF9isV0QwNvXqklvgAjIkUOAAQImGW82KlVaIOACOKmOBwMqATnKUwA8yBEgKWACshQdn3kcbYDsW6w5v7UYeQSaqU6lEUBunLUCbxOGfr90A5qtjiqAYuqsu0yVkqjj9YBeatLmGmRlC4NCF7m3hwbR/zmPtq8FtPZm0bpaXsg/88sWNcuJ/81QGFCW01DA8k+iCsD+HrtwOhonqIh9pZgCYpghfIXF1RcNegLu1rVeb0+p2pDkmTcmWenO4QI2BXJIXRYVdUWS5h1508aqWXZAX2sszNDUz1uvgvXzKZf40MwX6R0puCXvVeC009T0uSZGL5aimlrgsbq2NdPARqFSAgp4++juYqdmsawwesRrpbPNs1Y4NcpiycbuLqcLv7OzKqfe8d6XG0UWF4Djg77WGFIaULPU6kQJpm0efXTtqZf4GFD8vkx6RwquRdYsEeI9aRSyppw2JYwHATiQphZ4rK5tDVnV6kt8gbQZcVuxHQEmInBgMyAIuIZqd6Ujg00bPhPgb8/KaiqrbGrLbNkNApAvp/dI5OprjSGllx9oKiiQWV8QgMB/+OabH14ngIBTLfGB0IXXGQjQOVLk0WSvcJTg/b1HjRmT3NWVfDWDCcDxNLXAcqkrV0y3UGKUVv4KS06k4a5IvsFGg82W4pTxny4IQPzI+E1sngil5yZABvhCtr2msrKsrL2sJbNpSWwYCHjpvQx1u77WGAQ0lXVtLaiSWV8i4BCmYcYJBtby8ckugn1ozf5iBHD8TIDekSKPJns1S4SMRU3pxStXagkAnZpaYNGuHjElLcIqCVhY2DCnetjWrajuRUbI2L1ypc3s3Mzxn75ZElDnP3L4yJ3NUHoKAcoVDsKZVFa2tcMvP65lScvUOx5JwdpRe1ezozwmS30CRslaY5WArtTcLrmEBxMw7hmgkVYgen2tCDg1JCRVU5w9wPEzAXpHCnah1SwRMgQP3ITkZDseusBz8V6cNVVrgQUBFYGrdwRWSHO0woVz6ue8m3z2OaVLUZxs6541q9uwsuH4McJxk5l+506sI9P+kcNJKofILyjPWI7CXB0IaI/tmUEE7G8JuyPSkIFs0XEpTVuJAG2tsSAgI7iKs54gAN/9ZwjjBAHpQnnWObOF9BZKEvFLAvSOFAoBSOLheIIAFDFnX6olQK4mp86vm8v37i2HYwET0DBnznx8P7efc24ptmMEVNhsIe4sKxFw/sSLzIdkgYM+CxtKBLS0NM3vw11uMBNfgUhaNkuugLYaI0CNX0rpAy1dUWVx4v0g4NFHrxUj4DUQcKcgIDUqCgSYFQIGZPyt75r0jhRUIHF/ibpECBEA45mNl3KPPAgQq8npCDBmwARItKlRre2cBvpl0Ps4B2zrtmVPkPFJApBTbTbX1TWPBAH6goWhWI+wMhMFUC0tRwaXbAYBuP4Z6nS5rtaYf0scaKqqKsX7FQLoHnBtx2uCAGVPbvNKZwKMRhl+77smvSPFipmo9OD4BQFGIDk7N5mPgQssaoU1tcB6H18QUN9O8QNzh3LACcPUggQmgB4AdTv9rxl+1clLbnh3pq3bvHl+S8sgsGTzbBCwyuJu6zHX6muNJ9MSH+/jAPx+IgC3vh8OH0b8TADf1QFaLg1marcyAQNMQG8rCNA7UqygUieO/1U+Ht+YduzINQv4i1phtRYYBEzx8PFFbW77EqXN7N2rva/tDtEvqWH+uyU3QMDqrErG5vDNRMBe7ZoarfpaY7HEh/r+9fT4B15nEAGA6LYGmACcungMAia9IwXXInMWex4fz6wWTwgChhJyGd6EC7QqDTB5ojVNV5BAVN+od3AANJP0c8NUeTo7r3U8jqsuqaGrNZZaW33/ep37WR5B02amb03TO1LQXis2cIGEPF8mxw0vo4TSO6lRngycm8f6c3mL895Tz2D7IGRuUvQR8i6Tvr46qXoGgAINLomYCgz19qw/GeMMv2l8uPNxxQhZ3/ZmtCkwQ1pbLM+6cQvDKODuHLuccBrjlFL6KkDbR6f3Fc5YzwVaAi7X3WshTRmyE9NUbFxsSHwPwJewweXaHw2dW78SSBPS9Ko6T6l6BrLHqATOEXg6zDvbZseyvAEy6zu2MiElISTFnuh0kt1g1lSeKFXPx6Jvw4MpitYW5Rb9+bO5GytfIX3VeISPsFqwIXyJ9b7C/kgZKVnrzrIyFwhwNyPj7rTMlFecQrGvATrLmpYhY5SV5YLUTGNpSgURNVqpCgJycvCDTVr0gQCbPcAOF6ULpZMUChsnTAAdYoa/CATgt4Z6PhabgWtm+bUgQLPuDlas0J0/CEBgmtXx1HiEj7BnBsq80+slt0cwrW35yB14g7L/fU1N5SBgUd225prmZvzT8QIIWJyBq4/w9zaVHXiBCWgX8Z+tFEQs12QYckHADcgv5CN+SUDqJVi2WcQPAi5IwHjxi9pRVNQCFE2FoUIGtxKuIkxPeiUxalSq36jixYziFZ9tOwQoo+DDZyUBLpdRIQAXViN9RTx3bdnyKKUh7lrrE8J1pAUFUqh54bHEEBO6L92xXsaP3ekNdxIBzc11zXUdy5mANcZVxmJx+V9A3osIcLnjv8SeS1ng5WrbSOhS/ZIYdlsCHtDSIv/C8UUJiVEbEzc6isKZgLAVM+1m+xrCQWBNdN4jAci8+zqJEJTu3qp+PTRSuK4C+dHl/BoE0Fp2Bw4I6QsCEM2WlIwMUPDoQyCACyZm4IRYamsJoCzFS3dgvh1QZpxLvkCWt3lnc0dH3aLlNcsQcF7kquJVuPxNB16QBLTL+M+eYIew4CzwIqVSDwREqPETAUNxBTTl9xfMjSzescNZviM8fMCR4ggHAZhtUOJ/GQQsDh6VGuI7cxURsMZNgHL8IL5gD3f+8ENPA7JMd93Jnz8aNSaHxep44oLiB3IK4gcBomAibdy4UsSvJ+AOEKAvOJisLqbGAa/A+HfSt5/iv4wIcHH8IwKy3W12y/3l+TEBFL+6GpzNMwucixHEX38QMLBsERGAG4wHAaHOmc7a6Rw/E6B9vyRgeWddTc+yh4gAWcDR3y+lr/ARvj09/faHeLuQ3jNQyS1Xm5u28WfCbwI/t+oLDkiaNjMKmwUBaxo6cfk5fiKggeIfRj/OcEtpvhxZ4EWaR23hkJynn0b80qP0uTAmQOMHEO1E/JVU4VS0bFlReNjcL38W+Jjwc+/4jW/nTg/FuuF8fuvmHpSOQwC7zrBP8H03d7bcdwNPtbEZm0b6Ch9h3Ai2KFNxbqXGaX0vvXRFAB7L0REBYt21ukV0xfPqcfkXyfiR9Y12pQ3zTbCiBubQRcOx/+XXLJqjdWgAAc/h+iN+JmC2TY2fgBGgVHjtxlK54WGn8AkOsEepr1es4tEB5AEHo0Wef0ts7O0iQM5Sq6vjgQB1KpK2mw3ysy2M0JPa5k7K8roNKd4hmOZ0lnVqV6ML2+Vn99/ZXDdyotj/suWeDg1UEIG7AB4CjNlmXe1wvJPL3ABRkPFPPsG3riIo3xEQIGcZRZhEgPoUoP312y93t/HJ1eZOMifTFRwAJi2ODr7g8frdd9+/6jLs7y5AMHmC5B+yzO4SB5Jz0gwil0ACkHPCEv/kE6zvslOFsgCXVyAHitU5dFJabscO2iy211kmT4zXFUioApyxoiF4UrCKKVfrs7TwRvFwJt7Rdvqxj4cc26Skvrm0gl0hNrAWlu+9SpGm+uONB7T11nkEFvj4B2jV7T958uPT5k4+7zvluumPZxZQzdSefEVncRHlKRXvhLXMI8WPKHeeFfWpU66+2I2bxuuztDeopjkPA2+dIWt9xSIwsWFsniYW1SA5PFYWSLg/T18wofcN5l+D5JPlqidtkGTq3OXx+ZM7MLkB++7QDp7BMZ3sU5zqB6td5TUIeH29RyelT9QkjfEuCPDw+gIBWEYZi2lLPL5dn6X9vkK7uvqun0St78bg2KL89vZYIgB5e9EoCCFABCRkB4waFSgelWVy9ThVCut9gykfkJ7TiQVPmnqK1tyfZJrfE9ilfj4I2LFxdce+jn3+b/ASG3x+2Zj/svtJn+JRtByesj8IwK+kyFSLgoU+fl1pJcDoRrqTNvanpKutuUBxvXVXdwgYUAjQL2xMxcvrqhcutNqruc3tmFzSIraoKbCqpWg2ETBTNEqyEPLB9Ugd5et2f6tkSyMH4AQc0eK5H1NREWHj43OOL316J9DUfpAIWNJXUqDWOk/uwFjZV7gv1PLGp5IAX7vdzzfAHjJB+BRnj4Kxsbrw8hkPbXvo0ewQBe9CKnaljR5dMoj4B68dfcTgqbUt9fVL2g3Z5yhfKzYsMDaT+dghiyQgrQWPgVBrbkvuu9W9+bLWt6ioottNADu9BUIOEwF2q93X94QEapI4feLOOhs5/u6KCmuMQkBDw/T0+9e0d7b3HLw/2tQQtHB/ybw0WTsMAlZvWr3vDf+gjn1MAElfu1+C1c8vdQJtlxdMXXj5jIefKXxw/c8+Er1QSl1bYex73eC4/bcNjpMEpNTUpIiChvr65x21BssxBXRArK6N+M+/iKRv647OzoUNDXMKl7TX7tmDEeBYwKvLhYe3NLWAAG7MdHG36BgmIISywr7utrloJ8evpt0pfuSpkaN2kfSFUnQ1dC5Ys6aop70FvxVMFqyEg4qVNFkLfB4TsG/fGxQ/pu9J+dl9rX7D7NZRtF1XOwwCHq149MEv8UoABPAIaBwcd+2rg9cyAXyNm2XBQkPnlztiUqBZBIbwCGCLjzp/MxPgKK+GCij0r9/elrO9N56qLlnptBw4MBg+m5e8cFH8IECt5j7BGH7iininev1PT9osa4PxiypGSGsQ0NlQ1g4CsEY6pDKPgMZ5aUoW+rw3Vg+sw7y1nL4XBASEWBP8Un1puz5r7XXWaw8+mNJtVbDQZ8LWNEUJv/pqY3+k+v0X94DumApHtLpiob5NjdvcPr7utsJaavOSBIQTAZktLWeFzz6dZmpcFH8ZF0EtjaCeYVmQgIWTk4o1M4+VWVPNuuODgPbOpibcAfct20cEzJ+zv0TMoigEVK/m+CUByDonJEwYAWfJS2i7LmsNAh5c/60GV/gEY4EkjVsc33SgvbDEHdTXqlvxFFgQPUSF3pzse9z+GVWEgp9AgIj/0ieBcNPp90xfsMDF/cJXEgEbIsoA8l0mxA3qzdN4Ieh3VOmNLG9WT1N7T0/PvmUvEwFL+maUqtIZBLy9eqMIXxKAeO2pVmvCKN6ul9pev6z/9lktAd471BwtcF6e6vIEHkBAyu54TfzxenMyOFMzygWGTOXHP0HU+t56j3ITdF0IoJbX8/N88MiWE0sEb/1C0LfiPJwNrsCypvY3yHHC1FMwSiOVQQAeg7J8AzD9g7TGCPiOcYWCabqCB9XxVqAt3mPR1l9MOkD+aZ2Jz9CW+tL205OAQV43mBPQemmql776haClFI6Pjxbo1e1vMs31qDn4J2ntpZeKVgzkB6y+7tetEr2M7b0vM2B6JrerWdbLTxzBB+qzynqCshT4BfAMvX7JjPjElKypUxMdiZI3xV3CIrPEdDlOkyDmXj1yhMsfFOxou/XYx0mQ3sBUQH98fbxeeql4jq1h/vwGm1153bpDwaZO16ae3pdp4QG4aSvb3W1uFzWW9KHAAQUNgFrQYFINHAmmLMMW+sv4ovimN5htFVjj62HCzcDp8UYkiOm2K+6Cs3k1OpRVKlnhvPe43oHTvlSQ8X7UykPyNWFpkpDexe4CjgqrrbvCUIG/u7u7K1z6eEWBREKC6sBgt7UvXDjfliBf66XpyzcXw4UX5dlyu2JudrgR1lq37R+k6WwOXRY0cIpN9SF+NWuLdCDBrDD8xqZYUHpbwfe8dEJkfEa6IyMyIzIofDM1SIAAIRttstY3773pq5TjkTna+4unf6M5/lLZZrfaXcBRERGD6CNKbLaIwLLGTindu7oUKcxS0Wq1qw4MCWBgznxriHgNy1as2vQmgMLNuI4hgoDp0y9Us8Bk7tXYuB/3wMHGfhCgncpae5pYKFlK3XlHs7YYHzM+Zn5sPY3LWeZCEFCyEi1jW7bwyh5vtX6ptAF+DFSblMXYbObuzs5uKwhYtQrF2qNJqpOP8WlEsOpzvEFI7417Kzcvwn0QBEBDlJQsdux9zzXuSFl3EMULFMxQpDCEiJ/Nb1jACOswxYEhwTZ/DjHAr/F+Q4qM/+mON0EA1ieFR+aFQkoyAbj8TXPQlHek8dAHTMBTMn5MZgqhk91gtIv9s7Y8Rlj/li8oP8dvndkaE2M1SpdReIzqsr6FICCCYMzo6Ww6UiEIOHzg8OETh6+l2uM8nqVIxwDiLHJSFknv4tq9mzfvq2letjnMaQx1BZY4sVNZo6sisZDPZ96M0aPj4s5mKQxlZLdhPCOppUhFMICCgCXWEHptaG7GIBDxPx3XEX36zewRugBnL9vi6PL34RnY19j45utrP3n4ecKbEpdCGAHGhiVGaoDfjnsALr/lQf8P+L6UXm+hiSCcvkShrna4cKkwWcFPIXNPj9koCDgwsbFxeP+1JJ3xGvEXrzlYnIEs2ZqkY85KVHdnEQF1ze+AgIxIgyHCFpy7uqy5OAMEsI0vjZcROH8mAPEGQCj5ZZ/rlooh1iW33bbEGoXXMRUx3Rkcf08cLWV98kLJB+jyX4fLX0fT16d5ZpVp/UASxsaL68XqcTwCHnzrg5eZQb/qG1J4+Ct4K10bv4YAY4WrtrY+NHSFGAEnTvQfuZZylnjN8R8EA5QjjHZL6X3LQMDs4sgUw7JAIqAx0uEPAvj8S5EWl1KYpKEd9Xw0Ia9KRTDwwAMLU6PO9jZ0d3P4lOmJewME6KTkVa6SPmigvsbDb74mCFDjJwIGXU3AEQX70Umi+qQGpba/fLNqsksE97KUdsO0IUa47GCuqbbWbAmlgFHwcWI4jk6lt71uvwdRshOfpfyU6Ozra9rMXWaNByqaWppccUGQ0uL8x20dgaSxJIDiDaH4tVIxxLrwgQfmpIZ466WpXkp+4VooLj8qWCQBavyvjtvwjOfrL/yy/ahVW3yDfAKqM/j+z4Crr6VQ5yvMBAQCZloMGgFQVrgEXYX9OBoRoD8fECB/SvUAggBzs6UszlVcaGYCeK0KavbD/kzAqaUixsB1ty1J9e5Vbsp7qvYgw3GStCQp3NdY8vzrDBCgPvUIG3y6BLYKeAepbFrS/f27XlZshm9gRF/h6SsMAuRTgN7DBOArII7feKqCjHihH+QwYAL487qRpmMC9FL4r6Virgmo7WVAYP7Ue0ppif+1/4sTH7izrm5jsA0C+v2nELhEpJrhr1teTilEUCCOcvRortxpxYqkJOXopyrI0LflWdxrTwicJIUf2GCaq5WGSTC4nzZtndvyIgzgo2G7B2SNw1VXjQw9R/N+/epzQZM1OWZgnhszGJfq8MckTbGtbdIfXv82TD0xAzs00jDJiaxncIIsY1s3Nyy/PMgRCTsouR0ODVF+qpPt2P66ukOWBPX9l9cp6CkoaEk7z2io+YaADlfCVaNHqEBKqErGHa4QkD3l92xeZZWqAX+fku31b8M0vy8QpbCKFGYCVq97e906tvYhAiLb2spRmy+2gwBEfoni4njJ2MGYi5ZftDNhgnw/CLhIunuPXJ6WVjMZN9FOrRSeN8LdIgkwAUVFOQtynAvuKSrCC4Ph1z9+tRm6ugw2/MFg8Pq3QVnVsq+q3VlSImAdCEhel2tMTU5uRYNCZnkbehPk9pBsuwLy6LzQ1BlxzfKROy3yfweDAMR/jSwrWT7ZuDLBMCBvgj/9tHU8CKDoq6q8CRczAU6MAAyBBQvwgi/879lRUfRvw39BgCuwqa9MWeh4jkkSkJycm1yLv0BAZmI59WZI6asvUKC8PFWLi6zGyCtAgDR3H3PObQ+keUfFzAqJql5XnZzMbnCt80Yg/LRzq6puSsPEEAgQGOjJFH8wEH4dExx8MS7/f0JA55KyOftlv8WGsj3JYi2L5GRj7eNvm0FAW2Ybxf+LlL46qUq+vX2B15xPFilw9Zl43uV1irm9IMAeMmuW3Sj5hRIUBFS99VZV2lg3AZkopJQMSJ/jm25KMPxHBPS0NO0vk+eHE5wWLK29UpPffhwjQC999W1uuIeU1cD1REwlnT8ZBMjhf+W5D4AAc8isAnM1H5L79ogA79KqHxdV/aQSgPjBQLgkgG8D+Ps/ImAJrv+c990LKU9bLU82udZci2puvfRtL9Sux19/namzERUFO/3FdGBklljiYqRKAHyWv8Is4k8//cQNGCDAG6iqajmGphVJQHgPCBhQRkAqf/v/s3vAEjV+QQDHT0DG7vFWvdTEkFduGDxiBiOoXWLxGqVgQV3i4qZzHzCVggBzzziNFJ43huMvrfqpCk07IICR2TMwHwNAfQoA/9VToM+15HzNQspz8fgHkiUNraeQvu48MGDqp6fgYnfFQrS6xMWFY667rdTbaK45wBBGF5fNGKN1uU0GAYz5bh1wCS484T/TAUdNk7ULKSuFvK0SJ0lfHS677MzyFZrV1NQlLi6Aj9dYb3+T55IXM9CxogAcV/3vSvC/Bj1utPD6n/EnnaQbrf6BCX0AAAAASUVORK5CYII=)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap}/* =========================================================
   ROOT
========================================================= */

._drawer_2tic9_9,
._drawer_2tic9_9 * {
  box-sizing: border-box;
}

._drawer_2tic9_9 {
  --primary: #5546e8;
  --primary-dark: #4535d2;
  --primary-soft: #f1efff;

  --text: #181a22;
  --muted: #747783;
  --muted-light: #999ca7;

  --border: #e2e4eb;
  --border-light: #eef0f4;

  --green: #08a366;
  --green-soft: #e7f7ef;

  --red: #d94b5b;
  --red-soft: #fff0f2;

  --orange: #e59a00;
  --orange-soft: #fff6df;

  --blue: #3778e8;
  --blue-soft: #edf4ff;

  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 1000;

  width: min(620px, 100vw);

  display: flex;
  flex-direction: column;

  background: #ffffff;

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  box-shadow: -12px 0 40px rgba(25, 28, 40, 0.12);

  animation: _drawerIn_2tic9_1 0.22s ease-out;
}

@keyframes _drawerIn_2tic9_1 {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================================
   OVERLAY
========================================================= */

._overlay_2tic9_157 {
  position: fixed;

  inset: 0;

  z-index: 999;

  background: rgba(23, 26, 35, 0.42);

  backdrop-filter: blur(2px);

  animation: _overlayIn_2tic9_1 0.2s ease-out;
}

@keyframes _overlayIn_2tic9_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================================================
   HEADER
========================================================= */

._header_2tic9_213 {
  flex: 0 0 auto;

  background: #ffffff;

  border-bottom: 1px solid var(--border-light);
}

._headerTop_2tic9_229 {
  min-height: 120px;

  padding: 20px 18px 10px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 14px;
}

._productIdentity_2tic9_257 {
  min-width: 0;

  display: flex;

  align-items: flex-start;

  gap: 14px;
}

._productImageBox_2tic9_277 {
  width: 88px;
  height: 88px;

  flex: 0 0 88px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  border: 1px solid #e7e8ed;

  background: #f6f7f9;
}

._productImage_2tic9_277 {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;
}

._imagePlaceholder_2tic9_337 {
  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #a0a3ad;

  background: #f5f6f8;
}

._imageSkeleton_2tic9_367 {
  width: 100%;
  height: 100%;

  background: linear-gradient(90deg, #f0f1f4 25%, #fafafa 50%, #f0f1f4 75%);

  background-size: 200% 100%;

  animation: _skeletonLoading_2tic9_1 1.3s infinite;
}

._productIdentityContent_2tic9_389 {
  min-width: 0;

  padding-top: 3px;
}

._productTitle_2tic9_401 {
  margin: 0;

  color: #171920;

  font-size: 21px;

  line-height: 26px;

  font-weight: 700;

  letter-spacing: -0.45px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

._productMeta_2tic9_441 {
  margin-top: 5px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  color: #8a8d97;

  font-size: 11px;

  line-height: 15px;
}

._productMeta_2tic9_441 svg {
  vertical-align: -1px;

  margin-right: 2px;

  color: #8c8f99;
}

._metaDot_2tic9_493 {
  color: #b5b7bf;
}

._badgeRow_2tic9_501 {
  margin-top: 9px;

  display: flex;

  align-items: center;

  gap: 7px;
}

._typeBadge_2tic9_521,
._activeBadge_2tic9_523,
._inactiveBadge_2tic9_525 {
  min-height: 22px;

  padding: 3px 9px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 999px;

  font-size: 10px;

  line-height: 14px;

  font-weight: 650;
}

._typeBadge_2tic9_521 {
  background: var(--primary-soft);

  color: var(--primary);
}

._activeBadge_2tic9_523 {
  background: var(--green-soft);

  color: var(--green);
}

._inactiveBadge_2tic9_525 {
  background: var(--red-soft);

  color: var(--red);
}

/* =========================================================
   CLOSE
========================================================= */

._closeButton_2tic9_609 {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;

  color: #444751;

  cursor: pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

._closeButton_2tic9_609:hover {
  background: #f7f7fa;

  border-color: #d3d5dd;

  color: #171920;
}

/* =========================================================
   ACTION ROW
========================================================= */

._actionRow_2tic9_689 {
  padding: 0 18px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;
}

._actionLeft_2tic9_713,
._actionRight_2tic9_715 {
  display: flex;

  align-items: center;

  gap: 8px;
}

._secondaryAction_2tic9_731,
._fullViewButton_2tic9_733,
._moreButton_2tic9_735 {
  height: 38px;

  border-radius: 8px;

  font-family: inherit;

  font-size: 11px;

  font-weight: 600;

  transition: 0.18s ease;
}

._secondaryAction_2tic9_731 {
  padding: 0 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border: 1px solid var(--border);

  background: #fff;

  color: #292c35;

  cursor: pointer;
}

._secondaryAction_2tic9_731:hover {
  border-color: #cfd1da;

  background: #fafafd;
}

._secondaryAction_2tic9_731:disabled {
  opacity: 0.55;

  cursor: not-allowed;
}

._fullViewButton_2tic9_733 {
  padding: 0 16px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border: 1px solid #7c70ef;

  background: #fff;

  color: var(--primary);

  text-decoration: none;
}

._fullViewButton_2tic9_733:hover {
  background: var(--primary-soft);

  border-color: var(--primary);
}

._moreWrapper_2tic9_879 {
  position: relative;
}

._moreButton_2tic9_735 {
  width: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--border);

  background: #fff;

  color: #444751;

  cursor: pointer;
}

._moreButton_2tic9_735:hover {
  background: #f8f8fb;

  border-color: #d0d2da;
}

._moreMenu_2tic9_935 {
  position: absolute;

  top: calc(100% + 6px);

  right: 0;

  z-index: 20;

  min-width: 170px;

  padding: 5px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;

  box-shadow: 0 12px 30px rgba(25, 28, 40, 0.13);
}

._moreMenu_2tic9_935 button {
  width: 100%;

  height: 34px;

  padding: 0 9px;

  display: flex;

  align-items: center;

  gap: 8px;

  border: 0;

  border-radius: 6px;

  background: transparent;

  color: #454852;

  font-family: inherit;

  font-size: 10px;

  text-align: left;

  cursor: pointer;
}

._moreMenu_2tic9_935 button:hover {
  background: #f7f7fb;

  color: var(--primary);
}

._moreMenu_2tic9_935 svg {
  width: 13px;
  height: 13px;
}

/* =========================================================
   SUMMARY
========================================================= */

._summaryBar_2tic9_1069 {
  margin: 0 18px 12px;

  min-height: 72px;

  display: grid;

  grid-template-columns: 1fr 1px 1fr 1px 1fr;

  align-items: center;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;
}

._summaryItem_2tic9_1105 {
  min-width: 0;

  height: 100%;

  padding: 10px 18px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 4px;
}

._summaryLabel_2tic9_1137 {
  color: #6f727e;

  font-size: 10px;

  line-height: 13px;
}

._summaryPrice_2tic9_1153 {
  color: var(--primary);

  font-size: 18px;

  line-height: 22px;

  font-weight: 700;

  letter-spacing: -0.2px;
}

._summaryValue_2tic9_1177 {
  color: #242730;

  font-size: 18px;

  line-height: 22px;

  font-weight: 650;
}

._summaryDivider_2tic9_1197 {
  width: 1px;
  height: 40px;

  background: var(--border);
}

/* =========================================================
   TABS
========================================================= */

._tabs_2tic9_1219 {
  height: 42px;

  margin: 0 18px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  border-bottom: 1px solid var(--border);
}

._tab_2tic9_1219,
._tabActive_2tic9_1245 {
  position: relative;

  height: 42px;

  border: 0;

  background: transparent;

  font-family: inherit;

  font-size: 11px;

  font-weight: 600;

  color: #555862;

  cursor: pointer;

  transition: 0.18s ease;
}

._tab_2tic9_1219:hover {
  color: var(--primary);

  background: #fbfaff;
}

._tabActive_2tic9_1245 {
  color: var(--primary);

  background: linear-gradient(
    to bottom,
    rgba(85, 70, 232, 0.07),
    rgba(85, 70, 232, 0)
  );
}

._tabActive_2tic9_1245::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -1px;

  height: 2px;

  background: var(--primary);

  border-radius: 2px 2px 0 0;
}

._tabCount_2tic9_1355 {
  min-width: 20px;

  margin-left: 5px;

  padding: 2px 6px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 999px;

  background: #f0effa;

  color: #6661a5;

  font-size: 8px;

  font-weight: 650;
}

/* =========================================================
   BODY
========================================================= */

._body_2tic9_1411 {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding: 9px 18px 80px;

  scrollbar-width: thin;

  scrollbar-color: #d8dae1 transparent;
}

._body_2tic9_1411::-webkit-scrollbar {
  width: 5px;
}

._body_2tic9_1411::-webkit-scrollbar-track {
  background: transparent;
}

._body_2tic9_1411::-webkit-scrollbar-thumb {
  background: #d8dae1;

  border-radius: 10px;
}

/* =========================================================
   OVERVIEW
========================================================= */

._overview_2tic9_1475 {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

/* =========================================================
   CARD
========================================================= */

._card_2tic9_1499 {
  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;
}

._cardHeader_2tic9_1519 {
  min-height: 39px;

  padding: 0 11px;

  display: flex;

  align-items: center;

  border-bottom: 1px solid var(--border-light);
}

._cardTitle_2tic9_1543 {
  display: flex;

  align-items: center;

  gap: 7px;
}

._cardTitle_2tic9_1543 h3 {
  margin: 0;

  color: #242730;

  font-size: 11px;

  line-height: 15px;

  font-weight: 700;
}

._cardIcon_2tic9_1583 {
  width: 22px;
  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  font-size: 11px;
}

._icon_purple_2tic9_1613 {
  background: var(--primary-soft);

  color: var(--primary);
}

._icon_green_2tic9_1625 {
  background: var(--green-soft);

  color: var(--green);
}

._icon_orange_2tic9_1637 {
  background: var(--orange-soft);

  color: var(--orange);
}

._icon_blue_2tic9_1649 {
  background: var(--blue-soft);

  color: var(--blue);
}

._icon_gray_2tic9_1661 {
  background: #f0f1f4;

  color: #666a75;
}

._cardBody_2tic9_1673 {
  padding: 10px;
}

/* =========================================================
   DETAIL GRID
========================================================= */

._detailGrid_2tic9_1689 {
  display: grid;

  grid-template-columns: 1fr 1fr;

  column-gap: 24px;

  row-gap: 9px;
}

._detailField_2tic9_1709 {
  min-width: 0;

  display: grid;

  grid-template-columns: minmax(85px, 1fr) minmax(90px, 1.2fr);

  align-items: center;

  gap: 8px;
}

._detailLabel_2tic9_1733 {
  color: #727581;

  font-size: 9.5px;

  line-height: 13px;
}

._detailValue_2tic9_1749 {
  min-width: 0;

  color: #252832;

  font-size: 10px;

  line-height: 14px;

  font-weight: 550;

  overflow-wrap: anywhere;
}

._detailMuted_2tic9_1777 {
  color: #a2a4ad;

  font-weight: 450;
}

._primaryValue_2tic9_1789 {
  color: #2825d4;

  font-weight: 650;
}

._linkValue_2tic9_1801 {
  color: #3e35df;

  font-weight: 600;
}

._inlineBadgePurple_2tic9_1813,
._inlineBadgeGreen_2tic9_1815,
._inlineBadgeRed_2tic9_1817 {
  width: fit-content;

  min-height: 21px;

  padding: 3px 8px;

  display: inline-flex;

  align-items: center;

  border-radius: 6px;

  font-size: 9px;

  line-height: 13px;

  font-weight: 650;
}

._inlineBadgePurple_2tic9_1813 {
  background: var(--primary-soft);

  color: var(--primary);
}

._inlineBadgeGreen_2tic9_1815 {
  background: var(--green-soft);

  color: var(--green);
}

._inlineBadgeRed_2tic9_1817 {
  background: var(--red-soft);

  color: var(--red);
}

._codeButton_2tic9_1893 {
  padding: 0;

  border: 0;

  background: transparent;

  color: #383c46;

  font-family: inherit;

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

  text-align: left;
}

._codeButton_2tic9_1893:hover {
  color: var(--primary);

  text-decoration: underline;
}

._marginBadge_2tic9_1945 {
  width: fit-content;

  min-height: 21px;

  padding: 3px 7px;

  display: inline-flex;

  align-items: center;

  border-radius: 6px;

  background: var(--green-soft);

  color: var(--green);

  font-size: 9px;

  font-weight: 650;
}

._futureValue_2tic9_1989 {
  width: fit-content;

  color: #9a9ca6;

  font-size: 8px;

  font-weight: 450;

  font-style: italic;
}

/* =========================================================
   STOCK
========================================================= */

._stockProgress_2tic9_2021 {
  margin-top: 11px;
}

._stockProgressTrack_2tic9_2029 {
  width: 100%;

  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background: #e6e8ef;
}

._stockProgressFill_2tic9_2053 {
  height: 100%;

  border-radius: inherit;

  transition: width 0.3s ease;
}

._stockHealthy_2tic9_2069 {
  background: #08a366;
}

._stockLow_2tic9_2077 {
  background: #d94b5b;
}

._stockMessage_2tic9_2085,
._stockMessageDanger_2tic9_2087 {
  width: fit-content;

  margin-top: 7px;

  padding: 4px 7px;

  display: flex;

  align-items: center;

  gap: 5px;

  border-radius: 6px;

  font-size: 8.5px;

  line-height: 12px;

  font-weight: 600;
}

._stockMessage_2tic9_2085 {
  background: var(--green-soft);

  color: var(--green);
}

._stockMessageDanger_2tic9_2087 {
  background: var(--red-soft);

  color: var(--red);
}

/* =========================================================
   IMAGE
========================================================= */

._imagePreview_2tic9_2163 {
  width: 100%;

  min-height: 150px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border: 1px solid var(--border-light);

  border-radius: 8px;

  background: #f8f9fb;
}

._imagePreview_2tic9_2163 img {
  width: 100%;

  max-height: 210px;

  object-fit: contain;

  display: block;
}

/* =========================================================
   URL
========================================================= */

._productUrl_2tic9_2231 {
  min-height: 36px;

  padding: 8px 10px;

  display: flex;

  align-items: center;

  gap: 8px;

  border: 1px solid #e4e5eb;

  border-radius: 7px;

  background: #fafafe;

  color: var(--primary);

  font-size: 9px;

  line-height: 13px;

  text-decoration: none;
}

._productUrl_2tic9_2231:hover {
  border-color: #c9c5f4;

  background: var(--primary-soft);
}

._productUrl_2tic9_2231 span {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

._urlExternal_2tic9_2315 {
  margin-left: auto;

  flex: 0 0 auto;
}

/* =========================================================
   DESCRIPTION
========================================================= */

._description_2tic9_2335 {
  color: #42454f;

  font-size: 10px;

  line-height: 16px;
}

._description_2tic9_2335 p {
  margin: 0 0 7px;
}

._description_2tic9_2335 p:last-child {
  margin-bottom: 0;
}

._description_2tic9_2335 ul,
._description_2tic9_2335 ol {
  margin: 6px 0;

  padding-left: 18px;
}

._description_2tic9_2335 strong {
  color: #292c35;
}

/* =========================================================
   QUICK ACTIONS
========================================================= */

._quickActions_2tic9_2397 {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;
}

._quickActionButton_2tic9_2413 {
  min-height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border-radius: 7px;

  font-family: inherit;

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.18s ease;
}

._quickActionPurple_2tic9_2461 {
  border: 1px solid #c9c5f7;

  background: var(--primary-soft);

  color: var(--primary);
}

._quickActionPurple_2tic9_2461:hover {
  border-color: var(--primary);

  background: #e9e6ff;
}

._quickActionGreen_2tic9_2489 {
  border: 1px solid #bde8d4;

  background: var(--green-soft);

  color: var(--green);
}

._quickActionGreen_2tic9_2489:hover {
  border-color: var(--green);

  background: #dcf3e8;
}

/* =========================================================
   TABS PAGE
========================================================= */

._tabPage_2tic9_2525 {
  min-height: 100%;

  display: flex;

  flex-direction: column;

  gap: 12px;
}

._tabToolbar_2tic9_2545 {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto auto;

  gap: 8px;
}

._searchBox_2tic9_2561 {
  height: 34px;

  min-width: 0;

  padding: 0 10px;

  display: flex;

  align-items: center;

  gap: 7px;

  border: 1px solid #dfe1e7;

  border-radius: 7px;

  background: #fff;

  color: #8b8e98;
}

._searchBox_2tic9_2561:focus-within {
  border-color: var(--primary);

  box-shadow: 0 0 0 2px rgba(85, 70, 232, 0.07);
}

._searchBox_2tic9_2561 input {
  min-width: 0;

  width: 100%;

  height: 100%;

  border: 0;

  outline: 0;

  background: transparent;

  font-family: inherit;

  font-size: 9.5px;

  color: #292c35;
}

._searchBox_2tic9_2561 input::placeholder {
  color: #a1a4ae;
}

._filterButton_2tic9_2665,
._calendarButton_2tic9_2667 {
  height: 34px;

  padding: 0 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  border: 1px solid #dfe1e7;

  border-radius: 7px;

  background: #fff;

  color: #555862;

  font-family: inherit;

  font-size: 9px;

  cursor: pointer;
}

._filterButton_2tic9_2665:hover,
._calendarButton_2tic9_2667:hover {
  background: #f8f8fb;

  border-color: #cfd1da;
}

._calendarButton_2tic9_2667 {
  width: 36px;

  padding: 0;
}

/* =========================================================
   TRANSACTION LIST
========================================================= */

._transactionList_2tic9_2757 {
  display: flex;

  flex-direction: column;

  border-top: 1px solid var(--border-light);
}

._transactionItem_2tic9_2773 {
  min-height: 64px;

  padding: 10px 4px;

  display: flex;

  align-items: center;

  gap: 10px;

  border-bottom: 1px solid var(--border-light);
}

._transactionIcon_2tic9_2801 {
  width: 31px;
  height: 31px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--primary-soft);

  color: var(--primary);

  font-size: 12px;
}

._transactionContent_2tic9_2843 {
  min-width: 0;

  flex: 1;
}

._transactionContent_2tic9_2843 strong {
  display: block;

  color: #2b2e37;

  font-size: 10px;

  line-height: 14px;
}

._transactionContent_2tic9_2843 span {
  display: block;

  margin-top: 2px;

  color: #898c97;

  font-size: 8.5px;

  line-height: 12px;
}

._transactionAmount_2tic9_2899 {
  color: #292c35;

  font-size: 10px;

  font-weight: 650;
}

/* =========================================================
   HISTORY
========================================================= */

._historyTimeline_2tic9_2923 {
  padding: 2px 0 10px;
}

._historyItem_2tic9_2931 {
  display: grid;

  grid-template-columns: 38px minmax(0, 1fr);

  gap: 10px;
}

._historyRail_2tic9_2947 {
  position: relative;

  display: flex;

  justify-content: center;
}

._historyIcon_2tic9_2963 {
  width: 32px;
  height: 32px;

  position: relative;

  z-index: 2;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border: 1px solid #dfe1e8;

  font-size: 12px;
}

._historyCreated_2tic9_3009 {
  background: var(--primary-soft);

  border-color: #d8d4ff;

  color: var(--primary);
}

._historyUpdated_2tic9_3025 {
  background: #eef0ff;

  border-color: #d7d9ff;

  color: #5148df;
}

._historyDefault_2tic9_3041 {
  background: var(--orange-soft);

  border-color: #f2dfad;

  color: var(--orange);
}

._historyLine_2tic9_3057 {
  position: absolute;

  top: 32px;
  bottom: 0;

  width: 1px;

  background: #e1e3e9;
}

._historyContent_2tic9_3079 {
  min-width: 0;

  padding: 3px 0 22px;

  border-bottom: 1px solid var(--border-light);
}

._historyItem_2tic9_2931:last-child ._historyContent_2tic9_3079 {
  border-bottom: 0;
}

._historyTop_2tic9_3103 {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 10px;
}

._historyTop_2tic9_3103 strong {
  color: #252832;

  font-size: 10.5px;

  line-height: 14px;

  font-weight: 700;
}

._historyUser_2tic9_3143 {
  color: #767985;

  font-size: 9px;
}

._historyTop_2tic9_3103 time {
  flex: 0 0 auto;

  color: #999ca7;

  font-size: 8px;

  line-height: 13px;
}

._historyContent_2tic9_3079 p {
  margin: 3px 0 0;

  color: #70737e;

  font-size: 8.8px;

  line-height: 13px;
}

._historyDate_2tic9_3195 {
  display: inline-block;

  margin-top: 5px;

  color: #9a9da7;

  font-size: 8px;
}

/* =========================================================
   EMPTY STATE
========================================================= */

._emptyState_2tic9_3223 {
  min-height: 260px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 30px;

  text-align: center;
}

._emptyIcon_2tic9_3255 {
  width: 48px;
  height: 48px;

  margin-bottom: 11px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  background: var(--primary-soft);

  color: var(--primary);
}

._emptyState_2tic9_3223 strong {
  color: #333640;

  font-size: 11px;
}

._emptyState_2tic9_3223 p {
  max-width: 260px;

  margin: 5px 0 0;

  color: #999ca7;

  font-size: 9px;

  line-height: 14px;
}

/* =========================================================
   FOOTER
========================================================= */

._footer_2tic9_3337 {
  min-height: 55px;

  flex: 0 0 auto;

  padding: 0 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  border-top: 1px solid var(--border);

  background: rgba(255, 255, 255, 0.97);

  box-shadow: 0 -4px 16px rgba(20, 24, 40, 0.04);
}

._footerUpdated_2tic9_3381 {
  color: #999ca6;

  font-size: 9px;

  line-height: 13px;
}

._footerUpdated_2tic9_3381 strong {
  color: #777a85;

  font-weight: 600;
}

._footerLink_2tic9_3409 {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  color: var(--primary);

  font-size: 10px;

  font-weight: 650;

  text-decoration: none;

  white-space: nowrap;
}

._footerLink_2tic9_3409:hover {
  color: var(--primary-dark);
}

/* =========================================================
   SKELETON
========================================================= */

._skeletonPage_2tic9_3461 {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

._skeletonCard_2tic9_3477 {
  padding: 12px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;
}

._skeletonGrid_2tic9_3497 {
  margin-top: 13px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 15px;
}

._skeleton_2tic9_3461 {
  border-radius: 5px;

  background: linear-gradient(90deg, #f0f1f4 25%, #fafafa 50%, #f0f1f4 75%);

  background-size: 200% 100%;

  animation: _skeletonLoading_2tic9_1 1.3s infinite;
}

@keyframes _skeletonLoading_2tic9_1 {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* =========================================================
   RESPONSIVE 700
========================================================= */

@media (max-width: 700px) {
  ._drawer_2tic9_9 {
    width: 100vw;
  }

  ._headerTop_2tic9_229 {
    padding: 15px 14px 9px;
  }

  ._actionRow_2tic9_689 {
    padding: 0 14px 11px;
  }

  ._summaryBar_2tic9_1069 {
    margin-left: 14px;
    margin-right: 14px;
  }

  ._tabs_2tic9_1219 {
    margin-left: 14px;
    margin-right: 14px;
  }

  ._body_2tic9_1411 {
    padding-left: 14px;
    padding-right: 14px;
  }

  ._footer_2tic9_3337 {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =========================================================
   RESPONSIVE 560
========================================================= */

@media (max-width: 560px) {
  ._productImageBox_2tic9_277 {
    width: 68px;
    height: 68px;

    flex-basis: 68px;
  }

  ._productTitle_2tic9_401 {
    font-size: 18px;

    line-height: 22px;
  }

  ._productMeta_2tic9_441 {
    font-size: 9px;
  }

  ._secondaryAction_2tic9_731 {
    padding: 0 10px;

    font-size: 9px;
  }

  ._fullViewButton_2tic9_733 {
    padding: 0 10px;

    font-size: 9px;
  }

  ._summaryBar_2tic9_1069 {
    min-height: 65px;
  }

  ._summaryPrice_2tic9_1153,
  ._summaryValue_2tic9_1177 {
    font-size: 16px;
  }

  ._detailGrid_2tic9_1689 {
    grid-template-columns: 1fr;
  }

  ._detailField_2tic9_1709 {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  ._tabToolbar_2tic9_2545 {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  ._tabToolbar_2tic9_2545 ._calendarButton_2tic9_2667 {
    display: none;
  }
}

/* =========================================================
   RESPONSIVE 420
========================================================= */

@media (max-width: 420px) {
  ._headerTop_2tic9_229 {
    min-height: 105px;
  }

  ._productImageBox_2tic9_277 {
    width: 58px;
    height: 58px;

    flex-basis: 58px;
  }

  ._productIdentity_2tic9_257 {
    gap: 9px;
  }

  ._productTitle_2tic9_401 {
    max-width: 205px;

    font-size: 16px;

    line-height: 20px;
  }

  ._badgeRow_2tic9_501 {
    margin-top: 6px;
  }

  ._typeBadge_2tic9_521,
  ._activeBadge_2tic9_523,
  ._inactiveBadge_2tic9_525 {
    min-height: 19px;

    padding: 2px 7px;

    font-size: 8px;
  }

  ._closeButton_2tic9_609 {
    width: 32px;
    height: 32px;
  }

  ._actionRow_2tic9_689 {
    align-items: stretch;
  }

  ._actionLeft_2tic9_713 {
    min-width: 0;
  }

  ._secondaryAction_2tic9_731 {
    padding: 0 8px;

    white-space: nowrap;
  }

  ._secondaryAction_2tic9_731:nth-child(2) {
    max-width: 105px;

    overflow: hidden;

    text-overflow: ellipsis;
  }

  ._fullViewButton_2tic9_733 {
    width: 38px;

    padding: 0;

    font-size: 0;
  }

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

  ._summaryItem_2tic9_1105 {
    padding: 8px 10px;
  }

  ._summaryLabel_2tic9_1137 {
    font-size: 8px;
  }

  ._summaryPrice_2tic9_1153,
  ._summaryValue_2tic9_1177 {
    font-size: 14px;
  }

  ._tabs_2tic9_1219 {
    margin-left: 10px;
    margin-right: 10px;
  }

  ._body_2tic9_1411 {
    padding-left: 10px;
    padding-right: 10px;
  }

  ._footer_2tic9_3337 {
    padding-left: 10px;
    padding-right: 10px;
  }

  ._footerUpdated_2tic9_3381 {
    font-size: 8px;
  }

  ._footerLink_2tic9_3409 {
    font-size: 9px;
  }

  ._quickActions_2tic9_2397 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  ._drawer_2tic9_9,
  ._overlay_2tic9_157,
  ._skeleton_2tic9_3461,
  ._imageSkeleton_2tic9_367 {
    animation: none;
  }

  ._drawer_2tic9_9 *,
  ._drawer_2tic9_9 *::before,
  ._drawer_2tic9_9 *::after {
    transition: none !important;
  }
}

/* =========================================================
   DRAWER OVERLAY
========================================================= */

._overlay_2tic9_157 {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background: rgba(20, 22, 35, 0.28);

  /* Blur entire application behind drawer */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 9998;

  cursor: default;

  animation: _overlayFadeIn_2tic9_1 0.18s ease-out;
}

/* =========================================================
   DRAWER
========================================================= */

._drawer_2tic9_9 {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  width: min(680px, 100vw);

  background: #ffffff;

  z-index: 9999;

  display: flex;
  flex-direction: column;

  box-shadow: -12px 0 35px rgba(20, 24, 40, 0.14);

  animation: _drawerSlideIn_2tic9_1 0.22s ease-out;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes _overlayFadeIn_2tic9_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes _drawerSlideIn_2tic9_1 {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================================
   PAGINATION
========================================================= */

._pagination_2tic9_4197 {
  width: 100%;

  min-height: 44px;

  margin-top: auto;

  padding: 10px 2px 2px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  color: #777985;

  font-size: 9px;

  line-height: 14px;
}

/* LEFT - Rows */
._pagination_2tic9_4197 > div:first-child {
  display: flex;

  align-items: center;

  gap: 7px;
}

._pagination_2tic9_4197 > div:first-child span {
  white-space: nowrap;
}

/* Rows select */
._pagination_2tic9_4197 select {
  width: 48px;

  height: 28px;

  padding: 0 5px;

  border: 1px solid #d9dbe3;

  border-radius: 5px;

  outline: none;

  background: #ffffff;

  color: #3f424c;

  font-family: inherit;

  font-size: 10px;

  cursor: pointer;
}

._pagination_2tic9_4197 select:hover {
  border-color: #c9cbd5;
}

._pagination_2tic9_4197 select:focus {
  border-color: var(--primary);

  box-shadow: 0 0 0 2px rgba(85, 70, 232, 0.08);
}

._pagination_2tic9_4197 select:disabled {
  opacity: 0.5;

  cursor: not-allowed;
}

/* RIGHT SIDE */
._pagination_2tic9_4197 > div:last-child {
  display: flex;

  align-items: center;

  gap: 6px;
}

/* 1–10 of 20 */
._pagination_2tic9_4197 > div:last-child > span:first-child {
  min-width: 62px;

  text-align: right;

  white-space: nowrap;

  color: #858793;
}

/* Page number */
._pagination_2tic9_4197 > div:last-child > span:nth-of-type(2) {
  min-width: 38px;

  text-align: center;

  color: #777985;

  font-size: 9px;
}

/* Previous / Next buttons */
._pagination_2tic9_4197 button {
  width: 27px;

  height: 27px;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #dfe1e7;

  border-radius: 5px;

  background: #ffffff;

  color: #555862;

  font-family: inherit;

  font-size: 16px;

  line-height: 1;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

._pagination_2tic9_4197 button:hover:not(:disabled) {
  background: var(--primary-soft);

  border-color: #c9c5f4;

  color: var(--primary);
}

._pagination_2tic9_4197 button:disabled {
  opacity: 0.35;

  background: #fafafd;

  color: #9b9da6;

  cursor: not-allowed;
}
._page_r5rug_1 {
  --primary: #5546e8;
  --primary-dark: #4535d2;
  --primary-soft: #f0eeff;

  --text: #171820;
  --muted: #737785;

  --border: #e3e5ed;
  --border-light: #eef0f5;

  --background: #f7f8fc;
  --white: #ffffff;

  --success: #08a366;
  --success-soft: #eaf9f0;

  --warning: #f5a623;
  --warning-soft: #fff6df;

  --danger: #e94b5b;
  --danger-soft: #fff0f2;

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(85, 70, 232, 0.065),
      transparent 28%
    ),
    var(--background);

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 13px;

  padding-bottom: 30px;

  box-sizing: border-box;
}

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

/* =========================================================
   HEADER
========================================================= */

._header_r5rug_119 {
  padding: 18px 23px 11px;
}

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

  gap: 9px;

  min-width: 0;
}

/* =========================================================
   BACK BUTTON
========================================================= */

._backRow_r5rug_153 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

._backButton_r5rug_165 {
  width: 30px;
  height: 30px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);

  border-radius: 7px;

  background: #ffffff;

  color: #454853;

  text-decoration: none;

  cursor: pointer;

  transition: 0.2s ease;
}

._backButton_r5rug_165:hover {
  color: var(--primary);

  border-color: var(--primary);

  background: var(--primary-soft);

  transform: translateX(-2px);
}

._breadcrumb_r5rug_235 {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 12px;

  font-size: 14px;
}

._breadcrumb_r5rug_235 a {
  color: var(--primary);

  text-decoration: none;

  font-weight: 500;
}

._breadcrumb_r5rug_235 span {
  color: #8d909b;
}

._breadcrumb_r5rug_235 span:last-child {
  color: #20222a;
}

._heroRow_r5rug_287 {
  min-height: 124px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

._heroProduct_r5rug_311 {
  display: flex;

  align-items: center;

  gap: 16px;

  min-width: 0;
}

._heroImage_r5rug_331 {
  width: 160px;
  height: 122px;

  flex: 0 0 160px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: #fff;

  color: var(--primary);
}

._heroImage_r5rug_331 img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 10px;
}

._heroInfo_r5rug_395 h1 {
  margin: 0 0 8px;

  font-size: 28px;

  line-height: 34px;

  letter-spacing: -0.8px;

  font-weight: 700;
}

._heroBadges_r5rug_419 {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 13px;
}

._goodsBadge_r5rug_439,
._activeBadge_r5rug_441,
._inactiveBadge_r5rug_443,
._smallActiveBadge_r5rug_445,
._smallInactiveBadge_r5rug_447 {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  white-space: nowrap;

  border-radius: 20px;

  font-weight: 600;
}

._goodsBadge_r5rug_439 {
  min-height: 30px;

  padding: 0 14px;

  color: var(--primary);

  background: var(--primary-soft);
}

._activeBadge_r5rug_441 {
  min-height: 30px;

  padding: 0 14px;

  color: var(--success);

  background: var(--success-soft);
}

._inactiveBadge_r5rug_443 {
  min-height: 30px;

  padding: 0 14px;

  color: var(--danger);

  background: var(--danger-soft);
}

._skuText_r5rug_535 {
  font-size: 15px;

  color: #242630;
}

/* =========================================================
   HERO ACTIONS
========================================================= */

._heroActions_r5rug_555 {
  display: flex;

  align-items: center;

  gap: 12px;

  align-self: flex-start;

  margin-top: 0;
}

._stockButton_r5rug_579,
._editButton_r5rug_581,
._moreButton_r5rug_583 {
  height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border-radius: 8px;

  font-family: inherit;

  font-size: 12px;

  font-weight: 500;

  cursor: pointer;

  transition: 0.18s ease;
}

._stockButton_r5rug_579 {
  padding: 0 20px;

  border: 1px solid #dfe1e8;

  background: #fff;

  color: #292c35;
}

._stockButton_r5rug_579:hover {
  border-color: #cfd2dc;

  background: #fafafa;
}

._editButton_r5rug_581 {
  min-width: 105px;

  font-size: 12px !important;

  padding: 0 20px;

  border: 1px solid var(--primary);

  background: var(--primary);

  color: #fff;

  box-shadow: 0 5px 12px rgba(85, 70, 232, 0.16);
}

._editButton_r5rug_581:hover {
  background: var(--primary-dark);

  transform: translateY(-1px);
}

._moreButton_r5rug_583 {
  width: 60px;

  border: 1px solid #dfe1e8;

  background: #fff;

  color: #3f424b;
}

._moreButton_r5rug_583:hover {
  border-color: #cfd2dc;

  background: #fafafa;
}

._menuWrapper_r5rug_739 {
  position: relative;
}

._actionMenu_r5rug_747 {
  width: 190px;

  position: absolute;

  top: 48px;

  right: 0;

  z-index: 100;

  padding: 7px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;

  box-shadow: 0 12px 30px rgba(20, 24, 40, 0.14);
}

._actionMenu_r5rug_747 button {
  width: 100%;

  min-height: 38px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 0 10px;

  border: 0;

  border-radius: 6px;

  background: transparent;

  color: #383b44;

  font-family: inherit;

  font-size: 13px;

  text-align: left;

  cursor: pointer;
}

._actionMenu_r5rug_747 button:hover {
  background: #f7f7fa;
}

._actionMenu_r5rug_747 button svg {
  width: 15px;
  height: 15px;
}

._menuDivider_r5rug_869 {
  height: 1px;

  margin: 5px 0;

  background: var(--border-light);
}

._deleteMenuItem_r5rug_885 {
  color: black;
}

._actionMenu_r5rug_747 ._deleteMenuItem_r5rug_885 {
  color: var(--danger);
}

._actionMenu_r5rug_747 ._deleteMenuItem_r5rug_885:hover {
  background: var(--danger-soft);
}

/* =========================================================
   SUMMARY CARDS
========================================================= */

._summaryGrid_r5rug_917 {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;

  margin-top: 14px;
}

._summaryCard_r5rug_937 {
  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 13px 16px;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;

  box-shadow: 0 2px 8px rgba(20, 24, 40, 0.025);
}

._summaryCard_r5rug_937 > div:first-child {
  display: flex;

  flex-direction: column;

  gap: 5px;
}

._summaryCard_r5rug_937 span {
  font-size: 12px;

  color: #6f727e;
}

._summaryCard_r5rug_937 strong {
  font-size: 19px;

  line-height: 22px;

  font-weight: 650;

  color: #191b22;
}

._summaryIcon_r5rug_1029 {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 9px;

  font-size: 18px;
}

._iconPurple_r5rug_1057 {
  color: var(--primary);

  background: var(--primary-soft);
}

._iconGreen_r5rug_1069 {
  color: var(--success);

  background: var(--success-soft);
}

._iconOrange_r5rug_1081 {
  color: #ee9c00;

  background: #fff5dc;
}

._iconRed_r5rug_1093 {
  color: var(--danger);

  background: var(--danger-soft);
}

/* =========================================================
   TABS
========================================================= */

._tabsCard_r5rug_1113 {
  margin: 0 23px;

  border: 1px solid var(--border);

  border-bottom: 0;

  border-radius: 9px 9px 0 0;

  background: #fff;
}

._tabs_r5rug_1113 {
  height: 47px;

  display: flex;

  align-items: stretch;

  gap: 0;
}

._tabs_r5rug_1113 button {
  min-width: 112px;

  position: relative;

  padding: 0 23px;

  border: 0;

  background: transparent;

  color: #626671;

  font-family: inherit;

  font-size: 14px;

  cursor: pointer;
}

._tabs_r5rug_1113 button:hover {
  color: var(--primary);
}

._tabs_r5rug_1113 button._tabActive_r5rug_1205 {
  color: var(--primary);

  font-weight: 600;
}

._tabs_r5rug_1113 button._tabActive_r5rug_1205::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -1px;

  height: 2px;

  background: var(--primary);
}

._tabCount_r5rug_1245 {
  min-width: 23px;
  height: 23px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-left: 7px;

  border-radius: 50%;

  background: var(--primary-soft);

  color: var(--primary);

  font-size: 10px;

  font-weight: 700;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

._mainLayout_r5rug_1297 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    435px;

  gap: 12px;

  margin: 0 23px;

  padding-bottom: 30px;
}

._mainContent_r5rug_1325 {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 12px;

  border: 1px solid var(--border);

  border-radius: 0 0 9px 9px;

  background: #fff;
}

/* .sidebar {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 7px;
} */

/* =========================================================
   CARDS
========================================================= */

._card_r5rug_1389 {
  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 9px;

  background: #fff;
}

._cardHeader_r5rug_1409 {
  min-height: 54px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 14px;

  border-bottom: 1px solid var(--border-light);
}

._cardTitle_r5rug_1437 {
  display: flex;

  align-items: center;

  gap: 9px;
}

._cardTitle_r5rug_1437 h2 {
  margin: 0;

  font-size: 14px;

  font-weight: 650;

  color: #25272f;
}

._cardIcon_r5rug_1473 {
  width: 28px;
  height: 28px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-size: 15px;
}

._purpleIcon_r5rug_1501 {
  color: var(--primary);

  background: var(--primary-soft);
}

._greenIcon_r5rug_1513 {
  color: var(--success);

  background: var(--success-soft);
}

._orangeIcon_r5rug_1525 {
  color: #ee9c00;

  background: #fff5dc;
}

._blueIcon_r5rug_1537 {
  color: #4378df;

  background: #eef4ff;
}

._cardBody_r5rug_1549 {
  padding: 14px;
}

/* =========================================================
   BASIC INFORMATION
========================================================= */

._basicDetails_r5rug_1565 {
  display: grid;

  grid-template-columns: 1fr 1fr;
}

._detailColumn_r5rug_1577 {
  min-width: 0;

  padding-right: 22px;
}

._detailColumn_r5rug_1577 + ._detailColumn_r5rug_1577 {
  padding-left: 22px;

  padding-right: 0;

  border-left: 1px solid #e9ebf0;
}

._detailRow_r5rug_1605 {
  min-height: 37px;

  display: grid;

  grid-template-columns: 175px minmax(0, 1fr);

  align-items: center;

  gap: 12px;
}

._detailLabel_r5rug_1629 {
  color: #646874;

  font-size: 12px;

  line-height: 17px;
}

._detailValue_r5rug_1645 {
  min-width: 0;

  color: #252831;

  font-size: 12px;

  line-height: 17px;

  overflow-wrap: anywhere;
}

._linkValue_r5rug_1669 {
  color: var(--primary);

  font-weight: 500;
}

._smallActiveBadge_r5rug_445 {
  min-height: 25px;

  padding: 0 10px;

  background: var(--success-soft);

  color: var(--success);

  font-size: 11px;
}

._smallInactiveBadge_r5rug_447 {
  min-height: 25px;

  padding: 0 10px;

  background: var(--danger-soft);

  color: var(--danger);

  font-size: 11px;
}

/* =========================================================
   TWO CARDS
========================================================= */

._twoCards_r5rug_1737 {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}

._twoCards_r5rug_1737 ._detailRow_r5rug_1605 {
  grid-template-columns: 125px minmax(0, 1fr);
}

/* =========================================================
   INVENTORY
========================================================= */

._inventoryStats_r5rug_1769 {
  display: grid;

  grid-template-columns: repeat(5, 1fr);
}

._inventoryStat_r5rug_1769 {
  min-height: 60px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 6px;

  border-right: 1px solid #e7e9ee;
}

._inventoryStat_r5rug_1769:last-child {
  border-right: 0;
}

._inventoryStat_r5rug_1769 span {
  font-size: 11px;

  color: #646874;
}

._inventoryStat_r5rug_1769 strong {
  font-size: 15px;

  color: #20232b;
}

._inventoryYes_r5rug_1845 {
  min-height: 25px;

  padding: 0 11px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 20px;

  background: var(--success-soft);

  color: var(--success) !important;

  font-size: 11px !important;
}

._stockBar_r5rug_1885 {
  height: 8px;

  display: flex;

  overflow: hidden;

  margin-top: 14px;

  border-radius: 20px;

  background: #e7e9ee;
}

._stockAvailable_r5rug_1913 {
  min-width: 0;

  background: #0ba360;
}

._stockReserved_r5rug_1925 {
  min-width: 0;

  background: var(--primary);
}

/* =========================================================
   IMAGE VIEWER
========================================================= */

._imageViewer_r5rug_1945 {
  padding: 12px;
}

._largeImage_r5rug_1953 {
  height: 195px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border-radius: 7px;

  background: #fff;

  color: var(--primary);
}

._largeImage_r5rug_1953 img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 12px;
}

._thumbnailRow_r5rug_2005 {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 10px;
}

._thumbnail_r5rug_2005,
._thumbnailActive_r5rug_2027 {
  width: 62px;
  height: 55px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 4px;

  border-radius: 7px;

  cursor: pointer;

  background: #fff;

  color: #777b87;
}

._thumbnail_r5rug_2005 {
  border: 1px solid #dfe1e8;
}

._thumbnailActive_r5rug_2027 {
  border: 2px solid var(--primary);

  background: #faf9ff;
}

._thumbnail_r5rug_2005:hover {
  border-color: var(--primary);
}

._thumbnail_r5rug_2005 img,
._thumbnailActive_r5rug_2027 img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* =========================================================
   HEALTH
========================================================= */

._healthCard_r5rug_2123 {
  min-height: 72px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border: 1px solid #dfeee4;

  border-radius: 9px;

  background: #fff;
}

._healthIcon_r5rug_2159 {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 10px;

  background: var(--success-soft);

  color: var(--success);

  font-size: 22px;
}

._healthCard_r5rug_2123 strong {
  display: block;

  margin-bottom: 3px;

  color: var(--success);

  font-size: 13px;
}

._healthCard_r5rug_2123 span {
  color: #383c44;

  font-size: 11px;
}

/* =========================================================
   TRANSACTIONS
========================================================= */

._transactionsLayout_r5rug_2239 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    330px;

  margin: 0 23px;

  border: 1px solid var(--border);

  border-radius: 0 0 9px 9px;

  background: #fff;

  overflow: visible;
}

._transactionsMain_r5rug_2275 {
  min-width: 0;

  padding: 12px;

  border-right: 1px solid var(--border);
}

._transactionToolbar_r5rug_2291 {
  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 10px;
}

._transactionFilters_r5rug_2319 {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  overflow-x: auto;
}

._transactionFilters_r5rug_2319 button {
  height: 32px;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  flex: 0 0 auto;

  padding: 0 10px;

  border: 1px solid #e2e4ea;

  border-radius: 6px;

  background: #fff;

  color: #41444d;

  font-family: inherit;

  font-size: 11px;

  cursor: pointer;
}

._transactionFilters_r5rug_2319 button:hover {
  border-color: var(--primary);

  color: var(--primary);
}

._transactionFilters_r5rug_2319 button span {
  min-width: 19px;
  height: 19px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #f1f2f5;

  color: #6f727d;

  font-size: 9px;
}

._transactionFilters_r5rug_2319 ._filterActive_r5rug_2447 {
  border-color: #cfcaff;

  background: #f5f3ff;

  color: var(--primary);

  font-weight: 600;
}

._transactionFilters_r5rug_2319 ._filterActive_r5rug_2447 span {
  background: #e8e4ff;

  color: var(--primary);
}

._transactionActions_r5rug_2479 {
  display: flex;

  align-items: center;

  gap: 8px;

  flex: 0 0 auto;
}

._dateButton_r5rug_2499,
._newTransactionButton_r5rug_2501 {
  height: 38px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 12px;

  border-radius: 7px;

  font-family: inherit;

  font-size: 12px;

  cursor: pointer;
}

._dateButton_r5rug_2499 {
  border: 1px solid #dfe2e9;

  background: #fff;

  color: #444750;
}

._newTransactionButton_r5rug_2501 {
  border: 1px solid var(--primary);

  background: var(--primary);

  color: #fff;
}

._dateButton_r5rug_2499 svg:last-child,
._newTransactionButton_r5rug_2501 svg:last-child {
  margin-left: 5px;
}

._newTransactionWrapper_r5rug_2583 {
  position: relative;
}

._transactionMenu_r5rug_2591 {
  width: 180px;

  position: absolute;

  top: 43px;

  right: 0;

  z-index: 100;

  padding: 5px;

  border: 1px solid var(--border);

  border-radius: 8px;

  background: #fff;

  box-shadow: 0 10px 25px rgba(20, 24, 40, 0.14);
}

._transactionMenu_r5rug_2591 button {
  width: 100%;

  height: 34px;

  padding: 0 10px;

  border: 0;

  border-radius: 5px;

  background: transparent;

  color: #4b4e58;

  text-align: left;

  font-family: inherit;

  font-size: 12px;

  cursor: pointer;
}

._transactionMenu_r5rug_2591 button:hover {
  background: var(--primary-soft);

  color: var(--primary);
}

/* =========================================================
   TRANSACTION SUMMARY
========================================================= */

._transactionSummary_r5rug_2703 {
  padding: 13px;

  margin-bottom: 10px;

  border: 1px solid var(--border);

  border-radius: 8px;
}

._transactionSummary_r5rug_2703 h3 {
  margin: 0 0 12px;

  font-size: 13px;

  font-weight: 650;
}

._transactionSummaryGrid_r5rug_2739 {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
}

._transactionSummaryItem_r5rug_2751 {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;

  padding: 4px 10px;

  border-right: 1px solid #eceef2;
}

._transactionSummaryItem_r5rug_2751:last-child {
  border-right: 0;
}

._transactionSummaryIcon_r5rug_2787 {
  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 8px;

  font-size: 16px;
}

._transactionSummaryItem_r5rug_2751 > div {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;
}

._transactionSummaryItem_r5rug_2751 > div span {
  color: #737681;

  font-size: 10px;
}

._transactionSummaryItem_r5rug_2751 > div strong {
  color: #252831;

  font-size: 13px;
}

._summaryPurple_r5rug_2863 {
  color: var(--primary);

  background: var(--primary-soft);
}

._summaryGreen_r5rug_2875 {
  color: var(--success);

  background: var(--success-soft);
}

._summaryOrange_r5rug_2887 {
  color: #ed9c00;

  background: #fff5dc;
}

._summaryRed_r5rug_2899 {
  color: var(--danger);

  background: var(--danger-soft);
}

/* =========================================================
   TRANSACTION TABLE
========================================================= */

._transactionTableWrapper_r5rug_2919 {
  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 8px;

  background: #fff;
}

._transactionTable_r5rug_2919 {
  width: 100%;

  border-collapse: collapse;

  table-layout: auto;
}

._transactionTable_r5rug_2919 thead {
  background: #f3f2ff;
}

._transactionTable_r5rug_2919 th {
  height: 38px;

  padding: 0 12px;

  color: #4e5190;

  font-size: 10px;

  font-weight: 650;

  text-align: left;

  white-space: nowrap;
}

._transactionTable_r5rug_2919 td {
  height: 45px;

  padding: 0 12px;

  border-top: 1px solid #eef0f4;

  color: #343741;

  font-size: 10.5px;

  white-space: nowrap;
}

._transactionTable_r5rug_2919 tbody tr:hover {
  background: #fafafe;
}

._transactionType_r5rug_3031 {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 27px;

  padding: 0 9px;

  border-radius: 18px;

  font-size: 10px;

  font-weight: 600;
}

._transactionType_r5rug_3031 svg {
  width: 13px;
  height: 13px;
}

._transactionQuote_r5rug_3077 {
  background: var(--primary-soft);

  color: var(--primary);
}

._transactionInvoice_r5rug_3089 {
  background: var(--success-soft);

  color: var(--success);
}

._transactionPurchase_r5rug_3101 {
  background: #fff5dc;

  color: #ed9c00;
}

._transactionDelivery_r5rug_3113 {
  background: var(--danger-soft);

  color: var(--danger);
}

._transactionDefault_r5rug_3125 {
  background: #f1f2f5;

  color: #626671;
}

._transactionNumber_r5rug_3137 {
  padding: 0;

  border: 0;

  background: transparent;

  color: var(--primary);

  font-family: inherit;

  font-size: 10.5px;

  cursor: pointer;
}

._statusBadge_r5rug_3169 {
  min-height: 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 9px;

  border-radius: 18px;

  font-size: 9.5px;

  font-weight: 600;
}

._statusSuccess_r5rug_3205 {
  background: var(--success-soft);

  color: var(--success);
}

._statusWarning_r5rug_3217 {
  background: var(--warning-soft);

  color: #d68b00;
}

._statusNeutral_r5rug_3229 {
  background: #f1f2f5;

  color: #626671;
}

._tableFooter_r5rug_3241 {
  min-height: 50px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 0 12px;

  border-top: 1px solid var(--border);

  color: #656974;

  font-size: 10px;
}

._tableFooter_r5rug_3241 > div:first-child {
  display: flex;

  align-items: center;

  gap: 7px;
}

._tableFooter_r5rug_3241 select {
  height: 28px;

  padding: 0 8px;

  border: 1px solid #dfe2e9;

  border-radius: 5px;

  background: #fff;

  font-family: inherit;

  font-size: 10px;

  outline: none;
}

._pagination_r5rug_3333 {
  display: flex;

  align-items: center;

  gap: 5px;
}

._pagination_r5rug_3333 > span {
  margin-right: 8px;
}

._pagination_r5rug_3333 button {
  width: 29px;
  height: 29px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  border: 1px solid #e1e3e8;

  border-radius: 5px;

  background: #fff;

  color: #555963;

  font-family: inherit;

  font-size: 10px;

  cursor: pointer;
}

._pagination_r5rug_3333 button:hover {
  border-color: var(--primary);

  color: var(--primary);
}

._pagination_r5rug_3333 ._paginationActive_r5rug_3417 {
  border-color: var(--primary);

  background: var(--primary);

  color: #fff;
}

/* =========================================================
   TRANSACTION SIDEBAR
========================================================= */

._transactionSidebar_r5rug_3441 {
  min-width: 0;

  background: #fff;
}

._productDetailsCard_r5rug_3453 {
  height: 100%;

  padding: 0 15px;
}

._productDetailsCard_r5rug_3453 h3 {
  margin: 0;

  padding: 17px 0 13px;

  font-size: 14px;

  font-weight: 650;
}

._productDetailsCard_r5rug_3453 ._detailRow_r5rug_1605 {
  grid-template-columns: 125px minmax(0, 1fr);

  min-height: 57px;

  border-top: 1px solid #eef0f4;
}

._productDetailsCard_r5rug_3453 ._detailValue_r5rug_1645 {
  text-align: right;
}

/* =========================================================
   HISTORY
========================================================= */

._historyLayout_r5rug_3517 {
  margin: 0 23px;

  padding: 12px;

  border: 1px solid var(--border);

  border-radius: 0 0 9px 9px;

  background: #fff;
}

._historyBody_r5rug_3541 {
  padding: 20px;
}

._timeline_r5rug_3549 {
  max-width: 700px;
}

._timelineItem_r5rug_3557 {
  min-height: 85px;

  display: flex;

  align-items: flex-start;

  gap: 14px;

  position: relative;
}

._timelineItem_r5rug_3557:not(:last-child)::after {
  content: "";

  position: absolute;

  left: 14px;

  top: 31px;

  bottom: 0;

  width: 1px;

  background: #dfe2e8;
}

._timelineDot_r5rug_3613 {
  width: 29px;
  height: 29px;

  z-index: 1;

  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--primary-soft);

  color: var(--primary);

  font-size: 13px;
}

._timelineItem_r5rug_3557 strong {
  display: block;

  margin-top: 5px;

  font-size: 13px;

  color: #2c2f38;
}

._timelineItem_r5rug_3557 span {
  display: block;

  margin-top: 5px;

  color: #838691;

  font-size: 11px;
}

/* =========================================================
   LOADING
========================================================= */

._loadingHeader_r5rug_3705 {
  min-height: 220px;

  padding: 30px;

  display: flex;

  align-items: center;

  gap: 15px;

  border-bottom: 1px solid var(--border);

  background: #fff;
}

._skeletonBack_r5rug_3737 {
  width: 42px;
  height: 42px;

  border-radius: 8px;

  background: linear-gradient(90deg, #f0f1f5 25%, #f7f7f9 50%, #f0f1f5 75%);

  background-size: 200% 100%;

  animation: _skeletonLoading_r5rug_1 1.3s infinite;
}

._skeleton_r5rug_3737 {
  border-radius: 5px;

  background: linear-gradient(90deg, #eceef2 25%, #f7f7f9 50%, #eceef2 75%);

  background-size: 200% 100%;

  animation: _skeletonLoading_r5rug_1 1.3s infinite;
}

._skeletonSmall_r5rug_3783 {
  width: 100px;
  height: 10px;

  margin-bottom: 8px;
}

._skeletonTitle_r5rug_3797 {
  width: 250px;
  height: 22px;
}

._loadingLayout_r5rug_3807 {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 350px;

  gap: 15px;

  padding: 20px 23px;
}

._skeletonHero_r5rug_3827,
._skeletonCard_r5rug_3829,
._skeletonSide_r5rug_3831 {
  border-radius: 9px;

  background: linear-gradient(90deg, #eceef2 25%, #f7f7f9 50%, #eceef2 75%);

  background-size: 200% 100%;

  animation: _skeletonLoading_r5rug_1 1.3s infinite;
}

._skeletonHero_r5rug_3827 {
  height: 140px;

  margin-bottom: 12px;
}

._skeletonCard_r5rug_3829 {
  height: 220px;

  margin-bottom: 12px;
}

._skeletonSide_r5rug_3831 {
  height: 230px;

  margin-bottom: 12px;
}

@keyframes _skeletonLoading_r5rug_1 {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media (max-width: 1200px) {
  ._mainLayout_r5rug_1297 {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  ._transactionsLayout_r5rug_2239 {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

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

  ._transactionSummaryGrid_r5rug_2739 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  ._transactionSummaryItem_r5rug_2751:nth-child(2) {
    border-right: 0;
  }
}

/* =========================================================
   RESPONSIVE 1000
========================================================= */

@media (max-width: 1000px) {
  ._heroRow_r5rug_287 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._heroActions_r5rug_555 {
    align-self: flex-end;
  }

  ._mainLayout_r5rug_1297 {
    grid-template-columns: 1fr;
  }

  ._sidebar_r5rug_1361 {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;
  }

  ._transactionsLayout_r5rug_2239 {
    grid-template-columns: 1fr;
  }

  ._transactionSidebar_r5rug_3441 {
    border-top: 1px solid var(--border);
  }

  ._productDetailsCard_r5rug_3453 {
    height: auto;
  }
}

/* =========================================================
   RESPONSIVE 760
========================================================= */

@media (max-width: 760px) {
  ._header_r5rug_119 {
    padding: 14px;
  }

  ._tabsCard_r5rug_1113,
  ._mainLayout_r5rug_1297,
  ._transactionsLayout_r5rug_2239,
  ._historyLayout_r5rug_3517 {
    margin-left: 14px;
    margin-right: 14px;
  }

  ._heroProduct_r5rug_311 {
    width: 100%;
  }

  ._heroImage_r5rug_331 {
    width: 125px;
    height: 100px;

    flex-basis: 125px;
  }

  ._heroInfo_r5rug_395 h1 {
    font-size: 23px;
  }

  ._heroActions_r5rug_555 {
    width: 100%;

    align-self: stretch;
  }

  ._stockButton_r5rug_579,
  ._editButton_r5rug_581 {
    flex: 1;
  }

  ._moreButton_r5rug_583 {
    width: 50px;
  }

  ._summaryGrid_r5rug_917 {
    grid-template-columns: 1fr 1fr;
  }

  ._basicDetails_r5rug_1565 {
    grid-template-columns: 1fr;
  }

  ._detailColumn_r5rug_1577 {
    padding-right: 0;
  }

  ._detailColumn_r5rug_1577 + ._detailColumn_r5rug_1577 {
    padding-left: 0;

    border-left: 0;

    border-top: 1px solid #e9ebf0;

    margin-top: 8px;

    padding-top: 8px;
  }

  ._twoCards_r5rug_1737 {
    grid-template-columns: 1fr;
  }

  ._inventoryStats_r5rug_1769 {
    grid-template-columns: repeat(3, 1fr);

    row-gap: 10px;
  }

  ._inventoryStat_r5rug_1769:nth-child(3) {
    border-right: 0;
  }

  ._transactionToolbar_r5rug_2291 {
    align-items: stretch;

    flex-direction: column;
  }

  ._transactionActions_r5rug_2479 {
    justify-content: flex-end;
  }

  ._transactionTableWrapper_r5rug_2919 {
    overflow-x: auto;
  }

  ._transactionTable_r5rug_2919 {
    min-width: 850px;
  }

  ._sidebar_r5rug_1361 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RESPONSIVE 520
========================================================= */

@media (max-width: 520px) {
  ._heroRow_r5rug_287 {
    gap: 14px;
  }

  ._heroProduct_r5rug_311 {
    align-items: flex-start;
  }

  ._heroImage_r5rug_331 {
    width: 100px;
    height: 82px;

    flex-basis: 100px;
  }

  ._heroInfo_r5rug_395 h1 {
    font-size: 20px;

    line-height: 25px;
  }

  ._skuText_r5rug_535 {
    font-size: 12px;
  }

  ._summaryGrid_r5rug_917 {
    grid-template-columns: 1fr;
  }

  ._summaryCard_r5rug_937 {
    min-height: 68px;
  }

  ._tabs_r5rug_1113 {
    overflow-x: auto;
  }

  ._tabs_r5rug_1113 button {
    min-width: 100px;

    padding: 0 14px;
  }

  ._detailRow_r5rug_1605 {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  ._inventoryStats_r5rug_1769 {
    grid-template-columns: 1fr 1fr;
  }

  ._inventoryStat_r5rug_1769:nth-child(2) {
    border-right: 0;
  }

  ._inventoryStat_r5rug_1769:nth-child(3) {
    border-right: 1px solid #e7e9ee;
  }

  ._transactionSummaryGrid_r5rug_2739 {
    grid-template-columns: 1fr;
  }

  ._transactionSummaryItem_r5rug_2751 {
    border-right: 0;

    border-bottom: 1px solid #eceef2;

    padding: 8px 0;
  }

  ._transactionSummaryItem_r5rug_2751:last-child {
    border-bottom: 0;
  }

  ._transactionActions_r5rug_2479 {
    width: 100%;
  }

  ._dateButton_r5rug_2499,
  ._newTransactionWrapper_r5rug_2583,
  ._newTransactionButton_r5rug_2501 {
    flex: 1;
  }

  ._newTransactionButton_r5rug_2501 {
    justify-content: center;
  }

  ._actionMenu_r5rug_747 {
    right: 0;
  }
}

/* =========================================================
   RESPONSIVE 400
========================================================= */

@media (max-width: 400px) {
  ._header_r5rug_119 {
    padding: 10px;
  }

  ._tabsCard_r5rug_1113,
  ._mainLayout_r5rug_1297,
  ._transactionsLayout_r5rug_2239,
  ._historyLayout_r5rug_3517 {
    margin-left: 10px;
    margin-right: 10px;
  }

  ._heroProduct_r5rug_311 {
    flex-direction: column;
  }

  ._heroImage_r5rug_331 {
    width: 100%;
    height: 130px;
  }

  ._heroInfo_r5rug_395 {
    width: 100%;
  }

  ._heroActions_r5rug_555 {
    flex-wrap: wrap;
  }

  ._stockButton_r5rug_579,
  ._editButton_r5rug_581 {
    min-width: 0;
  }

  ._moreButton_r5rug_583 {
    flex: 0 0 48px;
  }

  ._detailRow_r5rug_1605 {
    grid-template-columns: 1fr;

    gap: 2px;

    min-height: 50px;
  }

  ._detailValue_r5rug_1645 {
    padding-bottom: 5px;
  }

  ._inventoryStats_r5rug_1769 {
    grid-template-columns: 1fr;
  }

  ._inventoryStat_r5rug_1769,
  ._inventoryStat_r5rug_1769:nth-child(3) {
    border-right: 0;

    border-bottom: 1px solid #e7e9ee;
  }

  ._inventoryStat_r5rug_1769:last-child {
    border-bottom: 0;
  }
}
._page_13858_1 {
  --primary: #5546e8;
  --primary-dark: #4535d2;
  --primary-soft: #f0eeff;

  --text: #171820;
  --muted: #737785;

  --border: #e3e5ed;
  --border-light: #eef0f5;

  --background: #f7f8fc;
  --white: #ffffff;

  --success: #08a366;
  --danger: #d94b5b;

  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(85, 70, 232, 0.065),
      transparent 27%
    ),
    var(--background);

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 13px;
}

._form_13858_79 {
  min-height: 100vh;
}

/* =========================================================
   HEADER
========================================================= */

._header_13858_95 {
  min-height: 50px;

  height: 60px;

  padding: 7px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  background: rgba(255, 255, 255, 0.96);

  border-bottom: 1px solid var(--border);

  position: sticky;
  top: 0;

  z-index: 50;

  backdrop-filter: blur(16px);
}

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

  gap: 9px;

  min-width: 0;
}

._backButton_13858_163 {
  width: 30px;
  height: 30px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);

  border-radius: 7px;

  background: #ffffff;

  color: #454853;

  text-decoration: none;

  cursor: pointer;

  transition: 0.2s ease;
}

._backButton_13858_163:hover {
  color: var(--primary);

  border-color: var(--primary);

  background: var(--primary-soft);

  transform: translateX(-2px);
}

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

  gap: 4px;

  margin-bottom: 1px;

  font-size: 8px;

  line-height: 9px;

  color: #999ca7;
}

._breadcrumb_13858_233 span:last-child {
  color: var(--primary);
}

._header_13858_95 h1 {
  margin: 0;

  font-size: 16px;

  line-height: 18px;

  font-weight: 700;

  letter-spacing: -0.3px;
}

._header_13858_95 p {
  margin: 1px 0 0;

  font-size: 8.5px;

  line-height: 10px;

  color: var(--muted);
}

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

  gap: 6px;
}

._cancelButton_13858_329,
._primaryButton_13858_331 {
  height: 30px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  border-radius: 6px;

  font-family: inherit;

  font-size: 9.5px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.2s ease;
}

._cancelButton_13858_329 {
  border: 1px solid var(--border);

  background: #fff;

  color: #464952;
}

._cancelButton_13858_329:hover {
  background: #f8f8fb;

  border-color: #d4d6df;
}

._primaryButton_13858_331 {
  border: 1px solid var(--primary);

  background: var(--primary);

  color: #fff;

  box-shadow: 0 3px 9px rgba(85, 70, 232, 0.18);
}

._primaryButton_13858_331:hover {
  background: var(--primary-dark);

  transform: translateY(-1px);
}

._primaryButton_13858_331:disabled,
._cancelButton_13858_329:disabled,
._bottomCancel_13858_443:disabled,
._saveNewButton_13858_445:disabled,
._bottomSave_13858_447:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

._layout_13858_471 {
  width: min(1480px, calc(100% - 40px));

  margin: 0 auto;

  padding: 18px 0 82px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    292px;

  gap: 16px;
}

._content_13858_503 {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 10px;
}

._twoColumnSections_13858_523 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

  align-items: stretch;
}

._twoColumnSections_13858_523 > ._card_13858_543 {
  min-width: 0;
}

._basicTopGrid_13858_551 {
  display: grid;

  grid-template-columns:
    1.2fr
    1fr
    1fr
    1fr;

  gap: 12px;

  margin-top: 0;
}

/* =========================================================
   CARDS
========================================================= */

._card_13858_543,
._sideCard_13858_589,
._helpCard_13858_591 {
  background: var(--white);

  border: 1px solid var(--border);

  border-radius: 9px;

  box-shadow: 0 2px 7px rgba(20, 24, 40, 0.025);
}

._card_13858_543 {
  overflow: hidden;
}

/* =========================================================
   SECTION HEADER
========================================================= */

._sectionHeader_13858_627 {
  min-height: 58px;

  padding: 11px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  border-bottom: 1px solid var(--border-light);
}

._sectionHeading_13858_659 {
  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;
}

._sectionNumber_13858_679 {
  width: 22px;
  height: 22px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  background: var(--primary-soft);

  color: var(--primary);

  font-size: 9px;

  font-weight: 700;
}

._sectionHeader_13858_627 h2 {
  margin: 0;

  font-size: 12px;

  line-height: 16px;

  font-weight: 700;
}

._sectionHeader_13858_627 p {
  margin: 1px 0 0;

  font-size: 8.5px;

  color: var(--muted);
}

._sectionBody_13858_761 {
  padding: 14px;
}

/* =========================================================
   GRID
========================================================= */

._gridThree_13858_777 {
  display: grid;

  grid-template-columns:
    1.25fr
    0.95fr
    0.95fr;

  gap: 12px;
}

._vendorRow_13858_799 {
  display: grid;

  grid-template-columns:
    1.2fr
    1fr
    1fr;

  gap: 12px;

  margin-top: 13px;
}

._salesGrid_13858_825 {
  display: grid;

  grid-template-columns:
    0.8fr
    1.7fr;

  gap: 12px;
}

._inventoryGrid_13858_845 {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  gap: 12px;

  margin-top: 11px;
}

._additionalGrid_13858_871 {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;
}

._productInfoGrid_13858_887 {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  gap: 12px;

  margin-top: 13px;
}

/* =========================================================
   FIELDS
========================================================= */

._field_13858_921 {
  min-width: 0;
}

._fieldHeader_13858_929 {
  min-height: 16px;

  margin-bottom: 5px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;
}

._fieldHeader_13858_929 label {
  font-size: 9.5px;

  line-height: 14px;

  font-weight: 600;

  color: #292c35;
}

._fieldHeader_13858_929 label em {
  color: #e3495d;

  font-style: normal;
}

._fieldHeader_13858_929 span {
  font-size: 8px;

  color: #999ca7;
}

._field_13858_921 input,
._field_13858_921 textarea,
._selectWrapper_13858_1005,
._selectWrapper_13858_1005 select {
  width: 100%;

  box-sizing: border-box;

  font-family: inherit;

  font-size: 10px;
}

._field_13858_921 input,
._selectWrapper_13858_1005 {
  height: 34px;
}

._field_13858_921 input,
._field_13858_921 textarea,
._selectWrapper_13858_1005,
._priceInput_13858_1043 {
  border: 1px solid #dfe2e9;

  border-radius: 6px;

  background: #fff;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

._field_13858_921 input {
  padding: 0 10px;

  outline: none;

  color: #292c35;
}

._field_13858_921 input::placeholder,
._field_13858_921 textarea::placeholder {
  color: #a0a3ae;
}

._field_13858_921 input:focus,
._field_13858_921 textarea:focus,
._selectWrapper_13858_1005:focus-within,
._priceInput_13858_1043:focus-within {
  border-color: var(--primary);

  box-shadow: 0 0 0 2px rgba(85, 70, 232, 0.08);
}

._inputError_13858_1111 {
  border-color: var(--danger) !important;
}

._errorText_13858_1119 {
  display: block;

  margin-top: 4px;

  font-size: 8px;

  line-height: 11px;

  color: var(--danger);
}

/* =========================================================
   SELECT
========================================================= */

._selectWrapper_13858_1005 {
  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;
}

._selectWrapper_13858_1005 select {
  height: 100%;

  appearance: none;

  border: 0;

  outline: none;

  background: transparent;

  padding: 0 30px 0 10px;

  color: #464952;

  cursor: pointer;
}

._selectWrapper_13858_1005 select:disabled {
  cursor: not-allowed;

  opacity: 0.65;
}

._selectIcon_13858_1219 {
  position: absolute;

  left: 10px;

  color: #999ca7;

  pointer-events: none;
}

._selectWrapper_13858_1005:has(._selectIcon_13858_1219) select {
  padding-left: 30px;
}

._selectArrow_13858_1247 {
  position: absolute;

  right: 9px;

  color: #70747f;

  pointer-events: none;
}

/* =========================================================
   TYPE SELECTOR
========================================================= */

._typeSelector_13858_1275 {
  height: 34px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  overflow: hidden;

  border: 1px solid #dfe2e9;

  border-radius: 6px;
}

._typeOption_13858_1307,
._typeOptionActive_13858_1309 {
  border: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  font-family: inherit;

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.18s ease;
}

._typeOption_13858_1307 {
  background: #fff;

  color: #666a75;
}

._typeOption_13858_1307 + ._typeOption_13858_1307 {
  border-left: 1px solid #e7e8ed;
}

._typeOption_13858_1307:hover {
  background: #fafafe;

  color: var(--primary);
}

._typeOptionActive_13858_1309 {
  background: #f4f2ff;

  color: var(--primary);

  box-shadow: inset 0 0 0 1px var(--primary);
}

/* =========================================================
   PRICE INPUT
========================================================= */

._priceInput_13858_1043 {
  height: 34px;

  display: flex;

  align-items: center;

  overflow: hidden;
}

._priceInput_13858_1043 span {
  height: 100%;

  padding: 0 10px;

  display: flex;

  align-items: center;

  background: #f7f8fa;

  border-right: 1px solid #e2e4e9;

  color: #626671;

  font-size: 9px;

  font-weight: 600;
}

._priceInput_13858_1043 input {
  flex: 1;

  width: 100%;

  height: 100%;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  outline: none;

  padding: 0 10px;

  font-family: inherit;

  font-size: 10px;
}

/* =========================================================
   TEXTAREA
========================================================= */

._field_13858_921 textarea {
  width: 100%;

  min-height: 72px;

  padding: 9px 10px;

  box-sizing: border-box;

  resize: vertical;

  outline: none;

  line-height: 15px;

  color: #292c35;
}

._descriptionField_13858_1557 textarea {
  min-height: 68px;
}

._descriptionFull_13858_1565 {
  margin-top: 13px;
}

._descriptionFull_13858_1565 textarea {
  width: 100%;

  min-height: 90px;

  padding: 10px;

  box-sizing: border-box;

  resize: vertical;

  outline: none;

  font-family: inherit;

  font-size: 10px;

  line-height: 16px;

  color: #292c35;
}

/* =========================================================
   TOGGLE
========================================================= */

._toggleWrapper_13858_1625 {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  flex: 0 0 auto;

  cursor: pointer;

  font-size: 9px;

  color: #3f424b;

  user-select: none;
}

._toggleWrapper_13858_1625 input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

._toggle_13858_1625 {
  width: 32px;
  height: 18px;

  position: relative;

  display: inline-block;

  border-radius: 20px;

  background: #d9dbe3;

  transition: 0.2s ease;
}

._toggle_13858_1625::after {
  content: "";

  width: 14px;
  height: 14px;

  position: absolute;

  top: 2px;
  left: 2px;

  border-radius: 50%;

  background: white;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);

  transition: 0.2s ease;
}

._toggleWrapper_13858_1625 input:checked + ._toggle_13858_1625 {
  background: var(--primary);
}

._toggleWrapper_13858_1625 input:checked + ._toggle_13858_1625::after {
  transform: translateX(14px);
}

/* =========================================================
   INVENTORY TOGGLE
========================================================= */

._inventoryToggle_13858_1771 {
  min-height: 42px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 6px 8px;

  border: 1px solid #e6e3f8;

  border-radius: 7px;

  background: linear-gradient(90deg, #faf9ff, #f7f6ff);

  font-size: 9px;

  font-weight: 600;
}

._yesNoToggle_13858_1815 {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  width: 150px;

  height: 30px;

  gap: 4px;
}

._yesNoOption_13858_1843,
._yesActive_13858_1845,
._noActive_13858_1847 {
  border: 1px solid #dfe1e8;

  border-radius: 5px;

  background: #fff;

  color: #686b76;

  font-family: inherit;

  font-size: 9px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.18s ease;
}

._yesActive_13858_1845 {
  border-color: var(--primary);

  background: var(--primary);

  color: #fff;

  box-shadow: 0 3px 8px rgba(85, 70, 232, 0.16);
}

._noActive_13858_1847 {
  border-color: #bfc2ca;

  background: #f4f5f7;

  color: #40434c;
}

._yesNoOption_13858_1843:hover {
  border-color: var(--primary);

  color: var(--primary);
}

._inventoryDisabled_13858_1935 {
  margin-top: 10px;

  padding: 8px 10px;

  display: flex;

  align-items: center;

  gap: 7px;

  border: 1px dashed #dfe1e8;

  border-radius: 6px;

  background: #fafafa;

  color: #858894;

  font-size: 8.5px;
}

/* =========================================================
   IMAGE UPLOAD
========================================================= */

._imageSection_13858_1987 {
  margin-top: 15px;
}

._dropzone_13858_1995 {
  min-height: 104px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  padding: 14px;

  box-sizing: border-box;

  border: 1.5px dashed #c6c9e8;

  border-radius: 8px;

  background: linear-gradient(
    135deg,
    rgba(85, 70, 232, 0.025),
    rgba(255, 255, 255, 0.85)
  );

  cursor: pointer;

  transition: 0.2s ease;
}

._dropzone_13858_1995:hover,
._dropzoneActive_13858_2057 {
  border-color: var(--primary);

  background: #faf9ff;
}

._uploadIcon_13858_2069 {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #eeecff;

  color: var(--primary);
}

._uploadText_13858_2101 strong {
  display: block;

  font-size: 10px;

  font-weight: 600;

  color: #50535d;
}

._uploadText_13858_2101 strong span {
  color: var(--primary);
}

._uploadText_13858_2101 small {
  display: block;

  margin-top: 4px;

  font-size: 8px;

  color: #9a9da7;
}

/* =========================================================
   IMAGE GRID
========================================================= */

._imageGrid_13858_2157 {
  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 8px;

  margin-top: 9px;
}

._imageItem_13858_2177,
._addMoreImage_13858_2179 {
  aspect-ratio: 1;

  position: relative;

  overflow: hidden;

  border-radius: 7px;
}

._imageItem_13858_2177 {
  border: 1px solid #dfe1e8;

  background: #f5f6f8;
}

._imageItem_13858_2177 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

._coverImage_13858_2229 {
  border: 2px solid var(--primary);
}

._coverBadge_13858_2237 {
  position: absolute;

  left: 5px;
  bottom: 5px;

  padding: 3px 5px;

  border-radius: 4px;

  background: var(--primary);

  color: #fff;

  font-size: 7px;

  font-weight: 700;
}

._removeImage_13858_2275 {
  width: 21px;
  height: 21px;

  position: absolute;

  top: 5px;
  right: 5px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;

  border-radius: 5px;

  background: rgba(25, 27, 35, 0.72);

  color: #fff;

  cursor: pointer;

  transition: 0.15s ease;
}

._removeImage_13858_2275:hover {
  background: var(--danger);
}

._addMoreImage_13858_2179 {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 4px;

  border: 1px dashed #c9cbd5;

  background: #fafafa;

  color: #747783;

  cursor: pointer;
}

._addMoreImage_13858_2179:hover {
  border-color: var(--primary);

  color: var(--primary);

  background: #faf9ff;
}

._addMoreImage_13858_2179 span {
  font-size: 8px;
}

/* =========================================================
   SIDEBAR
========================================================= */

._sidebar_13858_2407 {
  min-width: 0;
}

._sidebarSticky_13858_2415 {
  position: sticky;

  top: 82px;

  display: flex;

  flex-direction: column;

  gap: 11px;
}

._sideCard_13858_589 {
  overflow: hidden;
}

._sideCardHeader_13858_2447 {
  min-height: 47px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--border-light);
}

._sideCardHeader_13858_2447 h3,
._sideTitle_13858_2477 h3 {
  margin: 0;

  font-size: 11px;

  font-weight: 700;
}

._stepList_13858_2493 {
  padding: 7px;
}

._step_13858_2493 {
  width: 100%;

  display: flex;

  align-items: flex-start;

  gap: 8px;

  padding: 9px 7px;

  border: 0;

  border-radius: 7px;

  background: transparent;

  text-align: left;

  cursor: pointer;

  font-family: inherit;

  transition: 0.18s ease;
}

._step_13858_2493:hover {
  background: #f8f8fc;
}

._stepActive_13858_2561 {
  background: #f5f3ff;
}

._stepNumber_13858_2569 {
  width: 23px;
  height: 23px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #f0f1f4;

  color: #777a85;

  font-size: 8px;

  font-weight: 700;
}

._stepActive_13858_2561 ._stepNumber_13858_2569 {
  background: var(--primary);

  color: #fff;
}

._stepLine_13858_2625 {
  display: flex;

  align-items: flex-start;

  gap: 7px;

  min-width: 0;
}

._stepIcon_13858_2645 {
  width: 18px;
  height: 18px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #8a8d98;

  font-size: 11px;
}

._stepActive_13858_2561 ._stepIcon_13858_2645 {
  color: var(--primary);
}

._stepContent_13858_2681 {
  min-width: 0;
}

._stepContent_13858_2681 strong {
  display: block;

  font-size: 9px;

  font-weight: 650;

  color: #343741;
}

._stepContent_13858_2681 span {
  display: block;

  margin-top: 3px;

  font-size: 7.5px;

  line-height: 11px;

  color: #999ca7;
}

/* =========================================================
   REQUIRED NOTICE
========================================================= */

._requiredNotice_13858_2741 {
  margin: 5px 12px 12px;

  padding-top: 11px;

  display: flex;

  align-items: center;

  gap: 7px;

  border-top: 1px dashed #e1e3e9;

  color: #454852;

  font-size: 8.5px;
}

/* =========================================================
   SIDE TITLE
========================================================= */

._sideTitle_13858_2477 {
  min-height: 42px;

  padding: 0 14px;

  display: flex;

  align-items: center;

  gap: 7px;

  border-bottom: 1px solid var(--border-light);

  color: var(--primary);
}

._sideTitle_13858_2477 h3 {
  color: #242730;
}

/* =========================================================
   PRICE SUMMARY
========================================================= */

._summaryRows_13858_2833 {
  padding: 11px 14px;
}

._summaryRows_13858_2833 > div {
  min-height: 25px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}

._summaryRows_13858_2833 span {
  font-size: 9px;

  color: #6f727e;
}

._summaryRows_13858_2833 strong {
  font-size: 9px;

  font-weight: 600;

  color: #282b34;
}

._summaryDivider_13858_2893 {
  height: 1px !important;

  min-height: 1px !important;

  margin: 6px 0;

  background: #eceef2;
}

._summaryMargin_13858_2913 strong {
  font-size: 9.5px;
}

._marginPositive_13858_2921 {
  color: var(--success) !important;
}

._marginNegative_13858_2929 {
  color: var(--danger) !important;
}

/* =========================================================
   IMAGE SUMMARY
========================================================= */

._imageSummary_13858_2945 {
  padding: 11px 14px;

  display: flex;

  align-items: center;

  gap: 9px;
}

._imageCount_13858_2965 {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 8px;

  background: var(--primary-soft);

  color: var(--primary);

  font-size: 12px;

  font-weight: 700;
}

._imageSummary_13858_2945 strong {
  display: block;

  font-size: 9px;

  color: #343741;
}

._imageSummary_13858_2945 span {
  display: block;

  margin-top: 2px;

  font-size: 7.5px;

  color: #999ca7;
}

/* =========================================================
   HELP CARD
========================================================= */

._helpCard_13858_591 {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  padding: 10px;

  background: #faf9ff;

  border-color: #e8e5ff;
}

._helpIcon_13858_3077 {
  width: 25px;
  height: 25px;

  flex: 0 0 auto;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: #ebe8ff;

  color: var(--primary);
}

._helpCard_13858_591 strong {
  display: block;

  font-size: 9px;
}

._helpCard_13858_591 p {
  margin: 3px 0 0;

  font-size: 7.5px;

  line-height: 11px;

  color: #898c97;
}

/* =========================================================
   BOTTOM BAR
========================================================= */

._bottomBar_13858_3153 {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 40;

  min-height: 51px;

  padding: 7px 22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  border-top: 1px solid #e1e3e9;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 -4px 18px rgba(20, 24, 40, 0.05);

  backdrop-filter: blur(14px);
}

._bottomInfo_13858_3213 {
  display: flex;

  align-items: center;

  gap: 6px;

  color: #7c7f8b;

  font-size: 8.5px;
}

._bottomStatusDot_13858_3237 {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #aeb1bb;
}

._bottomActions_13858_3255 {
  display: flex;

  align-items: center;

  gap: 7px;
}

._bottomCancel_13858_443,
._saveNewButton_13858_445,
._bottomSave_13858_447 {
  height: 32px;

  padding: 0 13px;

  border-radius: 6px;

  font-family: inherit;

  font-size: 9px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.18s ease;
}

._bottomCancel_13858_443,
._saveNewButton_13858_445 {
  border: 1px solid #dfe1e7;

  background: #fff;

  color: #555862;
}

._bottomCancel_13858_443:hover,
._saveNewButton_13858_445:hover {
  border-color: #cfd1da;

  background: #f8f8fa;
}

._bottomSave_13858_447 {
  min-width: 112px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  border: 1px solid var(--primary);

  background: var(--primary);

  color: #fff;

  box-shadow: 0 4px 11px rgba(85, 70, 232, 0.18);
}

._bottomSave_13858_447:hover {
  background: var(--primary-dark);
}

/* =========================================================
   SPINNER
========================================================= */

._spinner_13858_3399 {
  width: 13px;
  height: 13px;

  display: inline-block;

  border: 2px solid rgba(255, 255, 255, 0.35);

  border-top-color: #fff;

  border-radius: 50%;

  animation: _productSpin_13858_1 0.7s linear infinite;
}

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

/* =========================================================
   RESPONSIVE 1200
========================================================= */

@media (max-width: 1200px) {
  ._layout_13858_471 {
    grid-template-columns:
      minmax(0, 1fr)
      260px;
  }

  ._gridThree_13858_777 {
    grid-template-columns:
      1fr
      1fr;
  }

  ._gridThree_13858_777 ._field_13858_921:last-child {
    grid-column: 1 / -1;
  }

  ._vendorRow_13858_799 {
    grid-template-columns:
      1fr
      1fr;
  }

  ._additionalGrid_13858_871 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._imageGrid_13858_2157 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* =========================================================
   RESPONSIVE 980
========================================================= */

@media (max-width: 980px) {
  ._layout_13858_471 {
    width: min(calc(100% - 28px), 760px);

    grid-template-columns: 1fr;
  }

  ._sidebar_13858_2407 {
    display: none;
  }

  ._header_13858_95 {
    padding: 10px 14px;
  }

  ._bottomBar_13858_3153 {
    padding: 7px 14px;
  }
}

/* =========================================================
   RESPONSIVE 760
========================================================= */

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

  ._gridThree_13858_777,
  ._vendorRow_13858_799,
  ._salesGrid_13858_825,
  ._inventoryGrid_13858_845,
  ._additionalGrid_13858_871 {
    grid-template-columns: 1fr;
  }

  ._gridThree_13858_777 ._field_13858_921:last-child {
    grid-column: auto;
  }

  ._sectionHeader_13858_627 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._toggleWrapper_13858_1625 {
    align-self: flex-start;
  }

  ._imageGrid_13858_2157 {
    grid-template-columns: repeat(4, 1fr);
  }

  ._bottomInfo_13858_3213 {
    display: none;
  }

  ._bottomActions_13858_3255 {
    width: 100%;
  }

  ._bottomCancel_13858_443,
  ._saveNewButton_13858_445,
  ._bottomSave_13858_447 {
    flex: 1;
  }
}

/* =========================================================
   RESPONSIVE 600
========================================================= */

@media (max-width: 600px) {
  ._header_13858_95 {
    min-height: 58px;

    padding: 9px 10px;
  }

  ._header_13858_95 h1 {
    font-size: 17px;
  }

  ._header_13858_95 p {
    display: none;
  }

  ._headerActions_13858_315 {
    display: none;
  }

  ._layout_13858_471 {
    width: calc(100% - 16px);

    padding-top: 10px;

    padding-bottom: 72px;
  }

  ._sectionBody_13858_761 {
    padding: 12px;
  }

  ._sectionHeader_13858_627 {
    padding: 10px 12px;
  }

  ._imageGrid_13858_2157 {
    grid-template-columns: repeat(3, 1fr);
  }

  ._dropzone_13858_1995 {
    min-height: 90px;
  }

  ._yesNoToggle_13858_1815 {
    width: 130px;
  }

  ._bottomBar_13858_3153 {
    min-height: 47px;

    padding: 6px 8px;
  }

  ._bottomCancel_13858_443,
  ._saveNewButton_13858_445,
  ._bottomSave_13858_447 {
    height: 30px;

    padding: 0 7px;

    font-size: 8px;
  }
}

/* =========================================================
   RESPONSIVE 420
========================================================= */

@media (max-width: 420px) {
  ._layout_13858_471 {
    width: calc(100% - 10px);
  }

  ._header_13858_95 {
    padding: 8px 6px;
  }

  ._backButton_13858_163 {
    width: 32px;
    height: 32px;
  }

  ._header_13858_95 h1 {
    font-size: 15px;
  }

  ._breadcrumb_13858_233 {
    display: none;
  }

  ._sectionNumber_13858_679 {
    width: 20px;
    height: 20px;
  }

  ._sectionHeader_13858_627 h2 {
    font-size: 11px;
  }

  ._sectionHeader_13858_627 p {
    font-size: 7.5px;
  }

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

  ._bottomCancel_13858_443 {
    display: none;
  }

  ._saveNewButton_13858_445,
  ._bottomSave_13858_447 {
    flex: 1;
  }
}

/* =========================================================
   REACT SELECT OVERRIDES
   Prevent global .field input styles from affecting
   React Select's internal search input.
========================================================= */

._reactSelectWrapper_13858_3915 {
  width: 100%;

  min-width: 0;

  position: relative;
}

/* React Select main control */
._reactSelectWrapper_13858_3915 .crm-select__control {
  width: 100%;

  min-height: 34px;

  height: 34px;

  border-radius: 6px;
}

/* Remove browser/default input styling
   from React Select internal search input */
._reactSelectWrapper_13858_3915 .crm-select__input {
  width: auto !important;

  min-width: 0 !important;

  height: auto !important;

  padding: 0 !important;

  margin: 0 !important;

  border: 0 !important;

  outline: none !important;

  box-shadow: none !important;

  background: transparent !important;

  border-radius: 0 !important;

  font-family: inherit !important;

  font-size: 10px !important;

  color: #292c35 !important;
}

/* Search input focus */
._reactSelectWrapper_13858_3915 .crm-select__input:focus {
  border: 0 !important;

  outline: none !important;

  box-shadow: none !important;
}

/* Input container */
._reactSelectWrapper_13858_3915 .crm-select__input-container {
  margin: 0 !important;

  padding: 0 !important;

  font-size: 10px !important;
}

/* Value */
._reactSelectWrapper_13858_3915 .crm-select__single-value {
  margin: 0 !important;

  font-size: 10px;

  color: #464952;
}

/* Placeholder */
._reactSelectWrapper_13858_3915 .crm-select__placeholder {
  margin: 0 !important;

  font-size: 10px;

  color: #a0a3ae;
}

/* Remove separator */
._reactSelectWrapper_13858_3915 .crm-select__indicator-separator {
  display: none;
}

/* Dropdown menu */
._reactSelectWrapper_13858_3915 .crm-select__menu {
  z-index: 99999 !important;
}

/* Portal */
._reactSelectWrapper_13858_3915 .crm-select__menu-portal {
  z-index: 99999 !important;
}

/* Disabled */
._reactSelectWrapper_13858_3915 .crm-select__control--is-disabled {
  background: #f7f8fa;

  cursor: not-allowed;

  opacity: 0.65;
}

._typeOptionDisabled_13858_4133 {
  flex: 1;
  border: 1px solid #e1e3ea;
  background: #f5f6f8;
  color: #b0b3bc;
  cursor: not-allowed;
  opacity: 0.65;
}

._yesNoDisabled_13858_4151 {
  flex: 1;
  border: 1px solid #e3e5ed;
  background: #f5f6f8;
  color: #a7aab3;
  cursor: not-allowed;
  opacity: 0.6;
}

._selectedImageList_13858_4169 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

._selectedImageItem_13858_4183 {
  position: relative;
  width: 100%;
  height: 100px;

  overflow: hidden;

  border: 1px solid #e2e4eb;
  border-radius: 8px;

  background: #f8f9fb;
}

._selectedImageItem_13858_4183 img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

._selectedImageItem_13858_4183 button {
  position: absolute;
  top: 5px;
  right: 5px;

  width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  background: rgba(30, 32, 38, 0.72);
  color: #ffffff;

  cursor: pointer;

  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

._selectedImageItem_13858_4183 button:hover {
  background: #e5484d;
  transform: scale(1.08);
}

._selectedImageItem_13858_4183 button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
/* ── QuoteAdd.css ─────────────────────────────────────── */

/* Page layout */
.qa-page {
  background: #f5f6fa;
  min-height: 100vh;
  font-size: 13px;
  font-family: "Segoe UI", sans-serif;
}

/* ── Top bar ── */
.qa-topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.qa-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qa-back-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}

.qa-back-btn:hover {
  background: #f3f4f6;
}

.qa-page-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.qa-page-subtitle {
  font-size: 11px;
  color: #6b7280;
  margin: 0;
}

.qa-topbar-actions {
  display: flex;
  gap: 8px;
}

.qa-btn-draft {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}

.qa-btn-draft:hover {
  background: #f9fafb;
}

.qa-btn-confirm {
  padding: 6px 14px;
  background: #4F46E5;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}

.qa-btn-confirm:hover {
  background: #4338ca;
}

.qa-btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Body columns ── */
.qa-body {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  padding: 16px 20px;
  align-items: start;
}

@media (max-width: 992px) {
  .qa-body {
    grid-template-columns: 1fr;
  }
}

/* ── Cards ── */
.qa-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.qa-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}

.qa-card-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.qa-card-body {
  padding: 14px 16px;
}

/* ── Form elements ── */
.qa-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
  display: block;
}

.qa-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #111827;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
  box-sizing: border-box;
}

.qa-input:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.08);
}

.qa-input.is-invalid {
  border-color: #ef4444;
}

.qa-invalid-feedback {
  font-size: 11px;
  color: #ef4444;
  margin-top: 2px;
}

.qa-select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #111827;
  outline: none;
  background: #fff;
  cursor: pointer;
}

.qa-select:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.08);
}

.qa-textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #111827;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.qa-textarea:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.08);
}

.qa-form-row {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.qa-form-row.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.qa-form-row.cols-2 {
  grid-template-columns: 1fr 1fr;
}

.qa-form-row.cols-1 {
  grid-template-columns: 1fr;
}

@media (max-width: 600px) {

  .qa-form-row.cols-3,
  .qa-form-row.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Customer search ── */
.qa-customer-search-wrap {
  position: relative;
}

.qa-customer-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 13px;
  pointer-events: none;
}

.qa-input.with-icon {
  padding-left: 28px;
}

.qa-autofill-hint {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}

.qa-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.qa-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
}

.qa-dropdown-item:last-child {
  border-bottom: none;
}

.qa-dropdown-item:hover {
  background: #f9fafb;
}

.qa-dropdown-item-name {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.qa-dropdown-item-sub {
  font-size: 11px;
  color: #6b7280;
}

.qa-dropdown-clear {
  padding: 8px 12px;
  color: #4F46E5;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #f3f4f6;
}

.qa-dropdown-clear:hover {
  background: #f5f3ff;
}

.qa-dropdown-empty {
  padding: 10px 12px;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}

/* ─────────────────────────────────────────────
   FIX 2: Salutation select + Attention input
───────────────────────────────────────────── */
.qa-attention-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.qa-salutation-select {
  width: 50px;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 12px;
  background: #fff;
  outline: none;
  color: #374151;
  cursor: pointer;
  height: 32px;
}

.qa-salutation-select:focus {
  border-color: #4F46E5;
}

/* ── Product / Cart Section ── */
.qa-product-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.qa-product-search-wrap {
  position: relative;
  flex: 1;
}

.qa-search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 14px;
  pointer-events: none;
}

.qa-btn-add-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed #4F46E5;
  background: #f5f3ff;
  color: #4F46E5;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.qa-btn-add-item:hover {
  background: #ede9fe;
}

/* ── Dynamic item table ── */
.qa-item-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.qa-item-table thead tr th {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.qa-item-table tbody tr td {
  padding: 5px 6px;
  vertical-align: middle;
  border-bottom: 1px solid #f9fafb;
}

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

.qa-item-table tbody tr:hover {
  background: #fafafa;
}

.qa-item-name-input {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  width: 100%;
  outline: none;
  padding: 0;
}

.qa-item-desc {
  font-size: 10px;
  color: #9ca3af;
}

.qa-num-input {
  width: 52px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  text-align: center;
  outline: none;
}

.qa-num-input:focus {
  border-color: #4F46E5;
}

.qa-price-input {
  width: 80px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
}

.qa-price-input:focus {
  border-color: #4F46E5;
}

.qa-discount-input {
  width: 60px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  outline: none;
}

.qa-row-total {
  font-size: 12px;
  font-weight: 600;
  color: #d10d3e9c;
  white-space: nowrap;
  text-align: right;
}

.qa-edit-btn {
  background: transparent;
  border: none;
  color: #3c10ec62;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
  font-size: 13px;
}

.qa-del-btn {
  background: transparent;
  border: none;
  color: #eb282872;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
  font-size: 13px;
}

/* Add new row link */
.qa-add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4F46E5;
  font-size: 12px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 2px;
}

.qa-add-row-btn:hover {
  color: #4338ca;
}

/* ─────────────────────────────────────────────
   FIX 4: Bottom section — Cart Details (left)
           + Save & Confirm button (right)
           Matches the screenshot layout exactly
───────────────────────────────────────────── */
.qa-bottom-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
  border-top: 1px solid #f3f4f6;
  margin-top: 10px;
  padding-top: 14px;
}

/* Cart Details panel (left side) */
.qa-cart-details-panel {
  min-width: 220px;
}

.qa-cart-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.04em;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.qa-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qa-cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #374151;
  padding: 2px 0;
}

.qa-cart-line span {
  font-size: 11px;
}

.qa-cart-grand {
  border-top: 2px solid #111827;
  margin-top: 6px;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}

/* Save & Confirm button panel (right side) */
.qa-save-panel {
  display: flex;
  align-items: flex-end;
}

.qa-save-confirm-btn {
  padding: 10px 24px;
  background: #4F46E5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.15s;
}

.qa-save-confirm-btn:hover {
  background: #4338ca;
}

.qa-save-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Right: Live Preview ── */
.qa-preview-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  position: sticky;
  top: 60px;
}

.qa-preview-header {
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.qa-preview-title {
  font-size: 10px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.qa-preview-body {
  padding: 14px 16px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

/* Quote Header in preview */
.qa-preview-section-label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qa-preview-quote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.qa-preview-quote-title {
  font-size: 13px;
  font-weight: 900;
  color: #111827;
  margin: 0 0 2px 0;
}

.qa-preview-quote-num {
  font-size: 11px;
  color: #4F46E5;
  font-weight: 700;
}

.qa-preview-logo-box {
  width: 70px;
  height: 48px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #9ca3af;
  text-align: center;
  overflow: hidden;
}

.qa-preview-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bill To row */
.qa-preview-bill-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.qa-preview-bill-to p,
.qa-preview-bill-dates p {
  margin: 0;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.6;
}

.qa-preview-bill-to strong,
.qa-preview-bill-dates strong {
  font-size: 12px;
  color: #111827;
}

.qa-preview-bill-dates {
  text-align: right;
}

/* Item table preview */
.qa-preview-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 11px;
}

.qa-preview-table thead th {
  background: #1f2937;
  color: #fff;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.qa-preview-table thead th:last-child,
.qa-preview-table tbody td:last-child {
  text-align: right;
  font-size: 9px;
}

.qa-preview-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  font-size: 10px !important;
}

.qa-preview-totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f4f6;
}

.qa-preview-total-row {
  display: flex;
  gap: 40px;
  font-size: 10px;
  color: #4a4b4c;
}

.qa-preview-total-row,
span {
  font-size: 9px;
}

.qa-preview-total-row span:last-child {
  min-width: 70px;
  text-align: right;
}

.qa-preview-total-row.bold {
  font-size: 11px;
  font-weight: 800;
  color: #111827;
  border-top: 1px solid #e5e7eb;
  padding-top: 4px;
  margin-top: 2px;
}

/* Payment advice */
.qa-payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qa-payment-field label {
  font-size: 10px;
  font-weight: 700;
  color: #6b7280;
  display: block;
  margin-bottom: 3px;
}

.qa-payment-field .qa-payment-val {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  color: #111827;
  min-height: 26px;
  background: #fafafa;
}

/* Collapsible */
.qa-collapse-icon {
  color: #9ca3af;
  font-size: 16px;
  transition: transform 0.2s;
}

.qa-collapse-icon.open {
  transform: rotate(180deg);
}

.qa-collapsible-body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}




.ri-bottom-wrap {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.ri-notes-panel {
  flex: 1;
  min-width: 220px;
}

.ri-totals-panel {
  flex: 0 0 340px;
  max-width: 340px;
  margin-left: auto;
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
}

.ri-bulk-actions-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #4f46e5;
  font-size: 12px;
  cursor: pointer;
}

.ri-row-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.ri-totals-card {
  align-self: flex-start;
}

.ri-totals-panel {
  background: #f9fafb;
  border-radius: 8px;
  padding: 12px;
}

.ri-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  color: #374151;
}

.ri-total-grand {
  border-top: 1px solid #e5e7eb;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
  font-size: 13px;
  color: #111827;
}

.ri-inline-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.ri-inline-input {
  border: none;
  outline: none;
  width: 40px;
  padding: 4px 5px;
  font-size: 12px;
}

.ri-inline-suffix {
  padding: 4px 5px;
  background: #f3f4f6;
  font-size: 11px;
  color: #6b7280;
}

.ri-round-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #4f46e5;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
}


/* ============================================================
   pipeline.css  –  Sales Pipeline Kanban
   Matches the card design in the uploaded screenshot exactly.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* ── Root container ──────────────────────────────────────── */
.pipeline-container {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f1f5f9;
  color: #111827;
  position: relative;
  overflow: hidden;
  height: 100vh;
}
/* Mesh BG decoration */
.pipeline-mesh-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 15%, #a5b4fc18 0%, transparent 55%),
    radial-gradient(ellipse at 85% 85%, #6ee7b718 0%, transparent 55%);
}
/* ── Content wrapper ─────────────────────────────────────── */
.pipeline-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
/* ── Header ──────────────────────────────────────────────── */
.pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 24px 12px;
  flex-shrink: 0;
  gap: 20px;
  background: transparent;
}
.pipeline-title-section {
  flex: 1;
}
.pipeline-main-title {
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.8px;
  margin-bottom: 3px;
}
.pipeline-subtitle {
  font-size: 12px;
  color: #94a3b8;
}
/* editable inputs */
.pipeline-title-input {
  width: 100%;
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
  background: white;
  border: 1.5px solid #c7d2fe;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  outline: none;
}
.pipeline-title-input:focus {
  border-color: #6366f1;
}
.pipeline-description-input {
  width: 100%;
  font-size: 13px;
  color: #64748b;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  outline: none;
}
.pipeline-description-input:focus {
  border-color: #6366f1;
}
/* action buttons */
.pipeline-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-edit {
  background: white;
  color: #6366f1;
  border: 1.5px solid #6366f1;
  font-size: 12px;
}
.btn-edit:hover {
  background: #eef2ff;
}
.btn-save {
  background: #6366f1;
  color: white;
  border: none;
  box-shadow: 0 3px 10px #6366f144;
}
.btn-save:hover {
  background: #4f46e5;
}
.btn-cancel {
  background: white;
  color: #64748b;
  border: 1.5px solid #cbd5e1;
}
.btn-cancel:hover {
  background: #f8fafc;
}
/* ── Kanban board ────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: 14px;
  padding: 0 24px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
  flex: 1;
}
/* ── Stage column ────────────────────────────────────────── */
.stage-column {
  width: 230px;
  flex-shrink: 0;
  border-radius: 18px;
  padding: 14px 12px 12px;
  border: 1.5px solid var(--col-border, rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);
  min-height: 400px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.stage-column.drag-over {
  border: 2px dashed var(--col-dot, #6366f1) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-dot, #6366f1) 18%, transparent);
  background: var(--col-light, #eef2ff);
}
/* ── Column header ───────────────────────────────────────── */
.column-header-wrap {
  margin-bottom: 10px;
}
.column-header-wrap {
  cursor: grab;
}
.column-header-wrap:active {
  cursor: grabbing;
}
.column-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.column-title-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.column-title {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.column-title-input {
  font-size: 15px;
  font-weight: 800;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 1px 4px;
}
.column-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.column-count-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
/* Inline search box inside column header */
.column-search-input {
  width: 120px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid;
  outline: none;
  background: white;
  font-family: inherit;
  transition: width 0.2s;
}
.column-search-input:focus {
  width: 140px;
}
/* small icon buttons in column header */
.col-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.col-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
/* ── Scrollable cards area ───────────────────────────────── */
.cards-container {
  flex: 1;
  min-height: 0;
  /* ← crucial for flex child scroll */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
/* per-column thin scrollbar */
.cards-container::-webkit-scrollbar {
  width: 3px;
}
.cards-container::-webkit-scrollbar-track {
  background: transparent;
}
.cards-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}
/* empty drop zone */
.empty-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 12px;
  color: #cbd5e1;
  font-size: 11px;
  text-align: center;
  border: 2px dashed;
  border-radius: 12px;
  margin-bottom: 8px;
}
/* ── Deal Card ───────────────────────────────────────────── */
.deal-card {
  background: white;
  border-radius: 14px;
  padding: 13px 14px 11px;
  margin-bottom: 10px;
  cursor: grab;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s, opacity 0.15s;
}
.deal-card:active {
  cursor: grabbing;
}
/* top row: badge + date + value */
.card-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 6px;
}
.card-date {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  margin-left: auto;
}
.card-date strong {
  color: #374151;
  font-weight: 700;
}
/* person row */
.card-person-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.card-person-info {
  flex: 1;
  min-width: 0;
}
.card-name {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.card-note-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.card-note {
  font-size: 11px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.card-followup {
  font-size: 11px;
  color: #374151;
  font-weight: 500;
}
.card-due {
  font-weight: 700;
  font-size: 11px;
  color: #374151;
}
.card-due.urgent {
  color: #dc2626;
}
/* contact lines: email + phone */
.card-contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.card-contact-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6b7280;
}
.card-contact-line svg {
  flex-shrink: 0;
  color: #9ca3af;
}
/* priority */
.card-priority-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.card-priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* progress bar */
.card-progress-bar {
  background: #f3f4f6;
  border-radius: 99px;
  height: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.card-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}
/* ── Card action buttons ─────────────────────────────────── */
.card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
}
/* base style: coloured rounded button */
.card-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  font-size: 10px !important;
  /* hide any stray text */
}
.btn-icons {
  font-size: 10px !important;
}
.card-action-btn:hover {
  opacity: 0.82;
  transform: scale(1.04);
}
.card-action-btn:active {
  transform: scale(0.97);
}
.card-actionbtn:hover {
  opacity: 0.82;
  transform: scale(1.04);
}
.card-actionbtn:active {
  transform: scale(0.97);
}
.card-actionbtn {
  justify-content: center;
  padding: 1px 0px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  font-size: 10px !important;
  /* hide any stray text */
}
.card-actionbtn {
  width: 28px;
  height: 28px;
}
/* WhatsApp – always green */
.whatsapp-btn {
  background: #dcfce7;
  color: #16a34a;
}
.whatsapp-btn:hover {
  background: #bbf7d0;
}
/* email – always green */
.email-btn {
  background: #e62d0317;
  color: #e87f05;
}
.email-btn:hover {
  background: #bbf7d0;
}
/* Delete wrapper – make it look like the other buttons */
.delete-btn-wrap {
  background: #fee2e2;
  color: #dc2626;
  /* override flex: 1 from parent rule */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 0;
  overflow: hidden;
}
/* force the inner DeleteConfirmationModal to fill the wrapper */
.delete-btn-wrap>* {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  cursor: pointer;
}
/* ── Add deal button ─────────────────────────────────────── */
.add-deal-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: transparent;
  border: 1.5px dashed;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.15s;
  flex-shrink: 0;
}
.add-deal-btn:hover {
  background: rgba(255, 255, 255, 0.6);
}
/* ── Toast ───────────────────────────────────────────────── */
.custom-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 500;
  white-space: nowrap;
  animation: toastIn 0.22s ease;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/* ── Horizontal board scrollbar ──────────────────────────── */
.kanban-board::-webkit-scrollbar {
  height: 5px;
}
.kanban-board::-webkit-scrollbar-track {
  background: transparent;
}
.kanban-board::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .pipeline-header {
    flex-direction: column;
    padding: 14px 16px 10px;
  }

  .kanban-board {
    padding: 0 14px 16px;
  }

  .stage-column {
    width: 250px;
  }

  .pipeline-main-title {
    font-size: 20px;
  }
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12.5px;
  font-family: "Plus Jakarta Sans", sans-serif;
  /* or "Alexandria" */
}

:root {
  --bg-color: #ffffff;
  --text-color: #191919;

  --primary-purple-500: #9b004f;
  --primary-purple-400: #ff006e;
  --primary-purple-300: #ff5ca1;
  --primary-purple-200: #f9d2e4;
  --primary-purple-100: #fceaf2;
  --home-bg-color: #fcfcfc;
  --secondary-color: #00a693;
  --secondary-hover-bg-color: #33b8a9;
  --secondary1-color: rgb(79, 70, 229, 0.1);
  --accent-color: #606060;
  --border-color: #e0e0e0;
  --card-bg: #9ecbfff9;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --input-text: #999999;
  --color-red: #fb3748;
  --color-red-light: #fb37481a;
  --color-yellow: #dfb400;
  --color-yellow-light: rgba(255, 219, 67, 0.1);
  --color-green: #1fc16b;
  --color-green-light: #e6fbf0;
  --color-pink: #ef1ba2;
  --color-pink-light: #fec0e7;
  --color-blue: #0c78d0;
  --color-blue-light: #8bc8fa;
  --color-neutral: #050202;
  --color-neutral-300: #ffffff;
  --color-neutral-400: #f8f8f8;
  --color-neutral-500: #e4e4e4;
  --color-neutral-700: #bbbbbb;
  --color-neutral-800: #777777;
  --color-neutral-900: #333333;
  --primary: #4361ee;
  --success: #4caf5090;
  --danger: #f4433690;
  --warning: #ff980090;
  --info: #2196f390;
  --half: #f4c18490;
  --dark: #2c3e5090;
  --light: #f8f9fa;
  --select-border-color: #e5e5e5;
  --select-container-color: #212121;
  --modal-overlay-bg: #rgba(0, 0, 0, 0.4);
  --attendance-body-bg: #f5f7fa;
  --search-container-input-focus: rgba(67, 97, 238, 0.2);
  --search-container-search-icon: #7f8c8d;
  --summary-card-total-r-active: #8e55cb90;
  --summary-card-total-l-active: #8e55cb90;
  --summary-card-present-l-active: #8bc34a90;
  --summary-card-absent-l-active: #f48fb190;
  --summary-card-leave-l-active: #00bcd490;
  --summary-card-halfday-l-active: #e4e0cc90;
  --summary-card-unmarked-r-active: #9e9e9e90;
  --summary-card-unmarked-l-active: #607d8b;
  --summary-card-total: #6a11cb70;
  --summary-card-unmarked: #9e9e9e;
  --status-btn: #ddd;
  --status-btn-hover: #f5f5f5;
  --confirm-btn-disabled: #bdc3c7;
  --confirm-btn-hover: #3a56d4;
  --selected-count: #f0f0f0;
  --confirm-btn: #4caf50;
  --confirm-btn-disabled: #cccccc;
  --bulk-btn-disabled: #a0a0a0;
  --tab-btn: #efeeee;
  --tab-btn-active: #007bff;
  --tab-btn-focus: rgba(255, 255, 255, 0.5);
  --upload-area-border: #d1d5db;
  --upload-area-bg: #f9fafb;
  --upload-area-hover-bg: #f3f4f6;
  --upload-area-hover-border: #9ca3af;
  --upload-area-icon: #6b7280;
  --upload-area-text: #374151;
  --custom-scrollbar-track: #fde4e4;
  --custom-scrollbar-l-track: #f7adad;
  --sticky-tabs-border: #e4e3e0;
  --feedback-msg-drop-shadow: rgba(255, 0, 111, 0.173);
  --ticket-list-container-bg: #faf8f8;
  --ticket-list-container-border: #dee2e6;
  --ticket-item: #eeee;
  --ticket-item-hover: #f9d2e4a5;
  --ticket-title: #666;
  --ticket-h1-span: #172b4d;
  --ticket-h2: #5e6c84;
  --commit-url: #0052cc;
  --user-icon-color: #6c757d;
  --comment-author: #495057;
  --user-avatar: #f1f3f5;
  --idCard-profile-image: #00a79d;
  --dashboard-institution-card-light-text: #afafaf;
  --custom-table-body-td: #434343;
  --message-sent-bg: #dcf8c6;
  --has-search-form-control-feedback: #aaa;
  --btnSend-hover: #ae006e;
}

/* Chat  Start */
.chat-container {
  height: 90vh;
  background-color: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--modal-overlay-bg);
}

.chat-sidebar {
  background-color: var(--bg-color);
  border-right: 1px solid var(--border-color);
  height: 100%;
}

/* .chat-header {
  background-color: var(--card-bg) !important;
  font-weight: bold;
  padding: 10px;
} */

.chat-messages {
  background-color: var(--select-border-color);
  overflow-y: auto;
}

.message-bubble {
  padding: 10px 15px;
  border-radius: 15px;
  margin-bottom: 8px;
  max-width: 70%;
  word-wrap: break-word;
}

.message-sent {
  background-color: var(--message-sent-bg);
}

.message-received {
  background-color: var(--bg-color);
}

.chat-input {
  background-color: var(--card-bg) !important;
  border-top: 1px solid var(--border-color);
}

.list-group-item:hover {
  background-color: var(--light);
  cursor: pointer;
}

.css-fpa1fc .MuiDataGrid-row--dynamicHeight > .MuiDataGrid-cell{
  display: flex;
  justify-content: center !important;
  align-items: center !important;
}

.chat-messages-container::-webkit-scrollbar {
  width: 2px;
}
.chat-messages-container::-webkit-scrollbar-thumb {
  background-color: #4a4a4a;
  border-radius: 10px; 
}
.chat-list-sidebar{
  height: 70vh !important;
}
.chat-list-sidebar::-webkit-scrollbar{
  width: 5px;
}
.chat-list-sidebar::-webkit-scrollbar-thumb {
  background-color: #b4b4b4dd;
  border-radius: 10px; 
}

.nav-tabs .nav-link {
  border: none;
  color: var(--user-icon-color);
}
.nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--color-pink); /* WhatsApp green */
  color: var(--color-pink);
  font-weight: 500;
}

.list-group-item {
  border: none;
  border-bottom: 1px solid var(--ticket-list-container-bg);
}
.list-group-item:hover {
  background-color: var(--light);
  cursor: pointer;
}

.has-search .form-control {
  padding-left: 2.375rem;
}

.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: var(--has-search-form-control-feedback);
}

.searchInput {
  border-radius: 20px;
  background-color: var(--ticket-item);
}

.pinkBg {
  background-color: var(--attendance-body-bg);
}

.uploadButton {
  background-color: var(--bg-color);
  padding: 7px 15px;
  border-radius: 30px;
  border: 1px solid var(--color-pink);
  color: var(--color-pink);
}

.uploadButton:hover {
  background-color: var(--attendance-body-bg);
  border: 1px solid var(--color-pink);
  color: var(--color-pink);
}

.btnSend {
  background-color: var(--color-pink);
  padding: 7px 12px;
  border: 1px solid var(--bg-color);
  color: var(--bg-color);
}

.btnSend:hover {
  background-color: var(--btnSend-hover);
  padding: 7px 12px;
  border: 1px solid var(--bg-color);
  color: var(--bg-color);
}

.textInput {
  padding: 10px 15px;
  border: none;
}

.addGroupButton {
  background-color: var(--bg-color);
  color: var(--primary-purple-400);
  border: 1px solid var(--primary-purple-400);
  font-size: larger;
  padding: 2px 8px;
}

.addGroupButton:hover {
  background-color: var(--primary-purple-400);
  color: var(--bg-color);
  border: 1px solid var(--bg-color);
}
/* ChatWindow.css */

/* Empty state styling */
.chat-window-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 0 0 12px 0;
}

.empty-state-content {
  text-align: center;
  max-width: 300px;
}

.empty-icon {
  color: #adb5bd;
  margin-bottom: 1.5rem;
}

.empty-state-content h4 {
  color: #495057;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Chat window container */
.chat-window-container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background-color: #f8f9fa;
  border-radius: 0 0 12px 0;
  overflow: hidden;
}

/* Header styling */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: #ebedffcc !important;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

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

.chat-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.chat-details {
  display: flex;
  flex-direction: column;
}

.chat-name {
  font-weight: 600;
  color: #212529;
}

.chat-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #6c757d;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background-color: #f1f3f5;
  color: #495057;
}

.messages-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6c757d;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #4dabf7;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 12px;
}

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

/* Input container */
.chat-input-container {
  padding: 4px 16px;
  background-color: #ffffff;
  border: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .chat-header {
    padding: 10px 12px;
  }

  .chat-messages-container {
    padding: 12px;
  }

  .chat-input-container {
    padding: 12px;
  }
}

.chat-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 80%;
}

.skeleton-message.other {
  flex-direction: row; /* left side */
  align-self: flex-start;
}

.skeleton-message.own {
  flex-direction: row-reverse; /* right side */
  align-self: flex-end;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-avatar.hidden {
  visibility: hidden;
}

.skeleton-text {
  flex: 1;
}

.skeleton-line {
  height: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-line.short {
  width: 40%;
}

.skeleton-line.long {
  width: 80%;
}

@keyframes shimmer {
  100% {
    background-position: -200% 0;
  }
}
/* Welcome state styles */
.welcome-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
}

.welcome-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.welcome-state h3 {
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 600;
}

.welcome-state .text-muted {
  margin-bottom: 2rem;
  max-width: 400px;
}

.suggested-messages {
  margin-top: 1.5rem;
}

.suggested-messages p {
  margin-bottom: 1rem;
  color: #666;
  font-size: 0.9rem;
}

.suggestion-chips {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.suggestion-chip {
  padding: 0.5rem 1rem;
  background-color: #f0f2f5;
  border-radius: 18px;
  font-size: 0.9rem;
  color: #555;
  cursor: pointer;
  transition: all 0.2s ease;
}

.suggestion-chip:hover {
  background-color: #e4e6eb;
  transform: translateY(-2px);
}

/* Chat container adjustments */
.chat-messages-container {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  background: linear-gradient(135deg, #fdfcfb 0%, #f5eee8 100%);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%239C92AC' fill-opacity='0.1'/%3E%3C/svg%3E");
}

.chat-messages-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%239C92AC' fill-opacity='0.1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 10px 10px;
  pointer-events: none;
}


/* For better message readability on gradient backgrounds */
.message-bubble {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 10px 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

/* If you're using the WhatsApp-like background, style messages differently */
.chat-messages-container[style*="#ece5dd"] .message-bubble {
  background-color: #ffffff;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .welcome-state {
    padding: 1rem;
  }

  .welcome-avatar {
    width: 80px;
    height: 80px;
  }

  .suggestion-chips {
    flex-direction: column;
    align-items: center;
  }

  .suggestion-chip {
    width: fit-content;
  }
}
/* React Quill Custom Styles */
.message-input-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.quill-toolbar-container {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.quill-toolbar {
  display: none;
  gap: 4px;
}

.quill-toolbar button {
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quill-toolbar button:hover {
  background: #f0f2f5;
}

.quill-input-container {
  flex: 1;
  min-height: 40px;
}

.ql-container {
  border: none !important;
  font-size: 14px;
}

.ql-editor {
  padding: 8px 12px !important;
  min-height: 40px !important;
  max-height: 120px;
  overflow-y: auto;
  border: 1px solid #c9c9c9;
  border-radius: 7px;
}

.ql-editor.ql-blank::before {
  color: #6c757d !important;
  font-style: normal !important;
  left: 12px !important;
}

.ql-toolbar.ql-snow {
  border: none !important;
  padding: 4px 8px !important;
}

/* Message input wrapper */
.message-input-wrapper {
  position: relative;
}

/* Send button */
.btnSend {
  background-color: #0d6efd;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.btnSend:hover {
  background-color: #0b5ed7;
  color: white;
}

.btnSend:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

/* Upload button */
.uploadButton {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .quill-toolbar {
    flex-wrap: wrap;
  }

  .ql-editor {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Custom scrollbar for editor */
.ql-editor::-webkit-scrollbar {
  width: 6px;
}

.ql-editor::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.ql-editor::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.ql-editor::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.message-card {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 5px;
  display: flex;
  align-items: flex-start;
  max-width: 34%;
}

.message-card:hover {
  box-shadow: 0 0 7px #7c7c7c99;
  transform: translateY(-2px);
}

.status-icon {
  margin-right: 8px;
  font-size: 1.2em;
}
.bg-primary-gradient {
  background: linear-gradient(135deg, #4f46e5, #3459ff); /* blue gradient */
  color: #fff; /* text color */
}

.css-147d4ti-MuiDataGrid-root .MuiDataGrid-columnHeader, .css-147d4ti-MuiDataGrid-root .MuiDataGrid-cell {
    -webkit-tap-highlight-color: transparent;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}
/* Chat  End  *//* TimeTable.css */

.time-slots-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px;
    font-family: -apple-system, BlinkMacC, "Segoe UI", Roboto, sans-serif;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

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

.back-btn {
    background: #f1f3f5;
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.back-btn:hover {
    background: #e0e4e8;
}

.title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1f36;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* .btn-primary {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background: #2563eb;
} */

.btn-outline {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-outline:hover {
    background: #f3f4f6;
}

.btn-danger-outline {
    border: 1px solid #ef4444;
    color: #ef4444;
}

.btn-danger-outline:hover {
    background: #fef2f2;
}

.tab-toggle {
    display: flex;
    background: #f1f3f5;
    border-radius: 9999px;
    padding: 4px;
    margin-bottom: 24px;
    width: fit-content;
}

.tab-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    border-radius: 9999px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #1e40af;
}

.day-section {
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.day-header {
    padding: 16px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.day-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: #111827;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 17px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: .4s;
    border-radius: 24px;
    width: 37px;
    height: 17px;
}

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

input:checked+.slider {
    background-color: #000bd9a6;
}

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

.day-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slots-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.css-vycme6-MuiPickersInputBase-root-MuiPickersOutlinedInput-root {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    color: rgba(0, 0, 0, 0.87);
    cursor: text;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 4px;
    height: 35px;
}

.time-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #7373730d;
    color: #1e40af;
    padding: 6px;
    border-radius: 10px;
    font-size: 12px !important;
    border: 1px solid #4f4f4f2b;
}

.time-chip .delete-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.header-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-slot-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #3b82f6;
    background: none;
    border: 1px dashed #3b82f6;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 10px;
}

.add-slot-btn:hover {
    background: #eff6ff;
}

.btn-discard {
    background-color: #ff000030;
    color: #ff0000e4;

}

.header-btn {
    color: #6b7280;
    background: none;
    border: 1px solid #d1d5db;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
}

.unsaved-banner {
    margin-top: 24px;
    padding: 12px 20px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    color: #92400e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unsaved-banner button {
    margin-left: 12px;
}

.banner-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-chip-custom {
    position: relative;
    width: 150px;
}

/* Main blue pill */
.slot-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    min-width: 140px;
    height: 35px;
    border-radius: 8px;
    background: #e6edf9;
    border: 1px solid #c9d7f3;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slot-pill:hover {
    background: #d8e4ff;
    border-color: #8ea9ff;
}

.slot-time {
    font-size: 12px;
    font-weight: 600;
    color: #2f4b8f;
}

/* icons container */
.slot-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* edit icon */
.edit-icon {
    font-size: 13px;
    color: #2f4b8f;
    cursor: pointer;
}

.disabled-slot {
    opacity: 0.5;
    pointer-events: none;
    background-color: #f5f5f5;
}

/* delete icon */
.delete-icon {
    font-size: 14px;
    color: #5c6b85;
    cursor: pointer;
}

.delete-icon:hover {
    color: #ef4444;
}


/* ═══════════════════════════════════════════════════════════
   calender.css  —  Appointments Calendar (pixel-perfect)
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ─── ROOT WRAPPER ─────────────────────────────────────── */
.cal-wrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #F7F8FA;
  min-height: 100vh;
  padding: 24px 28px 40px;
  color: #111827;
  font-size: 13px;
}
/* ─── PAGE HEADER (title | stat cards) ─────────────────── */
.cal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.cal-page-title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
/* ─── STAT CARDS ─────────────────────────────────────── */
.cal-stat-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cal-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 18px 12px 14px;
  min-width: 148px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow 0.15s;
  height: 55px;
}
.cal-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.cal-stat-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cal-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-stat-label {
  font-size: 10.5px;
  color: #6B7280;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.4;
}
.cal-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
/* ─── FULLCALENDAR SHELL ──────────────────────────────── */
.cal-fc-wrapper {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  position: relative;
}
/* ─── FC Toolbar ────────────────────────────────────────── */
.fc .fc-toolbar.fc-header-toolbar {
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #E5E7EB !important;
  margin-bottom: 0 !important;
  border-radius: 14px 14px 0 0;
  flex-wrap: wrap;
  gap: 10px;
}
.fc .fc-toolbar-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.2px !important;
}
/* ─── All FC buttons base ─────────────────────────────── */
.fc .fc-button,
.fc .fc-button-primary {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  transition: background .13s, border-color .13s !important;
  outline: none !important;
}
.fc .fc-button:hover,
.fc .fc-button-primary:hover {
  background: #F9FAFB !important;
  border-color: #9CA3AF !important;
  color: #111827 !important;
}
.fc .fc-button:focus,
.fc .fc-button-primary:focus,
.fc .fc-button:active,
.fc .fc-button-primary:active {
  box-shadow: none !important;
  outline: none !important;
}
.fc .fc-today-button { padding: 6px 12px !important; }
.fc .fc-today-button:disabled { opacity: .45 !important; cursor: default !important; }
/* Prev / Next arrow buttons */
.fc .fc-prev-button,
.fc .fc-next-button {
  width: 27px !important;
  height: 27px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 5px;

}
/* ─── View toggle buttons (Month / Week / Day / Agenda) ─── */
.fc .fc-customMonth-button,
.fc .fc-customWeek-button,
.fc .fc-customDay-button,
.fc .fc-customAgenda-button {
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #D1D5DB !important;
  font-weight: 500 !important;
  font-size: 10px !important;
}
.fc .fc-customMonth-button:hover,
.fc .fc-customWeek-button:hover,
.fc .fc-customDay-button:hover,
.fc .fc-customAgenda-button:hover {
  background: #F3F4F6 !important;
}
/* Active view button */
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: #4F46E5 !important;
  color: #fff !important;
  border-color: #4F46E5 !important;
  font-weight: 600 !important;
  font-size: 10xp !important;
}
/* ─── Filter button ───────────────────────────────────── */
.fc .fc-filterBtn-button {
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #D1D5DB !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.fc .fc-filterBtn-button:hover {
  background: #F9FAFB !important;
  border-color: #9CA3AF !important;
}
/* ─── "+ New Appointment" button ─────────────────────── */
.fc .fc-newApptBtn-button {
  background: #4F46E5 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 1px 4px rgba(79,70,229,.25) !important;
}
.fc .fc-newApptBtn-button:hover {
  background: #4338CA !important;
  opacity: 1 !important;
}
/* ─── Column header row ───────────────────────────────── */
.fc .fc-col-header {
  background: #F9FAFB;
}
.fc .fc-col-header-cell {
  border-color: #E5E7EB !important;
  padding: 8px 0 !important;
}
.fc .fc-col-header-cell-cushion {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
  text-decoration: none !important;
}
/* ─── Day cells ─────────────────────────────────────────── */
.fc .fc-daygrid-day {
  border-color: #E5E7EB !important;
  vertical-align: top;
}
.fc .fc-daygrid-day-frame {
  min-height: 70px !important;
  padding: 4px 4px 4px !important;
}
.fc .fc-daygrid-day-number {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-decoration: none !important;
  padding: 5px 7px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  display: inline-block !important;
}
.fc .fc-daygrid-day-number:hover {
  background: #F3F4F6;
}
/* Other-month days */
.fc .fc-day-other .fc-daygrid-day-number {
  color: #C9CDD6 !important;
}
/* Today cell */
.fc .fc-day-today {
  background: #EEF2FF !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
  background: #4F46E5 !important;
  color: #fff !important;
  border-radius: 6px !important;
}
/* "Today" label badge */
.fc .fc-day-today .fc-daygrid-day-top {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-right: 6px !important;
}
.fc .fc-day-today .fc-daygrid-day-top::after {
  content: "Today";
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #4F46E5;
  border: 1px solid #C7D2FE;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.5;
  background: #fff;
}
/* ─── More link (+N more) ─────────────────────────────── */
.fc .fc-daygrid-more-link {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #4F46E5 !important;
  background: #EEF2FF !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  margin: 2px 4px 3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background .13s !important;
  cursor: pointer !important;
}
.fc .fc-daygrid-more-link:hover {
  background: #E0E7FF !important;
  color: #3730A3 !important;
}
/* Disable FullCalendar's built-in popover — we use our own */
.fc .fc-more-popover {
  display: none !important;
}
/* ─── Event harness & base ────────────────────────────── */
.fc .fc-daygrid-event-harness {
  margin: 2px 4px !important;
}
.fc .fc-daygrid-event {
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}
.fc-event,
.fc-event-main {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.fc .fc-event:focus,
.fc .fc-event:focus::after {
  box-shadow: none !important;
  outline: none !important;
}
/* ─── CUSTOM EVENT CARD ─────────────────────────────── */
.cal-event-card {
  border-radius: 6px;
  padding: 5px 7px 5px 9px;
  cursor: pointer;
  user-select: none;
  transition: filter .12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 58px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.cal-event-card:hover {
  filter: brightness(.94);
}
.cal-event-name{
  font-size: 11px;
  font-weight: 600;
}
.cal-event-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}
.cal-event-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  flex: 1;
  word-break: break-word;
  white-space: normal;
}
.cal-event-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.cal-event-client {
  font-size: 11px;
  color: #374151;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-event-mode {
  font-size: 10px;
  color: #6B7280;
  font-weight: 500;
  line-height: 1.3;
}
.cal-event-time,
.cal-event-date {
  font-size: 10.5px;
  color: #4B5563;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
}
/* ─── DAY POPUP ─────────────────────────────────────── */
.day-popup {
  position: fixed;
  width: 292px;
  background: #fff;
  border: 1px solid #E2E5EA;
  border-radius: 13px;
  box-shadow: 0 10px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.07);
  z-index: 9999;
  overflow: hidden;
  animation: dpIn .16s ease;
}
@keyframes dpIn {
  from { opacity: 0; transform: scale(.96) translateY(-5px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.day-popup-header {
  padding: 13px 15px 11px;
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  color: #fff;
}
.day-popup-date {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
  line-height: 1.2;
}
.day-popup-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.day-popup-meta span {
  font-size: 11px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
.day-popup-meta strong {
  color: #fff;
  font-weight: 600;
}
.day-popup-list {
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 350px;
  overflow-y: auto;
}
.day-popup-list::-webkit-scrollbar { width: 3px; }
.day-popup-list::-webkit-scrollbar-track { background: transparent; }
.day-popup-list::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
.day-popup-item {
  border-radius: 8px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: default;
  transition: filter .12s;
}
.day-popup-item:hover { filter: brightness(.97); }
.day-popup-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.day-popup-item-info {
  flex: 1;
  min-width: 0;
}
.day-popup-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.day-popup-item-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-popup-item-client {
  font-size: 10.5px;
  color: #4B5563;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-popup-item-time {
  font-size: 10.5px;
  color: #6B7280;
  font-weight: 500;
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}
.day-popup-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.day-popup-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.dp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #374151;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.5;
}
.dp-action-btn:hover {
  background: #fff;
  border-color: #4F46E5;
  color: #4F46E5;
}
/* ─── Time grid (week / day views) ───────────────────── */
.fc .fc-timegrid-slot {
  height: 34px !important;
  border-color: #F3F4F6 !important;
}
.fc .fc-timegrid-slot-label {
  font-size: 10.5px !important;
  color: #9CA3AF !important;
  font-weight: 500 !important;
  padding: 0 6px !important;
}
/* ─── List / Agenda view ──────────────────────────────── */
.fc .fc-list-event { cursor: pointer; }
.fc .fc-list-event:hover td { background: #F5F3FF !important; }
.fc .fc-list-day-cushion {
  background: #F9FAFB !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  padding: 8px 14px !important;
}
.fc .fc-list-event-dot { border-color: #4F46E5 !important; }
/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .cal-stat-cards { gap: 8px; }
  .cal-stat-card  { min-width: 130px; }
}
@media (max-width: 768px) {
  .cal-wrapper    { padding: 14px 14px 28px; }
  .cal-page-header { flex-direction: column; align-items: flex-start; }
  .cal-stat-cards  { gap: 8px; }
  .cal-stat-card   { min-width: 120px; }
  .cal-page-title  { font-size: 18px; }
  .day-popup {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    max-height: 65vh;
  }
}
/* ══════════════════════════════════════════════════════════
   VIEW APPOINTMENT MODAL  (vm-*)
   ══════════════════════════════════════════════════════════ */
.vm-dialog .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  background: transparent;
}
.vm-modal {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #111827;
  position: relative;
}
.vm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #E5E7EB;
  background: #F9FAFB;
}
.vm-header-left { flex: 1; }
.vm-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.vm-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
  color: #111827;
}
.vm-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-status-badge,
.vm-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
}
.vm-close-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .13s;
}
.vm-close-btn:hover { background: #F3F4F6; }
.vm-body {
  padding: 24px;
  max-height: 68vh;
  overflow-y: auto;
}
.vm-datetime-row {
  display: flex;
  align-items: stretch;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.vm-datetime-box {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vm-datetime-sep {
  width: 1px;
  background: #E5E7EB;
  align-self: stretch;
  margin: 8px 0;
}
.vm-dt-label {
  font-size: 12px;
  color: #6B7280;
  margin: 0 0 4px;
  font-weight: 500;
}
.vm-dt-value {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.vm-section { margin-bottom: 28px; }
.vm-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 12px;
}
.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.vm-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  transition: all .13s;
}
.vm-info-card:hover { background: #F3F4F6; border-color: #D1D5DB; }
.vm-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vm-info-body  { flex: 1; min-width: 0; }
.vm-info-label {
  font-size: 11.5px;
  color: #6B7280;
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
}
.vm-info-value {
  font-size: 13.5px;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
}
.vm-info-link {
  font-size: 13.5px;
  color: #3B82F6;
  font-weight: 500;
  text-decoration: none;
}
.vm-info-link:hover { text-decoration: underline; }
.vm-notes-box {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  margin-bottom: 12px;
}
.vm-notes-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vm-notes-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 4px;
}
.vm-notes-text {
  font-size: 13.5px;
  color: #4B5563;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}
.vm-audit-row {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
}
.vm-audit-box  { flex: 1; }
.vm-audit-label {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}
.vm-audit-val {
  font-size: 13.5px;
  font-weight: 500;
  color: #111827;
}
.vm-footer {
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  background: #F9FAFB;
  text-align: right;
}
.vm-btn-close {
  background: #6B7280;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background .13s;
}
.vm-btn-close:hover { background: #4B5563; }
.vm-body::-webkit-scrollbar { width: 6px; }
.vm-body::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
.vm-body::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
@media (max-width: 576px) {
  .vm-header { padding: 16px; }
  .vm-body   { padding: 16px; }
  .vm-datetime-row  { flex-direction: column; }
  .vm-datetime-sep  { display: none; }
  .vm-datetime-box  { border-bottom: 1px solid #E5E7EB; }
  .vm-datetime-box:last-child { border-bottom: none; }
}
/* ══════════════════════════════════════════════════════════
   CALENDAR FILTER DRAWER  (cf-*)
   Right-side slide-in panel with blurred backdrop
   ══════════════════════════════════════════════════════════ */
/* ─── Animations ─────────────────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cf-panel {
  animation: slideInRight 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.cf-backdrop {
  animation: fadeInBackdrop 0.22s ease forwards;
}
/* ─── Shared field control (inputs + selects) ─────────── */
.cf-field-control {
  width: 100%;
  height: 40px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #374151;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cf-field-control:hover {
  border-color: #A78BFA;
}
.cf-field-control:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
/* ─── Text / date inputs ─────────────────────────────── */
.cf-input {
  padding: 0 12px;
}
.cf-input::placeholder {
  color: #9CA3AF;
  font-size: 12.5px;
}
/* ─── Select dropdowns ───────────────────────────────── */
.cf-select {
  padding: 0 36px 0 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* ─── Field label ────────────────────────────────────── */
.cf-label {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, sans-serif;
  color: #6B7280;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
  display: block;
}
/* ─── Section title ──────────────────────────────────── */
.cf-section-title {
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, sans-serif;
  color: #9CA3AF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
/* ─── Divider between sections ───────────────────────── */
.cf-divider {
  height: 1px;
  background: #F3F4F6;
  margin: 20px 0;
}
/* ─── Active filters badge (inside header) ───────────── */
.cf-active-badge {
  display: inline-block;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 2px 8px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 8px;
}
/* ─── Header close button ────────────────────────────── */
.cf-close-btn {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s;
}
.cf-close-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* ─── Footer — Clear All button ──────────────────────── */
.cf-clear-btn {
  flex: 1;
  height: 44px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cf-clear-btn:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}
/* ─── Footer — Apply Filters button ─────────────────── */
.cf-apply-btn {
  flex: 2;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cf-apply-btn:hover {
  opacity: 0.88;
}
/* ─── Date picker calendar icon ──────────────────────── */
input[type="date"].cf-field-control::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}
input[type="date"].cf-field-control::-webkit-calendar-picker-indicator:hover {
  opacity: 0.85;
}
/* ─── Drawer body scrollbar ──────────────────────────── */
.cf-panel .cf-body::-webkit-scrollbar { width: 4px; }
.cf-panel .cf-body::-webkit-scrollbar-track { background: transparent; }
.cf-panel .cf-body::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
.cf-panel .cf-body::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
/* ─── Responsive — drawer goes full width on mobile ─── */
@media (max-width: 520px) {
  .cf-panel {
    width: 100vw !important;
  }
}
.awsm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 24px;
}

.awsm-modal {
    width: 560px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.awsm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #ececec;
}

.awsm-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
}

.awsm-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.awsm-close-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.awsm-close-btn:hover {
    background: #f3f4f6;
    color: #1a1a1a;
}

.awsm-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.awsm-field {
    display: flex;
    flex-direction: column;
}

.awsm-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.awsm-required {
    color: #dc2626;
}

.awsm-hint {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.awsm-input,
.awsm-textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1a1a1a;
    background: #ffffff;
    outline: none;
    font-family: inherit;
}

.awsm-input {
    height: 36px;
}

.awsm-input:focus,
.awsm-textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.awsm-textarea {
    resize: vertical;
    line-height: 1.5;
}

/* Custom icon select */
.awsm-select {
    position: relative;
}

.awsm-select-trigger {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a1a;
}

.awsm-select-trigger:hover {
    border-color: #9ca3af;
}

.awsm-select-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.awsm-chevron {
    transition: transform 0.15s ease;
    color: #6b7280;
}

.awsm-chevron.open {
    transform: rotate(180deg);
}

.awsm-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 20;
    overflow: hidden;
}

.awsm-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
}

.awsm-select-option:hover {
    background: #f3f4f6;
}

.awsm-select-option.active {
    background: #eef2ff;
    color: #4338ca;
}

/* Message / content field */
.awsm-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.awsm-message-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.awsm-link-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: #4f46e5;
    cursor: pointer;
    padding: 0;
}

.awsm-link-btn:hover {
    text-decoration: underline;
}

.awsm-link-btn:disabled {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: none;
}

.awsm-spin-icon {
    animation: awsm-spin 0.8s linear infinite;
}

@keyframes awsm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Footer */
.awsm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #ececec;
}

.awsm-btn-outline {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.awsm-btn-outline:hover {
    background: #f9fafb;
}

.awsm-btn-primary {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: none;
    background: #4f46e5;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.awsm-btn-primary:hover {
    background: #4338ca;
}

/* Voice capture popup — mic, waveform, converted-text card, send button */
.vc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 24px;
}

.vc-modal {
    width: 420px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.vc-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vc-close:hover {
    background: #e5e7eb;
}

.vc-title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 20px;
}

.vc-card {
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.vc-status {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #4f46e5;
    text-align: center;
}

.vc-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
}

.vc-wave-bar {
    width: 3px;
    height: 10px;
    border-radius: 2px;
    background: #c7c9f5;
}

.vc-wave-animate {
    background: #4f46e5;
    animation: vc-wave-pulse 1s ease-in-out infinite;
}

@keyframes vc-wave-pulse {

    0%,
    100% {
        height: 10px;
    }

    50% {
        height: 28px;
    }
}

.vc-mic {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vc-mic:hover {
    filter: brightness(1.05);
}

.vc-text-card {
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.vc-text-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
}

.vc-processing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.vc-textarea {
    width: 100%;
    min-height: 90px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #1a1a1a;
    resize: vertical;
    outline: none;
    font-family: inherit;
}

.vc-textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.vc-error {
    margin-top: 8px;
    font-size: 12px;
    color: #dc2626;
}

.vc-saved {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #4f46e5;
}

.vc-send {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(90deg, #6366f1, #3b82f6);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vc-send:hover {
    filter: brightness(1.05);
}

.vc-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.awsm-processing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #eef2ff;
}

.awsm-processing-text {
    font-size: 13px;
    color: #4338ca;
    font-weight: 500;
}

.awsm-wave,
.recording-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 16px;
}

.awsm-wave span,
.recording-wave span {
    display: inline-block;
    width: 2px;
    height: 6px;
    border-radius: 1px;
    background: #4f46e5;
    animation: awsm-wave-pulse 0.9s ease-in-out infinite;
}

.recording-wave span {
    background: #dc2626;
}

.awsm-wave span:nth-child(2),
.recording-wave span:nth-child(2) {
    animation-delay: 0.1s;
}

.awsm-wave span:nth-child(3),
.recording-wave span:nth-child(3) {
    animation-delay: 0.2s;
}

.awsm-wave span:nth-child(4),
.recording-wave span:nth-child(4) {
    animation-delay: 0.3s;
}

.awsm-wave span:nth-child(5),
.recording-wave span:nth-child(5) {
    animation-delay: 0.4s;
}

.awsm-wave span:nth-child(6) {
    animation-delay: 0.5s;
}

.awsm-wave span:nth-child(7) {
    animation-delay: 0.6s;
}

.awsm-wave span:nth-child(8) {
    animation-delay: 0.7s;
}

@keyframes awsm-wave-pulse {

    0%,
    100% {
        height: 6px;
    }

    50% {
        height: 16px;
    }
}


.voiceModalDialog .modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
}

.voiceModal {
    padding: 14px;
    position: relative;
    background: #fff;
    border-radius: 24px;
}

.voiceClose {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f3f4f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.voiceClose:hover {
    background: #EDE9FE;
    color: #7b3ff2;
}

.voiceTitle {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
    color: #111110;
}

.voiceCard {
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
    margin-top: 12px;
}

.voiceListening {
    color: #7b3ff2 !important;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.voiceWave {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.waveBar {
    width: 4px;
    height: 12px;
    border-radius: 10px;
    background: linear-gradient(to top, #7b3ff2, #2d8cff);
}

.waveAnimate {
    animation: waveMove 0.9s infinite ease-in-out;
}

.waveBar:nth-child(odd) {
    animation-duration: .8s;
}

.waveBar:nth-child(even) {
    animation-duration: 1.1s;
}

.waveBar:nth-child(3n) {
    animation-duration: 1.4s;
}

.waveBar:nth-child(4n) {
    animation-duration: 1.2s;
}

.waveBar:nth-child(5n) {
    animation-duration: .95s;
}

@keyframes waveMove {
    0% {
        height: 10px;
    }

    20% {
        height: 45px;
    }

    40% {
        height: 20px;
    }

    60% {
        height: 65px;
    }

    80% {
        height: 35px;
    }

    100% {
        height: 10px;
    }
}

.voiceMic {
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    margin: 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(90deg, #7b3ff2, #2d8cff);
    box-shadow: 0 5px 15px rgba(123, 63, 242, .35);
    cursor: pointer;
    transition: all 0.2s;
}

.voiceMic:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(123, 63, 242, .45);
}

.voiceMic:active {
    transform: scale(0.95);
}

.voiceHint {
    color: #777;
    font-size: 12px;
    margin: 0;
}

.voiceTextCard {
    margin-top: 12px;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 12px;
}

.voiceHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.voiceTextarea {
    width: 100%;
    min-height: 70px;
    border: 1px solid #ececec;
    border-radius: 10px;
    resize: none;
    padding: 8px 10px;
    outline: none;
    font-size: 14px;
    background-color: white;
    transition: border-color 0.2s;
}

.voiceTextarea:focus {
    border-color: #7b3ff2;
    box-shadow: 0 0 0 3px rgba(123, 63, 242, 0.1);
}

.voiceSaved {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5a5a5a;
    font-size: 12px;
}

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

.sendBtn {
    flex: 1;
    height: 42px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
    width: 100%;
    min-height: 42px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #7b3ff2, #2d8cff);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(123, 63, 242, 0.25);
}

.sendBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(123, 63, 242, 0.35);
}

.sendBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.sendBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.apiError {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #EDE9FE;
    color: #7b3ff2;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #C4B5FD;
}

.spinIcon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 576px) {
    .voiceModal {
        padding: 12px;
    }

    .voiceActions {
        flex-direction: column;
    }

    .voiceWave {
        gap: 2px;
    }

    .waveBar {
        width: 3px;
    }

    .voiceTitle {
        font-size: 18px;
    }

    .voiceListening {
        font-size: 16px;
    }
}

/* Quill editor */
.awsm-quill-editor {
    margin-bottom: 8px;
}

.awsm-quill-editor .ql-toolbar {
    border-radius: 8px 8px 0 0;
}

.awsm-quill-editor .ql-container {
    min-height: 110px;
    border-radius: 0 0 8px 8px;
}

.awsm-quill-editor .ql-editor {
    min-height: 110px;
}

/* Hint below editor */
.awsm-hint {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: #6b7280;
}

.awsm-field {
    display: flex;
    flex-direction: column;
}

.awsm-quill-editor {
    width: 100%;
    flex-shrink: 0;
}

/* =========================================================
   ATTACHMENT
   ========================================================= */

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: all 0.2s ease;
}

.attachment-item:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.attachment-file-info {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    gap: 9px;
}

.attachment-file-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f3f4f6;
    font-size: 15px;
}

.attachment-file-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.attachment-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 7px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.attachment-remove-btn:hover:not(:disabled) {
    background: #fef2f2;
    color: #b91c1c;
}

.attachment-remove-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.attachment-upload-loading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 500;
}

.attachment-error {
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 6px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 12px;
}

.spinIcon {
    animation: attachmentSpin 1s linear infinite;
}

@keyframes attachmentSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 576px) {
    .attachment-item {
        align-items: flex-start;
    }

    .attachment-remove-btn span {
        display: none;
    }

    .attachment-remove-btn {
        width: 30px;
        height: 30px;
    }

    .attachment-file-name {
        max-width: 180px;
    }
}/* ---- Lead info strip ---- */
.clv-lead-strip-card {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 18px 24px;
  flex-wrap: wrap;
}

.clv-lead-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clv-lead-strip-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #f4f3f8;
  color: #8b8a9a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clv-lead-strip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clv-lead-strip-text span {
  font-size: 12px;
  color: #a09fb0;
}

.clv-lead-strip-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #1e1b2e;
}

.clv-lead-strip-text a {
  font-size: 14px;
  font-weight: 600;
  color: #6d5cf1;
  text-decoration: none;
}

/* ---- Two-column main layout ---- */
.clv-main-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 992px) {
  .clv-main-grid {
    grid-template-columns: 1fr;
  }
}

.clv-status-card {
  padding: 20px 24px;
}

/* ---- Workflow Steps card ---- */
.clv-workflow-steps-card {
  padding: 20px 24px;
}

.clv-workflow-steps-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.clv-workflow-steps-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e1b2e;
  margin: 0;
}

.clv-workflow-steps-subtitle {
  font-size: 12px;
  color: #a09fb0;
}

.clv-add-step-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #d9d4fb;
  background: #f4f2ff;
  color: #6d5cf1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.clv-add-step-btn:hover {
  background: #ece8ff;
}

.clv-workflow-steps-list {
  display: flex;
  flex-direction: column;
}

.clv-workflow-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f0f6;
}

.clv-workflow-step-row:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.clv-workflow-step-number {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f1f0f6;
  color: #6b6a7a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.clv-workflow-step-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clv-workflow-step-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.clv-workflow-step-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clv-workflow-step-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e1b2e;
}

.clv-workflow-step-channel-badge {
  font-size: 11px;
  font-weight: 500;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 10px;
}

.clv-workflow-step-template {
  font-size: 12px;
  color: #a09fb0;
}

.clv-workflow-step-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.clv-workflow-step-delay {
  font-size: 12px;
  color: #8b8a9a;
  white-space: nowrap;
}

.clv-workflow-step-action {
  background: none;
  border: none;
  color: #a09fb0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.clv-workflow-step-action:hover {
  color: #6d5cf1;
}

.clv-workflow-step-action-danger:hover {
  color: #dc2626;
}

.clv-timeline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.clv-tl-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #e2e2e2;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.clv-tl-eye-btn:hover {
  background: #f0f4ff;
  color: #3b5bfd;
  border-color: #c9d6ff;
}

.clv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.clv-modal-card {
  background: #fff;
  border-radius: 10px;
  width: 640px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.clv-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
}

.clv-modal-title {
  margin: 0;
  font-size: 15px;
}

.clv-modal-subtext {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.clv-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #666;
  margin-top: 6px;
  padding-right: 3px;
}

.clv-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}

.clv-email-preview-content {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.clv-lead-strip-card {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px 24px;
  flex-wrap: wrap;
}

.clv-back-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.clv-back-btn:hover {
  background: #f5f5f5;
  color: #6d5cf1;
  border-color: #d9d4fb;
}

.clv-timeline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 170px;      /* fixed width */
  flex-shrink: 0;
}
.clv-tl-eye-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}

.clv-badge {
  min-width: 72px;
  padding: 0 12px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.clv-timeline-main {
  display: grid;
  grid-template-columns: 1fr 170px;
  align-items: center;
  column-gap: 16px;
}

.clv-timeline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.clv-workflow-step-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #6b7280;
  background: #fff;
  flex-shrink: 0;
}

.clv-workflow-step-number.completed {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

.clv-workflow-step-number.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.clv-timeline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.clv-timeline-menu {
  position: relative;
}

.clv-tl-menu-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.clv-tl-menu-dropdown {
  position: absolute;
  right: 0;
  top: 38px;
  min-width: 120px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  z-index: 1000;
}

.clv-tl-menu-dropdown button {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.clv-tl-menu-dropdown button:hover {
  background: #f5f5f5;
}/* ===========================================================
   DynamicDocumentViewer.module.css
   Self-contained theme (falls back gracefully if the host app
   already defines --primary-purple-* variables globally).
   =========================================================== */

._vpage_17r9u_13 {
  --dv-purple-50: #f5f4ff;
  --dv-purple-100: #ece9ff;
  --dv-purple-300: #a89bff;
  --dv-purple-400: #6c5ce7;
  --dv-purple-500: #5b3fe0;
  --dv-purple-600: #4a2fc9;
  --dv-ink-900: #1f2430;
  --dv-ink-700: #4b5266;
  --dv-ink-500: #7d8497;
  --dv-ink-300: #c3c8d4;
  --dv-border: #e7e8f0;
  --dv-bg: #f4f5fb;
  --dv-danger: #e5484d;
  --dv-success: #12a454;

  min-height: 100vh;
  background: var(--dv-bg);
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--dv-ink-900);
  padding-bottom: 48px;
}

._centerMessage_17r9u_69 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  color: var(--dv-ink-500, #7d8497);
  font-size: 14px;
}

/* ---------------- sticky header bar ---------------- */

._vpageHdr_17r9u_91 {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 10px;
  background: #ffffff;
  border-bottom: 1px solid var(--dv-border);
  box-shadow: 0 1px 2px rgba(20, 20, 43, 0.03);
}

._vpageHdrLeft_17r9u_119 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._vpageBack_17r9u_131 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid var(--dv-border);
  background: #fff;
  color: var(--dv-ink-700);
  cursor: pointer;
  transition: background 0.15s ease;
}

._vpageBack_17r9u_131:hover {
  background: var(--dv-purple-50);
  color: var(--dv-purple-500);
}

._eyebrow_17r9u_169 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dv-ink-500);
  text-transform: uppercase;
}

._docNumber_17r9u_187 {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dv-ink-900);
}

._vpageHdrActions_17r9u_201 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._dirtyBadge_17r9u_215 {
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 5px 10px;
  border-radius: 999px;
  margin-right: 4px;
}

/* buttons */
._vbtnOutline_17r9u_239,
._vbtnPurpleGhost_17r9u_241,
._vbtnPrimary_17r9u_243,
._vbtnGhostDanger_17r9u_245 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 7px;
  padding: 6px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}

._vbtnOutline_17r9u_239:disabled,
._vbtnPurpleGhost_17r9u_241:disabled,
._vbtnPrimary_17r9u_243:disabled,
._vbtnGhostDanger_17r9u_245:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._vbtnOutline_17r9u_239 {
  background: #fff;
  border-color: var(--dv-border);
  color: var(--dv-ink-700);
}

._vbtnOutline_17r9u_239:hover:not(:disabled) {
  border-color: var(--dv-purple-300);
  color: var(--dv-purple-500);
}

._vbtnPurpleGhost_17r9u_241 {
  background: var(--dv-purple-50);
  border-color: var(--dv-purple-100);
  color: var(--dv-purple-500);
}

._vbtnPurpleGhost_17r9u_241:hover:not(:disabled) {
  background: var(--dv-purple-100);
}

._vbtnPrimary_17r9u_243 {
  background: var(--dv-purple-500);
  color: #fff;
}

._vbtnPrimary_17r9u_243:hover:not(:disabled) {
  background: var(--dv-purple-600);
}

._vbtnGhostDanger_17r9u_245 {
  background: #fff;
  border-color: var(--dv-border);
  color: var(--dv-danger);
}

._vbtnGhostDanger_17r9u_245:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
}

/* ---------------- layout ---------------- */

._vpageLayout_17r9u_375 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 22px 0;
  gap: 14px;
  display: block;
}

._vpageLayout_17r9u_375 > * {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  ._vpageLayout_17r9u_375 {
    grid-template-columns: 1fr;
  }
}

._vpageMain_17r9u_413 {
  min-width: 0;
}

._vpageSide_17r9u_421 {
  min-width: 0;
}

._docWrapper_17r9u_429 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------- cards ---------------- */

._vcard_17r9u_445 {
  background: #fff;
  border: 1px solid #d9dee7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

._vcardHdr_17r9u_461 {
  padding: 12px 20px;
  border-bottom: 1px solid var(--dv-border);
}

._vcardTitle_17r9u_471 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dv-ink-900);
}

._vcardIcon_17r9u_489 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--dv-purple-100);
  color: var(--dv-purple-500);
}

._vcardBody_17r9u_511 {
  padding: 5px 14px;
}

._vcardBodyFlush_17r9u_519 {
  padding: 0;
}

._vgrid_17r9u_527 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

@media (max-width: 600px) {
  ._vgrid_17r9u_527 {
    grid-template-columns: 1fr;
  }
}

._gridFull_17r9u_551 {
  grid-column: 1 / -1;
}

/* ---------------- header card content ---------------- */

._headerRow_17r9u_563 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

._headerLeft_17r9u_577 {
  flex: 1 1 320px;
  min-width: 260px;
}

._docTitle_17r9u_587 {
  margin: 0 0 4px;
  font-size: 28px !important;
  font-weight: 800;
  color: var(--dv-purple-500);
  letter-spacing: -0.02em;
}

._docNumberInline_17r9u_603 {
  font-size: 18px !important;
  font-weight: 700;
  color: black;
}

._field_17r9u_615 {
  margin-top: 18px;
}

._fLabel_17r9u_623 {
  margin: 0 0 4px;
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5d5d5d;
}

._fVal_17r9u_641 {
  font-size: 12px !important;
  /* font-weight: 500; */
  color: var(--dv-ink-900);
}

._fValBold_17r9u_653 {
  margin: 2px 0 6px;
  font-size: 12px !important;
  font-weight: 500;
  color: #333333;
}

._fValSmall_17r9u_667 {
  margin: 4px 0;
  font-size: 12px !important;
  color: #191919;
  line-height: 1.45;
  font-weight: 400;
}

._headerRight_17r9u_683 {
  flex: 0 0 260px;
  text-align: right;
}

._companyLogo_17r9u_693 {
  max-height: 46px;
  margin-bottom: 8px;
}

._companyName_17r9u_703 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 12px !important;
}

._companyAddress_17r9u_715 {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--dv-ink-500);
  line-height: 1.5;
}
._companyAddress_17r9u_715 span {
  font-size: 13px !important;
  /* line-height: 2; */
  color: #636164;
}
._dateBlock_17r9u_737 {
  margin-top: 8px;
}

._dateRow_17r9u_745 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 13px;
}

._dateLabel_17r9u_761 {
  min-width: 100px;
  /* text-align: left; */
  color: #636164;
  font-weight: 500;
  font-size: 12px !important;
}

._dateVal_17r9u_777 {
  color: var(--dv-ink-900);
  font-weight: 600;
}

/* ---------------- items table ---------------- */

._tableResponsive_17r9u_791 {
  overflow-x: auto;
}

._table_17r9u_791 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
._taxBadge_17r9u_809 ._editValue_17r9u_809 {
  display: inline-block;
  padding: 3px 8px;
  background: #dbeafe;
  color: #0369a1;
  border-radius: 4px;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;
}

._discountBadge_17r9u_831 ._editValue_17r9u_809 {
  display: inline-block;
  padding: 3px 8px;
  background: #fef3c7;
  color: #a16207;
  border-radius: 4px;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;
}

._table_17r9u_791 thead th {
  background: #f1f1f1;
  color: black;
  font-size: 12px;
  font-weight: 700;
  /* text-transform: uppercase; */
  letter-spacing: 0.03em;
  text-align: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--dv-border);
  white-space: nowrap;
}

._table_17r9u_791 tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--dv-border);
  color: var(--dv-ink-900);
  vertical-align: middle;
}

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

._emptyCell_17r9u_901 {
  text-align: center;
  padding: 28px;
  color: var(--dv-ink-500);
}

._bold_17r9u_913 {
  font-weight: 600;
  font-size: 11px !important;
}

._align-center_17r9u_923 {
  text-align: start;
}

._align-right_17r9u_931 {
  text-align: start;
}

/* ---------------- terms + totals ---------------- */

._termsTotalsRow_17r9u_943 {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

._termsCol_17r9u_957 {
  flex: 1 1 280px;
  min-width: 240px;
}

._termsText_17r9u_967 {
  font-size: 13px;
  color: var(--dv-ink-700);
  line-height: 1.6;
}

._totalsCol_17r9u_979 {
  flex: 0 0 280px;
}

._totalsSummary_17r9u_987 {
  min-width: 240px;
}

._totalsRow_17r9u_995 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 13px;
}

._totalsRowGrand_17r9u_1009 {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed var(--dv-border);
  font-weight: 700;
  font-size: 15px;
}
._totalsRowGrand_17r9u_1009 span {
  font-size: 1.25rem;
}

._grandTotal_17r9u_1035 {
  color: var(--dv-purple-500);
}

/* ---------------- payment advice ---------------- */

._paymentRow_17r9u_1047 {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

._paymentDetails_17r9u_1061 {
  flex: 1 1 260px;
  min-width: 240px;
}

._paymentLine_17r9u_1071 {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

._paymentLine_17r9u_1071 ._fLabel_17r9u_623 {
  min-width: 130px;
  margin: 0;
}

/* ---------------- editable field + hover pencil ---------------- */

._editWrap_17r9u_1099 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

._editValue_17r9u_809 {
  min-width: 0;
  word-break: break-word;
  font-size: 12px !important;
  color: #383838;
  font-weight: 200;
}

._editIconBtn_17r9u_1131 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--dv-purple-100);
  background: var(--dv-purple-50);
  color: var(--dv-purple-500);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-2px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    background 0.12s ease;
  flex-shrink: 0;
}

._editWrap_17r9u_1099:hover ._editIconBtn_17r9u_1131,
._editIconBtn_17r9u_1131:focus-visible {
  opacity: 1;
  transform: translateX(0);
}

._editIconBtn_17r9u_1131:hover {
  background: var(--dv-purple-100);
}

/* popover / small edit modal */

._popoverOverlay_17r9u_1195 {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 20, 43, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: _dvFadeIn_17r9u_1 0.12s ease;
}

@keyframes _dvFadeIn_17r9u_1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

._popover_17r9u_1195 {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(20, 20, 43, 0.18);
  border: 1px solid var(--dv-border);
  padding: 16px;
  animation: _dvPopIn_17r9u_1 0.14s ease;
}

@keyframes _dvPopIn_17r9u_1 {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

._popoverHeader_17r9u_1285 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

._popoverLabel_17r9u_1299 {
  font-size: 12px;
  font-weight: 700;
  color: var(--dv-ink-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

._popoverClose_17r9u_1315 {
  background: none;
  border: none;
  color: var(--dv-ink-300);
  cursor: pointer;
  display: flex;
}

._popoverClose_17r9u_1315:hover {
  color: var(--dv-danger);
}

._popoverInput_17r9u_1339 {
  width: 100%;
  border: 1px solid var(--dv-border);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--dv-ink-900);
  outline: none;
  resize: vertical;
  transition: border-color 0.12s ease;
}

._popoverInput_17r9u_1339:focus {
  border-color: var(--dv-purple-400);
  box-shadow: 0 0 0 3px var(--dv-purple-100);
}

._popoverActions_17r9u_1375 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

._btnCancel_17r9u_1389,
._btnSaveDraft_17r9u_1391 {
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  border: 1px solid transparent;
}

._btnCancel_17r9u_1389 {
  background: #fff;
  border-color: var(--dv-border);
  color: var(--dv-ink-700);
}

._btnCancel_17r9u_1389:hover {
  background: #f4f5fb;
}

._btnSaveDraft_17r9u_1391 {
  background: var(--dv-purple-500);
  color: #fff;
}

._btnSaveDraft_17r9u_1391:hover {
  background: var(--dv-purple-600);
}

/* ---------------- skeleton loading ---------------- */

._skeletonLine_17r9u_1451 {
  background: linear-gradient(90deg, #eceef4 25%, #f6f7fb 37%, #eceef4 63%);
  background-size: 400% 100%;
  animation: _dvShimmer_17r9u_1 1.4s ease infinite;
  border-radius: 6px;
  margin-bottom: 6px;
}

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

  100% {
    background-position: 0 50%;
  }
}
._totalsRowGrand_17r9u_1009 {
  border-top: 1px dashed #d9d9d9;
  margin-top: 10px;
  padding-top: 12px;
}

._grandTotal_17r9u_1035 {
  color: #4f46e5;
  font-size: 1.25rem;
  font-weight: 700;
}
/* ==========================================
   Mobile Responsive
========================================== */

@media (max-width: 768px) {
  /* Page */
  ._vpage_17r9u_13 {
    padding-bottom: 20px;
  }

  ._vpageLayout_17r9u_375 {
    padding: 10px;
  }

  /* Header */
  ._vpageHdr_17r9u_91 {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
  }

  ._vpageHdrLeft_17r9u_119 {
    width: 100%;
  }

  ._vpageHdrActions_17r9u_201 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  ._vpageHdrActions_17r9u_201 button {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  /* Cards */
  ._vcardBody_17r9u_511 {
    padding: 12px;
  }

  /* Invoice Header */
  ._headerRow_17r9u_563 {
    flex-direction: column;
    gap: 20px;
  }

  ._headerLeft_17r9u_577,
  ._headerRight_17r9u_683 {
    width: 100%;
    min-width: 100%;
    flex: 100%;
  }

  ._headerRight_17r9u_683 {
    text-align: left;
  }

  ._companyLogo_17r9u_693 {
    max-width: 140px;
    height: auto;
  }

  ._docTitle_17r9u_587 {
    font-size: 34px !important;
  }

  ._docNumberInline_17r9u_603 {
    font-size: 22px !important;
  }

  /* Dates */
  ._dateRow_17r9u_745 {
    justify-content: flex-start;
    gap: 8px;
  }

  ._dateLabel_17r9u_761 {
    min-width: 90px;
  }

  /* Table */
  ._tableResponsive_17r9u_791 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  ._table_17r9u_791 {
    min-width: 700px;
  }

  ._table_17r9u_791 th,
  ._table_17r9u_791 td {
    padding: 10px;
    white-space: nowrap;
  }

  /* Terms + Totals */
  ._termsTotalsRow_17r9u_943 {
    flex-direction: column;
    gap: 20px;
  }

  ._termsCol_17r9u_957,
  ._totalsCol_17r9u_979 {
    width: 100%;
    min-width: 100%;
  }

  ._totalsSummary_17r9u_987 {
    width: 100%;
    min-width: unset;
  }

  /* Payment */
  ._paymentCard_17r9u_1741 ._row_17r9u_1741 {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  ._paymentCard_17r9u_1741 ._col-6_17r9u_1753 {
    width: 100%;
  }

  /* Text */
  ._fLabel_17r9u_623 {
    font-size: 11px !important;
  }

  ._fVal_17r9u_641,
  ._fValBold_17r9u_653,
  ._fValSmall_17r9u_667 {
    font-size: 13px !important;
  }
}
@media (max-width: 768px) {
  ._docTitle_17r9u_587 {
    font-size: 18px !important; /* Reduce from 28px */
    line-height: 1.2;
    margin-bottom: 4px;
  }

  ._docNumberInline_17r9u_603 {
    font-size: 14px !important; /* Reduce invoice/quote number */
  }
  /* QUOTE */
  ._eyebrow_17r9u_169 {
    font-size: 10px;
    margin-bottom: 0;
    line-height: 1;
  }
  ._docNumber_17r9u_187 {
    font-size: 13px !important;
  }
  ._vpageHdr_17r9u_91 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 14px;
  }

  ._vpageHdrLeft_17r9u_119 {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  ._vpageHdrActions_17r9u_201 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  ._dirtyBadge_17r9u_215 {
    grid-column: 1 / -1;
    text-align: center;
    width: 100%;
    margin: 0;
  }

  ._vbtnOutline_17r9u_239,
  ._vbtnPurpleGhost_17r9u_241,
  ._vbtnGhostDanger_17r9u_245,
  ._vbtnPrimary_17r9u_243 {
    width: 100%;
    height: 30px;
    min-height: 30px;
    justify-content: center;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 5px;
  }

  ._docNumber_17r9u_187 {
    font-size: 20px;
    line-height: 1.2;
  }

  ._eyebrow_17r9u_169 {
    font-size: 11px;
  }
}
/* ============================================================
   CampaignMainView.module.css
   Uses the app's existing CSS variable theme (data-theme="light")
   ============================================================ */

._cmvPage_1e7ks_11 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px;
}

/* ---------------- Header card ---------------- */
._cmvHeaderCard_1e7ks_27 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px 24px;
}

._cmvIconBox_1e7ks_47 {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

._cmvHeaderMain_1e7ks_71 {
  flex: 1;
  min-width: 0;
}

._cmvTitleRow_1e7ks_81 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._cmvTitle_1e7ks_81 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

._cmvDescription_1e7ks_109 {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--accent-color);
}

._cmvMetaRow_1e7ks_121 {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
  flex-wrap: wrap;
}

._cmvMetaItem_1e7ks_137 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--accent-color);
}

._cmvMetaItem_1e7ks_137 svg {
  color: var(--color-grey);
  flex-shrink: 0;
}

._cmvMetaLabel_1e7ks_163 {
  color: var(--color-grey);
}

._cmvMetaValue_1e7ks_171 {
  color: var(--text-color);
  font-weight: 500;
}

/* ---------------- Status badges ---------------- */
._cmvStatusBadge_1e7ks_183 {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.6;
}

._badgeDraft_1e7ks_205 {
  background: var(--color-neutral-400);
  color: var(--color-neutral-700);
}
._badgeScheduled_1e7ks_213 {
  background: var(--color-yellow-light);
  color: var(--color-yellow);
}
._badgeActive_1e7ks_221 {
  background: var(--color-blue-light);
  color: var(--color-blue);
}
._badgeCompleted_1e7ks_229 {
  background: var(--color-green-light);
  color: var(--color-green);
}
._badgePaused_1e7ks_237,
._badgeStopped_1e7ks_239 {
  background: var(--color-red-light);
  color: var(--color-red);
}
._badgeFailed_1e7ks_247 {
  background: var(--color-red-light);
  color: var(--color-red);
}
._badgePending_1e7ks_255 {
  background: var(--color-yellow-light);
  color: var(--color-yellow);
}

/* ---------------- Primary stat cards (row 1) ---------------- */
._cmvStatsGrid_1e7ks_267 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

._cmvStatCard_1e7ks_279 {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

._cmvStatLabel_1e7ks_301 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

._cmvStatNumber_1e7ks_315 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-color);
  margin-top: 6px;
  line-height: 1;
}

._cmvStatSub_1e7ks_331 {
  font-size: 11px;
  color: var(--color-grey);
  margin-top: 6px;
}

._cmvStatIcon_1e7ks_343 {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._iconGrey_1e7ks_363 {
  background: var(--color-neutral-400);
  color: var(--color-neutral-700);
}
._iconBlue_1e7ks_371 {
  background: var(--color-blue-light);
  color: var(--color-blue);
}
._iconYellow_1e7ks_379 {
  background: var(--color-yellow-light);
  color: var(--color-yellow);
}
._iconGreen_1e7ks_387 {
  background: var(--color-green-light);
  color: var(--color-green);
}
._iconRed_1e7ks_395 {
  background: var(--color-red-light);
  color: var(--color-red);
}
._iconOrange_1e7ks_403 {
  background: var(--color-orange-light);
  color: var(--color-orange);
}
._iconPurple_1e7ks_411 {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

/* ---------------- Secondary compact stat cards (row 2) ---------------- */
._cmvCompactGrid_1e7ks_423 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

._cmvCompactCard_1e7ks_435 {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--primary-purple-300);
  border-radius: 10px;
  padding: 12px 14px;
}

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

._cmvCompactIcon_1e7ks_463 {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._cmvCompactLabel_1e7ks_483 {
  font-size: 12px;
  color: var(--accent-color);
  font-weight: 500;
}

._cmvCompactNumber_1e7ks_495 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-color);
  margin-top: 8px;
}

._cmvCompactPct_1e7ks_509 {
  font-size: 11px;
  color: var(--color-grey);
  margin-top: 2px;
}

/* ---------------- Section cards (Workflow / Leads) ---------------- */
._cmvSectionCard_1e7ks_523 {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px 8px;
}

._cmvSectionHeader_1e7ks_537 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

._cmvSectionTitle_1e7ks_555 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

._cmvAddStepBtn_1e7ks_569 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--primary-purple-300);
  background: var(--primary-purple-100);
  color: var(--primary-purple-500);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
._cmvAddStepBtn_1e7ks_569:hover {
  background: var(--primary-purple-200);
}

/* Toolbar for leads section */
._cmvToolbar_1e7ks_605 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._cmvSearchBox_1e7ks_617 {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 200px;
}
._cmvSearchBox_1e7ks_617 svg {
  color: var(--color-grey);
  flex-shrink: 0;
}
._cmvSearchBox_1e7ks_617 input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--text-color);
  width: 100%;
}
._cmvSearchBox_1e7ks_617 input::placeholder {
  color: var(--input-text);
}

._cmvViewToggle_1e7ks_669 {
  display: flex;
  align-items: center;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  overflow: hidden;
}
._cmvViewToggleBtn_1e7ks_683 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--accent-color);
  cursor: pointer;
}
._cmvViewToggleBtnActive_1e7ks_707 {
  background: var(--primary-purple-100);
  color: var(--primary-purple-500);
}

._cmvIconBtnRound_1e7ks_717 {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--accent-color);
  cursor: pointer;
}
._cmvIconBtnRound_1e7ks_717:hover {
  background: var(--hover-bg);
}

/* ---------------- Table cell content ----------------
   ReusableTable renders the <table> shell, header, rows, and
   pagination footer itself. The classes below only style the
   content returned from each column's Cell renderer. */

/* Workflow step column */
._cmvStepBadgeCircle_1e7ks_761 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-purple-400);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

._cmvChannelIcon_1e7ks_799 {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._cmvStepName_1e7ks_823 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

._cmvStepEmailTag_1e7ks_837 {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary-purple-500);
  background: var(--primary-purple-100);
  padding: 1px 7px;
  border-radius: 999px;
}

._cmvStepSubject_1e7ks_855 {
  font-size: 12px;
  color: var(--color-grey);
  margin-top: 2px;
}

/* Leads table */
._cmvLeadCell_1e7ks_869 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._cmvAvatar_1e7ks_881 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-purple-100);
  color: var(--primary-purple-500);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._cmvLeadName_1e7ks_909 {
  font-weight: 600;
  color: var(--text-color);
}

._cmvLeadCompany_1e7ks_919 {
  font-size: 11.5px;
  color: var(--color-grey);
  margin-top: 1px;
}

._cmvStepMeta_1e7ks_931 {
  font-size: 11.5px;
  color: var(--color-grey);
  margin-top: 2px;
}

._cmvActionsCell_1e7ks_943 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._cmvIconBtn_1e7ks_717 {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--accent-color);
  border-radius: 6px;
  cursor: pointer;
}
._cmvIconBtn_1e7ks_717:hover {
  background: var(--hover-bg);
  color: var(--primary-purple-500);
}
._cmvIconBtnDanger_1e7ks_987:hover {
  color: var(--color-red);
}

/* ---------------- Bottom info banner ---------------- */
._cmvInfoBanner_1e7ks_997 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--general-color);
  border: 1px solid var(--color-blue-light);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--text-color);
}

._cmvInfoBanner_1e7ks_997 svg {
  color: var(--color-blue);
  flex-shrink: 0;
}

._cmvInfoBanner_1e7ks_997 b {
  font-weight: 600;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  ._cmvStatsGrid_1e7ks_267 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  ._cmvCompactGrid_1e7ks_423 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  ._cmvStatsGrid_1e7ks_267 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  ._cmvCompactGrid_1e7ks_423 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  ._cmvHeaderCard_1e7ks_27 {
    flex-direction: column;
  }
  ._cmvSectionHeader_1e7ks_537 {
    flex-direction: column;
    align-items: flex-start;
  }
}/* ===========================
   Header
=========================== */

._header_182p3_9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

._headerLeft_182p3_25 {
  display: flex;
  flex-direction: column;
}

._pageTitle_182p3_35 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

._pageSubTitle_182p3_49 {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

._headerRight_182p3_61 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

._datePicker_182p3_75 {
  width: 180px;
}

._datePicker_182p3_75 .MuiOutlinedInput-root {
  height: 40px;
  border-radius: 8px;
  background: #fff;
}

._datePicker_182p3_75 .MuiOutlinedInput-input {
  padding: 10px 14px;
  font-size: 13px;
}

._datePicker_182p3_75 .MuiOutlinedInput-notchedOutline {
  border-color: #e5e7eb;
}

._datePicker_182p3_75
  .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #d1d5db;
}

._datePicker_182p3_75
  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #6d4aff;
  border-width: 1px;
}

._datePicker_182p3_75 .MuiInputAdornment-root {
  color: #6b7280;
}

._filterBtn_182p3_143,
._newBtn_182p3_145 {
  height: 40px !important;
  border-radius: 8px !important;
  text-transform: none !important;
  box-shadow: none !important;
}

._filterBtn_182p3_143 {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
}

._newBtn_182p3_145 {
  background: #6d4aff !important;
}

._newBtn_182p3_145:hover {
  background: #5b38ff !important;
}

/* ===========================
   KPI Cards
=========================== */

._kpiCard_182p3_195,
._chartCard_182p3_197 {
  height: 100%;
  border-radius: 12px !important;
  border: 1px solid #eceef3;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  background: #fff;
}

._kpiCard_182p3_195 {
  transition: 0.25s;
}

._kpiCard_182p3_195:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

._kpiContent_182p3_231 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px !important;
}

._iconWrapper_182p3_245 {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
}

._kpiDetails_182p3_269 {
  flex: 1;
}

._kpiTitle_182p3_277 {
  margin-bottom: 6px;
  font-size: 11px;
  color: #9ca3af;
}

._kpiValue_182p3_289 {
  margin-bottom: 4px;
  font-size: 14px !important;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

._kpiSubtitle_182p3_305 {
  font-size: 12px;
  color: #6b7280;
}

._successText_182p3_315 {
  color: #16a34a;
  font-weight: 600;
}

/* ===========================
   Charts
=========================== */

._chartHeading_182p3_333 {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

._chartCard_182p3_197 .MuiChartsAxis-line,
._chartCard_182p3_197 .MuiChartsAxis-tick {
  stroke: #e5e7eb;
}

._chartCard_182p3_197 .MuiChartsGrid-line {
  stroke: #f3f4f6;
}

._chartCard_182p3_197 .MuiChartsAxis-tickLabel,
._chartCard_182p3_197 .MuiChartsLegend-label,
._chartCard_182p3_197 .MuiChartsLegend-root,
._chartCard_182p3_197 .MuiChartsTooltip-root {
  font-size: 12px;
  fill: #6b7280;
}

/* ===========================
   Summary Cards
=========================== */

._summaryHeader_182p3_389 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

._summaryIcon_182p3_403 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

._summaryTitle_182p3_423 {
  font-size: 15px !important;
  font-weight: 600;
  color: #1f2937;
}

._summaryTop_182p3_435 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

._summaryCount_182p3_449 {
  font-size: 20px !important;
  line-height: 1;
  font-weight: 700;
  color: #0f172a;
}

._summaryLabel_182p3_463 {
  margin-top: 8px;
  font-size: 14px;
  color: #9ca3af;
}

._summaryAmount_182p3_475 {
  font-size: 15px !important;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

._summaryDivider_182p3_489 {
  height: 1px;
  background: #edf0f5;
  margin: 16px 0;
}

._summaryRow_182p3_501 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}

._normalText_182p3_519 {
  color: #111827;
  font-weight: 700;
  font-size: 12px !important;
}

._dangerText_182p3_531 {
  color: #111827;
  font-weight: 700;
  font-size: 12px !important;
}

._summaryButton_182p3_543 {
  margin-top: 8px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6d4aff !important;
  text-transform: none !important;
}

._summaryButton_182p3_543:hover {
  background: transparent !important;
}

/* ===========================
   Pie Chart
=========================== */

._pieLayout_182p3_577 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}

._pieChartBox_182p3_595 {
  position: relative;
  flex: 0 0 150px;
  min-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._pieCenter_182p3_613 {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

._totalValue_182p3_629 {
  font-size: 12px;
  font-weight: 700;
  margin: 10px;
  color: #111827;
}

._totalLabel_182p3_643 {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

._legendBox_182p3_655 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

._legendLeft_182p3_685 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

._legendDot_182p3_701 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendTitle_182p3_715 {
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._legendAmount_182p3_731 {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===========================
   Responsive
=========================== */

@media (max-width: 991px) {
  ._header_182p3_9 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._headerRight_182p3_61 {
    width: 100%;
  }

  ._summaryTop_182p3_435 {
    flex-direction: column;
    gap: 8px;
  }

  ._summaryAmount_182p3_475 {
    text-align: left;
  }
}

@media (max-width: 767px) {
  ._headerRight_182p3_61 {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  ._datePicker_182p3_75,
  ._filterBtn_182p3_143,
  ._newBtn_182p3_145 {
    width: 100%;
  }

  ._pageTitle_182p3_35 {
    font-size: 22px;
  }

  ._pieLayout_182p3_577 {
    flex-direction: column;
    text-align: center;
  }

  ._legendBox_182p3_655 {
    width: 100%;
    margin-top: 12px;
  }

  ._kpiContent_182p3_231 {
    padding: 15px !important;
  }

  ._iconWrapper_182p3_245 {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 16px;
  }

  ._chartHeading_182p3_333 {
    text-align: center;
  }
}
/* SUMMARY CARD */
._summaryCard_182p3_883 {
  height: 100%;
  border: 1px solid #e8ebf2;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
}

._summaryCard_182p3_883 .MuiCardContent-root {
  padding: 18px !important;
}
._iconWrapper_182p3_245 {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 18px;
}
._invoiceDueWrapper_182p3_925 {
  border-top: 3px solid #f59e0b;
  border-radius: 8px;
}

._overdueWrapper_182p3_935 {
  border-top: 3px solid #ef4444;
  border-radius: 8px;
}

._quotesWrapper_182p3_945 {
  border-top: 3px solid #3b82f6;
  border-radius: 8px;
}

._salesWrapper_182p3_955 {
  border-top: 3px solid #22c55e;
  border-radius: 8px;
}
._rt-toolbar_182p3_963._invoiceDue_182p3_925 {
  background: #fff8e7;
}
._rt-toolbar_182p3_963._invoiceDue_182p3_925 ._rt-title_182p3_969 {
  color: #f59e0b;
}

._rt-toolbar_182p3_963._overdue_182p3_935 ._rt-title_182p3_969 {
  color: #ef4444;
}

._rt-toolbar_182p3_963._quotes_182p3_945 ._rt-title_182p3_969 {
  color: #3b82f6;
}

._rt-toolbar_182p3_963._sales_182p3_955 ._rt-title_182p3_969 {
  color: #22c55e;
}
._chartTooltip_182p3_999 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  min-width: 140px;
}

._chartTooltip_182p3_999 h6 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

._chartTooltipRow_182p3_1031 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}

._chartTooltipRow_182p3_1031:last-child {
  margin-bottom: 0;
}

._chartTooltipDot_182p3_1057 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
._invoiceDueWrapper_182p3_925,
._overdueWrapper_182p3_935,
._quotesWrapper_182p3_945,
._salesWrapper_182p3_955 {
  height: 250px; /* change as needed */
  display: flex;
  flex-direction: column;
}

._invoiceDueWrapper_182p3_925 .card,
._overdueWrapper_182p3_935 .card,
._quotesWrapper_182p3_945 .card,
._salesWrapper_182p3_955 .card {
  height: 100%;
}

._invoiceDueWrapper_182p3_925 .table-responsive,
._overdueWrapper_182p3_935 .table-responsive,
._quotesWrapper_182p3_945 .table-responsive,
._salesWrapper_182p3_955 .table-responsive {
  flex: 1;
  overflow-y: auto;
}
/* ===========================
   Header
=========================== */

._header_wja23_9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

._headerLeft_wja23_25 {
  display: flex;
  flex-direction: column;
}

._pageTitle_wja23_35 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

._pageSubTitle_wja23_49 {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

._headerRight_wja23_61 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

._datePicker_wja23_75 {
  width: 180px;
}

._datePicker_wja23_75 .MuiOutlinedInput-root {
  height: 40px;
  border-radius: 8px;
  background: #fff;
}

._datePicker_wja23_75 .MuiOutlinedInput-input {
  padding: 10px 14px;
  font-size: 13px;
}

._datePicker_wja23_75 .MuiOutlinedInput-notchedOutline {
  border-color: #e5e7eb;
}

._datePicker_wja23_75
  .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #d1d5db;
}

._datePicker_wja23_75
  .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #6d4aff;
  border-width: 1px;
}

._datePicker_wja23_75 .MuiInputAdornment-root {
  color: #6b7280;
}

._filterBtn_wja23_143,
._newBtn_wja23_145 {
  height: 40px !important;
  border-radius: 8px !important;
  text-transform: none !important;
  box-shadow: none !important;
}

._filterBtn_wja23_143 {
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
}

._newBtn_wja23_145 {
  background: #6d4aff !important;
}

._newBtn_wja23_145:hover {
  background: #5b38ff !important;
}

/* ===========================
   KPI Cards
=========================== */

._kpiCard_wja23_195,
._chartCard_wja23_197 {
  height: 100%;
  border-radius: 12px !important;
  border: 1px solid #eceef3;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  background: #fff;
}

._kpiCard_wja23_195 {
  transition: 0.25s;
}

._kpiCard_wja23_195:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

._kpiContent_wja23_231 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px !important;
}

._iconWrapper_wja23_245 {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
}

._kpiDetails_wja23_269 {
  flex: 1;
}

._kpiTitle_wja23_277 {
  margin-bottom: 6px;
  font-size: 11px;
  color: #9ca3af;
}

._kpiValue_wja23_289 {
  margin-bottom: 4px;
  font-size: 14px !important;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

._kpiSubtitle_wja23_305 {
  font-size: 12px;
  color: #6b7280;
}

._successText_wja23_315 {
  color: #16a34a;
  font-weight: 600;
}

/* ===========================
   Charts
=========================== */

._chartHeading_wja23_333 {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

._chartCard_wja23_197 .MuiChartsAxis-line,
._chartCard_wja23_197 .MuiChartsAxis-tick {
  stroke: #e5e7eb;
}

._chartCard_wja23_197 .MuiChartsGrid-line {
  stroke: #f3f4f6;
}

._chartCard_wja23_197 .MuiChartsAxis-tickLabel,
._chartCard_wja23_197 .MuiChartsLegend-label,
._chartCard_wja23_197 .MuiChartsLegend-root,
._chartCard_wja23_197 .MuiChartsTooltip-root {
  font-size: 12px;
  fill: #6b7280;
}

/* ===========================
   Summary Cards
=========================== */

._summaryHeader_wja23_389 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

._summaryIcon_wja23_403 {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

._summaryTitle_wja23_425 {
  font-size: 15px !important;
  font-weight: 600;
  color: #1f2937;
}

._summaryTop_wja23_437 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

._summaryCount_wja23_451 {
  font-size: 20px !important;
  line-height: 1;
  font-weight: 700;
  color: #0f172a;
}

._summaryLabel_wja23_465 {
  margin-top: 6px;
  font-size: 11px;
  color: #9ca3af;
}
._summaryAmount_wja23_475 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

._summaryDivider_wja23_489 {
  margin: 18px 0;
  border-top: 1px solid #eef2f7;
}

._summaryRow_wja23_499 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}

._summaryButton_wja23_517 {
  margin-top: 25px !important;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  padding: 18px 0 !important;
  min-width: auto !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #6d4aff !important;
  text-transform: none !important;
}
._normalText_wja23_543 {
  color: #111827;
  font-weight: 700;
  font-size: 12px !important;
}

._dangerText_wja23_555 {
  color: #111827;
  font-weight: 700;
  font-size: 12px !important;
}

._summaryButton_wja23_517 {
  margin-top: 8px !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6d4aff !important;
  text-transform: none !important;
}

._summaryButton_wja23_517:hover {
  background: transparent !important;
}

/* ===========================
   Pie Chart
=========================== */

._pieLayout_wja23_601 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  overflow: hidden;
}

._pieChartBox_wja23_619 {
  position: relative;
  flex: 0 0 150px;
  min-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

._pieCenter_wja23_637 {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

._totalValue_wja23_653 {
  font-size: 12px;
  font-weight: 700;
  margin: 10px;
  color: #111827;
}

._totalLabel_wja23_667 {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

._legendBox_wja23_679 {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

._legendLeft_wja23_709 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

._legendDot_wja23_725 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._legendTitle_wja23_739 {
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._legendAmount_wja23_755 {
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===========================
   Responsive
=========================== */

@media (max-width: 991px) {
  ._header_wja23_9 {
    flex-direction: column;
    align-items: flex-start;
  }

  ._headerRight_wja23_61 {
    width: 100%;
  }

  ._summaryTop_wja23_437 {
    flex-direction: column;
    gap: 8px;
  }

  ._summaryAmount_wja23_475 {
    text-align: left;
  }
}

@media (max-width: 767px) {
  ._headerRight_wja23_61 {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  ._datePicker_wja23_75,
  ._filterBtn_wja23_143,
  ._newBtn_wja23_145 {
    width: 100%;
  }

  ._pageTitle_wja23_35 {
    font-size: 22px;
  }

  ._pieLayout_wja23_601 {
    flex-direction: column;
    text-align: center;
  }

  ._legendBox_wja23_679 {
    width: 100%;
    margin-top: 12px;
  }

  ._kpiContent_wja23_231 {
    padding: 15px !important;
  }

  ._iconWrapper_wja23_245 {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 16px;
  }

  ._chartHeading_wja23_333 {
    text-align: center;
  }
}
/* SUMMARY CARD */
._summaryCard_wja23_907 {
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  background: #fff;
}

._summaryCard_wja23_907 .MuiCardContent-root {
  padding: 20px !important;
}
._invoiceWrapper_wja23_929 {
  height: 320px;
  display: flex;
  flex-direction: column;
}

._invoiceWrapper_wja23_929 .MuiPaper-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

._invoiceWrapper_wja23_929 .MuiTableContainer-root {
  flex: 1;
  overflow-y: auto;
}

._invoiceWrapper_wja23_929 .MuiTablePagination-root {
  margin-top: auto;
}
._invoiceDueWrapper_wja23_969,
._overdueWrapper_wja23_971,
._quotesWrapper_wja23_973,
._invoiceWrapper_wja23_929,
._tableWrapper_wja23_977 {
  height: 300px;
  display: flex;
  flex-direction: column;
}

._invoiceDueWrapper_wja23_969 > *,
._overdueWrapper_wja23_971 > *,
._quotesWrapper_wja23_973 > *,
._invoiceWrapper_wja23_929 > *,
._tableWrapper_wja23_977 > * {
  width: 100%;
  height: 100%;
}
._aiAccountingDashboard_x81yo_1 {
  --ai-blue: #1556ef;
  --ai-ink: #132146;
  --ai-muted: #65718d;
  --ai-line: #e9edf5;
  min-height: 100vh;
  padding: 18px;
  background: #f7f9fd;
  color: var(--ai-ink);
  font-size: 12px;
}

._aiAccountingDashboard_x81yo_1 * {
  box-sizing: border-box;
}

._aiAccountingHeader_x81yo_33,
._aiAccountingHeaderActions_x81yo_35,
._aiAccountingStatGrid_x81yo_37,
._aiAccountingMainGrid_x81yo_39,
._aiAccountingCharts_x81yo_41,
._aiAccountingMiniStats_x81yo_43,
._aiAccountingDocumentsHeader_x81yo_45,
._aiAccountingTabs_x81yo_47 {
  display: flex;
  align-items: flex-start;
}

._aiAccountingHeader_x81yo_33 {
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 18px;
  position: relative;
}

._aiAccountingHeader_x81yo_33 h1,
._aiAccountingDocumentsHeader_x81yo_45 h2 {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 700;
}

._aiAccountingHeader_x81yo_33 p {
  margin: 0;
  color: var(--ai-muted);
  font-size: 11px;
}

._aiAccountingHeaderActions_x81yo_35 {
  gap: 8px;
}

._aiAccountingControl_x81yo_105,
._aiAccountingSquareButton_x81yo_107,
._aiAccountingBell_x81yo_109,
._aiAccountingCreateButton_x81yo_111 {
  border: 1px solid var(--ai-line);
  background: #fff;
  border-radius: 6px;
  height: 32px;
  padding: 0 12px;
  font: 600 11px inherit;
  color: #2c3a5d;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

._aiAccountingSquareButton_x81yo_107 {
  width: 32px;
  padding: 0;
  justify-content: center;
  transition: all 0.25s ease;
}

._aiAccountingBell_x81yo_109 {
  border: 0;
  position: relative;
  padding: 0 7px;
  font-size: 17px;
}

._aiAccountingBell_x81yo_109 i {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  color: #fff;
  background: #fa2d44;
  font: 8px Arial;
  display: grid;
  place-items: center;
  font-style: normal;
}

._aiAccountingCreateButton_x81yo_111 {
  color: #fff;
  background: var(--ai-blue);
  border-color: var(--ai-blue);
  font-weight: 700;
}

._aiReportsAskToggle_x81yo_211 {
  height: 34px;
  border: 1px solid #d7e1f3;
  background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%);
  color: #24457e;
  border-radius: 8px;
  padding: 0 7px 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 11px inherit;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 5px rgba(32, 74, 145, 0.06);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

._aiReportsAskToggle_x81yo_211:hover {
  border-color: #a9c2ee;
  box-shadow: 0 4px 10px rgba(32, 74, 145, 0.12);
  transform: translateY(-1px);
}

._aiReportsToggleTrack_x81yo_263 {
  width: 26px;
  height: 15px;
  border-radius: 999px;
  background: #c3cfdf;
  padding: 2px;
  transition: background 0.2s ease;
}

._aiReportsToggleTrack_x81yo_263 i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(29, 50, 89, 0.24);
  transition: transform 0.2s ease;
}

._aiReportsAskToggleActive_x81yo_301 {
  color: #164ab7;
  border-color: #a6c3fb;
  background: linear-gradient(135deg, #fff 0%, #eaf2ff 100%);
  box-shadow: 0 3px 9px rgba(21, 86, 239, 0.15);
}

._aiReportsAskToggleActive_x81yo_301 ._aiReportsToggleTrack_x81yo_263 {
  background: var(--ai-blue);
}

._aiReportsAskToggleActive_x81yo_301 ._aiReportsToggleTrack_x81yo_263 i {
  transform: translateX(11px);
}

._aiReportsAskCard_x81yo_331 {
  margin: 0 0 10px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
}

._aiReportsAskCard_x81yo_331 h2 {
  width: 70%;
  margin: 0 auto 9px;
  font-size: 12px;
}

._aiReportsAskForm_x81yo_359 {
  display: flex;
  align-items: center;
  justify-content: center;
}

._aiReportsPromptField_x81yo_371 {
  width: 70%;
  flex: none;
  margin: 0 auto;
  min-width: 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
  border: 1px solid #d4d7dc;
  border-radius: 18px;
  background: #fff;
  color: #5771a7;
  box-shadow: 0 7px 18px rgba(31, 43, 67, 0.06);
}

._aiReportsPromptField_x81yo_371:focus-within {
  border-color: #aeb9cd;
  box-shadow: 0 7px 18px rgba(31, 43, 67, 0.1);
}

._aiReportsPromptField_x81yo_371 textarea {
  min-width: 0;
  flex: 1;
  width: 100%;
  min-height: 58px;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--ai-ink);
  font: 500 14px inherit;
  line-height: 1.45;
}

._aiReportsPromptField_x81yo_371 textarea::placeholder {
  color: #67799b;
}

._aiReportsComposerActions_x81yo_447,
._aiReportsComposerEnd_x81yo_449 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

._aiReportsComposerEnd_x81yo_449 {
  width: auto;
  gap: 9px;
}

._aiReportsComposerActions_x81yo_447 {
  gap: 9px;
}

._aiReportsComposerActions_x81yo_447 button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: #20375d;
  font-size: 18px;
  cursor: pointer;
}

._aiReportsComposerActions_x81yo_447 ._aiReportsMicButton_x81yo_509 {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  color: #fff;
  background: var(--ai-blue);
  font-size: 16px;
}

._aiReportsComposerActions_x81yo_447 ._aiReportsSendButton_x81yo_527 {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: var(--ai-blue);
  color: #fff;
  font-size: 18px;
}

._aiReportsExamples_x81yo_545 {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 9px auto 0;
}

._aiReportsExamples_x81yo_545 span {
  width: 100%;
  text-align: center;
  color: var(--ai-muted);
  font-size: 9px;
}

._aiReportsExamples_x81yo_545 button {
  border: 1px solid #edf0f6;
  border-radius: 4px;
  background: #f9fbff;
  color: #536584;
  padding: 4px 9px;
  font: 600 8px inherit;
  cursor: pointer;
}

._aiAccountingStatGrid_x81yo_37 {
  gap: 8px;
  margin-bottom: 10px;
}

._aiAccountingStatCard_x81yo_609 {
  min-width: 0;
  flex: 1;
  height: 65px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 9px;
}

._aiAccountingIconBox_x81yo_635 {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
}

._aiAccountingBlue_x81yo_655 {
  color: var(--ai-blue);
}

._aiAccountingIconBox_x81yo_635._aiAccountingBlue_x81yo_655 {
  background: #1456ef;
  color: #fff;
}

._aiAccountingOrange_x81yo_673 {
  color: #f88909;
}

._aiAccountingIconBox_x81yo_635._aiAccountingOrange_x81yo_673 {
  color: #fff;
  background: #fb8b08;
}

._aiAccountingGreen_x81yo_691 {
  color: #0bad61;
}

._aiAccountingIconBox_x81yo_635._aiAccountingGreen_x81yo_691 {
  color: #fff;
  background: #06a85c;
}

._aiAccountingRed_x81yo_709 {
  color: #e23532;
}

._aiAccountingIconBox_x81yo_635._aiAccountingRed_x81yo_709 {
  color: #fff;
  background: #dd302d;
}

._aiAccountingPurple_x81yo_727 {
  color: #5746d8;
}

._aiAccountingIconBox_x81yo_635._aiAccountingPurple_x81yo_727 {
  color: #fff;
  background: #5946d9;
}

._aiAccountingStatCard_x81yo_609 small,
._aiAccountingMiniStats_x81yo_43 small {
  display: block;
  color: var(--ai-muted);
  font-size: 9px;
  font-weight: 600;
}

._aiAccountingStatCard_x81yo_609 strong {
  display: block;
  margin: 3px 0;
  font-size: 13px;
}

._aiAccountingStatCard_x81yo_609 em,
._aiAccountingMiniStats_x81yo_43 em {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: #0bad61;
  font-weight: 700;
}

._aiAccountingStatCard_x81yo_609 em b {
  font-weight: 500;
  color: var(--ai-muted);
}

._aiAccountingMainGrid_x81yo_39 {
  align-items: stretch;
  gap: 10px;
  margin-top: 10px !important;
}

._aiAccountingChartColumn_x81yo_813 {
  min-width: 0;
  flex: 1;
}

._aiAccountingCharts_x81yo_41 {
  align-items: stretch;
  gap: 9px;
}

._aiAccountingTrend_x81yo_833,
._aiAccountingDistribution_x81yo_835,
._aiAccountingDetailCard_x81yo_837,
._aiAccountingDocumentsSection_x81yo_839 {
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
}

._aiAccountingTrend_x81yo_833 {
  flex: 1.42;
  padding: 10px 4px;
  height: 207px;
}

._aiAccountingDistribution_x81yo_835 {
  flex: 1;
  padding: 11px;
}

._aiAccountingChartHeading_x81yo_873,
._aiAccountingCardTitle_x81yo_875 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._aiAccountingTrend_x81yo_833 h3,
._aiAccountingDistribution_x81yo_835 h3,
._aiAccountingDetailCard_x81yo_837 h3 {
  margin: 0;
  font-size: 11px;
}

._aiAccountingChartHeading_x81yo_873 button {
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 4px;
  color: #34405e;
  font: 600 9px inherit;
}

._aiAccountingLegend_x81yo_919 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 1px;
  font-size: 8px;
}

._aiAccountingLegend_x81yo_919 span:first-child {
  margin-left: 0;
}

._aiAccountingBlueDot_x81yo_943,
._aiAccountingOrangeDot_x81yo_945,
._aiAccountingGreenDot_x81yo_947,
._aiAccountingRedDot_x81yo_949 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

._aiAccountingBlueDot_x81yo_943 {
  background: #1456ef;
}

._aiAccountingOrangeDot_x81yo_945 {
  background: #fc7900;
}

._aiAccountingGreenDot_x81yo_947 {
  background: #13ae63;
}

._aiAccountingRedDot_x81yo_949 {
  background: #dc302d;
}

._aiAccountingTrend_x81yo_833 svg {
  width: 100%;
  height: 111px;
  overflow: visible;
}

._aiAccountingGridLines_x81yo_1007 line {
  stroke: #edf0f6;
  stroke-width: 1;
}

._aiAccountingTrend_x81yo_833 polyline {
  fill: none;
  stroke-width: 1.5;
}

._aiAccountingTotalLine_x81yo_1027 {
  stroke: #1456ef;
}

._aiAccountingOutstandingLine_x81yo_1035 {
  stroke: #fc7900;
}

._aiAccountingCollectedLine_x81yo_1043 {
  stroke: #13ae63;
}

._aiAccountingDates_x81yo_1051 {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #67738f;
}

._aiAccountingDonutContent_x81yo_1065 {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

._aiAccountingDonut_x81yo_1065 {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: conic-gradient(#1456ef 0 52.6%,
      #fc7900 52.6% 78.9%,
      #13ae63 78.9%);
  position: relative;
  display: grid;
  place-items: center;
}

._aiAccountingDonut_x81yo_1065::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
}

._aiAccountingDonut_x81yo_1065 strong {
  position: relative;
  z-index: 1;
  font-size: 19px;
  text-align: center;
}

._aiAccountingDonut_x81yo_1065 small {
  display: block;
  color: var(--ai-muted);
  font-size: 8px;
}

._aiAccountingDistributionLegend_x81yo_1149 {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: repeat(2, max-content);
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  font-size: 8px;
  color: #33415f;
}

._aiAccountingDistributionLegend_x81yo_1149 span:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

._aiAccountingDistributionLegend_x81yo_1149 i {
  margin-right: 5px;
}

._aiAccountingDistributionLegend_x81yo_1149 b {
  margin-left: 12px;
  color: #71809b;
  font-weight: 500;
}

._aiAccountingMiniStats_x81yo_43 {
  margin-top: 9px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
}

._aiAccountingMiniStats_x81yo_43 article {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  padding: 11px;
  border-right: 1px solid var(--ai-line);
}

._aiAccountingMiniStats_x81yo_43 article:last-child {
  border: 0;
}

._aiAccountingMiniStats_x81yo_43 article>svg {
  font-size: 18px;
  flex: 0 0 auto;
}

._aiAccountingMiniStats_x81yo_43 strong {
  display: block;
  margin: 2px 0;
  font-size: 15px;
}

._aiAccountingSideColumn_x81yo_1267 {
  width: 275px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px !important;
}

._aiAccountingDetailCard_x81yo_837 {
  padding: 11px;
  display: flex;
  flex-direction: column;
}

._aiAccountingSideColumn_x81yo_1267 {
  width: 275px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 10px !important;
}

._aiAccountingSideColumn_x81yo_1267> :last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._aiAccountingSideColumn_x81yo_1267> :last-child ._aiAccountingCalls_x81yo_1325 {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  cursor: pointer;
}

._aiAccountingCardTitle_x81yo_875 {
  margin-bottom: 8px;
}

._aiAccountingCardTitle_x81yo_875 button {
  border: 0;
  background: transparent;
  color: var(--ai-blue);
  font: 600 9px inherit;
}

._aiAccountingAgingList_x81yo_1361>div,
._aiAccountingReminderList_x81yo_1363>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f7;
  font-size: 9px;
}

._aiAccountingAgingList_x81yo_1361 span {
  display: flex;
  align-items: center;
  gap: 7px;
}

._aiAccountingAgingList_x81yo_1361 b {
  font-size: 9px;
}

._aiAccountingTotal_x81yo_1027 {
  border: 0 !important;
  font-weight: 700;
}

._aiAccountingReminderList_x81yo_1363 i {
  width: 15px;
  font-style: normal;
  color: var(--ai-blue);
  font-size: 11px;
}

._aiAccountingReminderList_x81yo_1363 span {
  flex: 1;
}

._aiAccountingCalls_x81yo_1325 {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

._aiAccountingCalls_x81yo_1325>div {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f7;
}

._aiAccountingCalls_x81yo_1325>div:last-child {
  border: 0;
}

._aiAccountingCalls_x81yo_1325>div>svg {
  background: #eaf1ff;
  color: var(--ai-blue);
  padding: 5px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

._aiAccountingCalls_x81yo_1325 span {
  flex: 1;
  min-width: 0;
}

._aiAccountingCalls_x81yo_1325 span b,
._aiAccountingCalls_x81yo_1325 span small,
._aiAccountingCalls_x81yo_1325 em,
._aiAccountingCalls_x81yo_1325 em i {
  display: block;
}

._aiAccountingCalls_x81yo_1325 span b {
  font-size: 9px;
}

._aiAccountingCalls_x81yo_1325 span small {
  font-size: 8px;
  color: #71809b;
  margin-top: 2px;
}

._aiAccountingCalls_x81yo_1325 em {
  text-align: center;
  color: #71809b;
  font-style: normal;
  font-size: 7px;
  white-space: nowrap;
}

._aiAccountingCalls_x81yo_1325 em small {
  margin-top: 5px !important;
  display: block;
  text-align: right;
}

._aiAccountingCalls_x81yo_1325 em i {
  margin-top: 3px;
  padding: 2px 6px;
  font-style: normal;
  font-size: 7px;
  border-radius: 2px;
}

._aiAccountingCalls_x81yo_1325 em i._aiAccountingNoResponse_x81yo_1575 {
  color: #e23532;
  background: #ffebed;
}

._aiAccountingDocumentsSection_x81yo_839 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  overflow: hidden;
}

._aiAccountingDocumentsHeader_x81yo_45 {
  min-height: 55px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--ai-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

._aiAccountingDocumentsHeader_x81yo_45 h2 {
  font-size: 11px;
  flex: 1;
  margin: 0;
}

._aiAccountingTabs_x81yo_47 {
  gap: 0;
  height: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(98, 72, 154, 0.1);
  overflow: hidden;
}

._aiAccountingTabs_x81yo_47 button {
  border: 0;
  height: 100%;
  background: transparent;
  color: #63708c;
  font: 500 10px inherit;
  position: relative;
  cursor: pointer;
  padding: 0 20px;
}

._aiAccountingTabs_x81yo_47 button._aiAccountingActiveTab_x81yo_1671 {
  color: #fff;
  font-weight: 700;
  background: var(--ai-blue);
}

._aiAccountingTabs_x81yo_47 button._aiAccountingActiveTab_x81yo_1671::after {
  display: none;
}

._aiAccountingReusableTable_x81yo_1691 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

._aiAccountingReusableTable_x81yo_1691 .MuiPaper-root {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* .aiAccountingReusableTable :global(.MuiToolbar-root) {
  min-height: 38px !important;
  padding: 3px 10px !important;
} */
/* .aiAccountingReusableTable :global(.tableHeading) {
  display: none;
} */
._aiAccountingReusableTable_x81yo_1691 .MuiTableContainer-root {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
}

._aiAccountingReusableTable_x81yo_1691 .MuiTableCell-root {
  padding: 6px 7px !important;
  font-size: 10px !important;
  white-space: nowrap;
}

._aiAccountingReusableTable_x81yo_1691 .MuiTableHead-root .MuiTableCell-root {
  font-size: 8px !important;
  color: #64718b !important;
}

._aiAccountingReusableTable_x81yo_1691 .MuiTableFooter-root .MuiTableCell-root {
  padding: 3px 7px !important;
}

._aiAccountingReusableTable_x81yo_1691 .MuiTablePagination-toolbar {
  min-height: 28px !important;
}

._aiAccountingReusableTable_x81yo_1691 .MuiTablePagination-selectLabel,
._aiAccountingReusableTable_x81yo_1691 .MuiTablePagination-input {
  display: none !important;
}

.aiAccountingDocType,
.aiAccountingStatus,
.aiAccountingReminder {
  display: inline-block;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1.1;
}

.aiAccountingsuccess {
  color: #15803d;
  background: #dcfce7;
}

.aiAccountingvalidation_failed {
  color: #b91c1c;
  background: #fee2e2;
}

.aiAccountingfailed {
  color: #b91c1c;
  background: #fee2e2;
}

.aiAccountingpending {
  color: #b45309;
  background: #fef3c7;
}

.aiAccountingInvoice {
  background: #e9f0ff;
  color: #1556ef;
}

.aiAccountingQuotation {
  background: #fff0dc;
  color: #f17800;
}

.aiAccountingDelivery,
.aiAccountingCompleted {
  background: #dff8ea;
  color: #08a75a;
}

.aiAccountingSent {
  background: #e8f0ff;
  color: #1556ef;
}

.aiAccountingOverdue {
  background: #ffe9ed;
  color: #e23532;
}

.aiAccountingDraft {
  background: #edf0f5;
  color: #6d778e;
}

.aiAccountingBalance {
  color: #f0323d;
}

.aiAccountingDueToday {
  background: #fff0dc;
  color: #f17800;
}

.aiAccountingMoreButton {
  border: 0;
  color: #45516c;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
}

._aiAccountingStatCard_x81yo_609,
._aiAccountingMiniStats_x81yo_43 article {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

._aiAccountingStatCard_x81yo_609::after,
._aiAccountingMiniStats_x81yo_43 article::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -65%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent 18%,
      rgba(21, 86, 239, 0.07) 50%,
      transparent 82%);
  transform: skewX(-18deg);
}

._aiAccountingStatCard_x81yo_609:hover,
._aiAccountingMiniStats_x81yo_43 article:hover {
  z-index: 1;
  transform: translateY(-4px);
  border-color: rgba(21, 86, 239, 0.28);
  box-shadow: 0 10px 22px rgba(31, 62, 125, 0.12);
}

._aiAccountingStatCard_x81yo_609:hover::after,
._aiAccountingMiniStats_x81yo_43 article:hover::after {
  animation: _aiAccountingCardSweep_x81yo_1 0.65s ease-out;
}

._aiAccountingStatCard_x81yo_609:hover ._aiAccountingIconBox_x81yo_635,
._aiAccountingMiniStats_x81yo_43 article:hover>svg {
  animation: _aiAccountingIconPop_x81yo_1 0.42s ease-out;
}

@keyframes _aiAccountingCardSweep_x81yo_1 {
  from {
    left: -65%;
  }

  to {
    left: 130%;
  }
}

@keyframes _aiAccountingIconPop_x81yo_1 {
  50% {
    transform: translateY(-3px) scale(1.1) rotate(-7deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0);
  }
}

@media (max-width: 1180px) {
  ._aiAccountingStatGrid_x81yo_37 {
    flex-wrap: wrap;
  }

  ._aiAccountingStatCard_x81yo_609 {
    flex-basis: 30%;
  }

  ._aiAccountingSideColumn_x81yo_1267 {
    width: 250px;
  }

  ._aiAccountingMiniStats_x81yo_43 {
    flex-wrap: wrap;
  }

  ._aiAccountingMiniStats_x81yo_43 article {
    flex-basis: 30%;
  }

  ._aiAccountingCharts_x81yo_41 {
    flex-wrap: wrap;
  }

  ._aiAccountingTrend_x81yo_833,
  ._aiAccountingDistribution_x81yo_835 {
    min-width: 300px;
  }
}

@media (max-width: 900px) {
  ._aiAccountingHeader_x81yo_33 {
    align-items: flex-start;
    flex-direction: column;
  }

  ._aiAccountingHeaderActions_x81yo_35 {
    flex-wrap: wrap;
  }

  ._aiAccountingMainGrid_x81yo_39 {
    flex-direction: column;
  }

  ._aiAccountingSideColumn_x81yo_1267 {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._aiAccountingSideColumn_x81yo_1267> :last-child {
    grid-column: span 2;
  }

  ._aiAccountingTabs_x81yo_47 {
    overflow-x: auto;
    gap: 12px;
  }

  ._aiAccountingReusableTable_x81yo_1691 {
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  ._aiAccountingDashboard_x81yo_1 {
    padding: 12px;
  }

  ._aiAccountingStatCard_x81yo_609 {
    flex-basis: 100%;
  }

  ._aiAccountingSideColumn_x81yo_1267 {
    display: grid;
    grid-template-columns: 1fr;
  }

  ._aiAccountingSideColumn_x81yo_1267> :last-child {
    grid-column: auto;
  }

  ._aiAccountingTrend_x81yo_833,
  ._aiAccountingDistribution_x81yo_835 {
    min-width: 100%;
  }

  ._aiAccountingDonutContent_x81yo_1065 {
    justify-content: flex-start;
  }

  ._aiAccountingTabs_x81yo_47 {
    justify-content: flex-start;
  }

  ._aiAccountingDocumentsHeader_x81yo_45 {
    align-items: stretch;
    flex-direction: column;
    height: auto;
    padding-top: 10px;
  }

  ._aiAccountingDocumentsHeader_x81yo_45 h2 {
    flex: auto;
  }

  ._aiAccountingTabs_x81yo_47 {
    height: 30px;
  }

  ._aiAccountingControl_x81yo_105 {
    font-size: 9px;
  }

  ._aiReportsAskCard_x81yo_331 {
    padding: 10px;
  }

  ._aiReportsAskForm_x81yo_359 {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  ._aiReportsPromptField_x81yo_371 {
    width: 100%;
  }

  ._aiReportsExamples_x81yo_545 {
    gap: 5px;
  }
}

._aiAccountingMuiLineChart_x81yo_2349 {
  width: 100%;
  margin-top: 2px;
}

._aiAccountingMuiLineChart_x81yo_2349 .MuiChartsGrid-line {
  stroke: #edf0f6 !important;
}

._aiAccountingMuiLineChart_x81yo_2349 .MuiMarkElement-root {
  stroke-width: 0 !important;
}

._aiAccountingMuiLineChart_x81yo_2349 .MuiLineElement-root {
  stroke-width: 2px !important;
}

._aiAccountingMuiPieWrap_x81yo_2383 {
  position: relative;
  width: 148px;
  height: 148px;
  flex: 0 0 148px;
}

._aiAccountingMuiPieChart_x81yo_2397 {
  position: absolute;
  inset: 0;
}

._aiAccountingMuiPieWrap_x81yo_2383>strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  font-size: 19px;
}

._aiAccountingMuiPieWrap_x81yo_2383>strong small {
  display: block;
  color: var(--ai-muted);
  font-size: 8px;
}

@media (max-width: 900px) {
  ._aiAccountingHeaderActions_x81yo_35 {
    width: 100%;
  }
}

@media (max-width: 620px) {
  ._aiAccountingHeader_x81yo_33 h1 {
    font-size: 16px;
  }

  ._aiAccountingHeaderActions_x81yo_35 {
    gap: 6px;
  }

  ._aiAccountingControl_x81yo_105,
  ._aiAccountingCreateButton_x81yo_111 {
    padding: 0 9px;
  }

  ._aiAccountingMiniStats_x81yo_43 article {
    flex-basis: 50%;
  }
}

._aiAccountingParentTabs_x81yo_2489 {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 4px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(98, 72, 154, 0.12);
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%);
}

._aiAccountingParentTabs_x81yo_2489 button {
  border: 0;
  height: 100%;
  background: transparent;
  color: #63708c;
  font: 600 10px inherit;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  padding: 0 18px;
  border-radius: 999px;
}

._aiAccountingParentTabs_x81yo_2489 button._aiAccountingActiveTab_x81yo_1671 {
  color: #fff;
  font-weight: 700;
  background: var(--ai-blue);
  box-shadow: 0 3px 8px rgba(21, 86, 239, 0.28);
}

._aiAccountingParentTabs_x81yo_2489 button._aiAccountingActiveTab_x81yo_1671::after {
  display: none;
}

@media (max-width: 900px) {
  ._aiAccountingParentTabs_x81yo_2489 {
    position: static;
    transform: none;
    order: 3;
  }
}

.aiAccountingSalesOrder {
  background: #e8f0ff;
  color: #1556ef;
}

.aiAccountingPurchaseOrder {
  background: #fff0dc;
  color: #f17800;
}

.aiAccountingApInvoice {
  background: #f3e8ff;
  color: #7c3aed;
}

/* ===========================================
   Wrapper
=========================================== */

._accountFlowChartsWrapper_x81yo_2621 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 991px) {
  ._accountFlowChartsWrapper_x81yo_2621 {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   Card
=========================================== */

._accountFlowChartsCard_x81yo_2655 {
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* ===========================================
   Header
=========================================== */

._accountFlowChartsHeader_x81yo_2681 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

._accountFlowChartsHeader_x81yo_2681 h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

._accountFlowChartsFilter_x81yo_2709 {
  padding: 7px 14px;
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
  color: #475467;
  cursor: pointer;
  transition: 0.25s;
}

._accountFlowChartsFilter_x81yo_2709:hover {
  background: #f8fafc;
}

/* ===========================================
   Legend
=========================================== */

._accountFlowChartsLegend_x81yo_2747 {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

._accountFlowChartsLegend_x81yo_2747 div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #475467;
}

._accountFlowChartsBlue_x81yo_2779,
._accountFlowChartsOrange_x81yo_2781,
._accountFlowChartsGreen_x81yo_2783 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

._accountFlowChartsBlue_x81yo_2779 {
  background: #2563eb;
}

._accountFlowChartsOrange_x81yo_2781 {
  background: #f97316;
}

._accountFlowChartsGreen_x81yo_2783 {
  background: #22c55e;
}

/* ===========================================
   Line Chart
=========================================== */

._accountFlowChartsLine_x81yo_2829 {
  width: 100%;
  height: 200px;
}

/* ===========================================
   Tooltip
=========================================== */

._accountFlowChartsTooltip_x81yo_2847 {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e4e7ec;
  padding: 10px 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  min-width: 150px;
}

._accountFlowChartsTooltip_x81yo_2847 h6 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #101828;
}

._accountFlowChartsTooltipRow_x81yo_2877 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}

._accountFlowChartsTooltipDot_x81yo_2895 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ===========================================
   Donut Section
=========================================== */

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

@media (max-width: 768px) {
  ._accountFlowChartsDonutSection_x81yo_2915 {
    flex-direction: column;
  }
}

/* ===========================================
   Donut
=========================================== */

._accountFlowChartsDonutWrapper_x81yo_2949 {
  width: 180px;
  height: 180px;
  position: relative;
  flex-shrink: 0;
}

._accountFlowChartsCenter_x81yo_2963 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

._accountFlowChartsCenter_x81yo_2963 h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #101828;
}

._accountFlowChartsCenter_x81yo_2963 span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #667085;
}

/* ===========================================
   Right Legend
=========================================== */

._accountFlowChartsRightLegend_x81yo_3015 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._accountFlowChartsLegendItem_x81yo_3029 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._accountFlowChartsLegendText_x81yo_3041 {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

._accountFlowChartsLegendColor_x81yo_3059 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

._accountFlowChartsLegendItem_x81yo_3029 p {
  margin: 0;
  font-size: 13px;
  color: #344054;
}

._accountFlowChartsLegendItem_x81yo_3029 b {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
}

/* ===========================================
   Responsive
=========================================== */

@media (max-width: 768px) {
  ._accountFlowChartsHeader_x81yo_2681 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._accountFlowChartsLegend_x81yo_2747 {
    gap: 14px;
  }

  ._accountFlowChartsDonutWrapper_x81yo_2949 {
    width: 170px;
    height: 170px;
  }

  ._accountFlowChartsCenter_x81yo_2963 h2 {
    font-size: 26px;
  }
}

._accountFlowChartsLegendColor_x81yo_3059 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._accountFlowChartsLegendText_x81yo_3041 span {
  font-size: 13px;
  color: #344054;
  white-space: nowrap;
}

._accountFlowChartsLegendText_x81yo_3041 strong {
  font-size: 13px;
  font-weight: 600;
  color: #101828;
  white-space: nowrap;
}

._accountFlowChartsCard_x81yo_2655 {
  background: #fff;
  border: 1px solid #edf1f5;
  border-radius: 14px;
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

._aiAccountingSquareButton_x81yo_107:hover {
  background: #1556ef;
  color: #fff;
  border-color: #1556ef;
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(21, 86, 239, 0.25);
}

._aiAccountingSquareButton_x81yo_107:hover svg {
  transform: scale(1.15);
}

._aiAccountingSquareButton_x81yo_107 svg {
  transition: transform 0.25s ease;
}

/* Keep the date-range picker aligned with the refresh control in the header. */
._aiAccountingHeaderRight_x81yo_3247 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

._aiAccountingDateControl_x81yo_3263 {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 6px;
  color: #2c3a5d;
}

._aiAccountingDateControl_x81yo_3263>svg {
  flex: 0 0 auto;
  font-size: 14px;
}

._aiAccountingDateControl_x81yo_3263 .react-datepicker-wrapper,
._aiAccountingDateControl_x81yo_3263 .react-datepicker__input-container {
  display: block;
}

._aiAccountingDateControl_x81yo_3263 input {
  width: 154px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #2c3a5d;
  font: 600 11px inherit;
  line-height: 30px;
  cursor: pointer;
}

._aiAccountingSyncButton_x81yo_3331 {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ai-blue);
  border-radius: 5px;
  background: var(--ai-blue);
  color: #fff;
  font: 600 10px inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
}

._aiAccountingSyncButton_x81yo_3331 svg {
  font-size: 12px;
}

._aiAccountingSyncButton_x81yo_3331:hover {
  background: #0f47ca;
  border-color: #0f47ca;
}

._aiAccountingSyncButton_x81yo_3331 {
  align-self: flex-end;
  margin: 8px 0;
}

.aiAccountingNOT_PAID {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  min-width: 75px;
  border-radius: 12px;
  background: #feecec;
  color: #dc2626;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.aiAccountingDRAFT {
  background: #fef3c7;
  color: #92400e;
}

.aiAccountingPAID {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  min-width: 55px;
  border-radius: 12px;
  background: #e8f8ee;
  color: #16a34a;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

._aiAccountingControl_x81yo_105 input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
}

._aiAccountingControl_x81yo_105 span {
  margin: 0 5px;
}

._aiAccountingControl_x81yo_105 {
  width: 240px;
  min-width: 240px;
  display: flex;
  align-items: center;
}

._aiAccountingControl_x81yo_105 input {
  width: 95px;
  height: 20px;
  padding: 0;
  line-height: 20px;
}

._aiAccountingControl_x81yo_105 input {
  padding-left: 0;
  transform: translateX(-5px);
}

._aiAccountingDelivered_x81yo_3519 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: #dcfce7 !important;
  color: #16a34a !important;
  font-size: 11px;
  font-weight: 600;
}

._aiAccountingSent_x81yo_1893 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: #dbeafe !important;
  color: #2563eb !important;
  font-size: 11px;
  font-weight: 600;
}

._aiAccountingFailed_x81yo_3559 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 11px;
  font-weight: 600;
}

._aiAccountingSuccess_x81yo_3579 {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 11px;
  font-weight: 600;
}

._voiceIcon_x81yo_3599 {
  color: #2563eb !important;
  font-size: 18px;
}

._emailIcon_x81yo_3609 {
  color: #f5550b !important;
  font-size: 18px;
}

._aiAccountingCallCard_x81yo_3619 {
  max-height: 1500px !important;
  overflow-y: auto;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

._aiAccountingCallCard_x81yo_3619::-webkit-scrollbar {
  width: 0;
  display: none !important;
}

._aiAccountingCalls_x81yo_1325 {
  height: 500px;
  overflow-y: auto;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

._aiAccountingCalls_x81yo_1325::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

._overdueCustomerCard_x81yo_3673 {
  padding-bottom: 20px;
}

._overdueList_x81yo_3681 {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 18px;

  max-height: 200px;
  /* show around 4 items */
  overflow-y: auto;
  padding-right: 6px;
}

/* scrollbar optional */
._overdueList_x81yo_3681::-webkit-scrollbar {
  width: 5px;
}

._overdueList_x81yo_3681::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

._overdueItem_x81yo_3725 {
  width: 100%;
}

._overdueTop_x81yo_3733 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

._customerName_x81yo_3747 {
  font-size: 13px;
  color: #344054;
  font-weight: 500;
}

._amount_x81yo_3759 {
  font-size: 13px;
  color: #101828;
  font-weight: 600;
}

._progressWrapper_x81yo_3771 {
  width: 100%;
  height: 8px;
  background: #eef2f7;
  border-radius: 10px;
  overflow: hidden;
}

._progressBar_x81yo_3787 {
  height: 100%;
  background: #2563eb;
  border-radius: 10px;
  transition: width 0.3s ease;
}

._noOverdueData_x81yo_3801 {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #98a2b3;
  font-size: 14px;
}

._reminderIcon_x81yo_3819 {
  font-size: 15px;
  color: #2563eb;
  margin-right: 8px;
  flex-shrink: 0;
}

._amountsgd_x81yo_3833 {
  font-weight: 400 !important;
  font-size: 11px !important;
}

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

._actionBtn_x81yo_3855 {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: #fff8db;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

._actionBtn_x81yo_3855:hover {
  background: #fde68a;
  color: #b45309;
  transform: translateY(-1px);
}

._actionBtn1_x81yo_3895 {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: #faefee;
  color: #e9594d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

._actionBtn1_x81yo_3895:hover {
  background: #faefee;
  color: #e9594d;
  transform: translateY(-1px);
}

._actionBtn1_x81yo_3895:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(250, 194, 184, 0.2);
}

._channelIcon_x81yo_3945 {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Voice */
._voiceBg_x81yo_3967 {
  background: #e8f0ff;
}

._voiceIcon_x81yo_3599 {
  color: #2563eb;
  font-size: 13px;
}

/* Email */
._emailBg_x81yo_3987 {
  background: #fff2e8;
}

._emailIcon_x81yo_3609 {
  color: #f97316;
  font-size: 13px;
}

/* SMS */
._smsBg_x81yo_4007 {
  background: #eef2ff;
}

._smsIcon_x81yo_4015 {
  color: #4f46e5;
  font-size: 13px;
}

/* WhatsApp */
._whatsappBg_x81yo_4027 {
  background: #e8f8ed;
}

._whatsappIcon_x81yo_4035 {
  color: #22c55e;
  font-size: 13px;
}

/* Default */
._defaultBg_x81yo_4047 {
  background: #f3f4f6;
}

._defaultIcon_x81yo_4055 {
  color: #6b7280;
  font-size: 17px;
}

._customerAvatar_x81yo_4065 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef4ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

._askaiCard_x81yo_4093 {
  background: linear-gradient(90deg,
      #4925ab 0%,
      #4a2db3 25%,
      #3b3ec0 50%,
      #2d4ccd 75%,
      #205ede 100%);
  border-radius: 18px;
  padding: 12px 24px;
  color: #fff;
}

._askaiHeader_x81yo_4117 h2 {
  margin: 0;
  font-size: 15px !important;
  font-weight: 700;
  color: #fff !important;
}

._askaiHeader_x81yo_4117 p {
  margin: 8px 0 22px;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.9);
}

._askaiSearchBox_x81yo_4143 {
  width: 100%;
  min-height: 50px !important;
}

._askaiInputWrapper_x81yo_4153 {
  background: #fff;
  border-radius: 14px;
  min-height: 100px;
  display: flex;
  align-items: flex-start;
  /* instead of center */
  padding: 12px;
  position: relative;
}

._askaiSearchIcon_x81yo_4175 {
  color: #9ca3af;
  font-size: 20px;
  margin-right: 10px;
  margin-top: 10px;
  /* align with textarea */
  flex-shrink: 0;
}

._askaiTextarea_x81yo_4193 {
  flex: 1;
  border: none;
  resize: none;
  outline: none;
  font-size: 15px;
  min-height: 40px !important;
  /* increase as needed */
  line-height: 22px;
  padding: 8px 0;
  color: #111827;
  background: transparent;
  overflow: hidden;
}

._askaiTextarea_x81yo_4193::placeholder {
  color: #9ca3af;
}

._askaiSendButton_x81yo_4231 {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #2b49b8 0%, #1f3488 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: auto;
  flex-shrink: 0;
}

._askaiSendButton_x81yo_4231:hover {
  background: linear-gradient(180deg, #233ea4 0%, #192c74 100%);
}

._askaiSendButton_x81yo_4231 svg {
  font-size: 20px;
}

._askaiExamples_x81yo_4277 {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

._askaiChip_x81yo_4291 {
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.25s;
}

._askaiChip_x81yo_4291:hover {
  background: rgba(255, 255, 255, 0.28);
}

._askaiActions_x81yo_4323 {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

._askaiMicButton_x81yo_4341,
._askaiSendButton_x81yo_4231 {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

._askaiMicButton_x81yo_4341 {
  width: 34px;
  height: 34px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  color: #243d9c;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition: all 0.2s ease;
}

._askaiMicButton_x81yo_4341:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1f2937;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

._askaiMicButton_x81yo_4341:active {
  transform: scale(0.95);
}

._askaiMicButton_x81yo_4341 svg {
  font-size: 18px;
}

._askaiSendButton_x81yo_4231 {
  background: linear-gradient(180deg, #2b49b8 0%, #1f3488 100%);
  color: #fff;
}

._voice_wave_x81yo_4441 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 22px;
  height: 22px;
  padding-top: 12px !important;
}

._voice_wave_x81yo_4441 span {
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4f46e5 0%, #2563eb 100%);
  animation: _voiceWave_x81yo_1 0.9s ease-in-out infinite;
  transform-origin: center bottom;
}

._voice_wave_x81yo_4441 span:nth-child(1) {
  animation-delay: 0s;
}

._voice_wave_x81yo_4441 span:nth-child(2) {
  animation-delay: 0.15s;
}

._voice_wave_x81yo_4441 span:nth-child(3) {
  animation-delay: 0.3s;
}

._voice_wave_x81yo_4441 span:nth-child(4) {
  animation-delay: 0.45s;
}

._voice_wave_x81yo_4441 span:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes _voiceWave_x81yo_1 {

  0%,
  100% {
    transform: scaleY(0.5);
    opacity: 0.45;
  }

  25% {
    transform: scaleY(1.8);
    opacity: 0.8;
  }

  50% {
    transform: scaleY(3.2);
    opacity: 1;
  }

  75% {
    transform: scaleY(1.6);
    opacity: 0.8;
  }
}

._pageLoader_x81yo_4567 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);

  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 99999;
}/* ==========================================================
   ROOT VARIABLES
========================================================== */
:root {
  --vcd-ink: #17203a;
  --vcd-slate: #6b7280;
  --vcd-accent: #2a5bd7;
  --vcd-accent-soft: #edf4ff;
  --vcd-surface: #ffffff;
  --vcd-canvas: #f6f8fc;
  --vcd-line: #e6eaf2;
}

/* ==========================================================
   MODAL
========================================================== */

._aiVoiceModal_juuzt_35 {
  max-width: 50%;
}

._aiVoiceModal_juuzt_35 .modal-content {
  border: none;
  border-radius: 18px;
  overflow: hidden;
}

._aiVoiceModal_juuzt_35 .modal-header {
  background: #fff;
  border-bottom: 1px solid var(--vcd-line);
  padding: 18px 24px;
}

._aiVoiceModal_juuzt_35 .modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vcd-ink);
}

._aiVoiceModal_juuzt_35 .modal-body {
  background: var(--vcd-canvas);
  padding: 24px;
  max-height: 85vh;
  overflow-y: auto;
}

/* ==========================================================
   SUMMARY CARD
========================================================== */

._aiVoiceCard_juuzt_101 {
  background: #fff;
  border: 1px solid var(--vcd-line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.04);
}

._aiVoiceItem_juuzt_119 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._aiVoiceItem_juuzt_119 label {
  margin: 0;
  font-size: 10px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(133, 131, 131);
}

._aiVoiceItem_juuzt_119 strong {
  margin-top: 6px;
  color: var(--vcd-ink);
  font-size: 0.95rem;
  font-weight: 600;
  word-break: break-word;
}

._aiVoiceMono_juuzt_165 {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--vcd-slate);
  font-family: Consolas, monospace;
  word-break: break-all;
}

._aiVoiceLink_juuzt_181 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--vcd-accent);
  text-decoration: none;
  font-weight: 600;
}

._aiVoiceLink_juuzt_181:hover {
  color: var(--vcd-accent);
  text-decoration: underline;
}

/* ==========================================================
   COMMON SECTION
========================================================== */

._aiVoiceSection_juuzt_219 {
  background: #fff;
  border: 1px solid var(--vcd-line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

._aiVoiceSection_juuzt_219 h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--vcd-ink);
}

/* ==========================================================
   INFO ROW
========================================================== */

._aiVoiceInfo_juuzt_263 {
  /* display: flex; */
  align-items: center;
  gap: 10px;
  background: #fafbfd;
  border: 1px solid var(--vcd-line);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 58px;
}

._aiVoiceInfo_juuzt_263 svg {
  color: var(--vcd-accent);
  font-size: 18px;
  flex-shrink: 0;
}

._aiVoiceInfo_juuzt_263 span {
  color: var(--vcd-slate);
  font-size: 0.85rem;
  font-weight: 500;
}

._aiVoiceInfo_juuzt_263 strong {
  margin-left: auto;
  text-align: right;
  color: var(--vcd-ink);
  font-size: 0.9rem;
  font-weight: 600;
  word-break: break-word;
}

/* ==========================================================
   EMAIL MESSAGE
========================================================== */

._aiVoiceMessage_juuzt_335 {
  background: #fafbfd;
  border: 1px solid var(--vcd-line);
  border-radius: 12px;
  padding: 18px;
  max-height: 350px;
  overflow-y: auto;
}

._aiVoiceMessage_juuzt_335 pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--vcd-ink);
  line-height: 1.7;
}

/* ==========================================================
   AI SUMMARY
========================================================== */

._aiVoiceSummary_juuzt_381 {
  margin: 0;
  line-height: 1.7;
  font-size: 0.9rem;
  color: var(--vcd-ink);
}

/* ==========================================================
   TRANSCRIPT
========================================================== */

._aiVoiceTranscript_juuzt_403 {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._transcriptLine_juuzt_419 {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.6;
}

._agentLine_juuzt_435 {
  background: #edf4ff;
  align-self: flex-start;
}

._customerLine_juuzt_445 {
  background: #f3f4f6;
  align-self: flex-end;
  text-align: right;
}

/* ==========================================================
   SCRIPT
========================================================== */

._aiVoiceScript_juuzt_465 {
  max-height: 260px;
  overflow-y: auto;
}

._scriptLine_juuzt_475 {
  padding: 10px 0;
  border-bottom: 1px dashed var(--vcd-line);
  font-size: 0.88rem;
}

._scriptLine_juuzt_475:last-child {
  border-bottom: none;
}

._scriptLine_juuzt_475 strong {
  color: var(--vcd-ink);
}

/* ==========================================================
   AUDIO
========================================================== */

._aiVoiceAudio_juuzt_511 {
  width: 100%;
}

/* ==========================================================
   BADGE
========================================================== */

._aiVoiceStatus_juuzt_527 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================================
   SCROLLBAR
========================================================== */

._aiVoiceModal_juuzt_35 .modal-body::-webkit-scrollbar,
._aiVoiceTranscript_juuzt_403::-webkit-scrollbar,
._aiVoiceScript_juuzt_465::-webkit-scrollbar,
._aiVoiceMessage_juuzt_335::-webkit-scrollbar {
  width: 6px;
}

._aiVoiceModal_juuzt_35 .modal-body::-webkit-scrollbar-thumb,
._aiVoiceTranscript_juuzt_403::-webkit-scrollbar-thumb,
._aiVoiceScript_juuzt_465::-webkit-scrollbar-thumb,
._aiVoiceMessage_juuzt_335::-webkit-scrollbar-thumb {
  background: #cfd8e6;
  border-radius: 20px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {
  ._aiVoiceModal_juuzt_35 {
    max-width: 95%;
  }

  ._aiVoiceModal_juuzt_35 .modal-body {
    padding: 18px;
  }

  ._aiVoiceCard_juuzt_101,
  ._aiVoiceSection_juuzt_219 {
    padding: 18px;
  }
}

@media (max-width: 767px) {
  ._aiVoiceModal_juuzt_35 {
    max-width: 100%;
    margin: 10px;
  }

  ._aiVoiceModal_juuzt_35 .modal-body {
    padding: 16px;
  }

  ._aiVoiceCard_juuzt_101,
  ._aiVoiceSection_juuzt_219 {
    padding: 16px;
  }

  ._aiVoiceInfo_juuzt_263 {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  ._aiVoiceInfo_juuzt_263 strong {
    width: 100%;
    margin-left: 28px;
    text-align: left;
  }
}

@media (max-width: 576px) {
  ._aiVoiceModal_juuzt_35 .modal-header {
    padding: 14px 16px;
  }

  ._aiVoiceModal_juuzt_35 .modal-body {
    padding: 14px;
  }

  ._aiVoiceItem_juuzt_119 label {
    font-size: 0.68rem;
  }

  ._aiVoiceItem_juuzt_119 strong {
    font-size: 0.88rem;
  }

  ._aiVoiceSection_juuzt_219 h5 {
    font-size: 0.95rem;
  }
}

._chatRow_juuzt_719 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}

._agentRow_juuzt_733 {
  justify-content: flex-start;
}

._customerRow_juuzt_741 {
  justify-content: flex-end;
}

._avatar_juuzt_749 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #edf2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  flex-shrink: 0;
}

._chatBubble_juuzt_773 {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.5;
}

._agentBubble_juuzt_787 {
  background: #e8f1ff;
}

._customerBubble_juuzt_795 {
  background: #f3f4f6;
}

._chatName_juuzt_803 {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  color: #2563eb;
}._createAccountPage_15402_1 {
  --workflow-blue: #1456ef;
  --workflow-ink: #14224a;
  --workflow-muted: #65708a;
  --workflow-line: #e6ebf4;
  --workflow-soft: #f7f9fd;
  --workflow-green: #0faf61;
  --workflow-orange: #f28b16;
  --workflow-purple: #7c4dff;
  padding: 18px;
  background: var(--workflow-soft);
  color: var(--workflow-ink);
}

._createAccountPage_15402_1 * {
  box-sizing: border-box;
}

._pageHeader_15402_37,
._headerActions_15402_39,
._sectionHeader_15402_41,
._stepCard_15402_43,
._stepContent_15402_45>div,
._stepActions_15402_47,
._templateTabs_15402_49,
._templateTitle_15402_51,
._instructionItem_15402_53,
._inlineSetting_15402_55,
._settingsItem_15402_57,
._tipBox_15402_59,
._mobileDock_15402_61 {
  display: flex;
  align-items: center;
}

._pageHeader_15402_37 {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

._pageHeader_15402_37 h1 {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: #101b3d;
}

._pageHeader_15402_37 p,
._sectionHeader_15402_41 p,
._inlineSetting_15402_55 p,
._settingsItem_15402_57 p,
._templateCard_15402_107 p,
._sidebarSection_15402_109 p,
._instructionItem_15402_53 p {
  margin: 0;
  color: var(--workflow-muted);
}

._headerActions_15402_39 {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

._primaryButton_15402_133,
._secondaryButton_15402_135,
._statusButton_15402_137,
._addStepButton_15402_139,
._fullAddButton_15402_141,
._generateButton_15402_143 {
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--workflow-line);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

._primaryButton_15402_133,
._generateButton_15402_143 {
  border-color: var(--workflow-blue);
  color: #fff;
  background: var(--workflow-blue);
  box-shadow: 0 8px 18px rgba(20, 86, 239, 0.18);
}

._secondaryButton_15402_135,
._statusButton_15402_137,
._addStepButton_15402_139,
._fullAddButton_15402_141 {
  background: #fff;
  color: #203058;
}

._primaryButton_15402_133,
._secondaryButton_15402_135,
._statusButton_15402_137 {
  padding: 0 18px;
}

._secondaryButton_15402_135 svg,
._statusButton_15402_137 svg,
._addStepButton_15402_139 svg,
._fullAddButton_15402_141 svg,
._generateButton_15402_143 svg {
  flex: 0 0 auto;
}

._primaryButton_15402_133:hover,
._secondaryButton_15402_135:hover,
._statusButton_15402_137:hover,
._addStepButton_15402_139:hover,
._fullAddButton_15402_141:hover,
._generateButton_15402_143:hover {
  transform: translateY(-1px);
}

._secondaryButton_15402_135:hover,
._statusButton_15402_137:hover,
._addStepButton_15402_139:hover,
._fullAddButton_15402_141:hover {
  border-color: rgba(20, 86, 239, 0.35);
  box-shadow: 0 8px 20px rgba(40, 58, 100, 0.08);
}

._statusButton_15402_137 {
  color: var(--workflow-green);
}

._statusButton_15402_137 span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--workflow-green);
}

._leftStack_15402_291 {
  display: grid;
  gap: 14px;
}

._panel_15402_301,
._sidePanel_15402_303 {
  border: 1px solid var(--workflow-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(40, 58, 100, 0.04);
}

._panel_15402_301 {
  padding: 16px;
}

._panel_15402_301 h2,
._sidebarSection_15402_109 h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: #18244a;
}

._fieldLabel_15402_341 {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #304061;
}

._fieldLabel_15402_341 sup {
  color: #ef3d4f;
  font-size: 10px;
}

._formControl_15402_367,
._textArea_15402_369,
._generatorInput_15402_371 {
  width: 100%;
  border: 1px solid var(--workflow-line);
  border-radius: 5px;
  background: #fbfcff;
  color: #263654;
  font-weight: 700;
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

._formControl_15402_367 {
  min-height: 38px;
  padding: 0 12px;
}

._textArea_15402_369,
._generatorInput_15402_371 {
  min-height: 100px !important;
  resize: none;
  padding: 10px 12px;
  line-height: 1.45;
}

._formControl_15402_367:focus,
._textArea_15402_369:focus,
._generatorInput_15402_371:focus {
  border-color: rgba(20, 86, 239, 0.55);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.1);
}

._inlineSetting_15402_55,
._settingsItem_15402_57 {
  justify-content: space-between;
  gap: 14px;
  height: 100%;
}

._inlineSetting_15402_55 strong,
._settingsItem_15402_57 strong {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: #25365b;
}

._inlineSetting_15402_55 p,
._settingsItem_15402_57 p {
  font-size: 10px;
  line-height: 1.35;
}

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

._autoToggleLabel_15402_495 {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

._switch_15402_509 {
  position: relative;
  display: inline-block;
  width: 43px;
  height: 22px;
  flex-shrink: 0;
}

._switch_15402_509 input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

._switch_15402_509 span {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: 0.3s;
}

._switch_15402_509 span::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  transition: 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

._switch_15402_509 input:checked+span {
  background: #1456ef;
}

._switch_15402_509 input:checked+span::before {
  transform: translateX(20px);
}

._switch_15402_509 input:focus+span {
  box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.15);
}

._sectionHeader_15402_41 {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

._sectionHeader_15402_41 h2 {
  margin-bottom: 3px;
}

._sectionHeader_15402_41 p {
  font-size: 11px;
}

._addStepButton_15402_139 {
  min-width: 102px;
  padding: 0 14px;
}

._stepsPanel_15402_651 {
  position: relative;
}

._stepsList_15402_659 {
  position: relative;
  display: grid;
  gap: 10px;
}

._stepsList_15402_659::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 15px;
  width: 1px;
  background: #d7deea;
}

._stepCard_15402_43 {
  position: relative;
  min-height: 58px;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--workflow-line);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(31, 49, 87, 0.035);
}

._stepCard_15402_43:hover {
  border-color: rgba(20, 86, 239, 0.28);
}

._stepConnector_15402_721 {
  position: absolute;
  left: -3px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #d6deec;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

._channelIcon_15402_745,
._templateIcon_15402_747,
._instructionIcon_15402_749 {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 7px;
}

._channelIcon_15402_745 {
  width: 34px;
  height: 34px;
  font-size: 17px;
}

._channelIcon_15402_745._email_15402_775,
._templateIcon_15402_747._email_15402_775,
._instructionIcon_15402_749._email_15402_775 {
  color: var(--workflow-blue);
  background: #eaf2ff;
}

._channelIcon_15402_745._whatsapp_15402_789,
._templateIcon_15402_747._whatsapp_15402_789,
._instructionIcon_15402_749._whatsapp_15402_789 {
  color: var(--workflow-green);
  background: #e8f9ef;
}

._channelIcon_15402_745._voice_15402_803,
._templateIcon_15402_747._voice_15402_803,
._instructionIcon_15402_749._voice_15402_803 {
  color: var(--workflow-purple);
  background: #f0ebff;
}

._templateIcon_15402_747._strict_15402_817 {
  color: var(--workflow-orange);
  background: #fff4e5;
}

._stepNumber_15402_827 {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #53627e;
  background: #f3f6fb;
  font-weight: 900;
}

._stepContent_15402_45 {
  min-width: 0;
  flex: 1;
}

._stepContent_15402_45>div {
  flex-wrap: wrap;
  gap: 8px;
}

._stepContent_15402_45 strong,
._templateCard_15402_107 strong,
._instructionItem_15402_53 strong {
  font-size: 12px;
  color: #182747;
}

._stepContent_15402_45 p {
  margin: 3px 0 0;
  color: var(--workflow-muted);
  font-size: 10px;
}

._channelBadge_15402_897 {
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 900;
}

._channelBadge_15402_897._email_15402_775 {
  color: var(--workflow-blue);
  background: #eaf2ff;
}

._channelBadge_15402_897._whatsapp_15402_789 {
  color: var(--workflow-green);
  background: #e7f9ee;
}

._channelBadge_15402_897._voice_15402_803 {
  color: var(--workflow-purple);
  background: #efeaff;
}

._stepTiming_15402_941 {
  flex: 0 0 86px;
  color: #25365b;
}

._stepTiming_15402_941 small {
  display: block;
  color: #6b7892;
  font-size: 9px;
  font-weight: 800;
}

._stepTiming_15402_941 strong {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

._stepActions_15402_47 {
  flex: 0 0 auto;
  gap: 8px;
}

._stepActions_15402_47 button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--workflow-line);
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #20345f;
}

._stepActions_15402_47 button:last-child {
  color: #f04455;
}

._fullAddButton_15402_141 {
  width: calc(100% - 48px);
  /* margin: 12px 0 0 48px; */
  margin-top: 10px;
  color: var(--workflow-blue);
  border-style: dashed;
}

._tipBox_15402_59 {
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--workflow-line);
  border-radius: 7px;
  background: #fff;
  color: #52617f;
}

._tipBox_15402_59 svg,
._tipBox_15402_59 strong {
  color: var(--workflow-blue);
}

._sidePanel_15402_303 {
  position: sticky;
  top: 14px;
  overflow: hidden;
}

._templateTabs_15402_49 {
  height: 52px;
  border-bottom: 1px solid var(--workflow-line);
}

._templateTabs_15402_49 button {
  position: relative;
  flex: 1;
  height: 100%;
  border: 0;
  background: #fff;
  color: #263657;
  font-weight: 900;
}

._templateTabs_15402_49 button span {
  margin-left: 6px;
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--workflow-blue);
  background: #eaf2ff;
  font-size: 9px;
}

._templateTabs_15402_49 ._activeTab_15402_1123 {
  color: var(--workflow-blue);
}

._templateTabs_15402_49 ._activeTab_15402_1123::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--workflow-blue);
}

._sidebarSection_15402_109 {
  padding: 14px;
  border-bottom: 1px solid var(--workflow-line);
}

._sidebarSection_15402_109:last-child {
  border-bottom: 0;
}

._sidebarIntro_15402_1171 {
  margin-bottom: 12px !important;
  font-size: 11px;
}

._templateList_15402_1181 {
  display: grid;
  gap: 10px;
}

._templateCard_15402_107 {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 86px;
  padding: 13px;
  border: 1px solid var(--workflow-line);
  border-radius: 7px;
  background: #fff;
}

._templateCard_15402_107._selectedTemplate_15402_1215 {
  border-color: var(--workflow-blue);
  box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.08);
}

._templateIcon_15402_747 {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

._templateTitle_15402_51 {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

._templateTitle_15402_51 span {
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--workflow-green);
  background: #e8f9ef;
  font-size: 8px;
  font-weight: 900;
}

._templateCard_15402_107 p {
  margin-bottom: 8px;
  font-size: 10px;
  line-height: 1.4;
}

._templateCard_15402_107 small {
  color: #293a5d;
  font-weight: 800;
}

._radioDot_15402_1289 {
  width: 13px;
  height: 13px;
  margin-top: 6px;
  border: 1px solid #9aa8c0;
  border-radius: 50%;
}

._selectedTemplate_15402_1215 ._radioDot_15402_1289 {
  border: 4px solid var(--workflow-blue);
}

._generatorBox_15402_1313 h3,
._sidebarSection_15402_109 h3 {
  margin-bottom: 5px;
}

._generatorInput_15402_371 {
  min-height: 66px;
  margin: 12px 0 10px;
  color: #63708b;
  font-size: 10px;
  font-weight: 700;
}

._generateButton_15402_143 {
  width: 100%;
}

._instructionsList_15402_1347 {
  display: grid;
  gap: 10px;
}

._instructionItem_15402_53 {
  gap: 10px;
}

._instructionIcon_15402_749 {
  width: 28px;
  height: 28px;
}

._instructionItem_15402_53 div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

._instructionItem_15402_53 p {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
}

._instructionItem_15402_53 button {
  flex: 0 0 auto;
  min-width: 46px;
  height: 30px;
  border: 1px solid var(--workflow-line);
  border-radius: 5px;
  color: #314160;
  background: #fff;
  font-weight: 800;
}

._mobileDock_15402_61 {
  display: none;
}

@media (max-width: 1199.98px) {
  ._sidePanel_15402_303 {
    position: static;
  }

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

@media (max-width: 991.98px) {
  ._pageHeader_15402_37 {
    align-items: flex-start;
    flex-direction: column;
  }

  ._headerActions_15402_39 {
    justify-content: flex-start;
    width: 100%;
  }

  ._stepCard_15402_43 {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  ._stepContent_15402_45 {
    flex-basis: calc(100% - 82px);
  }

  ._stepTiming_15402_941 {
    margin-left: 70px;
  }

  ._stepActions_15402_47 {
    margin-left: auto;
  }
}

@media (max-width: 767.98px) {
  ._createAccountPage_15402_1 {
    padding: 14px;
  }

  ._panel_15402_301,
  ._sidebarSection_15402_109 {
    padding: 14px;
  }

  ._templateList_15402_1181 {
    grid-template-columns: 1fr;
  }

  ._inlineSetting_15402_55,
  ._settingsItem_15402_57 {
    min-height: 48px;
  }

  ._stepsList_15402_659::before {
    left: 14px;
  }

  ._fullAddButton_15402_141 {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  ._createAccountPage_15402_1 {
    padding: 12px 12px 78px;
  }

  ._pageHeader_15402_37 h1 {
    font-size: 19px;
  }

  ._headerActions_15402_39 {
    display: none;
  }

  ._sectionHeader_15402_41 {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  ._addStepButton_15402_139 {
    width: 100%;
  }

  ._stepCard_15402_43 {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
  }

  ._stepConnector_15402_721 {
    display: none;
  }

  ._stepContent_15402_45 {
    grid-column: 1 / -1;
    flex-basis: auto;
  }

  ._stepTiming_15402_941 {
    grid-column: 1 / 3;
    margin-left: 0;
  }

  ._stepActions_15402_47 {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }

  ._stepsList_15402_659::before {
    display: none;
  }

  ._templateCard_15402_107 {
    grid-template-columns: auto minmax(0, 1fr);
  }

  ._radioDot_15402_1289 {
    position: absolute;
    top: 13px;
    right: 13px;
  }

  ._instructionItem_15402_53 {
    align-items: flex-start;
  }

  ._mobileDock_15402_61 {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--workflow-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 22px rgba(35, 47, 82, 0.12);
  }

  ._mobileDock_15402_61 ._secondaryButton_15402_135,
  ._mobileDock_15402_61 ._primaryButton_15402_133 {
    width: 100%;
    padding: 0 10px;
  }
}

._closeButton_15402_1741 {
  width: 32px;
  height: 32px;
  border: 1px solid #dee2e6;
  border-radius: 15%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s ease;
}

._closeButton_15402_1741:hover {
  background: #f8f9fa;
}

._closeButton_15402_1741 svg {
  font-size: 20px;
  color: #444;
}

._customModal_15402_1785 {
  width: calc(100vw - 32px) !important;
  max-width: 1400px !important;

  height: calc(100vh - 32px);

  margin: 16px auto !important;
}

._customModalContent_15402_1803 {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border: none;
  border-radius: 14px;
}

._createAccountPage_15402_1 {
  width: 100%;
  height: 100%;

  padding: 20px;

  overflow-y: auto;
  overflow-x: hidden;

  background: #f7f9fd;
}

._createAccountPage_15402_1 {
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  background: #f7f9fd;
}
body.ecs-finance-workflow-modal-open
  .modal.show {
  z-index: 100100 !important;
}

body.ecs-finance-workflow-modal-open
  .modal-backdrop.show {
  z-index: 100090 !important;
}

@media (max-width: 991px) {
  ._customModal_15402_1785 {
    width: 98vw;
    max-width: 98vw;
    margin: 0.5rem auto;
  }

  ._customModalContent_15402_1803 {
    height: 95vh;
  }

  ._createAccountPage_15402_1 {
    padding: 16px;
  }
}

@media (max-width: 767px) {
  ._customModal_15402_1785 {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
  }

  ._customModalContent_15402_1803 {
    height: 100vh;
    border-radius: 0;
  }

  ._createAccountPage_15402_1 {
    padding: 15px;
  }
}

@media (max-width: 767px) {
  ._pageHeader_15402_37 {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  ._headerActions_15402_39 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  ._headerActions_15402_39 button {
    flex: 1 1 calc(50% - 10px);
  }

  ._closeButton_15402_1741 {
    position: absolute;
    top: 16px;
    right: 16px;
    flex: none !important;
  }
}

@media (max-width: 767px) {
  ._stepCard_15402_43 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  ._stepContent_15402_45 {
    width: 100%;
  }

  ._stepTiming_15402_941 {
    margin-left: 0;
    flex: 1;
  }

  ._stepActions_15402_47 {
    margin-left: auto;
  }
}

/* =========================
   Workflow Step Modal
========================= */

._stepModalLayer_15402_2049 {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

._stepModalBackdrop_15402_2067 {
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 45, 0.45);
  backdrop-filter: blur(2px);
}

._stepModalDialog_15402_2081 {
  position: relative;
  z-index: 100000;
  width: 550px;
  max-width: calc(100% - 30px);
  max-height: 90vh;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

._stepModalHeader_15402_2109 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid #edf1f7;
}

._stepModalHeader_15402_2109 h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #16254d;
}

._stepModalHeader_15402_2109 p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

._stepModalBody_15402_2151 {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

/* ---------- Form ---------- */

._stepFormGrid_15402_2167 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

._stepField_15402_2181 {
  display: flex;
  flex-direction: column;
}

._stepField_15402_2181 small {
  margin-top: 5px;
  color: #8a93a5;
  font-size: 11px;
}

._stepControlWithIcon_15402_2203 {
  position: relative;
}

._stepControlWithIcon_15402_2203 svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6f7b8d;
  pointer-events: none;
  font-size: 15px;
}

._stepControlWithIcon_15402_2203 ._formControl_15402_367 {
  padding-left: 38px;
}

._formControl_15402_367 {
  width: 100%;
  height: 42px;
  border: 1px solid #dfe5f1;
  border-radius: 6px;
  background: #fff;
  padding: 0 12px;
  font-size: 13px;
  color: #1d2b4f;
}

._formControl_15402_367:focus {
  outline: none;
  border-color: #1456ef;
  box-shadow: 0 0 0 3px rgba(20, 86, 239, 0.12);
}

/* ---------- Switch Row ---------- */

._stepSwitchGrid_15402_2277 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 18px 0;
}

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

._settingsItem_15402_57 strong {
  display: block;
  font-size: 13px;
  color: #22345f;
}

._settingsItem_15402_57 p {
  margin: 2px 0 0;
  font-size: 11px;
  color: #81899a;
}

/* ---------- Template ---------- */

._templatePickerRow_15402_2331 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}

._stepSecondaryButton_15402_2347 {
  height: 42px;
  padding: 0 18px;
  border: 1px solid #dce3f2;
  background: #fff;
  color: #22345f;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

._stepSecondaryButton_15402_2347:hover {
  background: #f8faff;
}

/* ---------- Editor ---------- */

._messageEditorBlock_15402_2381 {
  margin-top: 10px;
}

._messageEditorHeader_15402_2389 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

._messageEditorActions_15402_2403 {
  display: flex;
  gap: 15px;
}

._messageEditorActions_15402_2403 button {
  border: none;
  background: none;
  color: #1456ef;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

._messageTextarea_15402_2437 {
  min-height: 150px !important;
  resize: none;
  border: 1px solid #dfe5f1;
  border-radius: 6px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
}

._variableHint_15402_2457 {
  margin-top: 8px;
  font-size: 11px;
  color: #7a8498;
}

/* ---------- AI Suggestion ---------- */

._aiSuggestionBox_15402_2473 {
  margin-top: 18px;
  border: 1px solid #d9e6ff;
  background: #f8fbff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
}

._aiSuggestionTitle_15402_2497 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

._aiSuggestionTitle_15402_2497 strong {
  font-size: 13px;
}

._aiSuggestionTitle_15402_2497 span {
  background: #e7f0ff;
  color: #1456ef;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
}

._aiSuggestionBox_15402_2473 p {
  margin: 4px 0;
  font-size: 12px;
  color: #616b7e;
}

._aiSuggestionActions_15402_2549 {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

._stepPrimaryButton_15402_2561 {
  height: 42px;
  padding: 0 20px;
  border: none;
  border-radius: 6px;
  background: #1456ef;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

._stepPrimaryButton_15402_2561:hover {
  background: #0f49cf;
}

/* ---------- Footer ---------- */

._stepModalFooter_15402_2595 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid #edf1f7;
  background: #fff;
}

/* ---------- Responsive ---------- */

/* @media (max-width: 768px) {
    .stepModalDialog {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .stepModalBody {
        padding: 16px;
    }

    .stepFormGrid,
    .stepSwitchGrid,
    .templatePickerRow {
        grid-template-columns: 1fr;
    }

    .messageEditorHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .aiSuggestionBox {
        flex-direction: column;
        align-items: flex-start;
    }

    .aiSuggestionActions {
        width: 100%;
    }

    .aiSuggestionActions button {
        flex: 1;
    }

    .stepModalFooter {
        padding: 15px;
    }

    .stepModalFooter button {
        flex: 1;
    }
} */

._stepFormGrid_15402_2167 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

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

._templatePickerRow_15402_2331 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

._templatePickerRow_15402_2331 ._stepSecondaryButton_15402_2347 {
  width: 100%;
}

/* Message */

._messageEditorHeader_15402_2389 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

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

._messageEditorActions_15402_2403 button {
  font-size: 11px;
}

._messageTextarea_15402_2437 {
  min-height: 80px;
}

/* AI Suggestion */

._aiSuggestionBox_15402_2473 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

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

._aiSuggestionActions_15402_2549 button {
  flex: 1;
}

/* Footer */

._stepModalFooter_15402_2595 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

._stepModalFooter_15402_2595 button {
  min-width: 110px;
}

._statusDropdown_15402_2869 {
  position: relative;
}

._statusMenu_15402_2877 {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

._statusMenu_15402_2877 button {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
}

._statusMenu_15402_2877 button:hover {
  background: #f5f5f5;
}

._activeDot_15402_2927,
._inactiveDot_15402_2929 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

._activeDot_15402_2927 {
  background: #22c55e;
}

._inactiveDot_15402_2929 {
  background: #ef4444;
}

._channelBadge_15402_897 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

/* Email */
._email_15402_775 {
  color: #2563eb;
  background: #dbeafe;
}

/* WhatsApp */
._whatsapp_15402_789 {
  color: #16a34a;
  background: #dcfce7;
}

/* SMS */
._sms_15402_3007 {
  color: #7c3aed;
  background: #ede9fe;
}

/* AI Voice */
._voice_15402_803 {
  color: #2563eb;
  background: #dbeafe;
}

._deleteModalBody_15402_3029 {
  position: relative;
  padding: 30px;
  border-radius: 12px;
}

._deleteCloseButton_15402_3041 {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

._deleteContent_15402_3071 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

._deleteIconBox_15402_3083 {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff1f0;
  color: #ff4d4f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

._deleteText_15402_3107 h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

._deleteText_15402_3107 h4 span {
  color: #ff4d4f;
}

._deleteText_15402_3107 p {
  color: #8c8c8c;
  font-size: 13px;
  line-height: 1.6;
}

._deleteFooter_15402_3139 {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

._deleteCancelButton_15402_3151 {
  flex: 1;
  height: 40px;
  border: 1px solid #222;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

._deleteConfirmButton_15402_3169 {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  background: #1456ef;
}

._deleteOverlay_15402_3189 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1055;
}

._deleteModal_15402_3029 {
  z-index: 1060;
}

._deleteModal_15402_3029 .modal-content {
  border-radius: 14px;
  border: none;
}

._statusActive_15402_3221 {
  color: #16a34a !important;
}

._statusInactive_15402_3229 {
  color: #dc2626 !important;
}

._activeDot_15402_2927 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #16a34a !important;
  display: inline-block;
}

._inactiveDot_15402_2929 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dc2626 !important;
  display: inline-block;
}

._parentModalBlur_15402_3269 {
  position: relative;
  overflow: hidden;
  filter: brightness(0.75);
  transition: all 0.25s ease;
  pointer-events: none;
}

._parentModalBlur_15402_3269::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 45, 0.45);
  border-radius: inherit;
  z-index: 999;
}

._variableChip_15402_3303 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid #d8e3f8;
  border-radius: 6px;
  color: #3157b7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

._variableChip_15402_3303:hover {
  background: #f3f7ff;
  border-color: #4f7df3;
}

/* ================= Variables Section ================= */

._variableBox_15402_3349 {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #dbe5f4;
  border-radius: 10px;
  background: #fff;
}

._variableHeader_15402_3365 {
  margin-bottom: 18px;
}

._variableHeader_15402_3365 h6 {
  margin: 0;
  font-size: 12px !important;
  font-weight: 700;
  color: #17203a;
}

._variableHeader_15402_3365 p {
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 11px !important;
}

._variableGrid_15402_3399 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._variableChip_15402_3303 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #d7e3ff;
  border-radius: 8px;
  color: #2563eb;
  font-size: 11px !important;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

._variableChip_15402_3303:hover {
  background: #eef4ff;
  border-color: #2563eb;
}

._variableChip_15402_3303 svg {
  font-size: 15px;
}

._variableTip_15402_3459 {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
  color: #6b7280;
  font-size: 11px !important;
  line-height: 1.5;
}._modalContent_1xatw_1 {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

._modalHeader_1xatw_13 {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
}

._modalHeader_1xatw_13 h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 22px;
}

._modalHeader_1xatw_13 p {
  margin-top: 6px;
  color: #777;
  font-size: 14px;
}

._modalHeader_1xatw_13 button {
  border: none;
  background: transparent;
  font-size: 22px;
}

._modalBody_1xatw_67 {
  padding: 24px;
}

._modalBody_1xatw_67 label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

._modalBody_1xatw_67 span {
  color: red;
}

._modalBody_1xatw_67 textarea {
  width: 100%;
  resize: none;
  border-radius: 12px;
  border: 1px solid #ddd;
  padding: 15px;
  outline: none;
  min-height: 140px;
}

._textArea_1xatw_115 {
  font-size: 13px !important;
  color: black;
  font-weight: 500;
}

._dropdown_1xatw_127 {
  position: relative;
  z-index: 1056;
}

._dropdownHeader_1xatw_137 {
  margin-top: 8px;
  border: 1px solid #ddd;
  border-radius: 12px;
  min-height: 52px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  background: white;
}

._dropdownMenu_1xatw_161 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
}

._option_1xatw_189 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
}

._option_1xatw_189:hover {
  background: #f5f8ff;
}

._option_1xatw_189 input {
  width: 18px;
  height: 18px;
}

._modalFooter_1xatw_223 {
  padding: 18px 24px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

._cancelBtn_1xatw_239 {
  border: 1px solid #ddd;
  background: white;
  border-radius: 10px;
  padding: 10px 18px;
}

._generateBtn_1xatw_253 {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 600;
}

._generateBtn_1xatw_253:hover {
  background: #1d4ed8;
}

._subTitle_1xatw_279 {
  font-size: 15px !important;
  font-weight: 600;
  margin-bottom: 5px !important;
}

._fieldLabel_1xatw_291 {
  font-size: 13px !important;
  font-weight: 600;
  margin-bottom: 5px !important;
}

.aiBackdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

._aiWorkflowDialog_1xatw_315 .modal-content {
  overflow: visible !important;
}

._aiWorkflowDialog_1xatw_315 .modal-body {
  overflow: visible !important;
}

._aiWorkflowDialog_1xatw_315 .modal-dialog {
  overflow: visible !important;
}

.aiBackdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
  line-height: initial;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 0.375em;
  border-bottom-right-radius: 0.375em;
}

.react-datepicker-popper {
  z-index: 1;
  line-height: 0;
}
.react-datepicker-popper .react-datepicker__triangle {
  stroke: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
  fill: #fff;
  color: #fff;
}
.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
  fill: #f0f0f0;
  color: #f0f0f0;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
  border-top-right-radius: 0.3rem;
}
.react-datepicker__header--middle {
  border-top: 1px solid #aeaeae;
  border-radius: 0;
  margin-top: 4px;
}
.react-datepicker__header--bottom {
  border-bottom: none;
  border-top: 1px solid #aeaeae;
  border-radius: 0 0 0.3rem 0.3rem;
}

.react-datepicker__header-wrapper {
  position: relative;
}
.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 2px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 15px;
}

.react-datepicker__month-select,
.react-datepicker__year-select,
.react-datepicker__month-year-select {
  background-color: transparent;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  margin-top: 5px;
  padding: 2px 5px;
}
.react-datepicker__month-select:focus-visible,
.react-datepicker__year-select:focus-visible,
.react-datepicker__month-year-select:focus-visible {
  outline: auto 1px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

h2.react-datepicker__current-month {
  padding: 0;
  margin: 0;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  align-items: center;
  background: none;
  display: flex;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: rgb(165.75, 165.75, 165.75);
}

.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  transform: rotate(225deg);
  right: -7px;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.5em;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 5em;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.375em;
  position: absolute;
  right: -87px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 0.375em;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 2.125em / 2);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__week-number--selected {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__week-number--selected:hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}

.react-datepicker__day-names {
  text-align: center;
  white-space: nowrap;
  margin-bottom: -8px;
}

.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 2.125em;
  line-height: 2.125em;
  text-align: center;
  margin: 0.208em;
}
.react-datepicker__day-name--disabled,
.react-datepicker__day--disabled,
.react-datepicker__time-name--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:not([aria-disabled=true]):hover,
.react-datepicker__month-text:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
.react-datepicker__year-text:not([aria-disabled=true]):hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--holidays,
.react-datepicker__month-text--holidays,
.react-datepicker__quarter-text--holidays,
.react-datepicker__year-text--holidays {
  position: relative;
  border-radius: 0.3rem;
  background-color: #ff6803;
  color: #fff;
}
.react-datepicker__day--holidays .overlay,
.react-datepicker__month-text--holidays .overlay,
.react-datepicker__quarter-text--holidays .overlay,
.react-datepicker__year-text--holidays .overlay {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}
.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
  background-color: rgb(207, 82.9642857143, 0);
}
.react-datepicker__day--holidays:hover .overlay,
.react-datepicker__month-text--holidays:hover .overlay,
.react-datepicker__quarter-text--holidays:hover .overlay,
.react-datepicker__year-text--holidays:hover .overlay {
  visibility: visible;
  opacity: 1;
}
.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: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: rgb(186.25, 217.0833333333, 241.25);
  color: rgb(0, 0, 0);
}
.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: rgb(28.75, 93.2196969697, 143.75);
  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: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range),
.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled .overlay,
.react-datepicker__month-text--disabled .overlay,
.react-datepicker__quarter-text--disabled .overlay,
.react-datepicker__year-text--disabled .overlay {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__input-container .react-datepicker__calendar-icon {
  position: absolute;
  padding: 0.625em;
  box-sizing: content-box;
}

.react-datepicker__view-calendar-icon input {
  padding: 6px 10px 5px 25px;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  transform: rotate(135deg);
  right: -16px;
  top: 0;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: rgb(178.5, 178.5, 178.5);
}
.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__close-icon--disabled {
  cursor: default;
}
.react-datepicker__close-icon--disabled::after {
  cursor: default;
  background-color: #ccc;
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__children-container {
  width: 17.25em;
  margin: 0.5em;
  padding-right: 0.25em;
  padding-left: 0.25em;
  height: auto;
}

.react-datepicker__aria-live {
  position: absolute;
  clip-path: circle(0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.react-datepicker__calendar-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.react-datepicker-popper-offset {
  margin-top: -0.7em;
}
._voiceModalDialog_7ua20_1 ._modal-content_7ua20_1 {
  border: none;
  border-radius: 24px;
  overflow: hidden;
}

._voiceModal_7ua20_1 {
  padding: 14px;
  position: relative;
  background: #fff;
  border-radius: 24px;
}

._voiceClose_7ua20_27 {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f3f4f8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

._voiceClose_7ua20_27:hover {
  background: #ede9fe;
  color: #7b3ff2;
}

._voiceTitle_7ua20_69 {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 12px;
  color: #111110;
}

._voiceCard_7ua20_85 {
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  margin-top: 12px;
}

._voiceListening_7ua20_103 {
  color: #7b3ff2 !important;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

._voiceWave_7ua20_117 {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

._waveBar_7ua20_135 {
  width: 4px;
  height: 12px;
  border-radius: 10px;
  background: linear-gradient(to top, #7b3ff2, #2d8cff);
}

._waveAnimate_7ua20_149 {
  animation: _waveMove_7ua20_1 0.9s infinite ease-in-out;
}

._waveBar_7ua20_135:nth-child(odd) {
  animation-duration: 0.8s;
}

._waveBar_7ua20_135:nth-child(even) {
  animation-duration: 1.1s;
}

._waveBar_7ua20_135:nth-child(3n) {
  animation-duration: 1.4s;
}

._waveBar_7ua20_135:nth-child(4n) {
  animation-duration: 1.2s;
}

._waveBar_7ua20_135:nth-child(5n) {
  animation-duration: 0.95s;
}

@keyframes _waveMove_7ua20_1 {
  0% {
    height: 10px;
  }

  20% {
    height: 45px;
  }

  40% {
    height: 20px;
  }

  60% {
    height: 65px;
  }

  80% {
    height: 35px;
  }

  100% {
    height: 10px;
  }
}

._voiceMic_7ua20_249 {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  margin: 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(90deg, #7b3ff2, #2d8cff);
  box-shadow: 0 5px 15px rgba(123, 63, 242, 0.35);
  cursor: pointer;
  transition: all 0.2s;
}

._voiceMic_7ua20_249:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(123, 63, 242, 0.45);
}

._voiceMic_7ua20_249:active {
  transform: scale(0.95);
}

._voiceHint_7ua20_299 {
  color: #777;
  font-size: 12px;
  margin: 0;
}

._voiceTextCard_7ua20_311 {
  margin-top: 12px;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 12px;
}

._voiceHeader_7ua20_325 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

._voiceTextarea_7ua20_345 {
  width: 100%;
  min-height: 70px;
  border: 1px solid #ececec;
  border-radius: 10px;
  resize: none;
  padding: 8px 10px;
  outline: none;
  font-size: 14px;
  background-color: white;
  transition: border-color 0.2s;
}

._voiceTextarea_7ua20_345:focus {
  border-color: #7b3ff2;
  box-shadow: 0 0 0 3px rgba(123, 63, 242, 0.1);
}

._voiceSaved_7ua20_381 {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5a5a5a;
  font-size: 12px;
}

._voiceRetry_7ua20_399 {
  margin: 12px auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: #7b3ff2;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

._voiceRetry_7ua20_399:hover {
  color: #6b35e0;
  transform: translateX(2px);
}

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

._editBtn_7ua20_447,
._sendBtn_7ua20_449 {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}

._editBtn_7ua20_447 {
  background: #fff;
  color: #7b3ff2;
  border: 2px solid #7b3ff2;
  cursor: pointer;
}

._editBtn_7ua20_447:hover {
  background: #ede9fe;
  transform: translateY(-1px);
}

._editBtn_7ua20_447:active {
  transform: translateY(0);
}

._sendBtn_7ua20_449 {
  border: none;
  color: #fff;
  background: linear-gradient(90deg, #7b3ff2, #2d8cff);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(123, 63, 242, 0.25);
}

._sendBtn_7ua20_449:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(123, 63, 242, 0.35);
}

._sendBtn_7ua20_449:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Buttons ── */
._btn_yellow_7ua20_541 {
  background: linear-gradient(90deg, #7b3ff2, #2d8cff);
  border: none;
  color: #fff;
  font-family: var(--font);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}

._btn_yellow_7ua20_541:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(123, 63, 242, 0.45);
}

._btn_yellow_7ua20_541:active {
  transform: translateY(0);
}

._btn_yellow_7ua20_541:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

._apiError_7ua20_607 {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ede9fe;
  color: #7b3ff2;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #c4b5fd;
}

/* Label button */
._actionGroup_7ua20_631 .btn-primary {
  background: #ffffff !important;
  border-color: rgb(174, 221, 240);
  color: #374151 !important;
  border-radius: 15px;
}

._actionGroup_7ua20_631 .btn-primary:hover,
._actionGroup_7ua20_631 .btn-primary:focus {
  background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
  border-color: rgb(163, 189, 241);
  color: #ffffff !important;
}

/* Secondary label */
._actionGroup_7ua20_631 .btn-secondary {
  background: #ffffff !important;
  border-color: rgb(174, 221, 240);
  color: #374151 !important;
  border-radius: 15px;
}

._actionGroup_7ua20_631 .btn-secondary:hover,
._actionGroup_7ua20_631 .btn-secondary:focus {
  background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
  border-color: rgb(163, 189, 241);
  color: #ffffff !important;
}

/* Dismiss button */
._actionGroup_7ua20_631 .btn-danger {
  color: #fff !important;
  background: linear-gradient(90deg, #7b3ff2, #2d8cff) !important;
  border: none !important;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

._actionGroup_7ua20_631 {
  margin-right: 12px;
  margin-bottom: 0px;
  padding: 0px;
  font-size: 8px !important;
}

._suggestedActions_7ua20_721 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

._spinIcon_7ua20_735 {
  animation: _spin_7ua20_735 1s linear infinite;
}

@keyframes _spin_7ua20_735 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── Responsive ── */
@media (max-width: 576px) {
  ._voiceModal_7ua20_1 {
    padding: 12px;
  }

  ._voiceActions_7ua20_437 {
    flex-direction: column;
  }

  ._voiceWave_7ua20_117 {
    gap: 2px;
  }

  ._waveBar_7ua20_135 {
    width: 3px;
  }

  ._voiceTitle_7ua20_69 {
    font-size: 18px;
  }

  ._voiceListening_7ua20_103 {
    font-size: 16px;
  }
}

/* ===== Send Button Fix ===== */

._voiceActions_7ua20_437 ._sendBtn_7ua20_449 {
  width: 100%;
  min-height: 42px;
  padding: 0 16px !important;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
}

._voiceActions_7ua20_437 ._sendBtn_7ua20_449 svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

._voiceActions_7ua20_437 ._sendBtn_7ua20_449 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}._summaryBody_oz2b5_1 {
  padding: 28px;
}

._successIcon_oz2b5_9 {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #ecfdf3;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

._title_oz2b5_35 {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

._subTitle_oz2b5_51 {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 24px;
}

._summaryCard_oz2b5_65 {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
  background: #f8fafc;
  margin-bottom: 20px;
}

._cardTitle_oz2b5_81 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

._section_oz2b5_93 {
  margin-top: 18px;
}

._section_oz2b5_93:first-child {
  margin-top: 0;
}

._sectionTitle_oz2b5_109 {
  font-size: 13px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dbeafe;
}

._summaryRow_oz2b5_129 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e7eb;
}

._summaryRow_oz2b5_129:last-child {
  border-bottom: none;
}

._summaryRow_oz2b5_129 span {
  color: #6b7280;
  font-size: 14px;
}

._summaryRow_oz2b5_129 strong {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

._linkSection_oz2b5_181 {
  margin-bottom: 24px;
}

._linkSection_oz2b5_181 label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
}

._linkBox_oz2b5_203 {
  display: flex;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

._linkBox_oz2b5_203 input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px;
  font-size: 13px;
}

._linkBox_oz2b5_203 button {
  width: 52px;
  border: none;
  background: #0d6efd;
  color: #fff;
  cursor: pointer;
  transition: 0.2s;
}

._linkBox_oz2b5_203 button:hover {
  background: #0d6efd;
}

._footer_oz2b5_261 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

._footer_oz2b5_261 button {
  min-width: 140px;
}

@media (max-width: 768px) {
  ._summaryBody_oz2b5_1 {
    padding: 20px;
  }

  ._summaryRow_oz2b5_129 {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  ._footer_oz2b5_261 {
    flex-direction: column;
  }

  ._footer_oz2b5_261 button {
    width: 100%;
  }
}

._summaryCard_oz2b5_65 {
  padding: 10px;
}

._infoCard_oz2b5_329 {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 14px;
  transition: all 0.2s ease;
}

._infoCard_oz2b5_329:hover {
  border-color: #0d6efd;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.08);
}

._label_oz2b5_355 {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 6px;
}

._value_oz2b5_367 {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  word-break: break-word;
}

._linkBox_oz2b5_203 {
  display: flex;
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

._linkText_oz2b5_399 {
  flex: 1;
  padding: 12px 14px;
  font-size: 14px;
  color: #495057;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._copyBtn_oz2b5_419 {
  width: 52px;
  height: 48px;
  border: none;
  border-left: 1px solid #dee2e6;
  background: #fff;
  color: #0d6efd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

._copyBtn_oz2b5_419:hover {
  background: #0d6efd;
  color: #fff;
}

._copyBtn_oz2b5_419:focus {
  box-shadow: none;
}

@media (max-width: 576px) {
  ._linkText_oz2b5_399 {
    font-size: 13px;
    padding: 10px 12px;
  }

  ._copyBtn_oz2b5_419 {
    width: 46px;
    height: 44px;
  }
}._timelineModal_15iij_1 {
  max-width: 980px;
}

._modalHeader_15iij_9 {
  /* border-bottom: 1px solid #e9ecef; */
  padding: 16px 22px;
}

._modalTitle_15iij_19 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* .modalBody {
  padding: 0;
  max-height: calc(90vh - 150px); 
  overflow-y: auto;
  padding: 0;
} */

._footer_15iij_45 {
  border-top: 1px solid #e9ecef;
  padding: 14px 20px;
}

._closeBtn_15iij_55 {
  min-width: 90px;
}

/* ===========================
        Timeline
=========================== */

._timelineContainer_15iij_71 {
  position: relative;
  padding: 20px;
}

._timelineItem_15iij_81 {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 14px;
  border-radius: 10px;
  transition: 0.25s;
}

._timelineItem_15iij_81:hover {
  background: #f8fafc;
}

._activeItem_15iij_107 {
  background: #eef4ff;
}

._timelineLeft_15iij_115 {
  width: 38px;
  display: flex;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

._timelineLine_15iij_131 {
  position: absolute;
  top: 32px;
  width: 2px;
  height: calc(100% + 10px);
  background: #d6dce5;
}

._iconCircle_15iij_147 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 2;
}

._greenIcon_15iij_171 {
  background: #16a34a;
}

._blueIcon_15iij_179 {
  background: #2563eb;
}

._timelineContent_15iij_187 {
  flex: 1;
  padding-left: 14px;
}

._timelineHeading_15iij_197 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

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

._timelineDesc_15iij_229 {
  margin: 0;
  font-size: 12px;
  color: #616161;
  line-height: 1.5;
}

._statusBadge_15iij_243 {
  background: #dbeafe;
  color: #2563eb;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ===========================
      Right Side
=========================== */

._sectionTitle_15iij_269 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 22px 20px 10px;
}

._detailsCard_15iij_283 {
  margin: 0 20px;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  padding: 18px;
  background: #fff;
}

._detailBlock_15iij_299 {
  margin-bottom: 18px;
}

._detailBlock_15iij_299 label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  color: #8a8a8a;
}

._detailBlock_15iij_299 span {
  font-size: 13px;
  color: #222;
  font-weight: 500;
}

._completedBadge_15iij_333 {
  display: inline-block;
  padding: 4px 10px;
  background: #dcfce7;
  color: #15803d;
  border-radius: 20px;
  font-size: 11px !important;
  font-weight: 600 !important;
}

._linkBtn_15iij_353 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

._linkBtn_15iij_353:hover {
  text-decoration: underline;
}

._summaryBox_15iij_381 {
  margin: 0 20px;
  padding: 14px;
  background: #eef5ff;
  border: 1px solid #d5e5ff;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  line-height: 1.6;

  /* Fix long messages and URLs */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  word-wrap: break-word;

  /* Scroll for long content */
  max-height: 260px;
  overflow-y: auto;

  /* Prevent horizontal overflow */
  overflow-x: hidden;
}

._intentRow_15iij_429 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 20px;
  flex-wrap: wrap;
}

._promiseBadge_15iij_447 {
  background: #fff3cd;
  color: #9a6700;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

._confidenceBadge_15iij_465 {
  background: #fef3c7;
  color: #92400e;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

._promiseDate_15iij_483 {
  margin: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 14px;
}

._remarks_15iij_501 {
  margin: 0 20px 20px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* ===========================
        Responsive
=========================== */

@media (max-width: 991px) {
  ._timelineContainer_15iij_71 {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 15px;
  }

  ._detailsCard_15iij_283,
  ._summaryBox_15iij_381,
  ._intentRow_15iij_429,
  ._promiseDate_15iij_483,
  ._remarks_15iij_501,
  ._sectionTitle_15iij_269 {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  ._timelineItem_15iij_81 {
    padding: 12px 8px;
  }

  ._timelineHeading_15iij_197 {
    font-size: 13px;
  }

  ._timelineDate_15iij_217,
  ._timelineDesc_15iij_229 {
    font-size: 11px;
  }

  ._detailBlock_15iij_299 {
    margin-bottom: 15px;
  }

  ._intentRow_15iij_429 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  ._modalHeader_15iij_9 {
    padding: 14px;
  }

  ._modalTitle_15iij_19 {
    font-size: 16px;
  }

  ._timelineContainer_15iij_71 {
    padding: 14px;
  }

  ._detailsCard_15iij_283 {
    padding: 14px;
  }

  ._sectionTitle_15iij_269 {
    font-size: 13px;
  }

  ._summaryBox_15iij_381 {
    font-size: 12px;
  }

  ._promiseDate_15iij_483 {
    font-size: 13px;
  }

  ._remarks_15iij_501 {
    font-size: 12px;
  }
}

._selectedHeader_15iij_673 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

._selectedIcon_15iij_691 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e8f1ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

._selectedInfo_15iij_717 {
  flex: 1;
}

._selectedTitle_15iij_725 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

._selectedTime_15iij_745 {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

._closeButton_15iij_757 {
  width: 32px;
  height: 32px;
  border: 1px solid #dee2e6;
  border-radius: 15%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s ease;
}

._closeButton_15iij_757:hover {
  background: #f8f9fa;
}

._closeButton_15iij_757 svg {
  font-size: 20px;
  color: #444;
}

._modalHeader_15iij_9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 14px;
  /* border-bottom: 1px solid #e5e7eb; */
  background: #fff;
}

._modalTitle_15iij_19 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

._closeIconBtn_15iij_833 {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

._closeIconBtn_15iij_833:hover {
  color: #111827;
}

._selectedHeader_15iij_673 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

._timelineModal_15iij_1 .modal-content {
  /* max-height: 90vh; */
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* .modalBody {
  flex: 1;
  overflow-y: auto;
  padding: 0;
} */
._recordingBtn_15iij_907 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

._recordingBtn_15iij_907:hover {
  text-decoration: underline;
}

._audioPlayer_15iij_935 {
  width: 100%;
  height: 35px;
  margin-top: 8px;
}

._deleteModalBody_15iij_947 {
  position: relative;
  padding: 30px;
  border-radius: 12px;
}

._deleteCloseButton_15iij_959 {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

._deleteContent_15iij_989 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

._deleteIconBox_15iij_1001 {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #fff1f0;
  color: #ff4d4f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

._deleteText_15iij_1025 h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

._deleteText_15iij_1025 h4 span {
  color: #ff4d4f;
}

._deleteText_15iij_1025 p {
  color: #8c8c8c;
  font-size: 13px;
  line-height: 1.6;
}

._deleteFooter_15iij_1057 {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

._deleteCancelButton_15iij_1069 {
  flex: 1;
  height: 40px;
  border: 1px solid #222;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

._deleteConfirmButton_15iij_1087 {
  flex: 1;
  height: 40px;
  border: none;
  border-radius: 10px;
  color: #f80105;
  cursor: pointer;
  background: #fff1f0;
  border: 1px solid #ff4d4f;
}

._deleteOverlay_15iij_1109 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1055;
}

._deleteModal_15iij_947 {
  z-index: 1060;
}

._deleteModal_15iij_947 .modal-content {
  border-radius: 14px;
  border: none;
}

._statusActive_15iij_1141 {
  color: #16a34a !important;
}

._statusInactive_15iij_1149 {
  color: #dc2626 !important;
}

._activeDot_15iij_1157 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #16a34a !important;
  display: inline-block;
}

._inactiveDot_15iij_1173 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dc2626 !important;
  display: inline-block;
}

._parentModalBlur_15iij_1189 {
  position: relative;
  overflow: hidden;
  filter: brightness(0.75);
  transition: all 0.25s ease;
  pointer-events: none;
}

._parentModalBlur_15iij_1189::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 45, 0.45);
  border-radius: inherit;
  z-index: 999;
}

._variableChip_15iij_1223 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  background: #ffffff;
  border: 1px solid #d8e3f8;
  border-radius: 6px;
  color: #3157b7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

._variableChip_15iij_1223:hover {
  background: #f3f7ff;
  border-color: #4f7df3;
}

/* ================= Variables Section ================= */

._variableBox_15iij_1269 {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid #dbe5f4;
  border-radius: 10px;
  background: #fff;
}

._variableHeader_15iij_1285 {
  margin-bottom: 18px;
}

._variableHeader_15iij_1285 h6 {
  margin: 0;
  font-size: 12px !important;
  font-weight: 700;
  color: #17203a;
}

._variableHeader_15iij_1285 p {
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 11px !important;
}

._variableGrid_15iij_1319 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

._variableChip_15iij_1223 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #d7e3ff;
  border-radius: 8px;
  color: #2563eb;
  font-size: 11px !important;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

._variableChip_15iij_1223:hover {
  background: #eef4ff;
  border-color: #2563eb;
}

._variableChip_15iij_1223 svg {
  font-size: 15px;
}

._variableTip_15iij_1379 {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
  color: #6b7280;
  font-size: 11px !important;
  line-height: 1.5;
}._aiAccountingDashboard_gq1z2_1 {
  --ai-blue: #1556ef;
  --ai-ink: #132146;
  --ai-muted: #65718d;
  --ai-line: #e9edf5;
  min-height: 100vh;
  padding: 18px;
  background: #f7f9fd;
  color: var(--ai-ink);
  font-size: 12px;
}

._aiAccountingDashboard_gq1z2_1 * {
  box-sizing: border-box;
}

._aiAccountingHeader_gq1z2_33,
._aiAccountingHeaderActions_gq1z2_35,
._aiAccountingStatGrid_gq1z2_37,
._aiAccountingMainGrid_gq1z2_39,
._aiAccountingCharts_gq1z2_41,
._aiAccountingMiniStats_gq1z2_43,
._aiAccountingDocumentsHeader_gq1z2_45,
._aiAccountingTabs_gq1z2_47 {
  display: flex;
  align-items: center;
}

._aiAccountingHeader_gq1z2_33 {
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 18px;
}

._aiAccountingHeader_gq1z2_33 h1,
._aiAccountingDocumentsHeader_gq1z2_45 h2 {
  font-size: 18px;
  margin: 0 0 4px;
  font-weight: 700;
}

._aiAccountingHeader_gq1z2_33 p {
  margin: 0;
  color: var(--ai-muted);
  font-size: 11px;
}

._aiAccountingHeaderActions_gq1z2_35 {
  gap: 8px;
}

._aiAccountingControl_gq1z2_103,
._aiAccountingSquareButton_gq1z2_105,
._aiAccountingBell_gq1z2_107,
._aiAccountingCreateButton_gq1z2_109 {
  border: 1px solid var(--ai-line);
  background: #fff;
  border-radius: 6px;
  height: 32px;
  padding: 0 12px;
  font: 600 11px inherit;
  color: #2c3a5d;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

._aiAccountingSquareButton_gq1z2_105 {
  width: 32px;
  padding: 0;
  justify-content: center;
}

._aiAccountingBell_gq1z2_107 {
  border: 0;
  position: relative;
  padding: 0 7px;
  font-size: 17px;
}

._aiAccountingBell_gq1z2_107 i {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  color: #fff;
  background: #fa2d44;
  font: 8px Arial;
  display: grid;
  place-items: center;
  font-style: normal;
}

._aiAccountingCreateButton_gq1z2_109 {
  color: #fff;
  background: var(--ai-blue);
  border-color: var(--ai-blue);
  font-weight: 700;
}

._aiReportsAskToggle_gq1z2_207 {
  height: 32px;
  border: 1px solid var(--ai-line);
  background: #fff;
  color: #2c3a5d;
  border-radius: 6px;
  padding: 0 8px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 11px inherit;
  cursor: pointer;
}

._aiReportsToggleTrack_gq1z2_235 {
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: #c9d1e0;
  padding: 2px;
  transition: background 0.2s ease;
}

._aiReportsToggleTrack_gq1z2_235 i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

._aiReportsAskToggleActive_gq1z2_271 {
  color: var(--ai-blue);
  border-color: #b8ccff;
}

._aiReportsAskToggleActive_gq1z2_271 ._aiReportsToggleTrack_gq1z2_235 {
  background: var(--ai-blue);
}

._aiReportsAskToggleActive_gq1z2_271 ._aiReportsToggleTrack_gq1z2_235 i {
  transform: translateX(10px);
}

._aiReportsAskCard_gq1z2_297 {
  margin: 0 0 10px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
}

._aiReportsAskCard_gq1z2_297 h2 {
  margin: 0 0 9px;
  font-size: 12px;
}

._aiReportsAskForm_gq1z2_323 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._aiReportsPromptField_gq1z2_335 {
  min-width: 0;
  height: 34px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #aec7ff;
  border-radius: 5px;
  color: #5771a7;
}

._aiReportsPromptField_gq1z2_335 input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--ai-ink);
  font: 500 10px inherit;
}

._aiReportsPromptField_gq1z2_335 input::placeholder {
  color: #67799b;
}

._aiReportsPromptField_gq1z2_335 button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #415b93;
  cursor: pointer;
}

._aiReportsGenerateButton_gq1z2_407 {
  height: 34px;
  min-width: 132px;
  border: 1px solid var(--ai-blue);
  border-radius: 5px;
  background: var(--ai-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 10px inherit;
  cursor: pointer;
}

._aiReportsExamples_gq1z2_437 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}

._aiReportsExamples_gq1z2_437 span {
  width: 100%;
  color: var(--ai-muted);
  font-size: 9px;
}

._aiReportsExamples_gq1z2_437 button {
  border: 1px solid #edf0f6;
  border-radius: 4px;
  background: #f9fbff;
  color: #536584;
  padding: 4px 9px;
  font: 600 8px inherit;
  cursor: pointer;
}

._aiAccountingStatGrid_gq1z2_37 {
  gap: 8px;
  margin-bottom: 10px;
}

._aiAccountingStatCard_gq1z2_495 {
  min-width: 0;
  flex: 1;
  height: 65px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 9px;
}

._aiAccountingIconBox_gq1z2_521 {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
}

._aiAccountingBlue_gq1z2_541 {
  color: var(--ai-blue);
}

._aiAccountingIconBox_gq1z2_521._aiAccountingBlue_gq1z2_541 {
  background: #1456ef;
  color: #fff;
}

._aiAccountingOrange_gq1z2_559 {
  color: #f88909;
}

._aiAccountingIconBox_gq1z2_521._aiAccountingOrange_gq1z2_559 {
  color: #fff;
  background: #fb8b08;
}

._aiAccountingGreen_gq1z2_577 {
  color: #0bad61;
}

._aiAccountingIconBox_gq1z2_521._aiAccountingGreen_gq1z2_577 {
  color: #fff;
  background: #06a85c;
}

._aiAccountingRed_gq1z2_595 {
  color: #e23532;
}

._aiAccountingIconBox_gq1z2_521._aiAccountingRed_gq1z2_595 {
  color: #fff;
  background: #dd302d;
}

._aiAccountingPurple_gq1z2_613 {
  color: #5746d8;
}

._aiAccountingIconBox_gq1z2_521._aiAccountingPurple_gq1z2_613 {
  color: #fff;
  background: #5946d9;
}

._aiAccountingStatCard_gq1z2_495 small,
._aiAccountingMiniStats_gq1z2_43 small {
  display: block;
  color: var(--ai-muted);
  font-size: 9px;
  font-weight: 600;
}

._aiAccountingStatCard_gq1z2_495 strong {
  display: block;
  margin: 3px 0;
  font-size: 13px;
}

._aiAccountingStatCard_gq1z2_495 em,
._aiAccountingMiniStats_gq1z2_43 em {
  display: block;
  font-size: 8px;
  font-style: normal;
  color: #0bad61;
  font-weight: 700;
}

._aiAccountingStatCard_gq1z2_495 em b {
  font-weight: 500;
  color: var(--ai-muted);
}

._aiAccountingMainGrid_gq1z2_39 {
  align-items: flex-start;
  gap: 10px;
}

._aiAccountingChartColumn_gq1z2_697 {
  min-width: 0;
  flex: 1;
}

._aiAccountingCharts_gq1z2_41 {
  align-items: stretch;
  gap: 9px;
}

._aiAccountingTrend_gq1z2_717,
._aiAccountingDistribution_gq1z2_719,
._aiAccountingDetailCard_gq1z2_721,
._aiAccountingDocumentsSection_gq1z2_723 {
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
}

._aiAccountingTrend_gq1z2_717 {
  flex: 1.42;
  padding: 10px 4px;
  height: 207px;
}

._aiAccountingDistribution_gq1z2_719 {
  flex: 1;
  padding: 11px;
}

._aiAccountingChartHeading_gq1z2_757,
._aiAccountingCardTitle_gq1z2_759 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._aiAccountingTrend_gq1z2_717 h3,
._aiAccountingDistribution_gq1z2_719 h3,
._aiAccountingDetailCard_gq1z2_721 h3 {
  margin: 0;
  font-size: 11px;
}

._aiAccountingChartHeading_gq1z2_757 button {
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 4px;
  color: #34405e;
  font: 600 9px inherit;
}

._aiAccountingLegend_gq1z2_803 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 1px;
  font-size: 8px;
}

._aiAccountingLegend_gq1z2_803 span:first-child {
  margin-left: 0;
}

._aiAccountingBlueDot_gq1z2_827,
._aiAccountingOrangeDot_gq1z2_829,
._aiAccountingGreenDot_gq1z2_831,
._aiAccountingRedDot_gq1z2_833 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

._aiAccountingBlueDot_gq1z2_827 {
  background: #1456ef;
}

._aiAccountingOrangeDot_gq1z2_829 {
  background: #fc7900;
}

._aiAccountingGreenDot_gq1z2_831 {
  background: #13ae63;
}

._aiAccountingRedDot_gq1z2_833 {
  background: #dc302d;
}

._aiAccountingTrend_gq1z2_717 svg {
  width: 100%;
  height: 111px;
  overflow: visible;
}

._aiAccountingGridLines_gq1z2_891 line {
  stroke: #edf0f6;
  stroke-width: 1;
}

._aiAccountingTrend_gq1z2_717 polyline {
  fill: none;
  stroke-width: 1.5;
}

._aiAccountingTotalLine_gq1z2_911 {
  stroke: #1456ef;
}

._aiAccountingOutstandingLine_gq1z2_919 {
  stroke: #fc7900;
}

._aiAccountingCollectedLine_gq1z2_927 {
  stroke: #13ae63;
}

._aiAccountingDates_gq1z2_935 {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #67738f;
}

._aiAccountingDonutContent_gq1z2_949 {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

._aiAccountingDonut_gq1z2_949 {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background: conic-gradient(#1456ef 0 52.6%,
      #fc7900 52.6% 78.9%,
      #13ae63 78.9%);
  position: relative;
  display: grid;
  place-items: center;
}

._aiAccountingDonut_gq1z2_949::before {
  content: "";
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
}

._aiAccountingDonut_gq1z2_949 strong {
  position: relative;
  z-index: 1;
  font-size: 19px;
  text-align: center;
}

._aiAccountingDonut_gq1z2_949 small {
  display: block;
  color: var(--ai-muted);
  font-size: 8px;
}

._aiAccountingDistributionLegend_gq1z2_1033 {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: repeat(2, max-content);
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  font-size: 8px;
  color: #33415f;
}

._aiAccountingDistributionLegend_gq1z2_1033 span:last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

._aiAccountingDistributionLegend_gq1z2_1033 i {
  margin-right: 5px;
}

._aiAccountingDistributionLegend_gq1z2_1033 b {
  margin-left: 12px;
  color: #71809b;
  font-weight: 500;
}

._aiAccountingMiniStats_gq1z2_43 {
  margin-top: 9px;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
}

._aiAccountingMiniStats_gq1z2_43 article {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  padding: 11px;
  border-right: 1px solid var(--ai-line);
}

._aiAccountingMiniStats_gq1z2_43 article:last-child {
  border: 0;
}

._aiAccountingMiniStats_gq1z2_43 article>svg {
  font-size: 18px;
  flex: 0 0 auto;
}

._aiAccountingMiniStats_gq1z2_43 strong {
  display: block;
  margin: 2px 0;
  font-size: 15px;
}

._aiAccountingSideColumn_gq1z2_1151 {
  width: 275px;
  display: grid;
  gap: 9px;
}

._aiAccountingDetailCard_gq1z2_721 {
  padding: 11px;
}

._aiAccountingCardTitle_gq1z2_759 {
  margin-bottom: 8px;
}

._aiAccountingCardTitle_gq1z2_759 button {
  border: 0;
  background: transparent;
  color: var(--ai-blue);
  font: 600 9px inherit;
}

._aiAccountingAgingList_gq1z2_1193>div,
._aiAccountingReminderList_gq1z2_1195>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f7;
  font-size: 9px;
}

._aiAccountingAgingList_gq1z2_1193 span {
  display: flex;
  align-items: center;
  gap: 7px;
}

._aiAccountingAgingList_gq1z2_1193 b {
  font-size: 9px;
}

._aiAccountingTotal_gq1z2_911 {
  border: 0 !important;
  font-weight: 700;
}

._aiAccountingReminderList_gq1z2_1195 i {
  width: 15px;
  font-style: normal;
  color: var(--ai-blue);
  font-size: 11px;
}

._aiAccountingReminderList_gq1z2_1195 span {
  flex: 1;
}

._aiAccountingCalls_gq1z2_1265>div {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f7;
}

._aiAccountingCalls_gq1z2_1265>div:last-child {
  border: 0;
}

._aiAccountingCalls_gq1z2_1265>div>svg {
  background: #eaf1ff;
  color: var(--ai-blue);
  padding: 5px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
}

._aiAccountingCalls_gq1z2_1265 span {
  flex: 1;
  min-width: 0;
}

._aiAccountingCalls_gq1z2_1265 span b,
._aiAccountingCalls_gq1z2_1265 span small,
._aiAccountingCalls_gq1z2_1265 em,
._aiAccountingCalls_gq1z2_1265 em i {
  display: block;
}

._aiAccountingCalls_gq1z2_1265 span b {
  font-size: 9px;
}

._aiAccountingCalls_gq1z2_1265 span small {
  font-size: 8px;
  color: #71809b;
  margin-top: 2px;
}

._aiAccountingCalls_gq1z2_1265 em {
  text-align: right;
  color: #71809b;
  font-style: normal;
  font-size: 7px;
  white-space: nowrap;
}

._aiAccountingCalls_gq1z2_1265 em i {
  color: #0bad61;
  background: #e3f8eb;
  margin-top: 3px;
  padding: 2px 4px;
  font-style: normal;
  font-size: 7px;
  border-radius: 2px;
}

._aiAccountingCalls_gq1z2_1265 em i._aiAccountingNoResponse_gq1z2_1387 {
  color: #e23532;
  background: #ffebed;
}

._aiAccountingDocumentsSection_gq1z2_723 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  overflow: hidden;
}

._aiAccountingDocumentsHeader_gq1z2_45 {
  height: 35px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ai-line);
}

._aiAccountingDocumentsHeader_gq1z2_45 h2 {
  font-size: 11px;
  flex: 1;
  margin: 0;
}

._aiAccountingTabs_gq1z2_47 {
  gap: 19px;
  height: 100%;
}

._aiAccountingTabs_gq1z2_47 button {
  border: 0;
  height: 100%;
  background: transparent;
  color: #63708c;
  font: 500 9px inherit;
  position: relative;
  cursor: pointer;
}

._aiAccountingTabs_gq1z2_47 button._aiAccountingActiveTab_gq1z2_1467 {
  color: var(--ai-blue);
  font-weight: 700;
}

._aiAccountingTabs_gq1z2_47 button._aiAccountingActiveTab_gq1z2_1467::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--ai-blue);
  bottom: 0;
  left: 0;
  right: 0;
}

._aiAccountingReusableTable_gq1z2_1497 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

._aiAccountingReusableTable_gq1z2_1497 .MuiPaper-root {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* .aiAccountingReusableTable :global(.MuiToolbar-root) {
  min-height: 38px !important;
  padding: 3px 10px !important;
} */
/* .aiAccountingReusableTable :global(.tableHeading) {
  display: none;
} */
._aiAccountingReusableTable_gq1z2_1497 .MuiTableContainer-root {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
}

._aiAccountingReusableTable_gq1z2_1497 .MuiTableCell-root {
  padding: 6px 7px !important;
  font-size: 10px !important;
  white-space: nowrap;
}

._aiAccountingReusableTable_gq1z2_1497 .MuiTableHead-root .MuiTableCell-root {
  font-size: 8px !important;
  color: #64718b !important;
}

._aiAccountingReusableTable_gq1z2_1497 .MuiTableFooter-root .MuiTableCell-root {
  padding: 3px 7px !important;
}

._aiAccountingReusableTable_gq1z2_1497 .MuiTablePagination-toolbar {
  min-height: 28px !important;
}

._aiAccountingReusableTable_gq1z2_1497 .MuiTablePagination-selectLabel,
._aiAccountingReusableTable_gq1z2_1497 .MuiTablePagination-input {
  display: none !important;
}

.aiAccountingDocType,
.aiAccountingStatus,
.aiAccountingReminder {
  display: inline-block;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
}

.aiAccountingInvoice {
  background: #e9f0ff;
  color: #1556ef;
}

.aiAccountingQuotation {
  background: #fff0dc;
  color: #f17800;
}

.aiAccountingDelivery,
.aiAccountingCompleted {
  background: #dff8ea;
  color: #08a75a;
}

.aiAccountingSent {
  background: #e8f0ff;
  color: #1556ef;
}

.aiAccountingOverdue {
  background: #ffe9ed;
  color: #e23532;
}

.aiAccountingDraft {
  background: #edf0f5;
  color: #6d778e;
}

.aiAccountingBalance {
  color: #f0323d;
}

.aiAccountingDueToday {
  background: #fff0dc;
  color: #f17800;
}

.aiAccountingMoreButton {
  border: 0;
  color: #45516c;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-size: 15px;
}

._aiAccountingStatCard_gq1z2_495,
._aiAccountingMiniStats_gq1z2_43 article {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

._aiAccountingStatCard_gq1z2_495::after,
._aiAccountingMiniStats_gq1z2_43 article::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -65%;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent 18%,
      rgba(21, 86, 239, 0.07) 50%,
      transparent 82%);
  transform: skewX(-18deg);
}

._aiAccountingStatCard_gq1z2_495:hover,
._aiAccountingMiniStats_gq1z2_43 article:hover {
  z-index: 1;
  transform: translateY(-4px);
  border-color: rgba(21, 86, 239, 0.28);
  box-shadow: 0 10px 22px rgba(31, 62, 125, 0.12);
}

._aiAccountingStatCard_gq1z2_495:hover::after,
._aiAccountingMiniStats_gq1z2_43 article:hover::after {
  animation: _aiAccountingCardSweep_gq1z2_1 0.65s ease-out;
}

._aiAccountingStatCard_gq1z2_495:hover ._aiAccountingIconBox_gq1z2_521,
._aiAccountingMiniStats_gq1z2_43 article:hover>svg {
  animation: _aiAccountingIconPop_gq1z2_1 0.42s ease-out;
}

@keyframes _aiAccountingCardSweep_gq1z2_1 {
  from {
    left: -65%;
  }

  to {
    left: 130%;
  }
}

@keyframes _aiAccountingIconPop_gq1z2_1 {
  50% {
    transform: translateY(-3px) scale(1.1) rotate(-7deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0);
  }
}

@media (max-width: 1180px) {
  ._aiAccountingStatGrid_gq1z2_37 {
    flex-wrap: wrap;
  }

  ._aiAccountingStatCard_gq1z2_495 {
    flex-basis: 30%;
  }

  ._aiAccountingSideColumn_gq1z2_1151 {
    width: 250px;
  }

  ._aiAccountingMiniStats_gq1z2_43 {
    flex-wrap: wrap;
  }

  ._aiAccountingMiniStats_gq1z2_43 article {
    flex-basis: 30%;
  }

  ._aiAccountingCharts_gq1z2_41 {
    flex-wrap: wrap;
  }

  ._aiAccountingTrend_gq1z2_717,
  ._aiAccountingDistribution_gq1z2_719 {
    min-width: 300px;
  }
}

@media (max-width: 900px) {
  ._aiAccountingHeader_gq1z2_33 {
    align-items: flex-start;
    flex-direction: column;
  }

  ._aiAccountingHeaderActions_gq1z2_35 {
    flex-wrap: wrap;
  }

  ._aiAccountingMainGrid_gq1z2_39 {
    flex-direction: column;
  }

  ._aiAccountingSideColumn_gq1z2_1151 {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._aiAccountingSideColumn_gq1z2_1151> :last-child {
    grid-column: span 2;
  }

  ._aiAccountingTabs_gq1z2_47 {
    overflow-x: auto;
    gap: 12px;
  }

  ._aiAccountingReusableTable_gq1z2_1497 {
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  ._aiAccountingDashboard_gq1z2_1 {
    padding: 12px;
  }

  ._aiAccountingStatCard_gq1z2_495 {
    flex-basis: 100%;
  }

  ._aiAccountingSideColumn_gq1z2_1151 {
    display: grid;
    grid-template-columns: 1fr;
  }

  ._aiAccountingSideColumn_gq1z2_1151> :last-child {
    grid-column: auto;
  }

  ._aiAccountingTrend_gq1z2_717,
  ._aiAccountingDistribution_gq1z2_719 {
    min-width: 100%;
  }

  ._aiAccountingDonutContent_gq1z2_949 {
    justify-content: flex-start;
  }

  ._aiAccountingTabs_gq1z2_47 {
    justify-content: flex-start;
  }

  ._aiAccountingDocumentsHeader_gq1z2_45 {
    align-items: stretch;
    flex-direction: column;
    height: auto;
    padding-top: 10px;
  }

  ._aiAccountingDocumentsHeader_gq1z2_45 h2 {
    flex: auto;
  }

  ._aiAccountingTabs_gq1z2_47 {
    height: 30px;
  }

  ._aiAccountingControl_gq1z2_103 {
    font-size: 9px;
  }
}

._aiAccountingMuiLineChart_gq1z2_2079 {
  width: 100%;
  margin-top: 2px;
}

._aiAccountingMuiLineChart_gq1z2_2079 .MuiChartsGrid-line {
  stroke: #edf0f6 !important;
}

._aiAccountingMuiLineChart_gq1z2_2079 .MuiMarkElement-root {
  stroke-width: 0 !important;
}

._aiAccountingMuiLineChart_gq1z2_2079 .MuiLineElement-root {
  stroke-width: 2px !important;
}

._aiAccountingMuiPieWrap_gq1z2_2113 {
  position: relative;
  width: 148px;
  height: 148px;
  flex: 0 0 148px;
}

._aiAccountingMuiPieChart_gq1z2_2127 {
  position: absolute;
  inset: 0;
}

._aiAccountingMuiPieWrap_gq1z2_2113>strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  font-size: 19px;
}

._aiAccountingMuiPieWrap_gq1z2_2113>strong small {
  display: block;
  color: var(--ai-muted);
  font-size: 8px;
}

@media (max-width: 900px) {
  ._aiAccountingHeaderActions_gq1z2_35 {
    width: 100%;
  }
}

@media (max-width: 620px) {
  ._aiAccountingHeader_gq1z2_33 h1 {
    font-size: 16px;
  }

  ._aiAccountingHeaderActions_gq1z2_35 {
    gap: 6px;
  }

  ._aiAccountingControl_gq1z2_103,
  ._aiAccountingCreateButton_gq1z2_109 {
    padding: 0 9px;
  }

  ._aiAccountingMiniStats_gq1z2_43 article {
    flex-basis: 50%;
  }

  ._aiReportsAskCard_gq1z2_297 {
    padding: 10px;
  }

  ._aiReportsAskForm_gq1z2_323 {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  ._aiReportsPromptField_gq1z2_335,
  ._aiReportsGenerateButton_gq1z2_407 {
    width: 100%;
  }

  ._aiReportsExamples_gq1z2_437 {
    gap: 5px;
  }
}._invoicePage_1m7jp_1 {
  background: #f5f7fb;
  min-height: 100vh;
  padding: 20px;
}

@media (max-width: 991px) {
  ._invoicePage_1m7jp_1 {
    padding: 12px;
  }
}

/* Invoice header  start */
._header_1m7jp_27 {
  margin-bottom: 18px;
}

._invoiceTitle_1m7jp_35 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #1f2937;
}

._sentBadge_1m7jp_49 {
  background: #dcfce7;
  color: #15803d;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

._subTitle_1m7jp_67 {
  color: #6b7280;
  font-size: 13px;
  margin-top: 6px;
}

._actionBtn_1m7jp_79 {
  border: 1px solid #e5e7eb;
  background: #fff;
  height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

._actionBtn_1m7jp_79:hover {
  background: #f8fafc;
}

._editInvoiceBtn_1m7jp_113 {
  border: 1px solid #1556ef;
  background: #1556ef;
  color: #fff;
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

._editInvoiceBtn_1m7jp_113:hover {
  background: #0f46c8;
  border-color: #0f46c8;
}

._summaryCard_1m7jp_153 {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

._customerBox_1m7jp_169 {
  display: flex;
  gap: 15px;
}

._contactRow_1m7jp_179 {
  font-size: 13px;
  color: #374151;
  margin-bottom: 6px;
}

._infoBox_1m7jp_191 label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

._infoBox_1m7jp_191 h5 {
  margin: 0;
  font-size: 15px !important;
  font-weight: 700;
  color: #111827;
}

._redText_1m7jp_219 {
  color: #dc2626 !important;
  font-size: 15px !important;
}

._statusWrapper_1m7jp_229 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}

._statusWrapper_1m7jp_229 ._infoBox_1m7jp_191 {
  margin: 0;
}

._overdueText_1m7jp_251 {
  display: block;
  margin-top: 8px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
}

._customerSection_1m7jp_267 {
  display: flex;
  flex-direction: column;
}

._customerHeader_1m7jp_277 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

._companyLogo_1m7jp_291 {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #eef4ff;
  color: #1456ef;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

._companyName_1m7jp_317 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

._companySince_1m7jp_329 {
  margin: 3px 0 0;
  font-size: 12px;
  color: #64748b;
}

/* Contact starts from left edge */
._contactInfo_1m7jp_343 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 12px;
}

._contactItem_1m7jp_357 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748b;
}

._crmLink_1m7jp_373 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1456ef;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

._sumaryborder_1m7jp_393 {
  border-right: 1px solid rgb(243, 243, 243);
}

._overdueBadge_1m7jp_401 {
  background: #fee2e2;
  color: #dc2626;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

._pendingBadge_1m7jp_421 {
  background: #fef3c7;
  color: #d97706;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

@media (max-width: 991px) {
  ._summaryCard_1m7jp_153 ._row_1m7jp_443>div {
    margin-bottom: 20px;
  }

  ._actionBtn_1m7jp_79,
  ._editInvoiceBtn_1m7jp_113 {
    width: 100%;
    justify-content: center;
  }

  ._invoiceTitle_1m7jp_35 {
    font-size: 22px;
  }
}

/* invoice header end */

/* invoice content start */
._tabContainer_1m7jp_479 {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  background: #f8f8f8 !important;
  border-bottom: 1px solid #e9edf5;
}

._tabButton_1m7jp_497 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

._tabButton_1m7jp_497:hover {
  color: #1456ef;
}

._activeTab_1m7jp_533 {
  color: #1456ef !important;
  border-bottom: 2px solid #1456ef;
  background-color: white;
}

._activeTab_1m7jp_533 svg {
  color: #1456ef;
}

._card_1m7jp_553 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  height: 95%;
}

._cardTitle_1m7jp_569 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

._card_1m7jp_553 label {
  color: #6b7280;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

._card_1m7jp_553 p {
  margin: 0;
  font-weight: 500;
}

._bold_1m7jp_605 {
  font-weight: 700;
}

._table_1m7jp_613 th {
  font-size: 14px;
  color: #6b7280;
}

._table_1m7jp_613 td {
  font-size: 14px;
  vertical-align: middle;
}

._detailItem_1m7jp_633 {
  margin-bottom: 10px;
}

._detailItem_1m7jp_633 label {
  display: block;
  font-size: 14px;
  color: #667085;
  margin-bottom: 6px;
}

._detailItem_1m7jp_633 p {
  margin: 0;
  font-size: 12px !important;
  font-weight: 700;
  color: #101828;
}

._amountRow_1m7jp_669 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

._amountRow_1m7jp_669 span {
  color: #667085;
  font-size: 13px !important;
}

._amountRow_1m7jp_669 strong {
  font-size: 12px !important;
  font-weight: 700;
  color: #101828;
}

._divider_1m7jp_705 {
  margin: 18px 0;
  border-color: #919191;
}

._infoGrid_1m7jp_715 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

._infoRow_1m7jp_727 span:first-child {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

._infoRow_1m7jp_727 strong {
  font-size: 13px;
  font-weight: 600;
  color: #1d2939;
  text-align: right;
}

._successBadge_1m7jp_767 {
  background: #dcfce7;
  color: #16a34a;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

._activeBadge_1m7jp_785 {
  background: #dcfce7;
  color: #16a34a;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

._stepBadge_1m7jp_803 {
  background: #dbeafe;
  color: #2563eb;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 768px) {
  ._infoRow_1m7jp_727 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  ._infoRow_1m7jp_727 strong,
  ._successBadge_1m7jp_767,
  ._activeBadge_1m7jp_785,
  ._stepBadge_1m7jp_803 {
    text-align: left;
  }
}

/* end  */

/* payment start */
._paymentWrapper_1m7jp_857 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

._chartContainer_1m7jp_871 {
  width: 160px;
  height: 160px;
  position: relative;
  cursor: pointer;
}

._chartCenter_1m7jp_885 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

._currency_1m7jp_905 {
  font-size: 13px;
  color: #6b7280;
}

._chartCenter_1m7jp_885 h3 {
  margin: 4px 0;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
}

._chartCenter_1m7jp_885 p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

._chartLegend_1m7jp_941 {
  flex: 1;
}

._legendItem_1m7jp_949 {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

._legendDot_1m7jp_961 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 12px;
}

._legendItem_1m7jp_949 h6 {
  margin: 0;
  font-size: 12px !important;
  font-weight: 600;
}

._legendItem_1m7jp_949 p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #6b7280;
}

@media (max-width: 991px) {
  ._paymentWrapper_1m7jp_857 {
    flex-direction: column;
    align-items: center;
  }

  ._chartLegend_1m7jp_941 {
    width: 100%;
  }
}

/* end */

/* start activity timeline */
._timelineCard_1m7jp_1027 {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 20px;
  height: fit-content;
}

._timelineHeader_1m7jp_1043 {
  margin-bottom: 20px;
}

._timelineHeader_1m7jp_1043 h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

._timelineItem_1m7jp_1063 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

._timelineLeft_1m7jp_1077 {
  width: 38px;
  min-width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

._timelineIcon_1m7jp_1095 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 2;
}

._timelineLine_1m7jp_1119 {
  width: 2px;
  background: #e5e7eb;
  height: 45px;
}

._timelineSticky_1m7jp_1131 {
  position: sticky;
  top: 20px;
}

._timelineContent_1m7jp_1141 {
  padding-bottom: 24px;
}

._timelineContent_1m7jp_1141 h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

._timelineContent_1m7jp_1141 p {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6b7280;
}

._pauseWorkflowBtn_1m7jp_1175 {
  width: 100%;
  margin-top: 10px;
  height: 45px;
  border: none;
  border-radius: 10px;
  background: #ef4444;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.3s;
}

._pauseWorkflowBtn_1m7jp_1175:hover {
  background: #dc2626;
}

@media (max-width: 991px) {
  ._timelineCard_1m7jp_1027 {
    margin-top: 20px;
  }
}

/* Promise Card */

._promiseCard_1m7jp_1233 {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff8ef;
  border: 1px solid #fde7c7;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  width: calc(100% - 54px);
}

._promiseCard_1m7jp_1233 svg {
  color: #c0841a;
  margin-top: 2px;
}

._promiseTitle_1m7jp_1269 {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

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

/* Next Reminder */

._nextReminder_1m7jp_1297 {
  flex: 1;
  width: calc(100% - 54px);
  margin-bottom: 24px;
}

._clockCircle_1m7jp_1309 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

._nextTitle_1m7jp_1331 {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

._nextType_1m7jp_1343 {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

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

/* Button */

._pauseWorkflowBtn_1m7jp_1175 {
  width: 100%;
  height: 42px;
  background: #fff;
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: 0.2s ease;
}

._pauseWorkflowBtn_1m7jp_1175:hover {
  background: #ef4444;
  color: #fff;
}

/* Responsive */

@media (max-width: 991px) {
  ._timelineCard_1m7jp_1027 {
    margin-top: 20px;
  }

  ._timelineTitle_1m7jp_1427 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  ._timelineBadge_1m7jp_1439 {
    margin-left: 0;
  }
}

/* Badges */

._timelineBadge_1m7jp_1439 {
  background: #dcfce7;
  color: #16a34a;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
}

._timelineSub_1m7jp_1473 {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
}

._completedBadge_1m7jp_1487 {
  background: #dbeafe;
  color: #2563eb;
}

._timelineDot_1m7jp_1497 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
}

._deliveredBadge_1m7jp_1513 {
  background: #dcfce7;
  color: #16a34a;
}

._completedBadge_1m7jp_1487 {
  background: #dbeafe;
  color: #2563eb;
}

._timelineRow_1m7jp_1533 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

._timelineMarker_1m7jp_1547 {
  width: 38px;
  min-width: 38px;
  display: flex;
  justify-content: center;
  position: relative;
}

._timelineBody_1m7jp_1563 {
  position: relative;
}

._timelineVerticalLine_1m7jp_1571 {
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 85px;
  width: 1px;
  background: #e5e7eb;
}

._invoiceStatusBadge_1m7jp_1589 {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

/* Paid */
._status_PAID_1m7jp_1607 {
  background: #dcfce7;
  color: #15803d;
}

/* Not Paid */
._status_NOT_PAID_1m7jp_1619 {
  background: #fee2e2;
  color: #dc2626;
}

/* Draft */
._status_DRAFT_1m7jp_1631 {
  background: #fef3c7;
  color: #92400e;
}

/* Pending */
._status_PENDING_1m7jp_1643 {
  background: #fef3c7;
  color: #d97706;
}

._aiAccountingControl_1m7jp_1653 input {
  border: none;
  outline: none;
  background: transparent;
  width: 180px;
  font-size: 14px;
}

._aiAccountingDateControl_1m7jp_1669 {
  height: 38px;
  width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e3e8f0;
  border-radius: 6px;
  padding: 0 12px;
  background: #fff;
}

._aiAccountingDateControl_1m7jp_1669 input {
  width: 170px;
  border: none;
  outline: none;
  font-size: 13px;
}

._aiAccountingSquareButton_1m7jp_1707 {
  width: 38px;
  height: 38px;
  border: 1px solid #e3e8f0;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

._aiAccountingSquareButton_1m7jp_1707:hover {
  background: #f3f6ff;
  transform: rotate(20deg);
}

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

._paidCircle_1m7jp_1753 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 12px solid #16a34a;
}

._statusDropdown_1m7jp_1777 {
  position: absolute;
  right: 0;
  top: 45px;
  width: 180px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 8px;
  z-index: 1000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

._statusOption_1m7jp_1803 {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
}

._statusOption_1m7jp_1803:hover {
  background: #f1f5f9;
}

._backButton_1m7jp_1833 {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  color: #17203a;
  cursor: pointer;
}

._backButton_1m7jp_1833:hover {
  color: #2563eb;
}

._actionSelect_1m7jp_1861 {
  height: 34px;
  min-width: 145px;
  padding: 0 32px 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

._actionSelect_1m7jp_1861:focus {
  border-color: #2563eb;
}

._actionSelect_1m7jp_1861:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Paid */
._status_PAID_1m7jp_1607 {
  background: #dcfce7;
  color: #15803d;
}

/* Not Paid */
._status_NOT_PAID_1m7jp_1619 {
  background: #fee2e2;
  color: #dc2626;
}

/* Partially Paid */
._status_PARTIALLY_PAID_1m7jp_1929 {
  background: #fef3c7;
  color: #d97706;
}

/* Return */
._status_RETURN_1m7jp_1941 {
  background: #dbeafe;
  color: #2563eb;
}

/* Void */
._status_VOID_1m7jp_1953 {
  background: #f3f4f6;
  color: #4b5563;
}

/* Draft */
._status_DRAFT_1m7jp_1631 {
  background: #ede9fe;
  color: #7c3aed;
}

/* Pending */
._status_PENDING_1m7jp_1643 {
  background: #fef3c7;
  color: #d97706;
}

._crmEditBtn_1m7jp_1987 {
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
}._inventoryViewPage_1macl_1 {
  width: 100%;
  min-height: 100%;
  padding: 14px 16px 28px;
  color: var(--view-value-color);
  background: var(--form-page-bg, var(--view-bg));
}

/* ======================================================
   HEADER
====================================================== */

._inventoryViewHeader_1macl_25 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

._inventoryViewHeaderLeft_1macl_41 {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

._inventoryViewBackBtn_1macl_55 {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: var(--view-muted);
  background: transparent;
  border: 1px solid var(--view-border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s;
}

._inventoryViewBackBtn_1macl_55:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

._inventoryViewBreadcrumb_1macl_99 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: var(--view-muted);
  font-size: 12px;
}

._inventoryViewBreadcrumb_1macl_99 a {
  color: var(--primary-purple-400, var(--primary-purple-400));
  text-decoration: none;
}

._inventoryViewTitleRow_1macl_127 h1 {
  margin: 0;
  color: var(--view-value-color);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
}

._inventoryViewSubRow_1macl_143 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
  color: var(--view-muted);
  font-size: 12px;
}

._inventoryViewStatus_1macl_163,
._inventoryViewRef_1macl_165,
._inventoryViewPurpleChip_1macl_167,
._inventoryViewNegativeChip_1macl_169 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

._inventoryViewStatus_1macl_163 {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--vstatus-confirmed-bg);
  color: var(--vstatus-confirmed-color);
}

._inventoryViewRef_1macl_165,
._inventoryViewPurpleChip_1macl_167 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--primary-purple-400);
  background: var(--primary-purple-100);
  border: 1px solid var(--primary-purple-200);
}

._inventoryViewHeaderActions_1macl_239 {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
}

._inventoryViewBtn_1macl_257 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  min-height: 38px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  border: 1px solid transparent;
}

._inventoryViewBtnOutline_1macl_287 {
  background: var(--bg-color);
  border-color: var(--view-border);
  color: var(--view-value-color);
}

._inventoryViewBtnOutline_1macl_287:hover {
  background: var(--hover-bg, #f5f5fa);
}

._inventoryViewBtnPrimary_1macl_307 {
  background: var(--primary-purple-400);
  color: #fff;
}

._inventoryViewBtnPrimary_1macl_307:hover {
  background: var(--primary-purple-500);
}

._inventoryViewMoreBtn_1macl_325 {
  width: 42px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--view-value-color);
  background: var(--bg-color);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.13s;
}

._inventoryViewMoreBtn_1macl_325:hover {
  background: var(--hover-bg, #f5f5fa);
}

._inventoryViewMenuWrap_1macl_361 {
  position: relative;
}

._inventoryViewMenu_1macl_361 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 195px;
  overflow: hidden;
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  box-shadow: var(--view-shadow-md);
}

._inventoryViewMenu_1macl_361 button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  color: var(--view-value-color);
  font-size: 12px;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--view-border, var(--hover-bg, #f5f5fa));
  cursor: pointer;
}

._inventoryViewMenu_1macl_361 button:last-child {
  border-bottom: 0;
}

._inventoryViewMenu_1macl_361 button._danger_1macl_435 {
  color: var(--vstatus-cancelled-color);
  background: var(--vstatus-cancelled-bg);
}

/* ======================================================
   STAT CARDS
====================================================== */

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

._inventoryViewStatCard_1macl_467 {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 10px;
  box-shadow: var(--view-shadow-sm);
}

._inventoryViewStatIcon_1macl_491 {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

._inventoryViewStatIcon_1macl_491._purple_1macl_511 {
  color: var(--primary-purple-400);
  background: var(--primary-purple-100);
}

._inventoryViewStatIcon_1macl_491._red_1macl_521 {
  color: var(--vstatus-cancelled-color);
  background: var(--vstatus-cancelled-bg);
}

._inventoryViewStatCard_1macl_467 > div:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

._inventoryViewStatCard_1macl_467 span {
  color: var(--view-muted);
  font-size: 12px;
}

._inventoryViewStatCard_1macl_467 strong {
  color: var(--view-value-color);
  font-size: 15px;
  font-weight: 600;
}

._danger_1macl_435,
._inventoryViewStatCard_1macl_467 strong._danger_1macl_435 {
  color: var(--vstatus-cancelled-color) !important;
}

/* ======================================================
   MAIN LEFT / RIGHT ALIGNMENT
====================================================== */

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

._inventoryViewMain_1macl_599,
._inventoryViewSide_1macl_601 {
  min-width: 0;
}

._inventoryViewMain_1macl_599 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._inventoryViewSide_1macl_601 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ======================================================
   CARDS
====================================================== */

._inventoryViewCard_1macl_641,
._inventoryViewTabsCard_1macl_643 {
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius);
  box-shadow: var(--view-shadow-sm);
}

._inventoryViewCard_1macl_641 {
  overflow: hidden;
}

._inventoryViewCardHeader_1macl_665 {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--view-border);
}

._inventoryViewCardHeader_1macl_665 h3 {
  margin: 0;
  color: var(--view-value-color);
  font-size: 13px;
  font-weight: 600;
}

._inventoryViewCardBody_1macl_695 {
  padding: 14px;
}

/* ======================================================
   TABS
====================================================== */

._inventoryViewTabsCard_1macl_643 {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

._inventoryViewTab_1macl_643 {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  color: var(--view-muted);
  font-size: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

._inventoryViewTab_1macl_643._active_1macl_753 {
  color: var(--primary-purple-400, var(--primary-purple-400));
}

._inventoryViewTab_1macl_643._active_1macl_753::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--primary-purple-400, var(--primary-purple-400));
}

._inventoryViewTab_1macl_643 > span {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: var(--view-value-color);
  font-size: 10px;
  background: var(--hover-bg, #f5f5fa);
  border-radius: 999px;
}

/* ======================================================
   DETAILS
====================================================== */

._inventoryViewDetailGrid_1macl_815 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 42px;
}

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

._inventoryViewDetailRow_1macl_827 > span {
  color: var(--view-muted);
  font-size: 12px;
}

._inventoryViewDetailRow_1macl_827 > strong {
  color: var(--view-value-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* ======================================================
   ITEM TABLE
====================================================== */

._inventoryViewTableWrap_1macl_873 {
  overflow-x: auto;
  border: 1px solid var(--view-border);
  border-radius: 7px;
}

._inventoryViewTable_1macl_873 {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

._inventoryViewTable_1macl_873 th,
._inventoryViewTable_1macl_873 td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--view-border);
}

._inventoryViewTable_1macl_873 th {
  color: var(--view-value-color);
  font-size: 11px;
  font-weight: 500;
  background: var(--primary-purple-100);
}

._inventoryViewTable_1macl_873 td {
  color: var(--view-value-color);
  font-size: 12px;
}

._inventoryViewTable_1macl_873 tbody tr:last-child td {
  border-bottom: 0;
}

._inventoryViewItemCell_1macl_945 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._inventoryViewItemThumb_1macl_957 {
  width: 48px;
  height: 36px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-purple-400, var(--primary-purple-400));
  background: var(--primary-purple-100);
  border: 1px solid var(--view-border);
  border-radius: 5px;
}

._inventoryViewItemCell_1macl_945 > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._inventoryViewItemCell_1macl_945 strong {
  color: var(--view-value-color);
  font-size: 12px;
  font-weight: 500;
}

._inventoryViewItemCell_1macl_945 span {
  color: var(--view-muted);
  font-size: 10px;
}

._inventoryViewNegativeChip_1macl_169 {
  min-width: 32px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vstatus-cancelled-color);
  background: var(--vstatus-cancelled-bg);
}

._inventoryViewTotalRow_1macl_1037 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid var(--view-border);
  border-radius: 7px;
}

._inventoryViewTotalRow_1macl_1037 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

._inventoryViewTotalRow_1macl_1037 span {
  color: var(--view-muted);
  font-size: 10px;
}

._inventoryViewTotalRow_1macl_1037 strong {
  color: var(--view-value-color);
  font-size: 12px;
}

/* ======================================================
   NOTE
====================================================== */

._inventoryViewNote_1macl_1097 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--view-text, var(--view-value-color));
  font-size: 12px;
  line-height: 1.6;
}

._inventoryViewNote_1macl_1097 svg {
  margin-top: 2px;
  color: var(--vstatus-pending-color);
  flex-shrink: 0;
}

/* ======================================================
   RIGHT SIDE SUMMARY
====================================================== */

._inventoryViewSummaryList_1macl_1135 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._inventoryViewSummaryList_1macl_1135 > div {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 14px;
  align-items: start;
}

._inventoryViewSummaryList_1macl_1135 span {
  color: var(--view-muted);
  font-size: 11px;
}

._inventoryViewSummaryList_1macl_1135 strong {
  color: var(--view-value-color);
  font-size: 11px;
  font-weight: 500;
}

._inventoryViewSummaryStatus_1macl_1183 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

._inventoryViewSummaryStatus_1macl_1183 i {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: var(--vstatus-confirmed-color);
  border-radius: 50%;
}

._inventoryViewDangerBox_1macl_1211 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 11px;
  color: var(--vstatus-cancelled-color);
  font-size: 11px;
  background: var(--vstatus-cancelled-bg);
  border: 1px solid var(--vstatus-cancelled-color);
  border-radius: 7px;
}

/* ======================================================
   ATTACHMENT
====================================================== */

._inventoryViewAttachmentRow_1macl_1245 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._inventoryViewFileIcon_1macl_1257 {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--view-muted);
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 7px;
}

._inventoryViewFileMeta_1macl_1283 {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._inventoryViewFileMeta_1macl_1283 strong {
  color: var(--view-value-color);
  font-size: 11px;
  font-weight: 500;
}

._inventoryViewFileMeta_1macl_1283 span {
  color: var(--view-muted);
  font-size: 10px;
}

._inventoryViewFileActions_1macl_1321 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._inventoryViewFileActions_1macl_1321 button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--view-muted);
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 7px;
  cursor: pointer;
}

._inventoryViewLinkBtn_1macl_1359 {
  margin-top: 10px;
  padding: 0;
  color: var(--primary-purple-400, var(--primary-purple-400));
  font-size: 11px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ======================================================
   ACTIVITY
====================================================== */

._inventoryViewActivity_1macl_1387 {
  display: flex;
  flex-direction: column;
}

._inventoryViewActivityRow_1macl_1397 {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  min-height: 38px;
}

._inventoryViewActivityRow_1macl_1397:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: -2px;
  left: 3px;
  width: 1px;
  background: var(--primary-purple-300);
}

._inventoryViewActivityDot_1macl_1433 {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  display: inline-block;
  background: var(--primary-purple-400, var(--primary-purple-400));
  border-radius: 50%;
}

._inventoryViewActivityRow_1macl_1397 > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

._inventoryViewActivityRow_1macl_1397 strong {
  color: var(--view-value-color);
  font-size: 10px;
  font-weight: 500;
}

._inventoryViewActivityRow_1macl_1397 span:last-child {
  color: var(--view-muted);
  font-size: 9px;
  white-space: nowrap;
}

/* ======================================================
   SIMPLE LIST
====================================================== */

._inventoryViewSimpleListRow_1macl_1503 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--view-border);
}

._inventoryViewSimpleListRow_1macl_1503:last-child {
  border-bottom: 0;
}

._inventoryViewSimpleListRow_1macl_1503 > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._inventoryViewSimpleListRow_1macl_1503 strong {
  color: var(--view-value-color);
  font-size: 12px;
  font-weight: 500;
}

._inventoryViewSimpleListRow_1macl_1503 span {
  color: var(--view-muted);
  font-size: 10px;
}

._inventoryViewBackLink_1macl_1563 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--primary-purple-400, var(--primary-purple-400));
  font-size: 11px;
  text-decoration: none;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1180px) {
  ._inventoryViewStats_1macl_453 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._inventoryViewLayout_1macl_585 {
    grid-template-columns: 1fr;
  }

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

  ._inventoryViewBackLink_1macl_1563 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  ._inventoryViewHeader_1macl_25 {
    flex-direction: column;
  }

  ._inventoryViewHeaderActions_1macl_239 {
    width: 100%;
    padding-top: 0;
  }

  ._inventoryViewDetailGrid_1macl_815 {
    grid-template-columns: 1fr;
  }

  ._inventoryViewSide_1macl_601 {
    grid-template-columns: 1fr;
  }

  ._inventoryViewTabsCard_1macl_643 {
    overflow-x: auto;
  }

  ._inventoryViewTab_1macl_643 {
    flex-shrink: 0;
  }
}

@media (max-width: 560px) {
  ._inventoryViewPage_1macl_1 {
    padding: 10px;
  }

  ._inventoryViewStats_1macl_453 {
    grid-template-columns: 1fr;
  }

  ._inventoryViewHeaderLeft_1macl_41 {
    width: 100%;
  }

  ._inventoryViewHeaderActions_1macl_239 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  ._inventoryViewBtn_1macl_257 {
    width: 100%;
  }

  ._inventoryViewBtnPrimary_1macl_307:hover {
    background: var(--primary-purple-500);
  }

  ._inventoryViewMoreBtn_1macl_325 {
    width: 100%;
  }

  ._inventoryViewDetailRow_1macl_827 {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  ._inventoryViewTotalRow_1macl_1037 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
/* =========================================================
   INVENTORY ADD PAGE
========================================================= */

._inventoryAddPage_vlsr8_9 {
  width: 100%;
  min-height: 100%;
  background: var(--form-page-bg, #f4f3fb);
  color: var(--text-color, #191919);
  box-sizing: border-box;
}

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

/* =========================================================
   PAGE HEADER
========================================================= */

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

  padding: 14px 24px 12px;
}

._headerLeft_vlsr8_63 {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 14px;
}

._headerLeft_vlsr8_63 h1 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

._headerLeft_vlsr8_63 p {
  margin: 3px 0 0;

  color: var(--color-grey, #999999);

  font-size: 11.5px;
  line-height: 1.4;
}

._headerActions_vlsr8_117 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  flex-wrap: wrap;
}

/* =========================================================
   MAIN CONTENT LAYOUT
========================================================= */

._contentLayout_vlsr8_143 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    370px;

  align-items: start;

  gap: 16px;

  padding: 0 24px 16px;

  min-width: 0;
}

._mainColumn_vlsr8_175,
._sidebar_vlsr8_177 {
  min-width: 0;
  max-width: 100%;
}

._mainColumn_vlsr8_175 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._sidebar_vlsr8_177 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   CARDS
========================================================= */

._card_vlsr8_219,
._sideCard_vlsr8_221 {
  width: 100%;
  min-width: 0;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

._card_vlsr8_219 {
  overflow: hidden;
}

._sideCard_vlsr8_221 {
  overflow: hidden;
}

._cardBody_vlsr8_263 {
  padding: 16px;
}

._sectionTitle_vlsr8_271 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

._sectionSubtext_vlsr8_291 {
  margin: 3px 0 10px;

  color: var(--color-grey, #999999);

  font-size: 10.5px;
  line-height: 1.4;
}

/* =========================================================
   FORM FIELDS
========================================================= */

._fieldFull_vlsr8_317 {
  width: 100%;
  min-width: 0;

  margin-top: 12px;
}

._field_vlsr8_317 {
  min-width: 0;
  width: 100%;
}

._label_vlsr8_341 {
  display: inline-flex;
  align-items: center;
  gap: 2px;

  margin: 0 0 5px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

._label_vlsr8_341 span {
  color: var(--form-required-color, #fb3748);
}

/* =========================================================
   MODE TOGGLE
========================================================= */

._modeToggle_vlsr8_385 {
  width: min(635px, 100%);

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  overflow: hidden;

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;
}

._modeButton_vlsr8_413 {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 6px 12px;

  color: var(--color-neutral-700, #5d5d5d);

  font: inherit;
  font-size: 12px;
  font-weight: 500;

  background: var(--form-input-bg, #ffffff);

  border: 0;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease;
}

._modeButton_vlsr8_413 + ._modeButton_vlsr8_413 {
  border-left: 1px solid var(--form-input-border, #dee2e6);
}

._modeButton_vlsr8_413:hover:not(._modeButtonActive_vlsr8_477):not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
}

._modeButton_vlsr8_413:focus-visible {
  outline: 2px solid var(--primary-purple-400, #4f46e5);

  outline-offset: -2px;
}

._modeButtonActive_vlsr8_477 {
  color: #ffffff;

  background: var(--primary-purple-400, #4f46e5);
}

._modeButton_vlsr8_413:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   DETAILS GRID
========================================================= */

._detailsGrid_vlsr8_527 {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px 20px;

  margin-top: 12px;

  min-width: 0;
}

._descriptionField_vlsr8_551 {
  grid-column: span 2;
}

/* =========================================================
   INPUTS
========================================================= */

._input_vlsr8_567,
._select_vlsr8_569,
._quantityInput_vlsr8_571 {
  width: 100%;

  min-height: 37px;

  padding: 7px 11px;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

._input_vlsr8_567:focus,
._select_vlsr8_569:focus,
._quantityInput_vlsr8_571:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._input_vlsr8_567::placeholder,
._quantityInput_vlsr8_571::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._input_vlsr8_567:disabled,
._select_vlsr8_569:disabled,
._quantityInput_vlsr8_571:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--form-disabled-bg, #f7f7f8);
}

._select_vlsr8_569 {
  cursor: pointer;
}

/* =========================================================
   ITEMS CARD
========================================================= */

._itemsCard_vlsr8_681 {
  position: relative;

  min-width: 0;
  max-width: 100%;

  overflow: hidden;
}

/* =========================================================
   ITEMS HEADER
========================================================= */

._itemsHeader_vlsr8_707 {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 14px;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._itemsTitleWrap_vlsr8_735 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

._countBadge_vlsr8_753 {
  min-width: 24px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 7px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;
}

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

  gap: 8px;

  flex-shrink: 0;
}

._outlineActionButton_vlsr8_811,
._addItemButton_vlsr8_813 {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 6px 12px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 500;

  border-radius: 7px;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;

  white-space: nowrap;
}

._outlineActionButton_vlsr8_811 {
  color: var(--text-color, #191919);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
}

._outlineActionButton_vlsr8_811:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
}

._addItemButton_vlsr8_813 {
  color: var(--primary-purple-400, #4f46e5);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--primary-purple-300, #aaa6f5);
}

._addItemButton_vlsr8_813:hover:not(:disabled) {
  background: var(--primary-purple-100, #eae9fc);
}

._outlineActionButton_vlsr8_811:disabled,
._addItemButton_vlsr8_813:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

._tableWrap_vlsr8_935 {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  position: relative;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: thin;

  scrollbar-color: var(--form-border, #d7d7df) transparent;
}

._tableWrap_vlsr8_935::-webkit-scrollbar {
  height: 7px;
}

._tableWrap_vlsr8_935::-webkit-scrollbar-track {
  background: transparent;
}

._tableWrap_vlsr8_935::-webkit-scrollbar-thumb {
  background: var(--form-border, #d7d7df);

  border-radius: 999px;
}

._tableWrap_vlsr8_935::-webkit-scrollbar-thumb:hover {
  background: #c3c3ce;
}

/* =========================================================
   TABLE
========================================================= */

._itemsTable_vlsr8_1009 {
  width: 100%;

  /*
   * Allows table to shrink with parent.
   * When the viewport becomes too narrow,
   * horizontal scrolling belongs to .tableWrap.
   */
  min-width: 900px;

  table-layout: fixed;

  border-collapse: collapse;
  border-spacing: 0;
}

._itemsTable_vlsr8_1009 th,
._itemsTable_vlsr8_1009 td {
  box-sizing: border-box;

  padding: 8px 12px;

  text-align: left;
  vertical-align: middle;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._itemsTable_vlsr8_1009 th {
  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  line-height: 1.3;

  background: var(--primary-purple-100, #f1f0ff);

  white-space: nowrap;
}

._itemsTable_vlsr8_1009 td {
  position: relative;

  color: var(--text-color, #191919);

  font-size: 11.5px;

  /*
   * Important:
   * Product dropdown is rendered through
   * createPortal, therefore it is not
   * affected by this overflow.
   */
  overflow: hidden;
}

._itemsTable_vlsr8_1009 tbody tr:last-child td {
  border-bottom: 0;
}

._itemsTable_vlsr8_1009 tbody tr:hover {
  background: var(--hover-bg, #fafafe);
}

/* =========================================================
   TABLE COLUMN WIDTHS
========================================================= */

._itemsTable_vlsr8_1009 th:nth-child(1),
._itemsTable_vlsr8_1009 td:nth-child(1) {
  width: 4%;
}

._itemsTable_vlsr8_1009 th:nth-child(2),
._itemsTable_vlsr8_1009 td:nth-child(2) {
  width: 27%;
}

._itemsTable_vlsr8_1009 th:nth-child(3),
._itemsTable_vlsr8_1009 td:nth-child(3) {
  width: 15%;
}

._itemsTable_vlsr8_1009 th:nth-child(4),
._itemsTable_vlsr8_1009 td:nth-child(4) {
  width: 18%;
}

._itemsTable_vlsr8_1009 th:nth-child(5),
._itemsTable_vlsr8_1009 td:nth-child(5) {
  width: 18%;
}

._itemsTable_vlsr8_1009 th:nth-child(6),
._itemsTable_vlsr8_1009 td:nth-child(6) {
  width: 18%;
}

/* =========================================================
   CHECKBOX
========================================================= */

._checkboxColumn_vlsr8_1215 {
  width: 42px;

  text-align: center !important;
}

._checkboxColumn_vlsr8_1215 input {
  width: 15px;
  height: 15px;

  margin: 0;

  accent-color: var(--primary-purple-400, #4f46e5);

  cursor: pointer;
}

._checkboxColumn_vlsr8_1215 input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* =========================================================
   ITEM DETAILS
========================================================= */

._itemDetailsCell_vlsr8_1267 {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  display: flex;
  align-items: center;

  gap: 10px;

  overflow: hidden;
}

._itemThumb_vlsr8_1293 {
  width: 46px;
  height: 38px;

  min-width: 46px;
  max-width: 46px;

  flex: 0 0 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: var(--primary-purple-400, #4f46e5);

  background: linear-gradient(
    135deg,
    var(--primary-purple-100, #eae9fc),
    #ffffff
  );

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 5px;
}

._itemThumb_vlsr8_1293 img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center;

  border-radius: 4px;
}

._itemMeta_vlsr8_1379 {
  min-width: 0;
  max-width: 100%;

  display: flex;
  flex-direction: column;

  gap: 2px;

  overflow: hidden;
}

._itemMeta_vlsr8_1379 strong {
  display: block;

  max-width: 100%;

  overflow: hidden;

  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._itemMeta_vlsr8_1379 span {
  display: block;

  max-width: 100%;

  overflow: hidden;

  color: var(--color-grey, #999999);

  font-size: 10px;

  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PRODUCT SELECTOR
========================================================= */

._productSelector_vlsr8_1481 {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  position: relative;
}

._productTrigger_vlsr8_1497 {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 8px 12px;

  color: var(--form-input-placeholder, #7b8190);

  font: inherit;
  font-size: 12px;
  font-weight: 500;

  text-align: left;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #d9dce5);

  border-radius: 7px;

  outline: none;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

._productTrigger_vlsr8_1497:hover:not(:disabled) {
  border-color: var(--primary-purple-300, #aaa6f5);

  background: var(--hover-bg, #fafafe);
}

._productTrigger_vlsr8_1497:focus-visible {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._productTrigger_vlsr8_1497[aria-expanded="true"] {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._productTrigger_vlsr8_1497:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

._productTriggerContent_vlsr8_1621 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  overflow: hidden;
}

._productTriggerContent_vlsr8_1621 span {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._productTriggerArrow_vlsr8_1661 {
  flex: 0 0 auto;

  color: var(--color-grey, #7b8190);

  font-size: 12px;

  transition: transform 0.15s ease;
}

._productTrigger_vlsr8_1497[aria-expanded="true"] ._productTriggerArrow_vlsr8_1661 {
  transform: rotate(180deg);
}

/* =========================================================
   PRODUCT DROPDOWN - PORTAL
========================================================= */

/*
 * The dropdown is rendered using createPortal()
 * directly into document.body.
 *
 * Therefore it must use position: fixed.
 */

[data-product-dropdown] {
  position: fixed !important;

  z-index: 999999 !important;

  display: flex;
  flex-direction: column;

  width: 280px;
  min-width: 280px;
  max-width: 360px;

  max-height: 350px;

  padding: 0;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 9px;

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);

  overflow: hidden;

  isolation: isolate;
}

/*
 * Search wrapper.
 *
 * JSX currently uses inline styles,
 * but these rules ensure the search area
 * does not accidentally scroll.
 */

[data-product-dropdown] > div:first-child {
  flex: 0 0 auto;

  position: relative;

  background: #ffffff;

  z-index: 2;
}

/*
 * Product list.
 *
 * ONLY this area is allowed to scroll.
 */

._productList_vlsr8_1817 {
  flex: 1 1 auto;

  width: 100%;

  min-height: 0;

  max-height: 275px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;

  scrollbar-color: #d2d4dc transparent;

  -webkit-overflow-scrolling: touch;
}

._productList_vlsr8_1817::-webkit-scrollbar {
  width: 7px;
}

._productList_vlsr8_1817::-webkit-scrollbar-track {
  background: transparent;
}

._productList_vlsr8_1817::-webkit-scrollbar-thumb {
  background: #d2d4dc;

  border-radius: 999px;
}

._productList_vlsr8_1817::-webkit-scrollbar-thumb:hover {
  background: #b9bcc6;
}

/*
 * Prevent accidental horizontal
 * expansion caused by product names.
 */

._productList_vlsr8_1817 button {
  box-sizing: border-box;

  max-width: 100%;

  overflow: hidden;
}

/* =========================================================
   PRODUCT DROPDOWN SEARCH
========================================================= */

[data-product-dropdown] input[type="text"] {
  width: 100%;

  box-sizing: border-box;

  color: #222222;

  font: inherit;
  font-size: 12px;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

[data-product-dropdown] input[type="text"]:focus {
  border-color: #4f46e5;

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

[data-product-dropdown] input[type="text"]::placeholder {
  color: #9ca3af;
}

/* =========================================================
   PRODUCT DROPDOWN PRODUCT OPTION
========================================================= */

[data-product-dropdown] [role="option"] {
  width: 100%;

  min-height: 58px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 8px 10px;

  border: 0;
  border-bottom: 1px solid #f1f1f1;

  text-align: left;

  background: #ffffff;

  cursor: pointer;

  transition:
    background 0.12s ease,
    opacity 0.12s ease;
}

[data-product-dropdown] [role="option"]:last-child {
  border-bottom: 0;
}

[data-product-dropdown] [role="option"]:hover:not(:disabled) {
  background: #f7f6ff !important;
}

[data-product-dropdown] [role="option"]:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.35);

  outline-offset: -2px;
}

[data-product-dropdown] [role="option"]:disabled {
  cursor: not-allowed;

  opacity: 0.48;

  background: #fafafa !important;
}

/* =========================================================
   QUANTITY / VALUE INPUT
========================================================= */

._quantityCell_vlsr8_2107 {
  font-weight: 500;

  white-space: nowrap;
}

._quantityInput_vlsr8_571 {
  width: 100%;
  max-width: 125px;

  min-height: 34px;
}

/* =========================================================
   ADJUSTMENT BADGES
========================================================= */

._adjustmentBadge_vlsr8_2141 {
  min-width: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 8px;

  font-size: 11px;
  font-weight: 600;

  border-radius: 9px;
}

._adjustmentNegative_vlsr8_2171,
._totalNegative_vlsr8_2173,
._summaryNegative_vlsr8_2175 {
  color: var(--color-red, #fb3748) !important;
}

._adjustmentNegative_vlsr8_2171 {
  background: var(--color-red-light, rgba(251, 55, 72, 0.1));
}

._adjustmentPositive_vlsr8_2191,
._totalPositive_vlsr8_2193,
._summaryPositive_vlsr8_2195 {
  color: var(--color-green, #1fc16b) !important;
}

._adjustmentPositive_vlsr8_2191 {
  background: var(--color-green-light, #e6fbf0);
}

._adjustmentNeutral_vlsr8_2211 {
  color: var(--color-grey, #999999);

  background: var(--hover-bg, #f4f4f7);
}

/* =========================================================
   ROW ACTIONS
========================================================= */

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

  gap: 8px;

  white-space: nowrap;
}

._iconButton_vlsr8_2249 {
  width: 35px;
  height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--text-color, #191919);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

._iconButton_vlsr8_2249:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
}

._iconButton_vlsr8_2249:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.35);

  outline-offset: 2px;
}

._iconButton_vlsr8_2249:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._deleteButton_vlsr8_2327 {
  color: var(--color-red, #fb3748);
}

._deleteButton_vlsr8_2327:hover:not(:disabled) {
  border-color: var(--color-red, #fb3748);

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));
}

/* =========================================================
   ITEMS TOTALS
========================================================= */

._itemsTotals_vlsr8_2355 {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 8px 14px 10px;

  overflow: hidden;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;
}

._itemsTotals_vlsr8_2355 > div {
  position: relative;

  min-height: 54px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 1px;

  padding: 8px 12px;
}

._itemsTotals_vlsr8_2355 > div:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 10px;
  right: 0;
  bottom: 10px;

  width: 1px;

  background: var(--form-border, #e0e0e0);
}

._itemsTotals_vlsr8_2355 span {
  color: var(--form-label-color, #5d5d5d);

  font-size: 10.5px;
  line-height: 1.3;
}

._itemsTotals_vlsr8_2355 strong {
  color: var(--text-color, #191919);

  font-size: 17px;
  font-weight: 700;

  line-height: 1.2;
}

/* =========================================================
   ATTACHMENTS
========================================================= */

._attachmentsLayout_vlsr8_2483 {
  display: grid;

  grid-template-columns:
    minmax(0, 1.6fr)
    minmax(280px, 0.8fr);

  gap: 30px;

  align-items: center;

  min-width: 0;
}

._dropZone_vlsr8_2511 {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 12px;

  color: var(--text-color, #191919);

  font: inherit;

  background: transparent;

  border: 1px dashed var(--color-grey, #b8b8c0);

  border-radius: 8px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._dropZone_vlsr8_2511 > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;

  text-align: left;
}

._dropZone_vlsr8_2511 strong {
  font-size: 11.5px;
  font-weight: 600;
}

._dropZone_vlsr8_2511 strong span {
  color: var(--primary-purple-400, #4f46e5);
}

._dropZone_vlsr8_2511 small {
  color: var(--color-grey, #999999);

  font-size: 9.5px;
}

._dropZone_vlsr8_2511:hover:not(:disabled) {
  background: var(--primary-purple-100, #f1f0ff);

  border-color: var(--primary-purple-300, #aaa6f5);
}

._dropZone_vlsr8_2511:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.35);

  outline-offset: 2px;
}

._dropZone_vlsr8_2511:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================================
   ATTACHMENT LIST
========================================================= */

._attachmentList_vlsr8_2661 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}

._attachmentItem_vlsr8_2679,
._emptyAttachment_vlsr8_2681 {
  min-width: 0;
  min-height: 42px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 8px 10px;

  color: var(--text-color, #191919);

  font-size: 10.5px;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;
}

._attachmentItem_vlsr8_2679 > svg {
  flex: 0 0 auto;
}

._attachmentItem_vlsr8_2679 span {
  min-width: 0;

  flex: 1;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._attachmentItem_vlsr8_2679 button {
  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--text-color, #191919);

  background: transparent;

  border: 0;

  border-radius: 5px;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease;
}

._attachmentItem_vlsr8_2679 button:hover:not(:disabled) {
  color: var(--color-red, #fb3748);

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));
}

._attachmentItem_vlsr8_2679 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._emptyAttachment_vlsr8_2681 {
  justify-content: center;

  color: var(--color-grey, #999999);
}

/* =========================================================
   SIDEBAR CARDS
========================================================= */

._sideCardHeader_vlsr8_2851 {
  min-height: 48px;

  display: flex;
  align-items: center;

  padding: 0 17px;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._sideCardHeader_vlsr8_2851 h3 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

._iconHeading_vlsr8_2895 {
  display: inline-flex;
  align-items: center;

  gap: 8px;
}

._sideCardBody_vlsr8_2909 {
  padding: 14px 17px 16px;
}

/* =========================================================
   SUMMARY
========================================================= */

._summaryList_vlsr8_2925 {
  display: flex;
  flex-direction: column;

  gap: 16px;
}

._summaryList_vlsr8_2925 > div {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  align-items: center;

  gap: 12px;
}

._summaryList_vlsr8_2925 span {
  color: var(--form-label-color, #5d5d5d);

  font-size: 11px;
}

._summaryList_vlsr8_2925 strong {
  min-width: 0;

  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 500;

  text-align: right;

  overflow-wrap: anywhere;
}

._modeBadge_vlsr8_3001 {
  justify-self: end;

  padding: 3px 9px;

  color: var(--primary-purple-400, #4f46e5) !important;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;
}

._summaryNegative_vlsr8_2175,
._summaryPositive_vlsr8_2195 {
  justify-self: end;

  padding: 3px 8px;

  border-radius: 8px;
}

._summaryNegative_vlsr8_2175 {
  background: var(--color-red-light, rgba(251, 55, 72, 0.1));
}

._summaryPositive_vlsr8_2195 {
  background: var(--color-green-light, #e6fbf0);
}

/* =========================================================
   STOCK NOTICE
========================================================= */

._stockNotice_vlsr8_3067 {
  min-height: 50px;

  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 20px;

  padding: 10px 12px;

  font-size: 11.5px;
  font-weight: 500;

  border: 1px solid transparent;

  border-radius: 7px;
}

._stockDecrease_vlsr8_3107 {
  color: var(--color-red, #fb3748);

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));

  border-color: rgba(251, 55, 72, 0.24);
}

._stockIncrease_vlsr8_3123 {
  color: var(--color-green, #1fc16b);

  background: var(--color-green-light, #e6fbf0);

  border-color: rgba(31, 193, 107, 0.24);
}

._stockSame_vlsr8_3139 {
  color: var(--color-grey, #777777);

  background: var(--hover-bg, #f7f7fb);

  border-color: var(--form-border, #e0e0e0);
}

/* =========================================================
   QUICK TIPS / VALIDATION
========================================================= */

._tipList_vlsr8_3163,
._validationList_vlsr8_3165 {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

._tipList_vlsr8_3163 > div,
._validationList_vlsr8_3165 > div {
  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  align-items: flex-start;

  gap: 10px;
}

._tipList_vlsr8_3163 svg {
  margin-top: 1px;

  color: var(--text-color, #191919);
}

._tipList_vlsr8_3163 span,
._validationList_vlsr8_3165 span {
  color: var(--form-label-color, #5d5d5d);

  font-size: 11px;

  line-height: 1.5;
}

._valid_vlsr8_3165 svg {
  color: var(--color-green, #1fc16b);

  fill: var(--color-green, #1fc16b);

  stroke: #ffffff;
}

._invalid_vlsr8_3251 svg {
  color: var(--color-grey, #b4b4b4);
}

/* =========================================================
   ADD ITEM MODAL
   Kept for compatibility with existing JSX
========================================================= */

._modalOverlay_vlsr8_3269 {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(18, 18, 28, 0.48);

  backdrop-filter: blur(2px);
}

._addItemModal_vlsr8_3305 {
  width: min(620px, 100%);

  max-height: calc(100vh - 40px);

  overflow-y: auto;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 12px;

  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);

  scrollbar-width: thin;
}

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

  gap: 18px;

  padding: 18px 20px 15px;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._modalHeader_vlsr8_3341 h2 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 17px;
  font-weight: 700;
}

._modalHeader_vlsr8_3341 p {
  margin: 4px 0 0;

  color: var(--color-grey, #999999);

  font-size: 11px;
}

._modalCloseButton_vlsr8_3399 {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--form-label-color, #5d5d5d);

  background: transparent;

  border: 1px solid transparent;

  border-radius: 7px;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

._modalCloseButton_vlsr8_3399:hover {
  color: var(--text-color, #191919);

  background: var(--hover-bg, #f7f7fb);

  border-color: var(--form-border, #e0e0e0);
}

._modalForm_vlsr8_3471 {
  padding: 18px 20px 20px;
}

._modalGrid_vlsr8_3479 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 15px 16px;
}

._modalFullField_vlsr8_3495 {
  grid-column: 1 / -1;
}

._inputError_vlsr8_3503 {
  border-color: var(--color-red, #fb3748) !important;
}

._inputError_vlsr8_3503:focus {
  box-shadow: 0 0 0 3px rgba(251, 55, 72, 0.08) !important;
}

._errorText_vlsr8_3519 {
  display: block;

  margin-top: 4px;

  color: var(--color-red, #fb3748);

  font-size: 10px;

  line-height: 1.3;
}

._modalActions_vlsr8_3543 {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 20px;
  padding-top: 15px;

  border-top: 1px solid var(--form-border, #e0e0e0);
}

/* =========================================================
   RESPONSIVE - <= 1180
========================================================= */

@media (max-width: 1180px) {
  ._contentLayout_vlsr8_143 {
    grid-template-columns: 1fr;
  }

  ._sidebar_vlsr8_177 {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: start;
  }
}

/* =========================================================
   RESPONSIVE - <= 1000
========================================================= */

@media (max-width: 1000px) {
  ._contentLayout_vlsr8_143 {
    padding-left: 18px;
    padding-right: 18px;
  }

  ._pageHeader_vlsr8_45 {
    padding-left: 18px;
    padding-right: 18px;
  }

  ._attachmentsLayout_vlsr8_2483 {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(240px, 0.8fr);

    gap: 18px;
  }
}

/* =========================================================
   RESPONSIVE - <= 900
========================================================= */

@media (max-width: 900px) {
  ._pageHeader_vlsr8_45 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._headerActions_vlsr8_117 {
    width: 100%;

    justify-content: flex-start;
  }

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

  ._descriptionField_vlsr8_551 {
    grid-column: 1 / -1;
  }

  ._attachmentsLayout_vlsr8_2483 {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  ._sidebar_vlsr8_177 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RESPONSIVE - <= 760
========================================================= */

@media (max-width: 760px) {
  ._pageHeader_vlsr8_45 {
    gap: 12px;

    padding-top: 12px;
  }

  ._headerLeft_vlsr8_63 {
    gap: 10px;
  }

  ._headerLeft_vlsr8_63 h1 {
    font-size: 20px;
  }

  ._headerLeft_vlsr8_63 p {
    font-size: 10.5px;
  }

  ._contentLayout_vlsr8_143 {
    padding-left: 14px;
    padding-right: 14px;
  }

  ._cardBody_vlsr8_263 {
    padding: 14px;
  }

  ._itemsHeader_vlsr8_707 {
    align-items: stretch;

    flex-direction: column;

    padding: 10px 12px;
  }

  ._itemHeaderActions_vlsr8_793 {
    width: 100%;
  }

  ._outlineActionButton_vlsr8_811,
  ._addItemButton_vlsr8_813 {
    flex: 1;
  }

  ._attachmentsLayout_vlsr8_2483 {
    gap: 10px;
  }

  ._itemsTotals_vlsr8_2355 {
    margin-left: 12px;
    margin-right: 12px;
  }

  ._sideCardHeader_vlsr8_2851 {
    padding-left: 14px;
    padding-right: 14px;
  }

  ._sideCardBody_vlsr8_2909 {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =========================================================
   RESPONSIVE - <= 640
========================================================= */

@media (max-width: 640px) {
  ._pageHeader_vlsr8_45,
  ._contentLayout_vlsr8_143 {
    padding-left: 12px;
    padding-right: 12px;
  }

  ._headerLeft_vlsr8_63 {
    align-items: flex-start;
  }

  ._headerLeft_vlsr8_63 h1 {
    font-size: 19px;
  }

  ._headerActions_vlsr8_117 {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr;
  }

  ._headerActions_vlsr8_117 .btn-form-cancel,
  ._headerActions_vlsr8_117 .btn-form-secondary,
  ._headerActions_vlsr8_117 .btn-form-primary {
    width: 100%;

    justify-content: center;
  }

  ._detailsGrid_vlsr8_527 {
    grid-template-columns: 1fr;
  }

  ._descriptionField_vlsr8_551 {
    grid-column: auto;
  }

  ._modeToggle_vlsr8_385 {
    grid-template-columns: 1fr;
  }

  ._modeButton_vlsr8_413 + ._modeButton_vlsr8_413 {
    border-top: 1px solid var(--form-input-border, #dee2e6);

    border-left: 0;
  }

  ._itemsHeader_vlsr8_707 {
    align-items: stretch;

    flex-direction: column;
  }

  ._itemHeaderActions_vlsr8_793 {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._outlineActionButton_vlsr8_811,
  ._addItemButton_vlsr8_813 {
    width: 100%;
  }

  /*
   * Keep table usable on mobile.
   * It can horizontally scroll inside
   * .tableWrap instead of breaking layout.
   */
  ._itemsTable_vlsr8_1009 {
    min-width: 900px;
  }

  ._itemsTotals_vlsr8_2355 {
    grid-template-columns: 1fr;
  }

  ._itemsTotals_vlsr8_2355 > div {
    min-height: 48px;
  }

  ._itemsTotals_vlsr8_2355 > div:not(:last-child)::after {
    top: auto;

    right: 10px;
    bottom: 0;
    left: 10px;

    width: auto;
    height: 1px;
  }

  ._dropZone_vlsr8_2511 {
    min-height: 68px;
  }

  ._attachmentList_vlsr8_2661 {
    width: 100%;
  }

  ._modalOverlay_vlsr8_3269 {
    align-items: flex-end;

    padding: 10px;
  }

  ._addItemModal_vlsr8_3305 {
    max-height: calc(100vh - 20px);

    border-radius: 11px;
  }

  ._modalHeader_vlsr8_3341,
  ._modalForm_vlsr8_3471 {
    padding-left: 14px;
    padding-right: 14px;
  }

  ._modalGrid_vlsr8_3479 {
    grid-template-columns: 1fr;
  }

  ._modalFullField_vlsr8_3495 {
    grid-column: auto;
  }

  ._modalActions_vlsr8_3543 {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._modalActions_vlsr8_3543 .btn-form-cancel,
  ._modalActions_vlsr8_3543 .btn-form-primary {
    width: 100%;

    justify-content: center;
  }
}

/* =========================================================
   RESPONSIVE - VERY SMALL
========================================================= */

@media (max-width: 420px) {
  ._headerActions_vlsr8_117 {
    gap: 7px;
  }

  ._itemHeaderActions_vlsr8_793 {
    grid-template-columns: 1fr;
  }

  ._modeButton_vlsr8_413 {
    min-height: 38px;
  }

  ._cardBody_vlsr8_263 {
    padding: 12px;
  }

  ._itemsTotals_vlsr8_2355 {
    margin-left: 10px;
    margin-right: 10px;
  }

  ._dropZone_vlsr8_2511 {
    justify-content: flex-start;
  }

  ._dropZone_vlsr8_2511 > div {
    min-width: 0;
  }

  ._dropZone_vlsr8_2511 strong {
    line-height: 1.4;
  }

  ._modalActions_vlsr8_3543 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  ._inventoryAddPage_vlsr8_9 *,
  ._inventoryAddPage_vlsr8_9 *::before,
  ._inventoryAddPage_vlsr8_9 *::after {
    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;
  }
}
/* =========================================================
   RECURRING INVOICE ADD PAGE
========================================================= */

._recurringAddPage_gazxg_9 {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;

  background: var(--form-page-bg, #f4f3fb);
  color: var(--text-color, #191919);

  overflow: visible;
}

/* =========================================================
   PAGE HEADER
========================================================= */

._pageHeader_gazxg_39 {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 14px 24px 12px;

  position: relative;
  z-index: 20;
}

._headerLeft_gazxg_71 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;
}

._backButton_gazxg_89 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--text-color, #191919);
  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
  border-radius: 7px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

._backButton_gazxg_89:hover {
  background: var(--hover-bg, #f7f7fb);
  border-color: #cfd2da;
}

._backButton_gazxg_89:active {
  transform: scale(0.97);
}

._pageTitle_gazxg_159 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

._pageSubtitle_gazxg_179 {
  margin: 3px 0 0;

  color: var(--color-grey, #999999);

  font-size: 11.5px;
  line-height: 1.4;
}

._headerActions_gazxg_197 {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}

/* =========================================================
   PAGE CONTENT LAYOUT
========================================================= */

._contentLayout_gazxg_227 {
  width: 100%;
  box-sizing: border-box;

  padding: 0 24px 24px;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

/* =========================================================
   HEADER BUTTONS
========================================================= */

._outlineButton_gazxg_259,
._confirmButton_gazxg_261 {
  min-height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 7px 14px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 500;

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease,
    filter 0.15s ease;
}

._outlineButton_gazxg_259 {
  color: var(--text-color, #191919);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
}

._outlineButton_gazxg_259:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
  border-color: #cfd2da;
}

._confirmButton_gazxg_261 {
  color: #ffffff;

  background: var(--primary-purple-400, #4f46e5);

  border: 1px solid var(--primary-purple-400, #4f46e5);
}

._confirmButton_gazxg_261:hover:not(:disabled) {
  filter: brightness(0.96);
}

._confirmButton_gazxg_261:disabled,
._outlineButton_gazxg_259:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   COMMON CARD
========================================================= */

._card_gazxg_389 {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

._cardOverflow_gazxg_419 {
  width: 100%;

  overflow: visible;

  position: relative;
}

/* =========================================================
   CARD HEADER
========================================================= */

._cardHeader_gazxg_443 {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 16px;

  box-sizing: border-box;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._cardHeaderClickable_gazxg_475 {
  cursor: pointer;
  user-select: none;
}

._cardHeaderTitle_gazxg_485 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

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

  gap: 8px;
}

._collapseIcon_gazxg_521 {
  flex-shrink: 0;

  color: var(--color-grey, #999999);

  transition:
    transform 0.18s ease,
    color 0.15s ease;
}

._collapseIconOpen_gazxg_541 {
  transform: rotate(180deg);
}

/* =========================================================
   CARD BODY
========================================================= */

._cardBody_gazxg_557 {
  width: 100%;

  box-sizing: border-box;

  padding: 16px;

  position: relative;
}

/* =========================================================
   FORM ROWS
========================================================= */

._formRow_gazxg_585 {
  width: 100%;

  display: grid;

  gap: 12px 20px;

  margin-bottom: 12px;
}

._formRow_gazxg_585:last-child {
  margin-bottom: 0;
}

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

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

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

/* =========================================================
   EMPTY GRID FIELD
========================================================= */

._emptyField_gazxg_649 {
  min-width: 0;
}

/* =========================================================
   CUSTOM INTERVAL
========================================================= */

._customIntervalGrid_gazxg_665 {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 8px;
}

/* =========================================================
   FORM FIELD
========================================================= */

._label_gazxg_697 {
  display: inline-flex;
  align-items: center;

  gap: 2px;

  margin: 0 0 5px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1.3;
}

/* =========================================================
   INPUTS
========================================================= */

._input_gazxg_737,
._select_gazxg_739,
._textarea_gazxg_741,
._numberInput_gazxg_743 {
  width: 100%;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

._input_gazxg_737,
._select_gazxg_739,
._numberInput_gazxg_743 {
  min-height: 37px;

  padding: 7px 11px;
}

._textarea_gazxg_741 {
  min-height: 82px;

  padding: 8px 11px;

  resize: vertical;

  line-height: 1.45;
}

._input_gazxg_737::placeholder,
._textarea_gazxg_741::placeholder,
._numberInput_gazxg_743::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._input_gazxg_737:focus,
._select_gazxg_739:focus,
._textarea_gazxg_741:focus,
._numberInput_gazxg_743:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._select_gazxg_739 {
  cursor: pointer;
}

/* =========================================================
   VALIDATION
========================================================= */

._invalidInput_gazxg_873 {
  border-color: var(--color-red, #fb3748) !important;
}

._invalidInput_gazxg_873:focus {
  box-shadow: 0 0 0 3px rgba(251, 55, 72, 0.08) !important;
}

._invalidFeedback_gazxg_889 {
  display: block;

  margin-top: 4px;

  color: var(--color-red, #fb3748);

  font-size: 10px;

  line-height: 1.3;
}

/* =========================================================
   CUSTOMER SEARCH
========================================================= */

._customerSearchWrap_gazxg_921 {
  position: relative;

  width: 100%;

  z-index: 100;
}

._customerSearchIcon_gazxg_937 {
  position: absolute;

  left: 10px;
  top: 50%;

  z-index: 2;

  transform: translateY(-50%);

  color: var(--color-grey, #999999);

  pointer-events: none;
}

._inputWithIcon_gazxg_967 {
  padding-left: 32px !important;
}

/* =========================================================
   CUSTOMER DROPDOWN
========================================================= */

._customerDropdown_gazxg_983 {
  position: absolute;

  top: calc(100% + 5px);
  left: 0;
  right: 0;

  z-index: 99999;

  width: 100%;
  max-height: min(270px, calc(100vh - 32px));

  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #dfe2e8);

  border-radius: 8px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  scrollbar-gutter: stable;
}

._customerDropdownClear_gazxg_1045 {
  position: sticky;
  top: 0;

  z-index: 2;

  padding: 9px 11px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 11px;
  font-weight: 600;

  background: var(--form-bg, #ffffff);

  border-bottom: 1px solid var(--form-border, #eeeeee);

  cursor: pointer;
}

._customerDropdownClear_gazxg_1045:hover {
  background: var(--primary-purple-100, #f1f0ff);
}

._customerDropdownItem_gazxg_1093 {
  width: 100%;

  box-sizing: border-box;

  padding: 9px 11px;

  border-bottom: 1px solid #f1f1f1;

  cursor: pointer;

  transition: background 0.12s ease;
}

._customerDropdownItem_gazxg_1093:last-child {
  border-bottom: 0;
}

._customerDropdownItem_gazxg_1093:hover {
  background: var(--hover-bg, #fafafe);
}

._customerDropdownItemName_gazxg_1137 {
  overflow: hidden;

  color: var(--text-color, #222222);

  font-size: 11.5px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._customerDropdownItemSub_gazxg_1161 {
  margin-top: 2px;

  overflow: hidden;

  color: var(--color-grey, #999999);

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._customerDropdownEmpty_gazxg_1187 {
  padding: 18px 12px;

  color: var(--color-grey, #999999);

  font-size: 11px;

  text-align: center;
}

/* =========================================================
   NEVER EXPIRES
========================================================= */

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

  gap: 6px;

  margin-top: 6px;

  color: var(--form-label-color, #374151);

  font-size: 11px;

  cursor: pointer;

  user-select: none;
}

._checkboxLabel_gazxg_1215 input {
  width: 14px;
  height: 14px;

  margin: 0;

  accent-color: var(--primary-purple-400, #4f46e5);

  cursor: pointer;
}

/* =========================================================
   ITEMS CARD
========================================================= */

._itemsCard_gazxg_1279 {
  width: 100%;

  position: relative;

  z-index: 50;

  margin-top: 10px;

  overflow: visible;

  box-sizing: border-box;
}

._itemsHeader_gazxg_1307 {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 18px;

  box-sizing: border-box;

  border-bottom: 1px solid var(--form-border, #e0e0e0);

  position: relative;
  z-index: 20;
}

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

  gap: 9px;

  min-width: 0;
}

._itemsTitle_gazxg_1345 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;
}

._countBadge_gazxg_1381 {
  min-width: 24px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 7px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;

  white-space: nowrap;
}

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

  gap: 8px;
}

._bulkActionButton_gazxg_1439 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 5px 10px;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 10.5px;
  font-weight: 500;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._bulkActionButton_gazxg_1439:hover {
  background: var(--primary-purple-100, #eae9fc);

  border-color: var(--primary-purple-300, #aaa6f5);
}

/* =========================================================
   BULK DELETE
========================================================= */

._bulkDeleteButton_gazxg_1523 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 11px;

  margin: 10px 16px 0;

  color: var(--color-red, #fb3748);

  font: inherit;
  font-size: 10.5px;
  font-weight: 600;

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));

  border: 1px solid rgba(251, 55, 72, 0.22);

  border-radius: 7px;

  cursor: pointer;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

._tableWrap_gazxg_1583 {
  width: calc(100% - 24px);

  margin: 12px;

  position: relative;

  z-index: 10;

  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;
}

/*
 * IMPORTANT:
 * Don't use overflow:hidden on any ancestor
 * of the fixed product dropdown.
 */
._itemsCard_gazxg_1279,
._tableWrap_gazxg_1583,
._itemsTable_gazxg_1631,
._itemTableRow_gazxg_1633,
._itemTableCell_gazxg_1635,
._itemDetailsCell_gazxg_1637 {
  isolation: auto;
}

/* =========================================================
   ITEMS TABLE
========================================================= */

._itemsTable_gazxg_1631 {
  width: 100%;

  min-width: 980px;

  border-collapse: collapse;

  border-spacing: 0;
}

._itemsTable_gazxg_1631 th,
._itemsTable_gazxg_1631 td {
  padding: 8px 10px;

  text-align: left;
  vertical-align: middle;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._itemsTable_gazxg_1631 th {
  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #f1f0ff);

  white-space: nowrap;
}

._itemsTable_gazxg_1631 td {
  position: relative;

  color: var(--text-color, #191919);

  font-size: 11.5px;
}

._itemsTable_gazxg_1631 tbody tr:last-child td {
  border-bottom: 0;
}

._itemsTable_gazxg_1631 tbody tr:hover {
  background: var(--hover-bg, #fafafe);
}

/* =========================================================
   TABLE CHECKBOX
========================================================= */

._checkboxColumn_gazxg_1755 {
  width: 42px;

  text-align: center !important;
}

._checkboxColumn_gazxg_1755 input,
._tableCheckbox_gazxg_1769 {
  width: 15px;
  height: 15px;

  margin: 0;

  accent-color: var(--primary-purple-400, #4f46e5);

  cursor: pointer;
}

/* =========================================================
   ITEM DETAILS
========================================================= */

._itemDetailsCell_gazxg_1637 {
  min-width: 300px;

  position: relative;
}

._itemDetails_gazxg_1637 {
  min-width: 250px;

  display: flex;
  align-items: center;

  gap: 9px;
}

._itemImage_gazxg_1829 {
  width: 38px;
  height: 38px;
  min-width: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f3f4f6;

  border: 1px solid #eceef2;

  border-radius: 6px;
}

._itemImage_gazxg_1829 img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

._itemImagePlaceholder_gazxg_1883 {
  color: #737987;
}

._itemInfo_gazxg_1891 {
  flex: 1;

  min-width: 0;
}

._itemName_gazxg_1903 {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: var(--text-color, #222222);

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._itemMeta_gazxg_1935 {
  display: block;

  overflow: hidden;

  color: #8a8f9d;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   CHANGE PRODUCT
========================================================= */

._changeProductButton_gazxg_1969 {
  flex-shrink: 0;

  min-height: 28px;

  padding: 5px 8px;

  color: var(--form-label-color, #555555);

  font: inherit;
  font-size: 10px;

  background: var(--form-bg, #ffffff);

  border: 1px solid #e1e4ea;

  border-radius: 6px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._changeProductButton_gazxg_1969:hover {
  background: var(--hover-bg, #f7f7fb);

  border-color: var(--primary-purple-300, #aaa6f5);
}

/* =========================================================
   STOCK INFO
========================================================= */

._stockInfo_gazxg_2039 {
  min-width: 55px;

  text-align: right;
}

._stockQuantity_gazxg_2051 {
  display: block;

  color: var(--text-color, #222222);

  font-size: 11px;
  font-weight: 600;
}

._stockStatus_gazxg_2069 {
  display: block;

  margin-top: 2px;

  color: var(--color-green, #16a34a);

  font-size: 9px;
}

._stockLow_gazxg_2089 {
  color: var(--color-red, #fb3748) !important;
}

/* =========================================================
   PRODUCT SELECTOR
========================================================= */

._productSelector_gazxg_2105 {
  position: relative;

  width: 100%;

  z-index: 100;
}

._selectProductButton_gazxg_2121 {
  width: 100%;

  min-width: 280px;
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 8px 12px;

  box-sizing: border-box;

  color: #7b8190;

  font: inherit;
  font-size: 12px;

  text-align: left;

  background: #ffffff;

  border: 1px solid #d9dce5;

  border-radius: 7px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._selectProductButton_gazxg_2121:hover {
  border-color: var(--primary-purple-300, #aaa6f5);
}

._selectProductButtonActive_gazxg_2201 {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._selectProductContent_gazxg_2213 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}

/* =========================================================
   PRODUCT DROPDOWN
   FIXED + INDEPENDENT SCROLL
========================================================= */

._productDropdown_gazxg_2241 {
  position: fixed;

  z-index: 2147483647;

  display: flex;
  flex-direction: column;

  width: min(400px, calc(100vw - 16px));

  /*
   * JS can still set top / left / width inline.
   * These properties only protect viewport overflow.
   */
  max-width: calc(100vw - 16px);

  max-height: min(390px, calc(100vh - 20px));

  box-sizing: border-box;

  overflow: hidden;

  isolation: isolate;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 9px;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);

  /*
   * Prevent the wheel from leaking to the page
   * while the product list is being scrolled.
   */
  overscroll-behavior: contain;

  /*
   * Allows vertical touch/trackpad scrolling.
   */
  touch-action: pan-y;
}

/* =========================================================
   PRODUCT DROPDOWN SEARCH
========================================================= */

._productDropdownSearch_gazxg_2337 {
  flex: 0 0 auto;

  width: 100%;

  box-sizing: border-box;

  padding: 8px;

  background: #ffffff;

  border-bottom: 1px solid #eeeeee;

  position: relative;
  z-index: 2;
}

/* =========================================================
   PRODUCT SEARCH WRAP
========================================================= */

._productSearchWrap_gazxg_2379 {
  position: relative;

  width: 100%;
}

._productSearchIcon_gazxg_2391 {
  position: absolute;

  left: 10px;
  top: 50%;

  z-index: 2;

  transform: translateY(-50%);

  color: #9ca3af;

  pointer-events: none;
}

._productSearchInput_gazxg_2421 {
  width: 100%;
  height: 34px;

  box-sizing: border-box;

  padding: 0 10px 0 32px;

  color: #222222;

  font: inherit;
  font-size: 12px;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 6px;

  outline: none;

  appearance: none;
}

._productSearchInput_gazxg_2421::placeholder {
  color: #9ca3af;
}

._productSearchInput_gazxg_2421:focus {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   PRODUCT LIST
   IMPORTANT SCROLL FIX
========================================================= */

._productList_gazxg_2499 {
  /*
   * Critical for flex children:
   * without min-height: 0, the list can refuse to shrink
   * and the dropdown itself starts expanding instead.
   */
  flex: 1 1 auto;

  min-height: 0;

  width: 100%;

  box-sizing: border-box;

  max-height: 320px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;

  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;

  touch-action: pan-y;

  /*
   * Firefox scrollbar.
   */
  scrollbar-width: thin;
  scrollbar-color: #cfd2dc transparent;
}

/*
 * Make sure the list can actually scroll even when
 * there are many options.
 */
._productList_gazxg_2499:focus {
  outline: none;
}

/* =========================================================
   PRODUCT LIST SCROLLBAR
========================================================= */

._productList_gazxg_2499::-webkit-scrollbar {
  width: 7px;
}

._productList_gazxg_2499::-webkit-scrollbar-track {
  background: transparent;
}

._productList_gazxg_2499::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;

  border: 1px solid transparent;
  background-clip: padding-box;
}

._productList_gazxg_2499::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;

  border: 1px solid transparent;
  background-clip: padding-box;
}

/* =========================================================
   PRODUCT LOADING / ERROR / EMPTY
========================================================= */

._productLoading_gazxg_2649,
._productError_gazxg_2651,
._productEmpty_gazxg_2653 {
  width: 100%;

  box-sizing: border-box;

  padding: 18px 12px;

  color: #7b8190;

  font-size: 12px;

  text-align: center;
}

._productError_gazxg_2651 {
  color: #dc2626;
}

._productRetryButton_gazxg_2689 {
  margin-top: 8px;

  padding: 0;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 12px;
  font-weight: 600;

  background: transparent;

  border: none;

  cursor: pointer;
}

._productRetryButton_gazxg_2689:hover {
  text-decoration: underline;
}

/* =========================================================
   PRODUCT OPTION
========================================================= */

._productOption_gazxg_2741 {
  width: 100%;

  min-height: 64px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 8px 10px;

  box-sizing: border-box;

  text-align: left;

  background: #ffffff;

  border: none;
  border-bottom: 1px solid #f1f1f1;

  cursor: pointer;

  transition:
    background 0.12s ease,
    opacity 0.12s ease;

  flex-shrink: 0;
}

._productOption_gazxg_2741:last-child {
  border-bottom: 0;
}

._productOption_gazxg_2741:hover:not(:disabled) {
  background: #fafafe;
}

._productOption_gazxg_2741:focus-visible {
  outline: 2px solid var(--primary-purple-400, #4f46e5);

  outline-offset: -2px;
}

._productOption_gazxg_2741:disabled {
  background: #fafafa;

  cursor: not-allowed;

  opacity: 0.48;
}

/* =========================================================
   PRODUCT OPTION IMAGE
========================================================= */

._productOptionImage_gazxg_2853 {
  width: 38px;
  height: 38px;
  min-width: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f3f4f6;

  border: 1px solid #eceef2;

  border-radius: 6px;
}

._productOptionImage_gazxg_2853 img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   PRODUCT OPTION DETAILS
========================================================= */

._productOptionDetails_gazxg_2915 {
  flex: 1;

  min-width: 0;
}

._productOptionName_gazxg_2927 {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: #222222;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._productOptionMeta_gazxg_2959 {
  display: block;

  overflow: hidden;

  color: #8a8f9d;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PRODUCT OPTION STOCK
========================================================= */

._productOptionStock_gazxg_2993 {
  min-width: 60px;

  flex: 0 0 auto;

  text-align: right;
}

._productOptionStock_gazxg_2993 strong {
  display: block;

  color: #222222;

  font-size: 11.5px;
  font-weight: 600;
}

._productOptionStock_gazxg_2993 span {
  display: block;

  margin-top: 2px;

  color: #16a34a;

  font-size: 9.5px;
  font-weight: 500;
}

/* =========================================================
   PRODUCT OPTION PRICE
========================================================= */

._productOptionPrice_gazxg_3057 {
  min-width: 65px;

  flex: 0 0 auto;

  color: #444444;

  font-size: 11px;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   TABLE NUMBER INPUT
========================================================= */

._tableNumberInput_gazxg_3093 {
  width: 80px;

  min-height: 34px;

  padding: 6px 8px;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 11.5px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._tableNumberInput_gazxg_3093:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   TABLE SELECT
========================================================= */

._tableSelect_gazxg_3167 {
  width: 100%;

  min-width: 80px;
  min-height: 34px;

  padding: 6px 8px;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 11px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  cursor: pointer;
}

._tableSelect_gazxg_3167:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   AMOUNT
========================================================= */

._amountCell_gazxg_3239 {
  width: 115px;

  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   DELETE BUTTON
========================================================= */

._deleteButton_gazxg_3273 {
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--color-red, #fb3748);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

._deleteButton_gazxg_3273:hover {
  border-color: var(--color-red, #fb3748);

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));
}

._deleteButton_gazxg_3273:active {
  transform: scale(0.96);
}

/* =========================================================
   ITEM ROW ACTIONS
========================================================= */

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

  gap: 10px;

  margin: 12px;
}

._rowActionButton_gazxg_3371 {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 6px 12px;

  color: var(--text-color, #191919);

  font: inherit;
  font-size: 11px;
  font-weight: 500;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._rowActionButton_gazxg_3371:hover {
  background: var(--hover-bg, #f7f7fb);

  border-color: #cfd2da;
}

/* =========================================================
   CUSTOMER NOTES
========================================================= */

._customerNotes_gazxg_3451 {
  margin: 12px;
}

/* =========================================================
   SUMMARY CARD
========================================================= */

._summaryCard_gazxg_3467 {
  width: 100%;

  margin-top: 10px;

  box-sizing: border-box;

  overflow: hidden;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

/* =========================================================
   SUMMARY HEADER
========================================================= */

._summaryHeader_gazxg_3511 {
  min-height: 50px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  box-sizing: border-box;

  background: #ffffff;

  border-bottom: 1px solid #e8ebf0;
}

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

  gap: 8px;
}

._summaryTitleIcon_gazxg_3555 {
  color: #4f46e5;

  flex-shrink: 0;
}

._summaryHeaderTitle_gazxg_3567 {
  margin: 0;

  color: #20242d;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

/* =========================================================
   SUMMARY BODY
========================================================= */

._summaryBody_gazxg_3597 {
  width: 100%;

  box-sizing: border-box;

  padding: 14px 18px 16px;
}

/* =========================================================
   SUMMARY TOTALS
========================================================= */

._totalsPanel_gazxg_3621 {
  display: flex;
  flex-direction: column;

  gap: 0;
}

/* =========================================================
   SUMMARY LINE
========================================================= */

._totalLine_gazxg_3643 {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  color: #737987;

  font-size: 11.5px;

  border-bottom: 1px solid #eef0f3;
}

._totalLine_gazxg_3643 > span:last-child {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   ADJUSTMENT
========================================================= */

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

  justify-content: flex-end;

  gap: 8px;

  min-width: 0;
}

._inlineAdjustment_gazxg_3705 > span {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  white-space: nowrap;
}

/* =========================================================
   INLINE INPUT
========================================================= */

._inlineInput_gazxg_3753 {
  width: 70px;
  height: 32px;

  box-sizing: border-box;

  padding: 5px 8px;

  color: #252932;

  font: inherit;
  font-size: 11.5px;

  background: #ffffff;

  border: 1px solid #d9dde5;

  border-radius: 6px;

  outline: none;
}

._inlineInput_gazxg_3753:focus {
  border-color: #6c63ff;

  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.08);
}

/* =========================================================
   ROUND OFF
========================================================= */

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

  gap: 5px;

  min-width: 0;
}

._roundToggle_gazxg_3835 {
  display: inline-flex;
  align-items: center;

  gap: 3px;

  width: fit-content;

  flex-shrink: 0;

  padding: 0;

  color: #6c63ff;

  font: inherit;
  font-size: 9.5px;
  font-weight: 600;

  background: transparent;

  border: 0;

  cursor: pointer;

  white-space: nowrap;
}

._roundToggle_gazxg_3835:hover {
  text-decoration: underline;
}

/* =========================================================
   GRAND TOTAL
========================================================= */

._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
  min-height: 48px;

  margin-top: 4px;

  padding-top: 8px;

  color: #20242d;

  font-size: 13px;
  font-weight: 700;

  border-bottom: 0;

  border-top: 1px solid #e5e7eb;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:first-child {
  color: #20242d;

  font-size: 13px;
  font-weight: 700;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:last-child {
  color: #4f46e5;

  font-size: 16px;
  font-weight: 800;
}

/* =========================================================
   SUMMARY CARD
========================================================= */

._summaryCard_gazxg_3467 {
  width: 100%;

  margin-top: 10px;

  box-sizing: border-box;

  overflow: hidden;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

/* =========================================================
   SUMMARY HEADER
========================================================= */

._summaryHeader_gazxg_3511 {
  min-height: 50px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  box-sizing: border-box;

  background: #ffffff;

  border-bottom: 1px solid #e8ebf0;
}

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

  gap: 8px;
}

._summaryTitleIcon_gazxg_3555 {
  color: #4f46e5;

  flex-shrink: 0;
}

._summaryHeaderTitle_gazxg_3567 {
  margin: 0;

  color: #20242d;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

/* =========================================================
   SUMMARY BODY
========================================================= */

._summaryBody_gazxg_3597 {
  width: 100%;

  box-sizing: border-box;

  padding: 14px 18px 16px;
}

/* =========================================================
   SUMMARY TOTALS
========================================================= */

._totalsPanel_gazxg_3621 {
  display: flex;
  flex-direction: column;

  gap: 0;
}

/* =========================================================
   SUMMARY LINE
========================================================= */

._totalLine_gazxg_3643 {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  color: #737987;

  font-size: 11.5px;

  border-bottom: 1px solid #eef0f3;
}

._totalLine_gazxg_3643 > span:last-child {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   ADJUSTMENT
========================================================= */

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

  justify-content: flex-end;

  gap: 8px;

  min-width: 0;
}

._inlineAdjustment_gazxg_3705 > span {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  white-space: nowrap;
}

/* =========================================================
   INLINE INPUT
========================================================= */

._inlineInput_gazxg_3753 {
  width: 70px;
  height: 32px;

  box-sizing: border-box;

  padding: 5px 8px;

  color: #252932;

  font: inherit;
  font-size: 11.5px;

  background: #ffffff;

  border: 1px solid #d9dde5;

  border-radius: 6px;

  outline: none;
}

._inlineInput_gazxg_3753:focus {
  border-color: #6c63ff;

  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.08);
}

/* =========================================================
   ROUND OFF
========================================================= */

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

  gap: 5px;

  min-width: 0;
}

._roundToggle_gazxg_3835 {
  display: inline-flex;
  align-items: center;

  gap: 3px;

  width: fit-content;

  flex-shrink: 0;

  padding: 0;

  color: #6c63ff;

  font: inherit;
  font-size: 9.5px;
  font-weight: 600;

  background: transparent;

  border: 0;

  cursor: pointer;

  white-space: nowrap;
}

._roundToggle_gazxg_3835:hover {
  text-decoration: underline;
}

/* =========================================================
   GRAND TOTAL
========================================================= */

._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
  min-height: 48px;

  margin-top: 4px;

  padding-top: 8px;

  color: #20242d;

  font-size: 13px;
  font-weight: 700;

  border-bottom: 0;

  border-top: 1px solid #e5e7eb;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:first-child {
  color: #20242d;

  font-size: 13px;
  font-weight: 700;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:last-child {
  color: #4f46e5;

  font-size: 16px;
  font-weight: 800;
}

/* =========================================================
   OLD TOTALS SUPPORT
========================================================= */

._totalsPanel_gazxg_3621 {
  display: flex;
  flex-direction: column;

  gap: 0;
}

._totalLine_gazxg_3643 {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;

  border-bottom: 1px solid #f0f0f2;
}

._totalLine_gazxg_3643:last-child {
  border-bottom: 0;
}

._totalLine_gazxg_3643 > span:last-child {
  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 500;

  text-align: right;
}

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

  gap: 6px;
}

._grandTotal_gazxg_3905 {
  min-height: 48px;

  margin-top: 8px;

  padding-top: 8px;

  color: var(--text-color, #191919);

  font-size: 13px;
  font-weight: 700;

  border-top: 1px solid var(--form-border, #e0e0e0);
}

._grandTotal_gazxg_3905 > span:last-child {
  color: var(--primary-purple-400, #4f46e5);

  font-size: 16px;
  font-weight: 700;
}

/* =========================================================
   TABLE POSITION HELPERS
========================================================= */

._itemTableCell_gazxg_1635 {
  position: relative;
}

._itemTableRow_gazxg_1633 {
  position: relative;
}

/* =========================================================
   LOADING
========================================================= */

._loadingContainer_gazxg_4645 {
  min-height: 400px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  box-sizing: border-box;
}

/* =========================================================
   GENERAL SCROLLBARS
========================================================= */

._tableWrap_gazxg_1583::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

._tableWrap_gazxg_1583::-webkit-scrollbar-track {
  background: transparent;
}

._tableWrap_gazxg_1583::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;
}

._tableWrap_gazxg_1583::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;
}

._customerDropdown_gazxg_983::-webkit-scrollbar {
  width: 6px;
}

._customerDropdown_gazxg_983::-webkit-scrollbar-track {
  background: transparent;
}

._customerDropdown_gazxg_983::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;
}

._customerDropdown_gazxg_983::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;
}

/* =========================================================
   RESPONSIVE — 1180px
========================================================= */

@media (max-width: 1180px) {
  ._contentLayout_gazxg_227 {
    padding-left: 20px;
    padding-right: 20px;
  }

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

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

/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {
  ._pageHeader_gazxg_39 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._headerActions_gazxg_197 {
    width: 100%;
  }

  ._contentLayout_gazxg_227 {
    padding-left: 16px;
    padding-right: 16px;
  }

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

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

  ._itemsTable_gazxg_1631 {
    min-width: 950px;
  }

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

  ._productDropdown_gazxg_2241 {
    max-height: min(380px, calc(100vh - 16px));
  }

  ._productList_gazxg_2499 {
    max-height: 310px;
  }
}

/* =========================================================
   RESPONSIVE — 640px
========================================================= */

@media (max-width: 640px) {
  ._pageHeader_gazxg_39 {
    padding: 12px;
  }

  ._contentLayout_gazxg_227 {
    padding: 0 12px 16px;
  }

  ._headerLeft_gazxg_71 {
    width: 100%;

    align-items: flex-start;

    gap: 9px;
  }

  ._pageTitle_gazxg_159 {
    font-size: 19px;
  }

  ._pageSubtitle_gazxg_179 {
    font-size: 10.5px;
  }

  ._headerActions_gazxg_197 {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;
  }

  ._outlineButton_gazxg_259,
  ._confirmButton_gazxg_261 {
    width: 100%;
  }

  ._cols2_gazxg_621,
  ._cols4_gazxg_633 {
    grid-template-columns: 1fr;
  }

  ._cardBody_gazxg_557 {
    padding: 14px;
  }

  ._itemsHeader_gazxg_1307 {
    align-items: stretch;

    flex-direction: column;

    padding: 9px 12px;
  }

  ._itemHeaderActions_gazxg_1425 {
    width: 100%;
  }

  ._bulkActionButton_gazxg_1439 {
    width: 100%;
    flex: 1;
  }

  ._rowActions_gazxg_3353 {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._rowActionButton_gazxg_3371 {
    width: 100%;
  }

  ._summaryHeader_gazxg_3511 {
    min-height: 48px;

    padding: 0 14px;
  }

  ._summaryBody_gazxg_3597 {
    padding: 10px 14px 14px;
  }

  ._totalLine_gazxg_3643 {
    min-height: 38px;

    font-size: 11px;
  }

  ._totalLine_gazxg_3643 > span:last-child {
    font-size: 11px;
  }

  ._inlineInput_gazxg_3753 {
    width: 65px;
    height: 31px;
  }

  ._roundOffContent_gazxg_3817 {
    gap: 4px;
  }

  ._roundToggle_gazxg_3835 {
    font-size: 9px;
  }

  ._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
    min-height: 46px;
  }

  ._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:last-child {
    font-size: 15px;
  }

  /* =======================================================
     MOBILE PRODUCT DROPDOWN
  ======================================================= */

  ._productDropdown_gazxg_2241 {
    width: calc(100vw - 16px);

    max-width: calc(100vw - 16px);

    max-height: min(380px, calc(100vh - 12px));

    border-radius: 8px;
  }

  ._productDropdownSearch_gazxg_2337 {
    padding: 7px;
  }

  ._productSearchInput_gazxg_2421 {
    height: 35px;
  }

  ._productList_gazxg_2499 {
    max-height: min(310px, calc(100vh - 62px));
  }

  ._productOption_gazxg_2741 {
    min-height: 62px;

    padding: 8px;
  }

  ._productOptionPrice_gazxg_3057 {
    min-width: 55px;
  }

  ._productOptionStock_gazxg_2993 {
    min-width: 55px;
  }
}

/* =========================================================
   RESPONSIVE — 480px
========================================================= */

@media (max-width: 480px) {
  ._pageHeader_gazxg_39 {
    gap: 10px;
  }

  ._backButton_gazxg_89 {
    width: 32px;
    height: 32px;

    min-width: 32px;
    flex-basis: 32px;
  }

  ._pageTitle_gazxg_159 {
    font-size: 18px;
  }

  ._pageSubtitle_gazxg_179 {
    font-size: 10.5px;
  }

  ._headerActions_gazxg_197 {
    grid-template-columns: 1fr;
  }

  ._itemsHeader_gazxg_1307 {
    padding: 8px 12px;
  }

  ._itemHeaderActions_gazxg_1425 {
    display: grid;

    grid-template-columns: 1fr;
  }

  ._rowActions_gazxg_3353 {
    grid-template-columns: 1fr;
  }

  ._tableWrap_gazxg_1583 {
    margin-left: -14px;
    margin-right: -14px;

    width: calc(100% + 28px);
  }

  ._summaryHeader_gazxg_3511 {
    min-height: 46px;

    padding: 0 13px;
  }

  ._summaryBody_gazxg_3597 {
    padding: 8px 13px 12px;
  }

  ._totalLine_gazxg_3643 {
    min-height: 36px;

    gap: 8px;
  }

  ._inlineAdjustment_gazxg_3705 {
    gap: 6px;
  }

  ._inlineInput_gazxg_3753 {
    width: 60px;
  }

  ._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
    min-height: 44px;
  }

  /* =======================================================
     SMALL SCREEN DROPDOWN
  ======================================================= */

  ._productDropdown_gazxg_2241 {
    width: calc(100vw - 12px);

    max-width: calc(100vw - 12px);

    max-height: calc(100vh - 10px);
  }

  ._productList_gazxg_2499 {
    max-height: calc(100vh - 58px);
  }

  ._productOption_gazxg_2741 {
    gap: 7px;

    padding: 8px;
  }

  ._productOptionImage_gazxg_2853 {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  ._productOptionName_gazxg_2927 {
    font-size: 11.5px;
  }

  ._productOptionMeta_gazxg_2959 {
    font-size: 10px;
  }

  ._productOptionStock_gazxg_2993 {
    min-width: 48px;
  }

  ._productOptionStock_gazxg_2993 strong {
    font-size: 10.5px;
  }

  ._productOptionStock_gazxg_2993 span {
    font-size: 9px;
  }

  ._productOptionPrice_gazxg_3057 {
    min-width: 52px;

    font-size: 10.5px;
  }
}

/* =========================================================
   RESPONSIVE — 360px
========================================================= */

@media (max-width: 360px) {
  ._pageHeader_gazxg_39 {
    padding: 10px;
  }

  ._contentLayout_gazxg_227 {
    padding-left: 10px;
    padding-right: 10px;
  }

  ._pageTitle_gazxg_159 {
    font-size: 17px;
  }

  ._pageSubtitle_gazxg_179 {
    font-size: 10px;
  }

  ._summaryBody_gazxg_3597 {
    padding: 10px;
  }

  ._summaryField_gazxg_5525 {
    padding: 11px 12px;
  }

  ._summaryFieldLabel_gazxg_5533 {
    font-size: 11px;
  }

  ._summaryFieldValue_gazxg_5541 {
    font-size: 13.5px;
  }

  ._grandTotalValue_gazxg_5549 {
    font-size: 17px;
  }

  ._inlineInput_gazxg_3753 {
    width: 72px;
  }

  ._productDropdown_gazxg_2241 {
    width: calc(100vw - 8px);

    max-width: calc(100vw - 8px);

    max-height: calc(100vh - 8px);

    border-radius: 7px;
  }

  ._productDropdownSearch_gazxg_2337 {
    padding: 6px;
  }

  ._productSearchInput_gazxg_2421 {
    height: 34px;

    padding-left: 30px;
  }

  ._productList_gazxg_2499 {
    max-height: calc(100vh - 54px);
  }

  ._productOption_gazxg_2741 {
    min-height: 58px;

    gap: 6px;

    padding: 7px;
  }

  ._productOptionImage_gazxg_2853 {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  ._productOptionStock_gazxg_2993 {
    display: none;
  }

  ._productOptionPrice_gazxg_3057 {
    min-width: 48px;

    font-size: 10px;
  }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  ._backButton_gazxg_89,
  ._outlineButton_gazxg_259,
  ._confirmButton_gazxg_261,
  ._bulkActionButton_gazxg_1439,
  ._changeProductButton_gazxg_1969,
  ._deleteButton_gazxg_3273,
  ._rowActionButton_gazxg_3371,
  ._productOption_gazxg_2741,
  ._input_gazxg_737,
  ._select_gazxg_739,
  ._textarea_gazxg_741,
  ._numberInput_gazxg_743,
  ._tableNumberInput_gazxg_3093,
  ._tableSelect_gazxg_3167,
  ._collapseIcon_gazxg_521 {
    transition: none;
  }
}
/* =========================================================
   RECURRING INVOICE ADD PAGE
========================================================= */

._recurringAddPage_gazxg_9 {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;

  background: var(--form-page-bg, #f4f3fb);
  color: var(--text-color, #191919);

  overflow: visible;
}

/* =========================================================
   PAGE HEADER
========================================================= */

._pageHeader_gazxg_39 {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 14px 24px 12px;

  position: relative;
  z-index: 20;
}

._headerLeft_gazxg_71 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;
}

._backButton_gazxg_89 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--text-color, #191919);
  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
  border-radius: 7px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

._backButton_gazxg_89:hover {
  background: var(--hover-bg, #f7f7fb);
  border-color: #cfd2da;
}

._backButton_gazxg_89:active {
  transform: scale(0.97);
}

._pageTitle_gazxg_159 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

._pageSubtitle_gazxg_179 {
  margin: 3px 0 0;

  color: var(--color-grey, #999999);

  font-size: 11.5px;
  line-height: 1.4;
}

._headerActions_gazxg_197 {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}

/* =========================================================
   PAGE CONTENT LAYOUT
========================================================= */

._contentLayout_gazxg_227 {
  width: 100%;
  box-sizing: border-box;

  padding: 0 24px 24px;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

/* =========================================================
   HEADER BUTTONS
========================================================= */

._outlineButton_gazxg_259,
._confirmButton_gazxg_261 {
  min-height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 7px 14px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 500;

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease,
    filter 0.15s ease;
}

._outlineButton_gazxg_259 {
  color: var(--text-color, #191919);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
}

._outlineButton_gazxg_259:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
  border-color: #cfd2da;
}

._confirmButton_gazxg_261 {
  color: #ffffff;

  background: var(--primary-purple-400, #4f46e5);

  border: 1px solid var(--primary-purple-400, #4f46e5);
}

._confirmButton_gazxg_261:hover:not(:disabled) {
  filter: brightness(0.96);
}

._confirmButton_gazxg_261:disabled,
._outlineButton_gazxg_259:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   COMMON CARD
========================================================= */

._card_gazxg_389 {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

._cardOverflow_gazxg_419 {
  width: 100%;

  overflow: visible;

  position: relative;
}

/* =========================================================
   CARD HEADER
========================================================= */

._cardHeader_gazxg_443 {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 16px;

  box-sizing: border-box;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._cardHeaderClickable_gazxg_475 {
  cursor: pointer;
  user-select: none;
}

._cardHeaderTitle_gazxg_485 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

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

  gap: 8px;
}

._collapseIcon_gazxg_521 {
  flex-shrink: 0;

  color: var(--color-grey, #999999);

  transition:
    transform 0.18s ease,
    color 0.15s ease;
}

._collapseIconOpen_gazxg_541 {
  transform: rotate(180deg);
}

/* =========================================================
   CARD BODY
========================================================= */

._cardBody_gazxg_557 {
  width: 100%;

  box-sizing: border-box;

  padding: 16px;

  position: relative;
}

/* =========================================================
   FORM ROWS
========================================================= */

._formRow_gazxg_585 {
  width: 100%;

  display: grid;

  gap: 12px 20px;

  margin-bottom: 12px;
}

._formRow_gazxg_585:last-child {
  margin-bottom: 0;
}

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

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

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

/* =========================================================
   EMPTY GRID FIELD
========================================================= */

._emptyField_gazxg_649 {
  min-width: 0;
}

/* =========================================================
   CUSTOM INTERVAL
========================================================= */

._customIntervalGrid_gazxg_665 {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 8px;
}

/* =========================================================
   FORM FIELD
========================================================= */

._label_gazxg_697 {
  display: inline-flex;
  align-items: center;

  gap: 2px;

  margin: 0 0 5px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1.3;
}

/* =========================================================
   INPUTS
========================================================= */

._input_gazxg_737,
._select_gazxg_739,
._textarea_gazxg_741,
._numberInput_gazxg_743 {
  width: 100%;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

._input_gazxg_737,
._select_gazxg_739,
._numberInput_gazxg_743 {
  min-height: 37px;

  padding: 7px 11px;
}

._textarea_gazxg_741 {
  min-height: 82px;

  padding: 8px 11px;

  resize: vertical;

  line-height: 1.45;
}

._input_gazxg_737::placeholder,
._textarea_gazxg_741::placeholder,
._numberInput_gazxg_743::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._input_gazxg_737:focus,
._select_gazxg_739:focus,
._textarea_gazxg_741:focus,
._numberInput_gazxg_743:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._select_gazxg_739 {
  cursor: pointer;
}

/* =========================================================
   VALIDATION
========================================================= */

._invalidInput_gazxg_873 {
  border-color: var(--color-red, #fb3748) !important;
}

._invalidInput_gazxg_873:focus {
  box-shadow: 0 0 0 3px rgba(251, 55, 72, 0.08) !important;
}

._invalidFeedback_gazxg_889 {
  display: block;

  margin-top: 4px;

  color: var(--color-red, #fb3748);

  font-size: 10px;

  line-height: 1.3;
}

/* =========================================================
   CUSTOMER SEARCH
========================================================= */

._customerSearchWrap_gazxg_921 {
  position: relative;

  width: 100%;

  z-index: 100;
}

._customerSearchIcon_gazxg_937 {
  position: absolute;

  left: 10px;
  top: 50%;

  z-index: 2;

  transform: translateY(-50%);

  color: var(--color-grey, #999999);

  pointer-events: none;
}

._inputWithIcon_gazxg_967 {
  padding-left: 32px !important;
}

/* =========================================================
   CUSTOMER DROPDOWN
========================================================= */

._customerDropdown_gazxg_983 {
  position: absolute;

  top: calc(100% + 5px);
  left: 0;
  right: 0;

  z-index: 99999;

  width: 100%;
  max-height: min(270px, calc(100vh - 32px));

  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #dfe2e8);

  border-radius: 8px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

  scrollbar-gutter: stable;
}

._customerDropdownClear_gazxg_1045 {
  position: sticky;
  top: 0;

  z-index: 2;

  padding: 9px 11px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 11px;
  font-weight: 600;

  background: var(--form-bg, #ffffff);

  border-bottom: 1px solid var(--form-border, #eeeeee);

  cursor: pointer;
}

._customerDropdownClear_gazxg_1045:hover {
  background: var(--primary-purple-100, #f1f0ff);
}

._customerDropdownItem_gazxg_1093 {
  width: 100%;

  box-sizing: border-box;

  padding: 9px 11px;

  border-bottom: 1px solid #f1f1f1;

  cursor: pointer;

  transition: background 0.12s ease;
}

._customerDropdownItem_gazxg_1093:last-child {
  border-bottom: 0;
}

._customerDropdownItem_gazxg_1093:hover {
  background: var(--hover-bg, #fafafe);
}

._customerDropdownItemName_gazxg_1137 {
  overflow: hidden;

  color: var(--text-color, #222222);

  font-size: 11.5px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._customerDropdownItemSub_gazxg_1161 {
  margin-top: 2px;

  overflow: hidden;

  color: var(--color-grey, #999999);

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._customerDropdownEmpty_gazxg_1187 {
  padding: 18px 12px;

  color: var(--color-grey, #999999);

  font-size: 11px;

  text-align: center;
}

/* =========================================================
   NEVER EXPIRES
========================================================= */

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

  gap: 6px;

  margin-top: 6px;

  color: var(--form-label-color, #374151);

  font-size: 11px;

  cursor: pointer;

  user-select: none;
}

._checkboxLabel_gazxg_1215 input {
  width: 14px;
  height: 14px;

  margin: 0;

  accent-color: var(--primary-purple-400, #4f46e5);

  cursor: pointer;
}

/* =========================================================
   ITEMS CARD
========================================================= */

._itemsCard_gazxg_1279 {
  width: 100%;

  position: relative;

  z-index: 50;

  margin-top: 10px;

  overflow: visible;

  box-sizing: border-box;
}

._itemsHeader_gazxg_1307 {
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 18px;

  box-sizing: border-box;

  border-bottom: 1px solid var(--form-border, #e0e0e0);

  position: relative;
  z-index: 20;
}

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

  gap: 9px;

  min-width: 0;
}

._itemsTitle_gazxg_1345 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;
}

._countBadge_gazxg_1381 {
  min-width: 24px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 7px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;

  white-space: nowrap;
}

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

  gap: 8px;
}

._bulkActionButton_gazxg_1439 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 5px 10px;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 10.5px;
  font-weight: 500;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._bulkActionButton_gazxg_1439:hover {
  background: var(--primary-purple-100, #eae9fc);

  border-color: var(--primary-purple-300, #aaa6f5);
}

/* =========================================================
   BULK DELETE
========================================================= */

._bulkDeleteButton_gazxg_1523 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 11px;

  margin: 10px 16px 0;

  color: var(--color-red, #fb3748);

  font: inherit;
  font-size: 10.5px;
  font-weight: 600;

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));

  border: 1px solid rgba(251, 55, 72, 0.22);

  border-radius: 7px;

  cursor: pointer;
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

._tableWrap_gazxg_1583 {
  width: calc(100% - 24px);

  margin: 12px;

  position: relative;

  z-index: 10;

  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;
}

/*
 * IMPORTANT:
 * Don't use overflow:hidden on any ancestor
 * of the fixed product dropdown.
 */
._itemsCard_gazxg_1279,
._tableWrap_gazxg_1583,
._itemsTable_gazxg_1631,
._itemTableRow_gazxg_1633,
._itemTableCell_gazxg_1635,
._itemDetailsCell_gazxg_1637 {
  isolation: auto;
}

/* =========================================================
   ITEMS TABLE
========================================================= */

._itemsTable_gazxg_1631 {
  width: 100%;

  min-width: 980px;

  border-collapse: collapse;

  border-spacing: 0;
}

._itemsTable_gazxg_1631 th,
._itemsTable_gazxg_1631 td {
  padding: 8px 10px;

  text-align: left;
  vertical-align: middle;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._itemsTable_gazxg_1631 th {
  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #f1f0ff);

  white-space: nowrap;
}

._itemsTable_gazxg_1631 td {
  position: relative;

  color: var(--text-color, #191919);

  font-size: 11.5px;
}

._itemsTable_gazxg_1631 tbody tr:last-child td {
  border-bottom: 0;
}

._itemsTable_gazxg_1631 tbody tr:hover {
  background: var(--hover-bg, #fafafe);
}

/* =========================================================
   TABLE CHECKBOX
========================================================= */

._checkboxColumn_gazxg_1755 {
  width: 42px;

  text-align: center !important;
}

._checkboxColumn_gazxg_1755 input,
._tableCheckbox_gazxg_1769 {
  width: 15px;
  height: 15px;

  margin: 0;

  accent-color: var(--primary-purple-400, #4f46e5);

  cursor: pointer;
}

/* =========================================================
   ITEM DETAILS
========================================================= */

._itemDetailsCell_gazxg_1637 {
  min-width: 300px;

  position: relative;
}

._itemDetails_gazxg_1637 {
  min-width: 250px;

  display: flex;
  align-items: center;

  gap: 9px;
}

._itemImage_gazxg_1829 {
  width: 38px;
  height: 38px;
  min-width: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f3f4f6;

  border: 1px solid #eceef2;

  border-radius: 6px;
}

._itemImage_gazxg_1829 img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

._itemImagePlaceholder_gazxg_1883 {
  color: #737987;
}

._itemInfo_gazxg_1891 {
  flex: 1;

  min-width: 0;
}

._itemName_gazxg_1903 {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: var(--text-color, #222222);

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._itemMeta_gazxg_1935 {
  display: block;

  overflow: hidden;

  color: #8a8f9d;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   CHANGE PRODUCT
========================================================= */

._changeProductButton_gazxg_1969 {
  flex-shrink: 0;

  min-height: 28px;

  padding: 5px 8px;

  color: var(--form-label-color, #555555);

  font: inherit;
  font-size: 10px;

  background: var(--form-bg, #ffffff);

  border: 1px solid #e1e4ea;

  border-radius: 6px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._changeProductButton_gazxg_1969:hover {
  background: var(--hover-bg, #f7f7fb);

  border-color: var(--primary-purple-300, #aaa6f5);
}

/* =========================================================
   STOCK INFO
========================================================= */

._stockInfo_gazxg_2039 {
  min-width: 55px;

  text-align: right;
}

._stockQuantity_gazxg_2051 {
  display: block;

  color: var(--text-color, #222222);

  font-size: 11px;
  font-weight: 600;
}

._stockStatus_gazxg_2069 {
  display: block;

  margin-top: 2px;

  color: var(--color-green, #16a34a);

  font-size: 9px;
}

._stockLow_gazxg_2089 {
  color: var(--color-red, #fb3748) !important;
}

/* =========================================================
   PRODUCT SELECTOR
========================================================= */

._productSelector_gazxg_2105 {
  position: relative;

  width: 100%;

  z-index: 100;
}

._selectProductButton_gazxg_2121 {
  width: 100%;

  min-width: 280px;
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 8px 12px;

  box-sizing: border-box;

  color: #7b8190;

  font: inherit;
  font-size: 12px;

  text-align: left;

  background: #ffffff;

  border: 1px solid #d9dce5;

  border-radius: 7px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._selectProductButton_gazxg_2121:hover {
  border-color: var(--primary-purple-300, #aaa6f5);
}

._selectProductButtonActive_gazxg_2201 {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._selectProductContent_gazxg_2213 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}

/* =========================================================
   PRODUCT DROPDOWN
   FIXED + INDEPENDENT SCROLL
========================================================= */

._productDropdown_gazxg_2241 {
  position: fixed;

  z-index: 2147483647;

  display: flex;
  flex-direction: column;

  width: min(400px, calc(100vw - 16px));

  /*
   * JS can still set top / left / width inline.
   * These properties only protect viewport overflow.
   */
  max-width: calc(100vw - 16px);

  max-height: min(390px, calc(100vh - 20px));

  box-sizing: border-box;

  overflow: hidden;

  isolation: isolate;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 9px;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);

  /*
   * Prevent the wheel from leaking to the page
   * while the product list is being scrolled.
   */
  overscroll-behavior: contain;

  /*
   * Allows vertical touch/trackpad scrolling.
   */
  touch-action: pan-y;
}

/* =========================================================
   PRODUCT DROPDOWN SEARCH
========================================================= */

._productDropdownSearch_gazxg_2337 {
  flex: 0 0 auto;

  width: 100%;

  box-sizing: border-box;

  padding: 8px;

  background: #ffffff;

  border-bottom: 1px solid #eeeeee;

  position: relative;
  z-index: 2;
}

/* =========================================================
   PRODUCT SEARCH WRAP
========================================================= */

._productSearchWrap_gazxg_2379 {
  position: relative;

  width: 100%;
}

._productSearchIcon_gazxg_2391 {
  position: absolute;

  left: 10px;
  top: 50%;

  z-index: 2;

  transform: translateY(-50%);

  color: #9ca3af;

  pointer-events: none;
}

._productSearchInput_gazxg_2421 {
  width: 100%;
  height: 34px;

  box-sizing: border-box;

  padding: 0 10px 0 32px;

  color: #222222;

  font: inherit;
  font-size: 12px;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 6px;

  outline: none;

  appearance: none;
}

._productSearchInput_gazxg_2421::placeholder {
  color: #9ca3af;
}

._productSearchInput_gazxg_2421:focus {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   PRODUCT LIST
   IMPORTANT SCROLL FIX
========================================================= */

._productList_gazxg_2499 {
  /*
   * Critical for flex children:
   * without min-height: 0, the list can refuse to shrink
   * and the dropdown itself starts expanding instead.
   */
  flex: 1 1 auto;

  min-height: 0;

  width: 100%;

  box-sizing: border-box;

  max-height: 320px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;

  -webkit-overflow-scrolling: touch;

  scrollbar-gutter: stable;

  touch-action: pan-y;

  /*
   * Firefox scrollbar.
   */
  scrollbar-width: thin;
  scrollbar-color: #cfd2dc transparent;
}

/*
 * Make sure the list can actually scroll even when
 * there are many options.
 */
._productList_gazxg_2499:focus {
  outline: none;
}

/* =========================================================
   PRODUCT LIST SCROLLBAR
========================================================= */

._productList_gazxg_2499::-webkit-scrollbar {
  width: 7px;
}

._productList_gazxg_2499::-webkit-scrollbar-track {
  background: transparent;
}

._productList_gazxg_2499::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;

  border: 1px solid transparent;
  background-clip: padding-box;
}

._productList_gazxg_2499::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;

  border: 1px solid transparent;
  background-clip: padding-box;
}

/* =========================================================
   PRODUCT LOADING / ERROR / EMPTY
========================================================= */

._productLoading_gazxg_2649,
._productError_gazxg_2651,
._productEmpty_gazxg_2653 {
  width: 100%;

  box-sizing: border-box;

  padding: 18px 12px;

  color: #7b8190;

  font-size: 12px;

  text-align: center;
}

._productError_gazxg_2651 {
  color: #dc2626;
}

._productRetryButton_gazxg_2689 {
  margin-top: 8px;

  padding: 0;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 12px;
  font-weight: 600;

  background: transparent;

  border: none;

  cursor: pointer;
}

._productRetryButton_gazxg_2689:hover {
  text-decoration: underline;
}

/* =========================================================
   PRODUCT OPTION
========================================================= */

._productOption_gazxg_2741 {
  width: 100%;

  min-height: 64px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 8px 10px;

  box-sizing: border-box;

  text-align: left;

  background: #ffffff;

  border: none;
  border-bottom: 1px solid #f1f1f1;

  cursor: pointer;

  transition:
    background 0.12s ease,
    opacity 0.12s ease;

  flex-shrink: 0;
}

._productOption_gazxg_2741:last-child {
  border-bottom: 0;
}

._productOption_gazxg_2741:hover:not(:disabled) {
  background: #fafafe;
}

._productOption_gazxg_2741:focus-visible {
  outline: 2px solid var(--primary-purple-400, #4f46e5);

  outline-offset: -2px;
}

._productOption_gazxg_2741:disabled {
  background: #fafafa;

  cursor: not-allowed;

  opacity: 0.48;
}

/* =========================================================
   PRODUCT OPTION IMAGE
========================================================= */

._productOptionImage_gazxg_2853 {
  width: 38px;
  height: 38px;
  min-width: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f3f4f6;

  border: 1px solid #eceef2;

  border-radius: 6px;
}

._productOptionImage_gazxg_2853 img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* =========================================================
   PRODUCT OPTION DETAILS
========================================================= */

._productOptionDetails_gazxg_2915 {
  flex: 1;

  min-width: 0;
}

._productOptionName_gazxg_2927 {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: #222222;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._productOptionMeta_gazxg_2959 {
  display: block;

  overflow: hidden;

  color: #8a8f9d;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PRODUCT OPTION STOCK
========================================================= */

._productOptionStock_gazxg_2993 {
  min-width: 60px;

  flex: 0 0 auto;

  text-align: right;
}

._productOptionStock_gazxg_2993 strong {
  display: block;

  color: #222222;

  font-size: 11.5px;
  font-weight: 600;
}

._productOptionStock_gazxg_2993 span {
  display: block;

  margin-top: 2px;

  color: #16a34a;

  font-size: 9.5px;
  font-weight: 500;
}

/* =========================================================
   PRODUCT OPTION PRICE
========================================================= */

._productOptionPrice_gazxg_3057 {
  min-width: 65px;

  flex: 0 0 auto;

  color: #444444;

  font-size: 11px;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   TABLE NUMBER INPUT
========================================================= */

._tableNumberInput_gazxg_3093 {
  width: 80px;

  min-height: 34px;

  padding: 6px 8px;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 11.5px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._tableNumberInput_gazxg_3093:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   TABLE SELECT
========================================================= */

._tableSelect_gazxg_3167 {
  width: 100%;

  min-width: 80px;
  min-height: 34px;

  padding: 6px 8px;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 11px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  cursor: pointer;
}

._tableSelect_gazxg_3167:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   AMOUNT
========================================================= */

._amountCell_gazxg_3239 {
  width: 115px;

  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   DELETE BUTTON
========================================================= */

._deleteButton_gazxg_3273 {
  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--color-red, #fb3748);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

._deleteButton_gazxg_3273:hover {
  border-color: var(--color-red, #fb3748);

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));
}

._deleteButton_gazxg_3273:active {
  transform: scale(0.96);
}

/* =========================================================
   ITEM ROW ACTIONS
========================================================= */

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

  gap: 10px;

  margin: 12px;
}

._rowActionButton_gazxg_3371 {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 6px 12px;

  color: var(--text-color, #191919);

  font: inherit;
  font-size: 11px;
  font-weight: 500;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 7px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._rowActionButton_gazxg_3371:hover {
  background: var(--hover-bg, #f7f7fb);

  border-color: #cfd2da;
}

/* =========================================================
   CUSTOMER NOTES
========================================================= */

._customerNotes_gazxg_3451 {
  margin: 12px;
}

/* =========================================================
   SUMMARY CARD
========================================================= */

._summaryCard_gazxg_3467 {
  width: 100%;

  margin-top: 10px;

  box-sizing: border-box;

  overflow: hidden;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

/* =========================================================
   SUMMARY HEADER
========================================================= */

._summaryHeader_gazxg_3511 {
  min-height: 50px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  box-sizing: border-box;

  background: #ffffff;

  border-bottom: 1px solid #e8ebf0;
}

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

  gap: 8px;
}

._summaryTitleIcon_gazxg_3555 {
  color: #4f46e5;

  flex-shrink: 0;
}

._summaryHeaderTitle_gazxg_3567 {
  margin: 0;

  color: #20242d;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

/* =========================================================
   SUMMARY BODY
========================================================= */

._summaryBody_gazxg_3597 {
  width: 100%;

  box-sizing: border-box;

  padding: 14px 18px 16px;
}

/* =========================================================
   SUMMARY TOTALS
========================================================= */

._totalsPanel_gazxg_3621 {
  display: flex;
  flex-direction: column;

  gap: 0;
}

/* =========================================================
   SUMMARY LINE
========================================================= */

._totalLine_gazxg_3643 {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  color: #737987;

  font-size: 11.5px;

  border-bottom: 1px solid #eef0f3;
}

._totalLine_gazxg_3643 > span:last-child {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   ADJUSTMENT
========================================================= */

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

  justify-content: flex-end;

  gap: 8px;

  min-width: 0;
}

._inlineAdjustment_gazxg_3705 > span {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  white-space: nowrap;
}

/* =========================================================
   INLINE INPUT
========================================================= */

._inlineInput_gazxg_3753 {
  width: 70px;
  height: 32px;

  box-sizing: border-box;

  padding: 5px 8px;

  color: #252932;

  font: inherit;
  font-size: 11.5px;

  background: #ffffff;

  border: 1px solid #d9dde5;

  border-radius: 6px;

  outline: none;
}

._inlineInput_gazxg_3753:focus {
  border-color: #6c63ff;

  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.08);
}

/* =========================================================
   ROUND OFF
========================================================= */

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

  gap: 5px;

  min-width: 0;
}

._roundToggle_gazxg_3835 {
  display: inline-flex;
  align-items: center;

  gap: 3px;

  width: fit-content;

  flex-shrink: 0;

  padding: 0;

  color: #6c63ff;

  font: inherit;
  font-size: 9.5px;
  font-weight: 600;

  background: transparent;

  border: 0;

  cursor: pointer;

  white-space: nowrap;
}

._roundToggle_gazxg_3835:hover {
  text-decoration: underline;
}

/* =========================================================
   GRAND TOTAL
========================================================= */

._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
  min-height: 48px;

  margin-top: 4px;

  padding-top: 8px;

  color: #20242d;

  font-size: 13px;
  font-weight: 700;

  border-bottom: 0;

  border-top: 1px solid #e5e7eb;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:first-child {
  color: #20242d;

  font-size: 13px;
  font-weight: 700;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:last-child {
  color: #4f46e5;

  font-size: 16px;
  font-weight: 800;
}

/* =========================================================
   SUMMARY CARD
========================================================= */

._summaryCard_gazxg_3467 {
  width: 100%;

  margin-top: 10px;

  box-sizing: border-box;

  overflow: hidden;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

/* =========================================================
   SUMMARY HEADER
========================================================= */

._summaryHeader_gazxg_3511 {
  min-height: 50px;

  display: flex;
  align-items: center;

  padding: 0 20px;

  box-sizing: border-box;

  background: #ffffff;

  border-bottom: 1px solid #e8ebf0;
}

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

  gap: 8px;
}

._summaryTitleIcon_gazxg_3555 {
  color: #4f46e5;

  flex-shrink: 0;
}

._summaryHeaderTitle_gazxg_3567 {
  margin: 0;

  color: #20242d;

  font-size: 14px;
  font-weight: 700;

  line-height: 1.3;
}

/* =========================================================
   SUMMARY BODY
========================================================= */

._summaryBody_gazxg_3597 {
  width: 100%;

  box-sizing: border-box;

  padding: 14px 18px 16px;
}

/* =========================================================
   SUMMARY TOTALS
========================================================= */

._totalsPanel_gazxg_3621 {
  display: flex;
  flex-direction: column;

  gap: 0;
}

/* =========================================================
   SUMMARY LINE
========================================================= */

._totalLine_gazxg_3643 {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  color: #737987;

  font-size: 11.5px;

  border-bottom: 1px solid #eef0f3;
}

._totalLine_gazxg_3643 > span:last-child {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   ADJUSTMENT
========================================================= */

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

  justify-content: flex-end;

  gap: 8px;

  min-width: 0;
}

._inlineAdjustment_gazxg_3705 > span {
  color: #20242d;

  font-size: 11.5px;
  font-weight: 600;

  white-space: nowrap;
}

/* =========================================================
   INLINE INPUT
========================================================= */

._inlineInput_gazxg_3753 {
  width: 70px;
  height: 32px;

  box-sizing: border-box;

  padding: 5px 8px;

  color: #252932;

  font: inherit;
  font-size: 11.5px;

  background: #ffffff;

  border: 1px solid #d9dde5;

  border-radius: 6px;

  outline: none;
}

._inlineInput_gazxg_3753:focus {
  border-color: #6c63ff;

  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.08);
}

/* =========================================================
   ROUND OFF
========================================================= */

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

  gap: 5px;

  min-width: 0;
}

._roundToggle_gazxg_3835 {
  display: inline-flex;
  align-items: center;

  gap: 3px;

  width: fit-content;

  flex-shrink: 0;

  padding: 0;

  color: #6c63ff;

  font: inherit;
  font-size: 9.5px;
  font-weight: 600;

  background: transparent;

  border: 0;

  cursor: pointer;

  white-space: nowrap;
}

._roundToggle_gazxg_3835:hover {
  text-decoration: underline;
}

/* =========================================================
   GRAND TOTAL
========================================================= */

._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
  min-height: 48px;

  margin-top: 4px;

  padding-top: 8px;

  color: #20242d;

  font-size: 13px;
  font-weight: 700;

  border-bottom: 0;

  border-top: 1px solid #e5e7eb;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:first-child {
  color: #20242d;

  font-size: 13px;
  font-weight: 700;
}

._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:last-child {
  color: #4f46e5;

  font-size: 16px;
  font-weight: 800;
}

/* =========================================================
   OLD TOTALS SUPPORT
========================================================= */

._totalsPanel_gazxg_3621 {
  display: flex;
  flex-direction: column;

  gap: 0;
}

._totalLine_gazxg_3643 {
  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;

  border-bottom: 1px solid #f0f0f2;
}

._totalLine_gazxg_3643:last-child {
  border-bottom: 0;
}

._totalLine_gazxg_3643 > span:last-child {
  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 500;

  text-align: right;
}

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

  gap: 6px;
}

._grandTotal_gazxg_3905 {
  min-height: 48px;

  margin-top: 8px;

  padding-top: 8px;

  color: var(--text-color, #191919);

  font-size: 13px;
  font-weight: 700;

  border-top: 1px solid var(--form-border, #e0e0e0);
}

._grandTotal_gazxg_3905 > span:last-child {
  color: var(--primary-purple-400, #4f46e5);

  font-size: 16px;
  font-weight: 700;
}

/* =========================================================
   TABLE POSITION HELPERS
========================================================= */

._itemTableCell_gazxg_1635 {
  position: relative;
}

._itemTableRow_gazxg_1633 {
  position: relative;
}

/* =========================================================
   LOADING
========================================================= */

._loadingContainer_gazxg_4645 {
  min-height: 400px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  box-sizing: border-box;
}

/* =========================================================
   GENERAL SCROLLBARS
========================================================= */

._tableWrap_gazxg_1583::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

._tableWrap_gazxg_1583::-webkit-scrollbar-track {
  background: transparent;
}

._tableWrap_gazxg_1583::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;
}

._tableWrap_gazxg_1583::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;
}

._customerDropdown_gazxg_983::-webkit-scrollbar {
  width: 6px;
}

._customerDropdown_gazxg_983::-webkit-scrollbar-track {
  background: transparent;
}

._customerDropdown_gazxg_983::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;
}

._customerDropdown_gazxg_983::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;
}

/* =========================================================
   RESPONSIVE — 1180px
========================================================= */

@media (max-width: 1180px) {
  ._contentLayout_gazxg_227 {
    padding-left: 20px;
    padding-right: 20px;
  }

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

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

/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {
  ._pageHeader_gazxg_39 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._headerActions_gazxg_197 {
    width: 100%;
  }

  ._contentLayout_gazxg_227 {
    padding-left: 16px;
    padding-right: 16px;
  }

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

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

  ._itemsTable_gazxg_1631 {
    min-width: 950px;
  }

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

  ._productDropdown_gazxg_2241 {
    max-height: min(380px, calc(100vh - 16px));
  }

  ._productList_gazxg_2499 {
    max-height: 310px;
  }
}

/* =========================================================
   RESPONSIVE — 640px
========================================================= */

@media (max-width: 640px) {
  ._pageHeader_gazxg_39 {
    padding: 12px;
  }

  ._contentLayout_gazxg_227 {
    padding: 0 12px 16px;
  }

  ._headerLeft_gazxg_71 {
    width: 100%;

    align-items: flex-start;

    gap: 9px;
  }

  ._pageTitle_gazxg_159 {
    font-size: 19px;
  }

  ._pageSubtitle_gazxg_179 {
    font-size: 10.5px;
  }

  ._headerActions_gazxg_197 {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;
  }

  ._outlineButton_gazxg_259,
  ._confirmButton_gazxg_261 {
    width: 100%;
  }

  ._cols2_gazxg_621,
  ._cols4_gazxg_633 {
    grid-template-columns: 1fr;
  }

  ._cardBody_gazxg_557 {
    padding: 14px;
  }

  ._itemsHeader_gazxg_1307 {
    align-items: stretch;

    flex-direction: column;

    padding: 9px 12px;
  }

  ._itemHeaderActions_gazxg_1425 {
    width: 100%;
  }

  ._bulkActionButton_gazxg_1439 {
    width: 100%;
    flex: 1;
  }

  ._rowActions_gazxg_3353 {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._rowActionButton_gazxg_3371 {
    width: 100%;
  }

  ._summaryHeader_gazxg_3511 {
    min-height: 48px;

    padding: 0 14px;
  }

  ._summaryBody_gazxg_3597 {
    padding: 10px 14px 14px;
  }

  ._totalLine_gazxg_3643 {
    min-height: 38px;

    font-size: 11px;
  }

  ._totalLine_gazxg_3643 > span:last-child {
    font-size: 11px;
  }

  ._inlineInput_gazxg_3753 {
    width: 65px;
    height: 31px;
  }

  ._roundOffContent_gazxg_3817 {
    gap: 4px;
  }

  ._roundToggle_gazxg_3835 {
    font-size: 9px;
  }

  ._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
    min-height: 46px;
  }

  ._totalLine_gazxg_3643._grandTotal_gazxg_3905 > span:last-child {
    font-size: 15px;
  }

  /* =======================================================
     MOBILE PRODUCT DROPDOWN
  ======================================================= */

  ._productDropdown_gazxg_2241 {
    width: calc(100vw - 16px);

    max-width: calc(100vw - 16px);

    max-height: min(380px, calc(100vh - 12px));

    border-radius: 8px;
  }

  ._productDropdownSearch_gazxg_2337 {
    padding: 7px;
  }

  ._productSearchInput_gazxg_2421 {
    height: 35px;
  }

  ._productList_gazxg_2499 {
    max-height: min(310px, calc(100vh - 62px));
  }

  ._productOption_gazxg_2741 {
    min-height: 62px;

    padding: 8px;
  }

  ._productOptionPrice_gazxg_3057 {
    min-width: 55px;
  }

  ._productOptionStock_gazxg_2993 {
    min-width: 55px;
  }
}

/* =========================================================
   RESPONSIVE — 480px
========================================================= */

@media (max-width: 480px) {
  ._pageHeader_gazxg_39 {
    gap: 10px;
  }

  ._backButton_gazxg_89 {
    width: 32px;
    height: 32px;

    min-width: 32px;
    flex-basis: 32px;
  }

  ._pageTitle_gazxg_159 {
    font-size: 18px;
  }

  ._pageSubtitle_gazxg_179 {
    font-size: 10.5px;
  }

  ._headerActions_gazxg_197 {
    grid-template-columns: 1fr;
  }

  ._itemsHeader_gazxg_1307 {
    padding: 8px 12px;
  }

  ._itemHeaderActions_gazxg_1425 {
    display: grid;

    grid-template-columns: 1fr;
  }

  ._rowActions_gazxg_3353 {
    grid-template-columns: 1fr;
  }

  ._tableWrap_gazxg_1583 {
    margin-left: -14px;
    margin-right: -14px;

    width: calc(100% + 28px);
  }

  ._summaryHeader_gazxg_3511 {
    min-height: 46px;

    padding: 0 13px;
  }

  ._summaryBody_gazxg_3597 {
    padding: 8px 13px 12px;
  }

  ._totalLine_gazxg_3643 {
    min-height: 36px;

    gap: 8px;
  }

  ._inlineAdjustment_gazxg_3705 {
    gap: 6px;
  }

  ._inlineInput_gazxg_3753 {
    width: 60px;
  }

  ._totalLine_gazxg_3643._grandTotal_gazxg_3905 {
    min-height: 44px;
  }

  /* =======================================================
     SMALL SCREEN DROPDOWN
  ======================================================= */

  ._productDropdown_gazxg_2241 {
    width: calc(100vw - 12px);

    max-width: calc(100vw - 12px);

    max-height: calc(100vh - 10px);
  }

  ._productList_gazxg_2499 {
    max-height: calc(100vh - 58px);
  }

  ._productOption_gazxg_2741 {
    gap: 7px;

    padding: 8px;
  }

  ._productOptionImage_gazxg_2853 {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  ._productOptionName_gazxg_2927 {
    font-size: 11.5px;
  }

  ._productOptionMeta_gazxg_2959 {
    font-size: 10px;
  }

  ._productOptionStock_gazxg_2993 {
    min-width: 48px;
  }

  ._productOptionStock_gazxg_2993 strong {
    font-size: 10.5px;
  }

  ._productOptionStock_gazxg_2993 span {
    font-size: 9px;
  }

  ._productOptionPrice_gazxg_3057 {
    min-width: 52px;

    font-size: 10.5px;
  }
}

/* =========================================================
   RESPONSIVE — 360px
========================================================= */

@media (max-width: 360px) {
  ._pageHeader_gazxg_39 {
    padding: 10px;
  }

  ._contentLayout_gazxg_227 {
    padding-left: 10px;
    padding-right: 10px;
  }

  ._pageTitle_gazxg_159 {
    font-size: 17px;
  }

  ._pageSubtitle_gazxg_179 {
    font-size: 10px;
  }

  ._summaryBody_gazxg_3597 {
    padding: 10px;
  }

  ._summaryField_gazxg_5525 {
    padding: 11px 12px;
  }

  ._summaryFieldLabel_gazxg_5533 {
    font-size: 11px;
  }

  ._summaryFieldValue_gazxg_5541 {
    font-size: 13.5px;
  }

  ._grandTotalValue_gazxg_5549 {
    font-size: 17px;
  }

  ._inlineInput_gazxg_3753 {
    width: 72px;
  }

  ._productDropdown_gazxg_2241 {
    width: calc(100vw - 8px);

    max-width: calc(100vw - 8px);

    max-height: calc(100vh - 8px);

    border-radius: 7px;
  }

  ._productDropdownSearch_gazxg_2337 {
    padding: 6px;
  }

  ._productSearchInput_gazxg_2421 {
    height: 34px;

    padding-left: 30px;
  }

  ._productList_gazxg_2499 {
    max-height: calc(100vh - 54px);
  }

  ._productOption_gazxg_2741 {
    min-height: 58px;

    gap: 6px;

    padding: 7px;
  }

  ._productOptionImage_gazxg_2853 {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  ._productOptionStock_gazxg_2993 {
    display: none;
  }

  ._productOptionPrice_gazxg_3057 {
    min-width: 48px;

    font-size: 10px;
  }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  ._backButton_gazxg_89,
  ._outlineButton_gazxg_259,
  ._confirmButton_gazxg_261,
  ._bulkActionButton_gazxg_1439,
  ._changeProductButton_gazxg_1969,
  ._deleteButton_gazxg_3273,
  ._rowActionButton_gazxg_3371,
  ._productOption_gazxg_2741,
  ._input_gazxg_737,
  ._select_gazxg_739,
  ._textarea_gazxg_741,
  ._numberInput_gazxg_743,
  ._tableNumberInput_gazxg_3093,
  ._tableSelect_gazxg_3167,
  ._collapseIcon_gazxg_521 {
    transition: none;
  }
}
/* =========================================================
   VENDOR ADD / EDIT PAGE
========================================================= */

._vendorAddPage_1uns3_9 {
  width: 100%;
  min-height: 100%;
  background: var(--form-page-bg, #f4f3fb);
  color: var(--text-color, #191919);
}

/* =========================================================
   PAGE HEADER
========================================================= */

._pageHeader_1uns3_31 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px 12px;
}

._headerLeft_1uns3_47 {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

._headerLeft_1uns3_47 h1 {
  margin: 0;
  color: var(--text-color, #191919);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

._headerLeft_1uns3_47 p {
  margin: 3px 0 0;
  color: var(--color-grey, #999999);
  font-size: 11.5px;
}

._breadcrumb_1uns3_89 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: var(--color-grey, #999999);
  font-size: 10.5px;
  line-height: 1;
}

._breadcrumb_1uns3_89 span {
  color: var(--color-grey, #b8b8c0);
}

._breadcrumb_1uns3_89 strong {
  color: var(--text-color, #191919);
  font-weight: 600;
}

._backButton_1uns3_127 {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 2px;

  color: var(--text-color, #191919);
  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
  border-radius: 7px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

._backButton_1uns3_127:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
  border-color: var(--primary-purple-300, #aaa6f5);
  color: var(--primary-purple-400, #4f46e5);
}

._backButton_1uns3_127:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

._headerActions_1uns3_199 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

._cancelButton_1uns3_213,
._saveButton_1uns3_215 {
  min-height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 7px 14px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 600;

  border-radius: 7px;

  cursor: pointer;

  transition: 0.15s ease;
}

._cancelButton_1uns3_213 {
  color: var(--text-color, #191919);
  background: var(--form-bg, #ffffff);
  border: 1px solid var(--form-border, #e0e0e0);
}

._cancelButton_1uns3_213:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
}

._saveButton_1uns3_215 {
  color: #ffffff;
  background: var(--primary-purple-400, #4f46e5);
  border: 1px solid var(--primary-purple-400, #4f46e5);
}

._saveButton_1uns3_215:hover:not(:disabled) {
  background: var(--primary-purple-500, #4338ca);
  border-color: var(--primary-purple-500, #4338ca);
}

._cancelButton_1uns3_213:disabled,
._saveButton_1uns3_215:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================================================
   PAGE LAYOUT
========================================================= */

._contentLayout_1uns3_319 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  align-items: start;
  gap: 16px;
  padding: 0 24px 16px;
}

._mainColumn_1uns3_335,
._sidebar_1uns3_337 {
  min-width: 0;
}

._mainColumn_1uns3_335 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._sidebar_1uns3_337 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   CARDS
========================================================= */

._card_1uns3_377,
._sideCard_1uns3_379 {
  background: var(--form-bg, #ffffff);
  border: 1px solid var(--form-border, #e0e0e0);
  border-radius: 11px;
  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

._card_1uns3_377 {
  overflow: hidden;
}

._sideCard_1uns3_379 {
  overflow: hidden;
}

/* =========================================================
   CARD HEADER
========================================================= */

._cardHeader_1uns3_417 {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 9px 16px;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._sectionHeading_1uns3_445 {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;
}

._sectionIcon_1uns3_461 {
  width: 31px;
  height: 31px;
  min-width: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 7px;
}

._sectionHeading_1uns3_445 h2 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;

  line-height: 1.25;
}

._sectionHeading_1uns3_445 p {
  margin: 3px 0 0;

  color: var(--color-grey, #999999);

  font-size: 10.5px;
  line-height: 1.35;
}

._cardBody_1uns3_533 {
  padding: 16px;
}

/* =========================================================
   FORM GRID
========================================================= */

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

  gap: 13px 20px;
}

._field_1uns3_563 {
  min-width: 0;
}

._fieldWide_1uns3_571 {
  grid-column: span 2;
}

._fieldFull_1uns3_579 {
  grid-column: 1 / -1;
}

/* =========================================================
   LABEL
========================================================= */

._label_1uns3_595 {
  display: inline-flex;
  align-items: center;
  gap: 2px;

  margin: 0 0 5px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
  font-weight: 600;
}

._label_1uns3_595 span {
  color: var(--form-required-color, #fb3748);
}

/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

._input_1uns3_637,
._select_1uns3_639,
._textarea_1uns3_641 {
  width: 100%;

  min-height: 37px;

  padding: 7px 11px;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

._textarea_1uns3_641 {
  min-height: 80px;

  resize: vertical;

  line-height: 1.45;
}

._input_1uns3_637:focus,
._select_1uns3_639:focus,
._textarea_1uns3_641:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._input_1uns3_637::placeholder,
._textarea_1uns3_641::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._input_1uns3_637:disabled,
._select_1uns3_639:disabled,
._textarea_1uns3_641:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--hover-bg, #f7f7fb);
}

._select_1uns3_639 {
  appearance: none;
  cursor: pointer;
}

/* =========================================================
   SELECT WRAPPER
========================================================= */

._selectWrap_1uns3_769 {
  position: relative;
  width: 100%;
}

._selectWrap_1uns3_769 ._select_1uns3_639 {
  padding-right: 34px;
}

._selectWrap_1uns3_769 > svg {
  position: absolute;

  top: 50%;
  right: 11px;

  transform: translateY(-50%);

  pointer-events: none;

  color: var(--color-grey, #999999);
}

/* =========================================================
   INPUT WITH ICON
========================================================= */

._inputWithIcon_1uns3_821 {
  width: 100%;
  min-height: 37px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0 11px;

  color: var(--color-grey, #999999);

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._inputWithIcon_1uns3_821:focus-within {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._inputPlain_1uns3_879 {
  width: 100%;
  min-width: 0;

  padding: 7px 0;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: transparent;

  border: 0;
  outline: none;
}

._inputPlain_1uns3_879::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._inputWithIcon_1uns3_821:has(._inputPlain_1uns3_879:disabled) {
  opacity: 0.65;
  background: var(--hover-bg, #f7f7fb);
}

/* =========================================================
   PHONE
========================================================= */

._phoneGroup_1uns3_939 {
  width: 100%;

  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);

  gap: 7px;
}

._countryCodeInput_1uns3_957 {
  width: 100%;
  min-height: 37px;

  padding: 7px 9px;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._countryCodeInput_1uns3_957:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._countryCodeInput_1uns3_957::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._countryCodeInput_1uns3_957:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--hover-bg, #f7f7fb);
}

/* =========================================================
   SWITCH
========================================================= */

._switchRow_1uns3_1045 {
  min-height: 37px;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;

  cursor: pointer;
}

._switchRow_1uns3_1045 input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

._switchTrack_1uns3_1097 {
  position: relative;

  width: 38px;
  height: 21px;

  flex: 0 0 38px;

  display: inline-flex;
  align-items: center;

  padding: 2px;

  background: #d7d7df;

  border-radius: 999px;

  transition: background 0.15s ease;
}

._switchThumb_1uns3_1137 {
  width: 17px;
  height: 17px;

  display: block;

  background: #ffffff;

  border-radius: 50%;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);

  transition: transform 0.15s ease;
}

._switchRow_1uns3_1045 input:checked + ._switchTrack_1uns3_1097 {
  background: var(--primary-purple-400, #4f46e5);
}

._switchRow_1uns3_1045 input:checked + ._switchTrack_1uns3_1097 ._switchThumb_1uns3_1137 {
  transform: translateX(17px);
}

._switchRow_1uns3_1045 input:focus-visible + ._switchTrack_1uns3_1097 {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* =========================================================
   BUTTONS
========================================================= */

._outlineButton_1uns3_1199,
._textButton_1uns3_1201 {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 6px 12px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 500;

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition: 0.15s ease;
}

._outlineButton_1uns3_1199 {
  color: var(--primary-purple-400, #4f46e5);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--primary-purple-300, #aaa6f5);
}

._outlineButton_1uns3_1199:hover:not(:disabled) {
  background: var(--primary-purple-100, #eae9fc);
}

._textButton_1uns3_1201 {
  color: var(--primary-purple-400, #4f46e5);

  background: transparent;

  border: 1px solid transparent;
}

._textButton_1uns3_1201:hover:not(:disabled) {
  background: var(--primary-purple-100, #eae9fc);
}

._outlineButton_1uns3_1199:disabled,
._textButton_1uns3_1201:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

/* =========================================================
   ADDRESS
========================================================= */

._addressList_1uns3_1331 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._addressCard_1uns3_1343 {
  padding: 13px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 8px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._addressCard_1uns3_1343:hover {
  border-color: #d4d2e9;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.035);
}

._addressCardHeader_1uns3_1383 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 13px;
}

._addressCardTitle_1uns3_1403 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 9px;
}

._addressIcon_1uns3_1421 {
  width: 28px;
  height: 28px;

  min-width: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 6px;
}

._addressCardTitle_1uns3_1403 > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

._addressCardTitle_1uns3_1403 strong {
  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 650;
}

._addressCardTitle_1uns3_1403 span {
  color: var(--color-grey, #999999);

  font-size: 9.5px;
}

._addressGrid_1uns3_1499 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px 20px;
}

._deleteSmallButton_1uns3_1515 {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--color-red, #fb3748);

  background: transparent;

  border: 1px solid transparent;

  border-radius: 6px;

  cursor: pointer;

  transition: 0.15s ease;
}

._deleteSmallButton_1uns3_1515:hover:not(:disabled) {
  background: var(--color-red-light, rgba(251, 55, 72, 0.08));

  border-color: rgba(251, 55, 72, 0.22);
}

._deleteSmallButton_1uns3_1515:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================================
   EMPTY STATE
========================================================= */

._emptyState_1uns3_1595 {
  min-height: 125px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 18px;

  color: var(--color-grey, #999999);

  background: var(--hover-bg, #fafafe);

  border: 1px dashed var(--form-border, #d8d8df);

  border-radius: 8px;

  font-size: 11px;
}

._emptyState_1uns3_1595 > svg {
  color: var(--primary-purple-400, #4f46e5);
}

._emptyState_1uns3_1595 button {
  min-height: 30px;

  padding: 5px 10px;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 10.5px;
  font-weight: 600;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--primary-purple-300, #aaa6f5);

  border-radius: 6px;

  cursor: pointer;

  transition: 0.15s ease;
}

._emptyState_1uns3_1595 button:hover:not(:disabled) {
  background: var(--primary-purple-100, #eae9fc);
}

._emptyState_1uns3_1595 button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================
   CONTACT PERSONS
========================================================= */

._contactList_1uns3_1719 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._contactCard_1uns3_1731 {
  padding: 13px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 8px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._contactCard_1uns3_1731:hover {
  border-color: #d4d2e9;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.035);
}

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

  gap: 9px;

  margin-bottom: 13px;
}

._contactNumber_1uns3_1789 {
  width: 28px;
  height: 28px;

  min-width: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 700;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 6px;
}

._contactTitle_1uns3_1829 {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 2px;
}

._contactTitle_1uns3_1829 strong {
  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 650;
}

._contactTitle_1uns3_1829 span {
  overflow: hidden;

  color: var(--color-grey, #999999);

  font-size: 9.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   SIDEBAR
========================================================= */

._sideCardHeader_1uns3_1893 {
  min-height: 48px;

  display: flex;
  align-items: center;

  padding: 0 17px;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._sideCardHeader_1uns3_1893 h3 {
  margin: 0;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 700;
}

._sideCardBody_1uns3_1941 {
  padding: 14px 17px 16px;
}

/* =========================================================
   SUMMARY
========================================================= */

._summaryList_1uns3_1957 {
  display: flex;
  flex-direction: column;

  gap: 16px;
}

._summaryList_1uns3_1957 > div {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  align-items: center;

  gap: 12px;
}

._summaryList_1uns3_1957 span {
  color: var(--form-label-color, #5d5d5d);

  font-size: 11px;
}

._summaryList_1uns3_1957 strong {
  min-width: 0;

  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 500;

  text-align: right;

  overflow-wrap: anywhere;
}

._activeBadge_1uns3_2033,
._inactiveBadge_1uns3_2035 {
  justify-self: end;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 3px 8px;

  border-radius: 8px;

  font-size: 10px !important;
  font-weight: 600 !important;
}

._activeBadge_1uns3_2033 {
  color: var(--color-green, #1fc16b) !important;

  background: var(--color-green-light, #e6fbf0);
}

._inactiveBadge_1uns3_2035 {
  color: var(--color-red, #fb3748) !important;

  background: var(--color-red-light, rgba(251, 55, 72, 0.1));
}

/* =========================================================
   VALIDATION
========================================================= */

._validationList_1uns3_2097 {
  display: flex;
  flex-direction: column;

  gap: 16px;
}

._validationList_1uns3_2097 > div {
  display: grid;

  grid-template-columns:
    20px
    minmax(0, 1fr);

  align-items: flex-start;

  gap: 10px;
}

._validationList_1uns3_2097 svg {
  margin-top: 1px;
}

._validationList_1uns3_2097 span {
  color: var(--form-label-color, #5d5d5d);

  font-size: 11px;

  line-height: 1.5;
}

._valid_1uns3_2097 svg {
  color: var(--color-green, #1fc16b);

  fill: var(--color-green, #1fc16b);

  stroke: #ffffff;
}

._invalid_1uns3_2175 svg {
  color: var(--color-grey, #b4b4b4);
}

/* =========================================================
   INFORMATION LIST
========================================================= */

._infoList_1uns3_2191 {
  display: flex;
  flex-direction: column;

  gap: 13px;
}

._infoList_1uns3_2191 > div {
  min-width: 0;

  display: grid;

  grid-template-columns:
    18px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 7px;
}

._infoList_1uns3_2191 svg {
  color: var(--primary-purple-400, #4f46e5);
}

._infoList_1uns3_2191 span {
  min-width: 0;

  color: var(--form-label-color, #5d5d5d);

  font-size: 10.5px;

  overflow-wrap: anywhere;
}

._infoList_1uns3_2191 strong {
  color: var(--text-color, #191919);

  font-size: 10.5px;
  font-weight: 600;

  text-align: right;
}

/* =========================================================
   QUICK INFO
========================================================= */

._quickInfo_1uns3_2289 {
  margin: 0;

  color: var(--form-label-color, #5d5d5d);

  font-size: 10.5px;

  line-height: 1.55;
}

._quickInfo_1uns3_2289 + ._quickInfo_1uns3_2289 {
  margin-top: 11px;
}

._quickInfo_1uns3_2289 strong {
  color: var(--primary-purple-400, #4f46e5);

  font-weight: 600;
}

/* =========================================================
   ERROR
========================================================= */

._errorText_1uns3_2337 {
  display: block;

  margin-top: 4px;

  color: var(--color-red, #fb3748);

  font-size: 10px;

  line-height: 1.3;
}

/* =========================================================
   LOADING
========================================================= */

._loadingContainer_1uns3_2369 {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 420px;

  padding: 24px;
}

._loadingCard_1uns3_2389 {
  min-width: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 80px;

  padding: 20px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
  font-weight: 500;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 10px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

/* =========================================================
   FOCUS / ACCESSIBILITY
========================================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(79, 70, 229, 0.3);

  outline-offset: 1px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
  ._contentLayout_1uns3_319 {
    grid-template-columns: 1fr;
  }

  ._sidebar_1uns3_337 {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  ._sidebar_1uns3_337 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  ._pageHeader_1uns3_31 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._headerActions_1uns3_199 {
    width: 100%;
  }

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

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

  ._fieldWide_1uns3_571,
  ._fieldFull_1uns3_579 {
    grid-column: 1 / -1;
  }

  ._sidebar_1uns3_337 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  ._cardHeader_1uns3_417 {
    align-items: flex-start;

    flex-direction: column;

    padding: 11px 14px;
  }

  ._cardHeader_1uns3_417 > ._outlineButton_1uns3_1199,
  ._cardHeader_1uns3_417 > ._headerButtonGroup_1uns3_1309 {
    width: 100%;
  }

  ._headerButtonGroup_1uns3_1309 {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._headerButtonGroup_1uns3_1309 ._outlineButton_1uns3_1199,
  ._headerButtonGroup_1uns3_1309 ._textButton_1uns3_1201 {
    width: 100%;
  }

  ._addressGrid_1uns3_1499 {
    grid-template-columns: 1fr;
  }

  ._addressGrid_1uns3_1499 ._fieldWide_1uns3_571 {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  ._pageHeader_1uns3_31,
  ._contentLayout_1uns3_319 {
    padding-left: 12px;
    padding-right: 12px;
  }

  ._pageHeader_1uns3_31 {
    padding-top: 12px;
  }

  ._headerLeft_1uns3_47 {
    width: 100%;
    align-items: flex-start;
  }

  ._headerLeft_1uns3_47 h1 {
    font-size: 19px;
  }

  ._breadcrumb_1uns3_89 {
    font-size: 9.5px;
  }

  ._headerLeft_1uns3_47 p {
    font-size: 10.5px;
  }

  ._headerActions_1uns3_199 {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._cancelButton_1uns3_213,
  ._saveButton_1uns3_215 {
    width: 100%;
  }

  ._contentLayout_1uns3_319 {
    gap: 10px;
  }

  ._mainColumn_1uns3_335,
  ._sidebar_1uns3_337 {
    gap: 10px;
  }

  ._card_1uns3_377,
  ._sideCard_1uns3_379 {
    border-radius: 9px;
  }

  ._cardBody_1uns3_533 {
    padding: 13px;
  }

  ._formGrid_1uns3_549 {
    grid-template-columns: 1fr;
  }

  ._fieldWide_1uns3_571,
  ._fieldFull_1uns3_579 {
    grid-column: auto;
  }

  ._phoneGroup_1uns3_939 {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  ._headerButtonGroup_1uns3_1309 {
    grid-template-columns: 1fr 1fr;
  }

  ._addressCard_1uns3_1343 {
    padding: 11px;
  }

  ._contactCard_1uns3_1731 {
    padding: 11px;
  }

  ._sideCardHeader_1uns3_1893 {
    min-height: 45px;

    padding: 0 14px;
  }

  ._sideCardBody_1uns3_1941 {
    padding: 13px 14px 14px;
  }

  ._summaryList_1uns3_1957 {
    gap: 13px;
  }

  ._validationList_1uns3_2097 {
    gap: 13px;
  }
}

@media (max-width: 460px) {
  ._headerLeft_1uns3_47 {
    gap: 10px;
  }

  ._backButton_1uns3_127 {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  ._headerLeft_1uns3_47 h1 {
    font-size: 18px;
  }

  ._headerActions_1uns3_199 {
    grid-template-columns: 1fr;
  }

  ._headerButtonGroup_1uns3_1309 {
    grid-template-columns: 1fr;
  }

  ._phoneGroup_1uns3_939 {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  ._countryCodeInput_1uns3_957 {
    padding-left: 8px;
    padding-right: 8px;
  }

  ._addressCardHeader_1uns3_1383 {
    align-items: flex-start;
  }

  ._addressCardTitle_1uns3_1403 {
    align-items: flex-start;
  }

  ._contactHeader_1uns3_1771 {
    align-items: flex-start;
  }

  ._summaryList_1uns3_1957 > div {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }
}

/* =========================================================
   DARK THEME COMPATIBILITY
   Uses existing project CSS variables where available.
========================================================= */

@media (prefers-reduced-motion: reduce) {
  ._vendorAddPage_1uns3_9 *,
  ._vendorAddPage_1uns3_9 *::before,
  ._vendorAddPage_1uns3_9 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ======================================================
   VENDOR VIEW PAGE
====================================================== */

._vendorViewPage_t3g5z_9 {
  width: 100%;
  min-height: 100%;

  padding: 14px 16px 28px;

  color: var(--view-value-color);

  background: var(--form-page-bg, var(--view-bg));
}

/* ======================================================
   HEADER
====================================================== */

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

  gap: 18px;

  margin-bottom: 16px;
}

._vendorViewHeaderLeft_t3g5z_59 {
  min-width: 0;

  display: flex;
  align-items: flex-start;

  gap: 14px;
}

._vendorViewHeaderContent_t3g5z_77 {
  min-width: 0;
}

._vendorViewBackBtn_t3g5z_85 {
  width: 42px;
  height: 42px;

  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 20px;

  color: var(--view-muted);

  background: transparent;

  border: 1px solid var(--view-border);

  border-radius: 7px;

  cursor: pointer;

  transition: all 0.12s;
}

._vendorViewBackBtn_t3g5z_85:hover {
  background: var(--primary-purple-100);

  border-color: var(--primary-purple-300);

  color: var(--primary-purple-400);
}

/* ======================================================
   BREADCRUMB
====================================================== */

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

  gap: 7px;

  margin-bottom: 5px;

  color: var(--view-muted);

  font-size: 12px;
}

._vendorViewBreadcrumb_t3g5z_159 a {
  color: var(--primary-purple-400, #4f46e5);

  text-decoration: none;
}

._vendorViewBreadcrumb_t3g5z_159 a:hover {
  text-decoration: underline;
}

/* ======================================================
   TITLE
====================================================== */

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

  gap: 10px;
}

._vendorViewTitleIcon_t3g5z_227 {
  width: 38px;
  height: 38px;

  min-width: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 8px;
}

._vendorViewTitleRow_t3g5z_213 h1 {
  margin: 0;

  color: var(--view-value-color);

  font-size: 27px;

  font-weight: 700;

  line-height: 1.2;
}

._vendorViewCompanyName_t3g5z_285 {
  margin-top: 3px;

  color: var(--view-muted);

  font-size: 11px;
}

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

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 7px;

  color: var(--view-muted);

  font-size: 12px;
}

/* ======================================================
   STATUS / REFERENCE
====================================================== */

._vendorViewStatus_t3g5z_339,
._vendorViewRef_t3g5z_341,
._vendorViewPurpleChip_t3g5z_343,
._vendorViewActiveChip_t3g5z_345,
._vendorViewInactiveChip_t3g5z_347 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
}

._vendorViewStatus_t3g5z_339 {
  margin-left: 4px;

  gap: 5px;

  padding: 3px 10px;

  border-radius: 20px;

  font-size: 11px;

  font-weight: 700;

  background: var(--vstatus-confirmed-bg, #e6fbf0);

  color: var(--vstatus-confirmed-color, #1fc16b);
}

._vendorViewRef_t3g5z_341,
._vendorViewPurpleChip_t3g5z_343 {
  padding: 2px 9px;

  border-radius: 6px;

  font-size: 10.5px;

  font-weight: 600;

  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);

  border: 1px solid var(--primary-purple-200, #d7d5fa);
}

._vendorViewActiveChip_t3g5z_345 {
  padding: 3px 9px;

  border-radius: 7px;

  color: var(--vstatus-confirmed-color, #1fc16b);

  background: var(--vstatus-confirmed-bg, #e6fbf0);

  font-size: 10.5px;

  font-weight: 600;
}

._vendorViewInactiveChip_t3g5z_347 {
  padding: 3px 9px;

  border-radius: 7px;

  color: var(--vstatus-cancelled-color, #fb3748);

  background: var(--vstatus-cancelled-bg, rgba(251, 55, 72, 0.1));

  font-size: 10.5px;

  font-weight: 600;
}

/* ======================================================
   HEADER ACTIONS
====================================================== */

._vendorViewHeaderActions_t3g5z_497 {
  position: relative;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  padding-top: 22px;
}

._vendorViewBtn_t3g5z_523 {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  min-height: 38px;

  padding: 4px 11px;

  border-radius: 8px;

  font-size: 12.5px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.13s;

  white-space: nowrap;

  border: 1px solid transparent;
}

._vendorViewBtnOutline_t3g5z_573 {
  color: var(--view-value-color);

  background: var(--bg-color);

  border-color: var(--view-border);
}

._vendorViewBtnOutline_t3g5z_573:hover {
  background: var(--hover-bg, #f5f5fa);
}

._vendorViewBtnPrimary_t3g5z_597 {
  color: #ffffff;

  background: var(--primary-purple-400, #4f46e5);

  border-color: var(--primary-purple-400, #4f46e5);
}

._vendorViewBtnPrimary_t3g5z_597:hover {
  background: var(--primary-purple-500, #4338ca);
}

._vendorViewMoreBtn_t3g5z_621 {
  width: 42px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--view-value-color);

  background: var(--bg-color);

  border: 1px solid var(--view-border);

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.13s;
}

._vendorViewMoreBtn_t3g5z_621:hover {
  background: var(--hover-bg, #f5f5fa);
}

/* ======================================================
   MENU
====================================================== */

._vendorViewMenuWrap_t3g5z_679 {
  position: relative;
}

._vendorViewMenu_t3g5z_679 {
  position: absolute;

  top: calc(100% + 8px);
  right: 0;

  z-index: 30;

  width: 195px;

  overflow: hidden;

  background: var(--view-bg, #ffffff);

  border: 1px solid var(--view-border);

  border-radius: 8px;

  box-shadow: var(--view-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

._vendorViewMenu_t3g5z_679 button {
  width: 100%;

  min-height: 44px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0 14px;

  color: var(--view-value-color);

  font-size: 12px;

  text-align: left;

  background: transparent;

  border: 0;

  border-bottom: 1px solid var(--view-border);

  cursor: pointer;
}

._vendorViewMenu_t3g5z_679 button:last-child {
  border-bottom: 0;
}

._vendorViewMenu_t3g5z_679 button:hover {
  background: var(--hover-bg, #f5f5fa);
}

._vendorViewMenu_t3g5z_679 button._danger_t3g5z_799 {
  color: var(--vstatus-cancelled-color, #fb3748);

  background: var(--vstatus-cancelled-bg, rgba(251, 55, 72, 0.08));
}

/* ======================================================
   STAT CARDS
====================================================== */

._vendorViewStats_t3g5z_819 {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  margin-bottom: 14px;
}

._vendorViewStatCard_t3g5z_839 {
  min-height: 88px;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 16px;

  background: var(--view-bg, #ffffff);

  border: 1px solid var(--view-border);

  border-radius: 10px;

  box-shadow: var(--view-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.05));
}

._vendorViewStatIcon_t3g5z_877 {
  width: 42px;
  height: 42px;

  min-width: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;
}

._vendorViewStatIcon_t3g5z_877._purple_t3g5z_903 {
  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);
}

._vendorViewStatCard_t3g5z_839 > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}

._vendorViewStatCard_t3g5z_839 span {
  color: var(--view-muted);

  font-size: 12px;
}

._vendorViewStatCard_t3g5z_839 strong {
  overflow: hidden;

  color: var(--view-value-color);

  font-size: 13px;

  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* ======================================================
   MAIN LAYOUT
====================================================== */

._vendorViewLayout_t3g5z_981 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    340px;

  align-items: start;

  gap: 16px;
}

._vendorViewMain_t3g5z_1005,
._vendorViewSide_t3g5z_1007 {
  min-width: 0;
}

._vendorViewMain_t3g5z_1005 {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

._vendorViewSide_t3g5z_1007 {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

/* ======================================================
   CARDS
====================================================== */

._vendorViewCard_t3g5z_1051,
._vendorViewTabsCard_t3g5z_1053 {
  background: var(--view-bg, #ffffff);

  border: 1px solid var(--view-border);

  border-radius: var(--view-radius, 9px);

  box-shadow: var(--view-shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.05));
}

._vendorViewCard_t3g5z_1051 {
  overflow: hidden;
}

._vendorViewCardHeader_t3g5z_1081 {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 0 14px;

  border-bottom: 1px solid var(--view-border);
}

._vendorViewCardHeader_t3g5z_1081 h3 {
  margin: 0;

  color: var(--view-value-color);

  font-size: 13px;

  font-weight: 600;
}

._vendorViewHeaderCount_t3g5z_1129 {
  min-width: 22px;
  height: 19px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10px;

  font-weight: 600;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;
}

._vendorViewCardBody_t3g5z_1171 {
  padding: 14px;
}

/* ======================================================
   TABS
====================================================== */

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

  min-height: 44px;

  padding: 0 8px;
}

._vendorViewTab_t3g5z_1053 {
  position: relative;

  min-height: 44px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 0 16px;

  color: var(--view-muted);

  font-size: 12px;

  background: transparent;

  border: 0;

  cursor: pointer;
}

._vendorViewTab_t3g5z_1053:hover {
  color: var(--primary-purple-400, #4f46e5);
}

._vendorViewTab_t3g5z_1053._active_t3g5z_1259 {
  color: var(--primary-purple-400, #4f46e5);
}

._vendorViewTab_t3g5z_1053._active_t3g5z_1259::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: -1px;
  left: 0;

  height: 2px;

  background: var(--primary-purple-400, #4f46e5);
}

._vendorViewTab_t3g5z_1053 > span {
  min-width: 18px;
  height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 5px;

  color: var(--view-value-color);

  font-size: 10px;

  background: var(--hover-bg, #f5f5fa);

  border-radius: 999px;
}

/* ======================================================
   DETAIL GRID
====================================================== */

._vendorViewDetailGrid_t3g5z_1341 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px 42px;
}

._vendorViewDetailRow_t3g5z_1357 {
  min-width: 0;

  display: grid;

  grid-template-columns:
    150px
    minmax(0, 1fr);

  align-items: start;

  gap: 16px;
}

._vendorViewDetailFull_t3g5z_1385 {
  grid-column: 1 / -1;
}

._vendorViewDetailRow_t3g5z_1357 > span {
  color: var(--view-muted);

  font-size: 12px;
}

._vendorViewDetailRow_t3g5z_1357 > strong {
  min-width: 0;

  color: var(--view-value-color);

  font-size: 12px;

  font-weight: 500;

  line-height: 1.5;

  overflow-wrap: anywhere;
}

._vendorViewWebsiteLink_t3g5z_1433 {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  max-width: 100%;

  color: var(--primary-purple-400, #4f46e5);

  text-decoration: none;

  overflow-wrap: anywhere;
}

._vendorViewWebsiteLink_t3g5z_1433:hover {
  text-decoration: underline;
}

/* ======================================================
   ADDRESS GRID
====================================================== */

._vendorViewAddressGrid_t3g5z_1479 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;
}

._vendorViewAddressSection_t3g5z_1495 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 9px;
}

._vendorViewAddressSectionTitle_t3g5z_1513 {
  min-height: 28px;

  display: flex;
  align-items: center;

  gap: 7px;

  color: var(--primary-purple-400, #4f46e5);
}

._vendorViewAddressSectionTitle_t3g5z_1513 strong {
  color: var(--view-value-color);

  font-size: 12px;

  font-weight: 600;
}

._vendorViewAddressSectionTitle_t3g5z_1513 span {
  min-width: 19px;
  height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 5px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 9px;

  font-weight: 600;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;
}

._vendorViewAddressCard_t3g5z_1593,
._vendorViewFullAddressCard_t3g5z_1595 {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding: 11px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--view-border);

  border-radius: 7px;

  transition:
    border-color 0.12s,
    background 0.12s;
}

._vendorViewAddressCard_t3g5z_1593:hover,
._vendorViewFullAddressCard_t3g5z_1595:hover {
  background: var(--hover-bg, #fafafe);

  border-color: var(--primary-purple-300, #aaa6f5);
}

._vendorViewAddressNumber_t3g5z_1647 {
  width: 25px;
  height: 25px;

  min-width: 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10px;

  font-weight: 700;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 6px;
}

._vendorViewAddressContent_t3g5z_1689 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}

._vendorViewAddressContent_t3g5z_1689 strong {
  color: var(--view-value-color);

  font-size: 11px;

  font-weight: 600;
}

._vendorViewAddressContent_t3g5z_1689 span {
  color: var(--view-text, var(--view-value-color));

  font-size: 10.5px;

  line-height: 1.45;

  overflow-wrap: anywhere;
}

._vendorViewAddressContent_t3g5z_1689 small {
  color: var(--view-muted);

  font-size: 9.5px;
}

._vendorViewAddressTabGrid_t3g5z_1755 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px;
}

._vendorViewAddressList_t3g5z_1771 {
  display: flex;
  flex-direction: column;

  gap: 9px;

  margin-top: 9px;
}

/* ======================================================
   EMPTY
====================================================== */

._vendorViewEmptyBox_t3g5z_1797 {
  min-height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px;

  color: var(--view-muted);

  font-size: 11px;

  text-align: center;

  background: var(--hover-bg, #fafafe);

  border: 1px dashed var(--view-border);

  border-radius: 7px;
}

/* ======================================================
   CONTACTS
====================================================== */

._vendorViewContactsGrid_t3g5z_1849 {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;
}

._vendorViewContactCard_t3g5z_1865 {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  padding: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--view-border);

  border-radius: 8px;
}

._vendorViewContactAvatar_t3g5z_1895 {
  width: 36px;
  height: 36px;

  min-width: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 8px;
}

._vendorViewContactContent_t3g5z_1929 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}

._vendorViewContactContent_t3g5z_1929 strong {
  color: var(--view-value-color);

  font-size: 12px;

  font-weight: 600;
}

._vendorViewContactContent_t3g5z_1929 > span {
  color: var(--view-muted);

  font-size: 10px;
}

._vendorViewContactContent_t3g5z_1929 a {
  min-width: 0;

  display: inline-flex;
  align-items: center;

  gap: 6px;

  color: var(--view-text, var(--view-value-color));

  font-size: 10px;

  text-decoration: none;

  overflow-wrap: anywhere;
}

._vendorViewContactContent_t3g5z_1929 a:hover {
  color: var(--primary-purple-400, #4f46e5);
}

/* ======================================================
   BANK DETAILS
====================================================== */

._vendorViewBankBox_t3g5z_2025,
._vendorViewBankLarge_t3g5z_2027 {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 14px;

  background: var(--hover-bg, #fafafe);

  border: 1px solid var(--view-border);

  border-radius: 8px;
}

._vendorViewBankIcon_t3g5z_2057,
._vendorViewBankIconLarge_t3g5z_2059 {
  width: 40px;
  height: 40px;

  min-width: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--primary-purple-400, #4f46e5);

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 8px;
}

._vendorViewBankDetails_t3g5z_2093 {
  flex: 1;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 13px 25px;
}

._vendorViewBankDetails_t3g5z_2093 > div,
._vendorViewBankLargeGrid_t3g5z_2115 > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

._vendorViewBankDetails_t3g5z_2093 span,
._vendorViewBankLargeGrid_t3g5z_2115 span {
  color: var(--view-muted);

  font-size: 10px;
}

._vendorViewBankDetails_t3g5z_2093 strong,
._vendorViewBankLargeGrid_t3g5z_2115 strong {
  color: var(--view-value-color);

  font-size: 11.5px;

  font-weight: 500;

  overflow-wrap: anywhere;
}

._vendorViewBankLargeGrid_t3g5z_2115 {
  flex: 1;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 20px 35px;
}

/* ======================================================
   REMARK / NOTE
====================================================== */

._vendorViewNote_t3g5z_2197 {
  min-height: 50px;

  display: flex;
  align-items: flex-start;

  gap: 10px;

  padding: 11px 12px;

  color: var(--view-text, var(--view-value-color));

  font-size: 12px;

  line-height: 1.6;

  background: var(--hover-bg, #fafafe);

  border: 1px solid var(--view-border);

  border-radius: 7px;
}

._vendorViewNote_t3g5z_2197 svg {
  margin-top: 2px;

  flex-shrink: 0;

  color: var(--primary-purple-400, #4f46e5);
}

/* ======================================================
   SIDEBAR SUMMARY
====================================================== */

._vendorViewSummaryList_t3g5z_2267 {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

._vendorViewSummaryList_t3g5z_2267 > div {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.25fr);

  gap: 14px;

  align-items: start;
}

._vendorViewSummaryList_t3g5z_2267 span {
  color: var(--view-muted);

  font-size: 11px;
}

._vendorViewSummaryList_t3g5z_2267 strong {
  min-width: 0;

  color: var(--view-value-color);

  font-size: 11px;

  font-weight: 500;

  text-align: right;

  overflow-wrap: anywhere;
}

._vendorViewSummaryStatus_t3g5z_2345 {
  display: inline-flex;

  align-items: center;

  justify-content: flex-end;

  gap: 7px;
}

._vendorViewSummaryStatus_t3g5z_2345 i {
  width: 6px;
  height: 6px;

  display: inline-block;

  flex-shrink: 0;

  border-radius: 50%;
}

._activeDot_t3g5z_2387 {
  background: var(--vstatus-confirmed-color, #1fc16b);
}

._inactiveDot_t3g5z_2395 {
  background: var(--vstatus-cancelled-color, #fb3748);
}

/* ======================================================
   SIDEBAR INFO
====================================================== */

._vendorViewInfoList_t3g5z_2411 {
  display: flex;
  flex-direction: column;

  gap: 12px;
}

._vendorViewInfoList_t3g5z_2411 > div {
  min-width: 0;

  display: grid;

  grid-template-columns:
    17px
    minmax(55px, auto)
    minmax(0, 1fr);

  align-items: center;

  gap: 7px;
}

._vendorViewInfoList_t3g5z_2411 svg {
  color: var(--primary-purple-400, #4f46e5);
}

._vendorViewInfoList_t3g5z_2411 span {
  color: var(--view-muted);

  font-size: 10.5px;
}

._vendorViewInfoList_t3g5z_2411 strong {
  min-width: 0;

  color: var(--view-value-color);

  font-size: 10.5px;

  font-weight: 500;

  text-align: right;

  overflow-wrap: anywhere;
}

/* ======================================================
   MINI ADDRESS
====================================================== */

._vendorViewMiniAddress_t3g5z_2511 {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  margin-top: 12px;

  padding: 9px 10px;

  color: var(--view-text, var(--view-value-color));

  font-size: 10px;

  line-height: 1.45;

  background: var(--hover-bg, #fafafe);

  border: 1px solid var(--view-border);

  border-radius: 7px;
}

._vendorViewMiniAddress_t3g5z_2511 svg {
  flex-shrink: 0;

  margin-top: 1px;

  color: var(--primary-purple-400, #4f46e5);
}

/* ======================================================
   BACK LINK
====================================================== */

._vendorViewBackLink_t3g5z_2581 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 4px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 11px;

  text-decoration: none;
}

._vendorViewBackLink_t3g5z_2581:hover {
  text-decoration: underline;
}

/* ======================================================
   LOADING / ERROR
====================================================== */

._loadingState_t3g5z_2629 {
  min-height: 300px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--view-muted);

  font-size: 12px;
}

._errorState_t3g5z_2653 {
  min-height: 300px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 16px;

  text-align: center;
}

._errorMessage_t3g5z_2681 {
  color: var(--vstatus-cancelled-color, #dc2626);

  font-size: 12px;
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1180px) {
  ._vendorViewStats_t3g5z_819 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ._vendorViewLayout_t3g5z_981 {
    grid-template-columns: 1fr;
  }

  ._vendorViewSide_t3g5z_1007 {
    display: grid;

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

  ._vendorViewBackLink_t3g5z_2581 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 950px) {
  ._vendorViewDetailGrid_t3g5z_1341 {
    grid-template-columns: 1fr;
  }

  ._vendorViewDetailFull_t3g5z_1385 {
    grid-column: auto;
  }

  ._vendorViewAddressGrid_t3g5z_1479,
  ._vendorViewAddressTabGrid_t3g5z_1755,
  ._vendorViewContactsGrid_t3g5z_1849 {
    grid-template-columns: 1fr;
  }

  ._vendorViewBankDetails_t3g5z_2093,
  ._vendorViewBankLargeGrid_t3g5z_2115 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  ._vendorViewHeader_t3g5z_39 {
    flex-direction: column;
  }

  ._vendorViewHeaderActions_t3g5z_497 {
    width: 100%;

    padding-top: 0;
  }

  ._vendorViewSide_t3g5z_1007 {
    grid-template-columns: 1fr;
  }

  ._vendorViewTabsCard_t3g5z_1053 {
    overflow-x: auto;
  }

  ._vendorViewTab_t3g5z_1053 {
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  ._vendorViewPage_t3g5z_9 {
    padding: 10px;
  }

  ._vendorViewStats_t3g5z_819 {
    grid-template-columns: 1fr;
  }

  ._vendorViewHeaderLeft_t3g5z_59 {
    width: 100%;
  }

  ._vendorViewTitleRow_t3g5z_213 h1 {
    font-size: 22px;
  }

  ._vendorViewTitleIcon_t3g5z_227 {
    width: 34px;
    height: 34px;

    min-width: 34px;
  }

  ._vendorViewHeaderActions_t3g5z_497 {
    display: grid;

    grid-template-columns: 1fr 1fr;
  }

  ._vendorViewBtn_t3g5z_523 {
    width: 100%;
  }

  ._vendorViewMoreBtn_t3g5z_621 {
    width: 100%;
  }

  ._vendorViewDetailRow_t3g5z_1357 {
    grid-template-columns: 1fr;

    gap: 5px;
  }

  ._vendorViewDetailRow_t3g5z_1357 > strong {
    text-align: left;
  }

  ._vendorViewBankBox_t3g5z_2025,
  ._vendorViewBankLarge_t3g5z_2027 {
    flex-direction: column;
  }

  ._vendorViewSummaryList_t3g5z_2267 > div {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }

  ._vendorViewSummaryList_t3g5z_2267 strong {
    text-align: right;
  }
}

@media (max-width: 430px) {
  ._vendorViewHeaderActions_t3g5z_497 {
    grid-template-columns: 1fr;
  }

  ._vendorViewHeaderLeft_t3g5z_59 {
    gap: 9px;
  }

  ._vendorViewBackBtn_t3g5z_85 {
    width: 36px;
    height: 36px;

    min-width: 36px;
  }

  ._vendorViewTitleRow_t3g5z_213 h1 {
    font-size: 20px;
  }

  ._vendorViewSubRow_t3g5z_301 {
    font-size: 10.5px;
  }

  ._vendorViewCardBody_t3g5z_1171 {
    padding: 12px;
  }

  ._vendorViewCardHeader_t3g5z_1081 {
    padding: 0 12px;
  }

  ._vendorViewTab_t3g5z_1053 {
    padding: 0 12px;
  }

  ._vendorViewContactCard_t3g5z_1865 {
    padding: 10px;
  }
}

/* ======================================================
   PRINT
====================================================== */

@media print {
  ._vendorViewPage_t3g5z_9 {
    padding: 0;
    background: #ffffff;
  }

  ._vendorViewHeaderActions_t3g5z_497,
  ._vendorViewBackBtn_t3g5z_85,
  ._vendorViewTabsCard_t3g5z_1053,
  ._vendorViewBackLink_t3g5z_2581 {
    display: none !important;
  }

  ._vendorViewLayout_t3g5z_981 {
    display: block;
  }

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

    margin-top: 14px;
  }

  ._vendorViewCard_t3g5z_1051,
  ._vendorViewStatCard_t3g5z_839 {
    box-shadow: none;

    break-inside: avoid;
  }

  ._vendorViewMain_t3g5z_1005 {
    gap: 10px;
  }

  ._vendorViewStats_t3g5z_819 {
    margin-bottom: 10px;
  }
}
._qaPage_h8m4u_1 {
    --cnvPurple: #6c4bf4;
    --cnvPurpleDark: #5636e0;
    --cnvPurple50: #f1eefe;
    --cnvPurple100: #e7e1fd;
    --cnvGreen: #1a9c5f;
    --cnvGreenBg: #e7f8ef;
    --cnvAmber: #b7791f;
    --cnvAmberBg: #fdf3e0;
    --cnvRed: #dc2626;
    --cnvBorder: #e6e7f0;
    --cnvText: #1f2233;
    --cnvMuted: #8a8da3;

    background: #f5f6fb;
    min-height: 100vh;
    padding: 20px 24px 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--cnvText);
}

/* ── header ───────────────────────────────────────── */
._vpageHdr_h8m4u_45 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cnvBorder);
}

._vpageHdrLeft_h8m4u_67 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

._vpageBack_h8m4u_79 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--cnvBorder);
    background: #fff;
    color: var(--cnvText);
    text-decoration: none;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 0.15s, border-color 0.15s;
}

._vpageBack_h8m4u_79:hover {
    background: var(--cnvPurple50);
    border-color: var(--cnvPurple100);
    color: var(--cnvPurple);
}

._vpageBreadcrumb_h8m4u_123 {
    font-size: 12px;
    color: var(--cnvMuted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

._vpageBreadcrumb_h8m4u_123 a {
    color: var(--cnvMuted);
    text-decoration: none;
}

._vpageBreadcrumb_h8m4u_123 a:hover {
    color: var(--cnvPurple);
}

._vpageBreadcrumbSep_h8m4u_159 {
    color: #c7c9d9;
}

._vpageTitle_h8m4u_167 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--cnvText);
    line-height: 1.25;
}

._qaPageSubtitle_h8m4u_183 {
    font-size: 12.5px;
    color: var(--cnvMuted);
    margin: 4px 0 0;
}

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

/* ── buttons ──────────────────────────────────────── */
._vbtn_h8m4u_211 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

._vbtn_h8m4u_211:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

._vbtnOutline_h8m4u_249 {
    background: #fff;
    border-color: var(--cnvBorder);
    color: var(--cnvText);
}

._vbtnOutline_h8m4u_249:hover:not(:disabled) {
    border-color: var(--cnvPurple100);
    background: var(--cnvPurple50);
    color: var(--cnvPurpleDark);
}

._cnIconBtn_h8m4u_273 {
    padding: 7px 9px;
}

._qaBtnConfirm_h8m4u_281 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    background: var(--cnvPurple);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

._qaBtnConfirm_h8m4u_281:hover {
    background: var(--cnvPurpleDark);
}

/* ── status badge / type chip ─────────────────────── */
._statusBadge_h8m4u_323 {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: capitalize;
    background: #eef0f6;
    color: #666a80;
}

._open_h8m4u_347 {
    background: var(--cnvGreenBg);
    color: var(--cnvGreen);
}

._draft_h8m4u_357 {
    background: #eef0f6;
    color: #666a80;
}

._applied_h8m4u_367,
._closed_h8m4u_369 {
    background: var(--cnvPurple100);
    color: var(--cnvPurpleDark);
}

._void_h8m4u_379,
._cancelled_h8m4u_381 {
    background: #fdeaea;
    color: var(--cnvRed);
}

._cnvTypeChip_h8m4u_391 {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cnvPurple100);
    color: var(--cnvPurpleDark);
    white-space: nowrap;
}

/* ── dropdown menu ─────────────────────────────────── */
._cnvDropdownMenu_h8m4u_413 {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: #fff;
    border: 1px solid var(--cnvBorder);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(31, 34, 51, 0.1);
    padding: 6px;
    z-index: 20;
}

._cnvDropdownMenu_h8m4u_413 button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    font-size: 13px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--cnvText);
}

._cnvDropdownMenu_h8m4u_413 button:hover {
    background: var(--cnvPurple50);
    color: var(--cnvPurpleDark);
}

/* ── stat cards ────────────────────────────────────── */
._apptStatCards_h8m4u_481,
._cnvStatCards_h8m4u_483 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

._cnvStatcard_h8m4u_497 {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--cnvBorder);
    border-radius: 12px;
    padding: 14px 16px;
}

._cnvStatcard_h8m4u_497::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    background: var(--cnvPurple100);
}

._cnvStatcard_h8m4u_497._green_h8m4u_535::before {
    background: var(--cnvGreenBg);
}

._cnvStatcard_h8m4u_497._amber_h8m4u_543::before {
    background: var(--cnvAmberBg);
}

._cnvStatcard_h8m4u_497._purple_h8m4u_551::before {
    background: var(--cnvPurple100);
}

._cnvStatcardLabel_h8m4u_559 {
    font-size: 11.5px;
    color: var(--cnvMuted);
    margin: 0 0 4px;
    font-weight: 600;
}

._cnvStatcardValue_h8m4u_573 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--cnvText);
}

._emphasize_h8m4u_587 {
    color: var(--cnvGreen);
}

/* ── tabs ──────────────────────────────────────────── */
._cnvTabs_h8m4u_597 {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--cnvBorder);
    margin-bottom: 16px;
}

._cnvTab_h8m4u_597 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cnvMuted);
    cursor: pointer;
}

._cnvTab_h8m4u_597:hover {
    color: var(--cnvPurpleDark);
}

._cnvTab_h8m4u_597._active_h8m4u_649 {
    color: var(--cnvPurple);
    border-bottom-color: var(--cnvPurple);
}

._cnvTabCount_h8m4u_659 {
    font-size: 11px;
    font-weight: 700;
    background: #eef0f6;
    color: var(--cnvMuted);
    border-radius: 999px;
    padding: 1px 7px;
}

._cnvTab_h8m4u_597._active_h8m4u_649 ._cnvTabCount_h8m4u_659 {
    background: var(--cnvPurple100);
    color: var(--cnvPurpleDark);
}

/* ── overview grid / cards ────────────────────────────── */
._qaBody_h8m4u_689._cnvOverviewGrid_h8m4u_689 {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
    align-items: start;
}

._qaCard_h8m4u_703 {
    background: #fff;
    border: 1px solid var(--cnvBorder);
    border-radius: 12px;
    overflow: hidden;
}

._qaCardHeader_h8m4u_717 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cnvBorder);
}

._qaCardHeaderTitle_h8m4u_733 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cnvText);
}

._qaCardBody_h8m4u_745 {
    padding: 16px;
}

/* ── preview controls / doc ───────────────────────────── */
._cnvPreviewControls_h8m4u_755 {
    display: flex;
    align-items: center;
    gap: 8px;
}

._cnvZoomBtn_h8m4u_767 {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--cnvBorder);
    background: #fff;
    cursor: pointer;
    color: var(--cnvText);
}

._cnvZoomBtn_h8m4u_767:hover {
    background: var(--cnvPurple50);
    border-color: var(--cnvPurple100);
}

._cnvZoomValue_h8m4u_803 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cnvMuted);
    min-width: 38px;
    text-align: center;
}

._cnvDoc_h8m4u_819 {
    background: #fff;
    padding: 4px 2px 8px;
}

._cnvDocHeader_h8m4u_829 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cnvBorder);
}

._cnvDocLogo_h8m4u_845 {
    font-size: 20px;
    font-weight: 800;
    color: var(--cnvPurple);
    margin: 0;
}

._cnvDocLogoSub_h8m4u_859 {
    font-size: 11px;
    color: var(--cnvMuted);
    margin: 2px 0 0;
}

._cnvDocTitle_h8m4u_871 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin: 0;
    color: var(--cnvText);
}

._cnvDocMetaRow_h8m4u_887 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cnvBorder);
}

._cnvDocMetaLabel_h8m4u_903 {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cnvMuted);
    margin: 0 0 4px;
}

._cnvDocMetaVal_h8m4u_921 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--cnvText);
}

._cnvDocCustomerName_h8m4u_935 {
    font-size: 14px;
    font-weight: 700;
    color: var(--cnvPurple);
    margin: 2px 0 4px;
}

._cnvDocAddress_h8m4u_949 {
    font-size: 12.5px;
    color: var(--cnvMuted);
    margin: 0;
    line-height: 1.5;
    white-space: pre-line;
}

._qaPreviewTable_h8m4u_965 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

._qaPreviewTable_h8m4u_965 thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cnvMuted);
    padding: 8px 6px;
    border-bottom: 1px solid var(--cnvBorder);
}

._qaPreviewTable_h8m4u_965 tbody td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--cnvBorder);
    color: var(--cnvText);
    vertical-align: top;
}

._cnvDocBottom_h8m4u_1013 {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
}

._cnvDocNotes_h8m4u_1027 {
    flex: 1;
    min-width: 0;
}

._cnvDocSectionLabel_h8m4u_1037 {
    font-size: 12px;
    font-weight: 700;
    color: var(--cnvPurple);
    margin: 0 0 4px;
}

._cnvDocText_h8m4u_1051 {
    font-size: 12.5px;
    color: var(--cnvText);
    line-height: 1.5;
    margin: 0;
}

._cnvDocTotals_h8m4u_1065 {
    width: 260px;
    flex-shrink: 0;
}

._riTotalLine_h8m4u_1075 {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--cnvText);
    padding: 6px 0;
}

._riTotalGrand_h8m4u_1091 {
    font-weight: 800;
    font-size: 15px;
    border-top: 1px solid var(--cnvBorder);
    margin-top: 4px;
    padding-top: 10px;
}

._cnvDocRemaining_h8m4u_1107 {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--cnvGreen);
    margin-top: 6px;
}

/* ── sidebar: summary / progress / attachments / activity ─ */
._cnvSummaryRow_h8m4u_1127 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    padding: 6px 0;
}

._cnvSummaryLabel_h8m4u_1143 {
    color: var(--cnvMuted);
}

._cnvSummaryVal_h8m4u_1151 {
    font-weight: 600;
    color: var(--cnvText);
}

._cnvSummaryVal_h8m4u_1151._green_h8m4u_535 {
    color: var(--cnvGreen);
}

._rtLinkText_h8m4u_1169 {
    font-weight: 600;
    color: var(--cnvPurple);
    cursor: pointer;
}

._rtLinkText_h8m4u_1169:hover {
    text-decoration: underline;
}

._cnvProgressTrack_h8m4u_1189 {
    width: 100%;
    height: 6px;
    background: #eef0f6;
    border-radius: 999px;
    overflow: hidden;
}

._cnvProgressFill_h8m4u_1205 {
    height: 100%;
    background: var(--cnvPurple);
    border-radius: 999px;
    transition: width 0.2s;
}

._cnvProgressCaption_h8m4u_1219 {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--cnvMuted);
    margin-top: 6px;
}

._cnvAttachmentRow_h8m4u_1235 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--cnvBorder);
    font-size: 12.5px;
}

._cnvAttachmentRow_h8m4u_1235:last-child {
    border-bottom: none;
}

._cnvAttachmentInfo_h8m4u_1261 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

._cnvAttachmentInfo_h8m4u_1261 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

._cnvAttachmentSize_h8m4u_1287 {
    color: var(--cnvMuted);
    flex-shrink: 0;
}

._cnvAttachmentActions_h8m4u_1297 button {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--cnvMuted);
    padding: 4px;
    border-radius: 6px;
}

._cnvAttachmentActions_h8m4u_1297 button:hover {
    color: var(--cnvPurple);
    background: var(--cnvPurple50);
}

._cnvActivityRow_h8m4u_1325 {
    display: flex;
    gap: 10px;
    padding: 8px 0;
}

._cnvActivityDot_h8m4u_1337 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cnvPurple);
    margin-top: 5px;
    flex-shrink: 0;
}

._cnvActivityText_h8m4u_1355 {
    font-size: 12.5px;
    color: var(--cnvText);
    margin: 0;
}

._cnvActivityTime_h8m4u_1367 {
    font-size: 11px;
    color: var(--cnvMuted);
    margin: 2px 0 0;
}

/* ── tab list placeholders ─────────────────────────────── */
._cnvList_h8m4u_1381 {
    display: flex;
    flex-direction: column;
}

._cnvListRow_h8m4u_1391 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--cnvBorder);
    font-size: 13px;
    color: var(--cnvText);
}

._cnvListRow_h8m4u_1391:last-child {
    border-bottom: none;
}

/* ── loading spinner ───────────────────────────────────── */
._spinnerBorder_h8m4u_1421 {
    width: 2rem;
    height: 2rem;
    border: 0.25rem solid var(--cnvPurple100);
    border-right-color: var(--cnvPurple);
    border-radius: 50%;
    animation: _cnvSpin_h8m4u_1 0.75s linear infinite;
}

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

/* ── refund modal ──────────────────────────────────────── */
._refundModalOverlay_h8m4u_1453 {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 34, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

._refundModal_h8m4u_1453 {
    width: 420px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(20, 22, 34, 0.25);
}

._refundModalHeader_h8m4u_1493 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cnvBorder);
}

._refundModalHeader_h8m4u_1493 h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cnvText);
}

._refundModalClose_h8m4u_1523 {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--cnvMuted);
    padding: 4px;
    border-radius: 6px;
}

._refundModalClose_h8m4u_1523:hover {
    background: var(--cnvPurple50);
    color: var(--cnvPurple);
}

._refundModalBody_h8m4u_1551 {
    padding: 18px 20px;
}

._refundModalInfo_h8m4u_1559 {
    font-size: 12.5px;
    color: var(--cnvMuted);
    background: var(--cnvPurple50);
    padding: 10px 12px;
    border-radius: 8px;
    margin: 0 0 16px;
    line-height: 1.6;
}

._refundFormGroup_h8m4u_1579 {
    margin-bottom: 14px;
}

._refundFormGroup_h8m4u_1579 label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cnvText);
    margin-bottom: 5px;
}

._refundFormGroup_h8m4u_1579 label span {
    color: var(--cnvRed);
}

._refundInput_h8m4u_1611,
._refundSelect_h8m4u_1613,
._refundTextarea_h8m4u_1615 {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--cnvBorder);
    border-radius: 8px;
    color: var(--cnvText);
    background: #fff;
    box-sizing: border-box;
}

._refundInput_h8m4u_1611:focus,
._refundSelect_h8m4u_1613:focus,
._refundTextarea_h8m4u_1615:focus {
    outline: none;
    border-color: var(--cnvPurple);
}

._refundInput_h8m4u_1611._error_h8m4u_1651,
._refundSelect_h8m4u_1613._error_h8m4u_1651 {
    border-color: var(--cnvRed);
}

._refundTextarea_h8m4u_1615 {
    resize: vertical;
}

._refundError_h8m4u_1669 {
    display: block;
    font-size: 11.5px;
    color: var(--cnvRed);
    margin-top: 4px;
}

._refundModalFooter_h8m4u_1683 {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--cnvBorder);
}

._refundBtnCancel_h8m4u_1699 {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--cnvBorder);
    background: #fff;
    color: var(--cnvText);
    cursor: pointer;
}

._refundBtnCancel_h8m4u_1699:hover {
    background: #f5f6fb;
}

._refundBtnConfirm_h8m4u_1729 {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: var(--cnvPurple);
    color: #fff;
    cursor: pointer;
}

._refundBtnConfirm_h8m4u_1729:hover {
    background: var(--cnvPurpleDark);
}

._refundBtnConfirm_h8m4u_1729:disabled,
._refundBtnCancel_h8m4u_1699:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {

    ._apptStatCards_h8m4u_481,
    ._cnvStatCards_h8m4u_483 {
        grid-template-columns: repeat(2, 1fr);
    }

    ._qaBody_h8m4u_689._cnvOverviewGrid_h8m4u_689 {
        grid-template-columns: 1fr;
    }

    ._cnvDocBottom_h8m4u_1013 {
        flex-direction: column;
    }

    ._cnvDocTotals_h8m4u_1065 {
        width: 100%;
    }

    ._vpageHdrActions_h8m4u_195 {
        width: 100%;
    }
}

@media (max-width: 600px) {
    ._vpageHdr_h8m4u_45 {
        flex-direction: column;
    }

    ._vpageHdrActions_h8m4u_195 {
        flex-wrap: wrap;
    }
}/* =========================================================
   CREDIT NOTE ADD PAGE
========================================================= */

._creditNoteAddPage_sa8gp_9 {
  width: 100%;
  min-height: 100%;
  background: var(--form-page-bg, #f4f3fb);
  color: var(--text-color, #191919);
}

/* =========================================================
   PAGE HEADER
========================================================= */

._pageHeader_sa8gp_31 {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 14px 24px 12px;
}

._headerLeft_sa8gp_57 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;
}

._backButton_sa8gp_75 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--text-color, #191919);
  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
  border-radius: 7px;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

._backButton_sa8gp_75:hover {
  background: var(--hover-bg, #f7f7fb);
  border-color: #cfd2da;
}

._backButton_sa8gp_75:active {
  transform: scale(0.97);
}

._pageTitle_sa8gp_145 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 20px;
  font-weight: 750;
  line-height: 1.2;
}

._pageSubtitle_sa8gp_165 {
  margin: 3px 0 0;

  color: var(--color-grey, #999999);

  font-size: 11.5px;
  line-height: 1.4;
}

._headerActions_sa8gp_183 {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;
}

/* =========================================================
   HEADER BUTTONS
========================================================= */

._outlineButton_sa8gp_213,
._draftButton_sa8gp_215,
._confirmButton_sa8gp_217 {
  min-height: 35px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 7px 14px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 500;

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease,
    filter 0.15s ease;
}

._outlineButton_sa8gp_213 {
  color: var(--text-color, #191919);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
}

._outlineButton_sa8gp_213:hover:not(:disabled) {
  background: var(--hover-bg, #f7f7fb);
  border-color: #cfd2da;
}

._draftButton_sa8gp_215 {
  color: var(--primary-purple-400, #4f46e5);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--primary-purple-400, #4f46e5);
}

._draftButton_sa8gp_215:hover:not(:disabled) {
  background: var(--primary-purple-100, #f1f0ff);
}

._confirmButton_sa8gp_217 {
  color: #ffffff;

  background: var(--primary-purple-400, #4f46e5);

  border: 1px solid var(--primary-purple-400, #4f46e5);
}

._confirmButton_sa8gp_217:hover:not(:disabled) {
  filter: brightness(0.96);
}

._confirmButton_sa8gp_217:disabled,
._outlineButton_sa8gp_213:disabled,
._draftButton_sa8gp_215:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   CONTENT LAYOUT — MAIN + SIDE COLUMN
========================================================= */

._contentLayout_sa8gp_371 {
  width: 100%;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;

  align-items: start;

  gap: 16px;

  padding: 0 24px 24px;
}

._mainColumn_sa8gp_399 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 16px;
}

._sideColumn_sa8gp_417 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 16px;

  position: sticky;
  top: 16px;
}

/* =========================================================
   COMMON CARD
========================================================= */

._card_sa8gp_449 {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 11px;

  box-shadow: var(--form-card-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

._cardOverflow_sa8gp_477 {
  width: 100%;
  overflow: visible;
}

/* =========================================================
   CARD HEADER
========================================================= */

._cardHeader_sa8gp_495 {
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 16px;

  box-sizing: border-box;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._cardHeaderTitle_sa8gp_527 {
  margin: 0;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  color: var(--text-color, #191919);

  font-size: 13.5px;
  font-weight: 700;

  line-height: 1.3;
}

._summaryHeaderIcon_sa8gp_559 {
  color: var(--primary-purple-400, #4f46e5);
}

/* =========================================================
   CARD BODY
========================================================= */

._cardBody_sa8gp_575 {
  width: 100%;
  box-sizing: border-box;

  padding: 16px;
}

/* =========================================================
   FORM ROWS
========================================================= */

._formRow_sa8gp_597 {
  width: 100%;

  display: grid;

  gap: 12px 18px;

  margin-bottom: 12px;
}

._formRow_sa8gp_597:last-child {
  margin-bottom: 0;
}

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

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

/* =========================================================
   FORM FIELD
========================================================= */

._label_sa8gp_649 {
  display: inline-flex;
  align-items: center;

  gap: 2px;

  margin: 0 0 5px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
  font-weight: 600;

  line-height: 1.3;
}

._label_sa8gp_649 span {
  color: var(--color-red, #fb3748);
}

/* =========================================================
   INPUTS
========================================================= */

._input_sa8gp_697,
._select_sa8gp_699,
._textarea_sa8gp_701 {
  width: 100%;
  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 12px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 7px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

._input_sa8gp_697,
._select_sa8gp_699 {
  min-height: 37px;

  padding: 7px 11px;
}

._textarea_sa8gp_701 {
  min-height: 74px;

  padding: 8px 11px;

  resize: vertical;

  line-height: 1.45;
}

._input_sa8gp_697::placeholder,
._textarea_sa8gp_701::placeholder {
  color: var(--form-input-placeholder, #999999);
}

._input_sa8gp_697:focus,
._select_sa8gp_699:focus,
._textarea_sa8gp_701:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._select_sa8gp_699 {
  cursor: pointer;
}

._input_sa8gp_697:disabled {
  color: var(--color-grey, #999999);

  background: var(--form-page-bg, #f4f3fb);

  cursor: not-allowed;
}

/* =========================================================
   ICON-PREFIXED FIELD WRAPPERS
========================================================= */

._selectWrap_sa8gp_839 {
  position: relative;

  width: 100%;
}

._leadingIcon_sa8gp_851 {
  position: absolute;

  left: 10px;
  top: 50%;

  z-index: 2;

  transform: translateY(-50%);

  color: var(--color-grey, #999999);

  pointer-events: none;
}

._trailingIcon_sa8gp_881 {
  position: absolute;

  right: 10px;
  top: 50%;

  z-index: 2;

  transform: translateY(-50%);

  color: var(--color-grey, #999999);

  pointer-events: none;
}

._inputWithIcon_sa8gp_911 {
  padding-left: 30px !important;
}

._selectWithIcon_sa8gp_919 {
  padding-left: 30px !important;
}

._customerSubtext_sa8gp_927 {
  margin-top: 5px;

  color: var(--color-grey, #999999);

  font-size: 10.5px;

  line-height: 1.4;
}

/* =========================================================
   VALIDATION
========================================================= */

._invalidInput_sa8gp_955 {
  border-color: var(--color-red, #fb3748) !important;
}

._invalidInput_sa8gp_955:focus {
  box-shadow: 0 0 0 3px rgba(251, 55, 72, 0.08) !important;
}

._invalidFeedback_sa8gp_971 {
  display: block;

  margin-top: 4px;

  color: var(--color-red, #fb3748);

  font-size: 10px;

  line-height: 1.3;
}

/* =========================================================
   CUSTOMER SEARCH
========================================================= */

._customerSearchWrap_sa8gp_1003 {
  position: relative;

  width: 100%;
}

/* =========================================================
   CUSTOMER DROPDOWN
========================================================= */

._customerDropdown_sa8gp_1023 {
  position: absolute;

  top: calc(100% + 5px);
  left: 0;
  right: 0;

  z-index: 500;

  max-height: 270px;

  overflow-y: auto;

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #dfe2e8);

  border-radius: 8px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

._customerDropdownClear_sa8gp_1067 {
  padding: 9px 11px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 11px;
  font-weight: 600;

  border-bottom: 1px solid var(--form-border, #eeeeee);

  cursor: pointer;
}

._customerDropdownClear_sa8gp_1067:hover {
  background: var(--primary-purple-100, #f1f0ff);
}

._customerDropdownItem_sa8gp_1101 {
  padding: 9px 11px;

  border-bottom: 1px solid #f1f1f1;

  cursor: pointer;

  transition: background 0.12s ease;
}

._customerDropdownItem_sa8gp_1101:last-child {
  border-bottom: 0;
}

._customerDropdownItem_sa8gp_1101:hover {
  background: var(--hover-bg, #fafafe);
}

._customerDropdownItemName_sa8gp_1137 {
  overflow: hidden;

  color: var(--text-color, #222222);

  font-size: 11.5px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._customerDropdownItemSub_sa8gp_1161 {
  margin-top: 2px;

  overflow: hidden;

  color: var(--color-grey, #999999);

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._customerDropdownEmpty_sa8gp_1187 {
  padding: 18px 12px;

  color: var(--color-grey, #999999);

  font-size: 11px;

  text-align: center;
}

/* =========================================================
   ITEMS CARD
========================================================= */

._itemsCard_sa8gp_1215 {
  width: 100%;

  position: relative;

  z-index: 5;

  overflow: visible;
}

._itemsHeader_sa8gp_1235 {
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 7px 16px;

  box-sizing: border-box;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

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

  gap: 9px;

  min-width: 0;
}

._itemsTitle_sa8gp_1267 {
  margin: 0;

  color: var(--text-color, #191919);

  font-size: 13.5px;
  font-weight: 700;
}

._countBadge_sa8gp_1303 {
  min-width: 20px;
  height: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  color: var(--primary-purple-400, #4f46e5);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #eae9fc);

  border-radius: 999px;

  white-space: nowrap;
}

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

  gap: 8px;
}

._bulkActionButton_sa8gp_1361,
._addItemButton_sa8gp_1363 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 5px 11px;

  font: inherit;
  font-size: 10.5px;
  font-weight: 500;

  border-radius: 7px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

._bulkActionButton_sa8gp_1361 {
  color: var(--text-color, #191919);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);
}

._bulkActionButton_sa8gp_1361:hover {
  background: var(--hover-bg, #f7f7fb);
}

._addItemButton_sa8gp_1363 {
  color: #ffffff;

  background: var(--primary-purple-400, #4f46e5);

  border: 1px solid var(--primary-purple-400, #4f46e5);
}

._addItemButton_sa8gp_1363:hover {
  filter: brightness(0.96);
}

/* =========================================================
   TABLE WRAPPER
========================================================= */

._tableWrap_sa8gp_1471 {
  width: 100%;

  position: relative;

  z-index: 10;

  overflow-x: auto;
  overflow-y: visible;

  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   ITEMS TABLE
========================================================= */

._itemsTable_sa8gp_1505 {
  width: 100%;

  min-width: 760px;

  border-collapse: collapse;

  border-spacing: 0;
}

._itemsTable_sa8gp_1505 th,
._itemsTable_sa8gp_1505 td {
  padding: 8px 10px;

  text-align: left;
  vertical-align: middle;

  border-bottom: 1px solid var(--form-border, #e0e0e0);
}

._itemsTable_sa8gp_1505 th {
  color: var(--color-grey, #8a8f9d);

  font-size: 10.5px;
  font-weight: 600;

  background: var(--form-page-bg, #f7f7fb);

  white-space: nowrap;
}

._itemsTable_sa8gp_1505 td {
  position: relative;

  color: var(--text-color, #191919);

  font-size: 11.5px;
}

._itemsTable_sa8gp_1505 tbody tr:last-child td {
  border-bottom: 0;
}

._itemsTable_sa8gp_1505 tbody tr:hover {
  background: var(--hover-bg, #fafafe);
}

._indexColumn_sa8gp_1599 {
  width: 28px;

  color: var(--color-grey, #999999);

  text-align: center !important;
}

/* =========================================================
   ITEM DETAILS
========================================================= */

._itemDetailsCell_sa8gp_1623 {
  min-width: 220px;
}

._itemDetails_sa8gp_1623 {
  min-width: 200px;

  display: flex;
  align-items: center;

  gap: 9px;
}

._itemImage_sa8gp_1649 {
  width: 32px;
  height: 32px;
  min-width: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #f3f4f6;

  border: 1px solid #eceef2;

  border-radius: 6px;
}

._itemImagePlaceholder_sa8gp_1685 {
  color: #737987;
}

._itemInfo_sa8gp_1693 {
  flex: 1;

  min-width: 0;
}

._itemName_sa8gp_1705 {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: var(--text-color, #222222);

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;

  cursor: pointer;
}

._itemName_sa8gp_1705:hover {
  color: var(--primary-purple-400, #4f46e5);
}

._itemMeta_sa8gp_1749 {
  display: block;

  overflow: hidden;

  color: #8a8f9d;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   PRODUCT SELECTOR
========================================================= */

._productSelector_sa8gp_1783 {
  position: relative;

  width: 100%;
}

._selectProductButton_sa8gp_1795 {
  width: 100%;

  min-width: 190px;
  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding: 7px 10px;

  color: #7b8190;

  font: inherit;
  font-size: 11.5px;

  text-align: left;

  background: #ffffff;

  border: 1px solid #d9dce5;

  border-radius: 7px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._selectProductButton_sa8gp_1795:hover {
  border-color: var(--primary-purple-300, #aaa6f5);
}

._selectProductButtonActive_sa8gp_1871 {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._selectProductContent_sa8gp_1883 {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}

/* =========================================================
   PRODUCT DROPDOWN
========================================================= */

._productDropdown_sa8gp_1909 {
  position: fixed;

  z-index: 999999;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 9px;

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

._productDropdownSearch_sa8gp_1941 {
  padding: 8px;

  background: #ffffff;

  border-bottom: 1px solid #eeeeee;
}

._productSearchWrap_sa8gp_1957 {
  position: relative;

  width: 100%;
}

._productSearchIcon_sa8gp_1969 {
  position: absolute;

  left: 10px;
  top: 50%;

  transform: translateY(-50%);

  color: #9ca3af;

  pointer-events: none;
}

._productSearchInput_sa8gp_1995 {
  width: 100%;
  height: 34px;

  box-sizing: border-box;

  padding: 0 10px 0 32px;

  color: #222222;

  font: inherit;
  font-size: 12px;

  background: #ffffff;

  border: 1px solid #dfe2e8;

  border-radius: 6px;

  outline: none;
}

._productSearchInput_sa8gp_1995::placeholder {
  color: #9ca3af;
}

._productSearchInput_sa8gp_1995:focus {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   PRODUCT LIST
========================================================= */

._productList_sa8gp_2067 {
  max-height: 275px;

  overflow-y: auto;

  overscroll-behavior: contain;
}

._productLoading_sa8gp_2083,
._productError_sa8gp_2085,
._productEmpty_sa8gp_2087 {
  padding: 18px 12px;

  color: #7b8190;

  font-size: 12px;

  text-align: center;
}

._productError_sa8gp_2085 {
  color: #dc2626;
}

._productRetryButton_sa8gp_2115 {
  margin-top: 8px;

  padding: 0;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 12px;
  font-weight: 600;

  background: transparent;

  border: none;

  cursor: pointer;
}

._productRetryButton_sa8gp_2115:hover {
  text-decoration: underline;
}

/* =========================================================
   PRODUCT OPTION
========================================================= */

._productOption_sa8gp_2167 {
  width: 100%;

  min-height: 52px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 8px 10px;

  box-sizing: border-box;

  text-align: left;

  background: #ffffff;

  border: none;
  border-bottom: 1px solid #f1f1f1;

  cursor: pointer;

  transition: background 0.12s ease;
}

._productOption_sa8gp_2167:last-child {
  border-bottom: 0;
}

._productOption_sa8gp_2167:hover {
  background: #fafafe;
}

._productOptionDetails_sa8gp_2235 {
  flex: 1;

  min-width: 0;
}

._productOptionName_sa8gp_2247 {
  display: block;

  overflow: hidden;

  margin-bottom: 2px;

  color: #222222;

  font-size: 12px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._productOptionMeta_sa8gp_2279 {
  display: block;

  overflow: hidden;

  color: #8a8f9d;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

._productOptionPrice_sa8gp_2305 {
  min-width: 65px;

  color: #444444;

  font-size: 11px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   TABLE NUMBER INPUT
========================================================= */

._tableNumberInput_sa8gp_2339 {
  width: 72px;

  min-height: 32px;

  padding: 6px 8px;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 11.5px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

._tableNumberInput_sa8gp_2339:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

._percentSelectWrap_sa8gp_2405 {
  position: relative;

  display: flex;
  align-items: center;
}

._percentSign_sa8gp_2419 {
  margin-left: 4px;

  color: var(--color-grey, #999999);

  font-size: 11px;
}

/* =========================================================
   TABLE SELECT
========================================================= */

._tableSelect_sa8gp_2443 {
  width: 100%;

  min-width: 76px;
  min-height: 32px;

  padding: 6px 8px;

  box-sizing: border-box;

  color: var(--form-input-color, #191919);

  font: inherit;
  font-size: 11px;

  background: var(--form-input-bg, #ffffff);

  border: 1px solid var(--form-input-border, #dee2e6);

  border-radius: 6px;

  outline: none;

  cursor: pointer;
}

._tableSelect_sa8gp_2443:focus {
  border-color: var(--form-border-focus, #4f46e5);

  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

/* =========================================================
   AMOUNT
========================================================= */

._amountCell_sa8gp_2515 {
  width: 100px;

  color: var(--text-color, #191919);

  font-size: 11.5px;
  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

/* =========================================================
   ROW ACTION ICONS
========================================================= */

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

  gap: 6px;
}

._iconButton_sa8gp_2563 {
  width: 28px;
  height: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--color-grey, #737987);

  background: var(--form-bg, #ffffff);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 6px;

  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

._iconButton_sa8gp_2563:hover {
  background: var(--hover-bg, #f7f7fb);

  border-color: #cfd2da;
}

._iconButtonDanger_sa8gp_2627 {
  color: var(--color-red, #fb3748);
}

._iconButtonDanger_sa8gp_2627:hover {
  border-color: var(--color-red, #fb3748);

  background: var(--color-red-light, rgba(251, 55, 72, 0.08));
}

/* =========================================================
   ADD LINE ITEM
========================================================= */

._addLineItemButton_sa8gp_2655 {
  width: 100%;

  min-height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-top: 12px;

  color: var(--primary-purple-400, #4f46e5);

  font: inherit;
  font-size: 11.5px;
  font-weight: 600;

  background: var(--primary-purple-100, #f7f7fd);

  border: 1px dashed var(--primary-purple-300, #c7c4f7);

  border-radius: 7px;

  cursor: pointer;

  transition: background 0.15s ease;
}

._addLineItemButton_sa8gp_2655:hover {
  background: var(--primary-purple-100, #eae9fc);
}

/* =========================================================
   BOTTOM GRID — NOTES + AMOUNT SUMMARY
========================================================= */

._bottomGrid_sa8gp_2731 {
  width: 100%;

  display: grid;

  grid-template-columns: minmax(0, 1fr) 300px;

  align-items: start;

  gap: 16px;
}

._notesColumn_sa8gp_2755 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 16px;
}

/* =========================================================
   AMOUNT SUMMARY CARD
========================================================= */

._amountSummaryCard_sa8gp_2781 {
  min-width: 0;
}

._amountSummaryTitle_sa8gp_2789 {
  display: block;

  margin-bottom: 10px;

  color: var(--text-color, #191919);

  font-size: 13px;
  font-weight: 700;
}

._summaryLine_sa8gp_2811 {
  display: grid;

  grid-template-columns: 1fr auto;

  align-items: center;

  gap: 8px;

  min-height: 32px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;
}

._summaryLine_sa8gp_2811>span:first-child {
  color: var(--color-grey, #737987);
}

._summaryLine_sa8gp_2811>span:last-child {
  color: var(--text-color, #191919);

  font-weight: 600;

  text-align: right;

  white-space: nowrap;
}

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

  gap: 4px;

  justify-self: end;
}

._inlineInput_sa8gp_2889 {
  width: 60px;
  height: 28px;

  box-sizing: border-box;

  padding: 4px 7px;

  color: #252932;

  font: inherit;
  font-size: 11.5px;

  background: #ffffff;

  border: 1px solid #d9dde5;

  border-radius: 6px;

  outline: none;
}

._inlineInput_sa8gp_2889:focus {
  border-color: var(--primary-purple-400, #4f46e5);

  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.08);
}

._inlineSelect_sa8gp_2945 {
  height: 28px;

  box-sizing: border-box;

  padding: 2px 6px;

  color: #252932;

  font: inherit;
  font-size: 10.5px;

  background: #ffffff;

  border: 1px solid #d9dde5;

  border-radius: 6px;

  outline: none;

  cursor: pointer;

  justify-self: end;
}

._summaryDivider_sa8gp_2995 {
  height: 1px;

  margin: 8px 0;

  background: var(--form-border, #e8ebf0);
}

._summaryTotalLine_sa8gp_3011 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  color: var(--text-color, #191919);

  font-size: 14px;
  font-weight: 800;
}

._summaryCreditsLine_sa8gp_3037 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-top: 4px;

  color: var(--color-green, #16a34a);

  font-size: 11.5px;
  font-weight: 700;
}

/* =========================================================
   ATTACH FILES
========================================================= */

._attachDropzone_sa8gp_3075 {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 3px;

  padding: 18px;

  text-align: center;

  background: var(--form-bg, #ffffff);

  border: 1px dashed var(--form-border, #d9dce5);

  border-radius: 11px;
}

._attachIcon_sa8gp_3117 {
  margin-bottom: 4px;

  color: var(--color-grey, #999999);
}

._attachLabel_sa8gp_3129 {
  color: var(--text-color, #191919);

  font-size: 12px;
  font-weight: 600;
}

._attachHelp_sa8gp_3143 {
  color: var(--color-grey, #8a8f9d);

  font-size: 11px;
}

._attachBrowse_sa8gp_3155 {
  color: var(--primary-purple-400, #4f46e5);

  font-weight: 600;

  cursor: pointer;
}

._attachSubHelp_sa8gp_3171 {
  margin-top: 2px;

  color: var(--color-grey, #b0b3bd);

  font-size: 10px;
}

._attachedList_sa8gp_3187 {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 6px;

  margin-top: 10px;
}

._attachedChip_sa8gp_3209 {
  padding: 4px 9px;

  color: var(--text-color, #191919);

  font-size: 10.5px;

  background: var(--form-page-bg, #f4f3fb);

  border: 1px solid var(--form-border, #e0e0e0);

  border-radius: 999px;
}

/* =========================================================
   SIDE COLUMN — SUMMARY LINES
========================================================= */

._summarySideLine_sa8gp_3245 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-height: 30px;

  color: var(--color-grey, #737987);

  font-size: 11.5px;
}

._summarySideLine_sa8gp_3245>span:last-child {
  color: var(--text-color, #191919);

  font-weight: 600;

  text-align: right;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;

  max-width: 60%;
}

._linkValue_sa8gp_3303 {
  color: var(--primary-purple-400, #4f46e5) !important;

  font-weight: 700 !important;
}

._summarySideTotal_sa8gp_3315 {
  color: var(--text-color, #191919);

  font-size: 13px;
  font-weight: 800;
}

._creditAppliedValue_sa8gp_3329 {
  color: var(--color-green, #16a34a) !important;
}

/* =========================================================
   INFO BANNER
========================================================= */

._infoBanner_sa8gp_3345 {
  display: flex;
  align-items: flex-start;

  gap: 7px;

  margin-top: 10px;

  padding: 9px 10px;

  color: #3b5bdb;

  font-size: 10.5px;
  line-height: 1.4;

  background: #eef2ff;

  border: 1px solid #dbe4ff;

  border-radius: 8px;
}

._infoBanner_sa8gp_3345 svg {
  flex-shrink: 0;

  margin-top: 1px;
}

/* =========================================================
   TOGGLE SWITCH
========================================================= */

._toggleSwitch_sa8gp_3409 {
  width: 36px;
  height: 20px;
  flex-shrink: 0;

  position: relative;

  padding: 2px;

  background: #d9dce5;

  border: none;
  border-radius: 999px;

  cursor: pointer;

  transition: background 0.18s ease;
}

._toggleSwitchOn_sa8gp_3447 {
  background: var(--primary-purple-400, #4f46e5);
}

._toggleKnob_sa8gp_3455 {
  display: block;

  width: 16px;
  height: 16px;

  background: #ffffff;

  border-radius: 50%;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

  transform: translateX(0);

  transition: transform 0.18s ease;
}

._toggleSwitchOn_sa8gp_3447 ._toggleKnob_sa8gp_3455 {
  transform: translateX(16px);
}

/* =========================================================
   QUICK TIPS
========================================================= */

._tipsList_sa8gp_3505 {
  margin: 0;

  padding: 0;

  list-style: none;

  display: flex;
  flex-direction: column;

  gap: 9px;
}

._tipsList_sa8gp_3505 li {
  position: relative;

  padding-left: 14px;

  color: var(--form-label-color, #5d5d5d);

  font-size: 11.5px;

  line-height: 1.4;
}

._tipsList_sa8gp_3505 li::before {
  content: "";

  position: absolute;

  left: 0;
  top: 6px;

  width: 5px;
  height: 5px;

  background: var(--primary-purple-400, #4f46e5);

  border-radius: 50%;
}

/* =========================================================
   LOADING
========================================================= */

._loadingContainer_sa8gp_3595 {
  min-height: 400px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px;

  box-sizing: border-box;
}

/* =========================================================
   SCROLLBAR
========================================================= */

._tableWrap_sa8gp_1471::-webkit-scrollbar,
._productList_sa8gp_2067::-webkit-scrollbar,
._customerDropdown_sa8gp_1023::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

._tableWrap_sa8gp_1471::-webkit-scrollbar-track,
._productList_sa8gp_2067::-webkit-scrollbar-track,
._customerDropdown_sa8gp_1023::-webkit-scrollbar-track {
  background: transparent;
}

._tableWrap_sa8gp_1471::-webkit-scrollbar-thumb,
._productList_sa8gp_2067::-webkit-scrollbar-thumb,
._customerDropdown_sa8gp_1023::-webkit-scrollbar-thumb {
  background: #cfd2dc;

  border-radius: 999px;
}

._tableWrap_sa8gp_1471::-webkit-scrollbar-thumb:hover,
._productList_sa8gp_2067::-webkit-scrollbar-thumb:hover,
._customerDropdown_sa8gp_1023::-webkit-scrollbar-thumb:hover {
  background: #b8bbc5;
}

/* =========================================================
   RESPONSIVE — 1180px
========================================================= */

@media (max-width: 1180px) {
  ._contentLayout_sa8gp_371 {
    grid-template-columns: 1fr;

    padding-left: 20px;
    padding-right: 20px;
  }

  ._sideColumn_sa8gp_417 {
    position: static;
  }

  ._bottomGrid_sa8gp_2731 {
    grid-template-columns: 1fr;
  }

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

/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {
  ._pageHeader_sa8gp_31 {
    align-items: flex-start;

    flex-direction: column;
  }

  ._headerActions_sa8gp_183 {
    width: 100%;
  }

  ._contentLayout_sa8gp_371 {
    padding-left: 16px;
    padding-right: 16px;
  }

  ._cols2_sa8gp_625,
  ._cols3_sa8gp_633 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  ._itemsTable_sa8gp_1505 {
    min-width: 720px;
  }
}

/* =========================================================
   RESPONSIVE — 640px
========================================================= */

@media (max-width: 640px) {
  ._pageHeader_sa8gp_31 {
    padding: 12px;
  }

  ._contentLayout_sa8gp_371 {
    padding: 0 12px 16px;
  }

  ._headerLeft_sa8gp_57 {
    width: 100%;

    align-items: flex-start;

    gap: 9px;
  }

  ._pageTitle_sa8gp_145 {
    font-size: 18px;
  }

  ._pageSubtitle_sa8gp_165 {
    font-size: 10.5px;
  }

  ._headerActions_sa8gp_183 {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;
  }

  ._outlineButton_sa8gp_213,
  ._draftButton_sa8gp_215,
  ._confirmButton_sa8gp_217 {
    width: 100%;
  }

  ._cols2_sa8gp_625,
  ._cols3_sa8gp_633 {
    grid-template-columns: 1fr;
  }

  ._cardBody_sa8gp_575 {
    padding: 14px;
  }

  ._itemsHeader_sa8gp_1235 {
    align-items: stretch;

    flex-direction: column;

    padding: 9px 12px;
  }

  ._itemHeaderActions_sa8gp_1347 {
    width: 100%;
  }

  ._bulkActionButton_sa8gp_1361,
  ._addItemButton_sa8gp_1363 {
    width: 100%;
    flex: 1;
  }
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
  /* or "Urbanist" */
}

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #191919;

  --primary-purple-500: #2219b3;
  --primary-purple-400: #4f46e5;
  --primary-purple-300: #7f79ec;
  --primary-purple-200: #d4d2f9;
  --primary-purple-100: #eae9fc;
  --secondary-color: rgb(79, 70, 229, 0.1);
  --accent-color: #606060;
  --border-color: #e0e0e0;
  --card-bg: #f4f3fb;
  --link-color: #0d47a1;
  --hover-bg: #f1f1f1;
  --input-bg: #ffffff;
  --input-border: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --input-text: #999999;
  --color-red: #fb3748;
  --color-red-light: #fb37481a;
  --color-yellow: #dfb400;
  --color-yellow-light: rgba(255, 219, 67, 0.1);
  --color-red-light: #fb37481a;
  --color-blue: rgba(79, 146, 255, 1);
  --color-blue-light: rgba(44, 88, 160, 0.1);
  --color-grey: #999999;
  --color-neutral: #333333;
  --color-green: #1fc16b;
  --color-green-light: #e6fbf0;
  --color-neutral-300: #fafafa;
  --color-neutral-400: #eeeeee;
  --color-neutral-500: #c0c0c0;
  --color-neutral-500: #c0c0c0;
  --color-neutral-700: #5d5d5d;
  --color-neutral-800: #3f3f3f;
  --color-grey-close: #6c757d;
  --color-orange: #ff6f00;
  --color-orange-light: #fff3e0;
  --color-gray-dark: #555;
  --color-gray-light: #f2f2f2;
  --color-teal: #008080;
  --color-teal-light: #e0f7f7;
  --color-pink: #d63384;
  --color-pink-light: #fce4ec;
  --color-indigo: #6610f2;
  --color-indigo-light: #ede7f6;
  --color-brown: #6d4c41;
  --color-brown-light: #efebe9;
  --color-cyan: #17a2b8;
  --color-cyan-light: #e0f7fa;
  --color-table-bg: #363636;
  --general-color: #e6f5fc;
  --success-modal: #28a745;
  --success-modal-hover: #06611b;
  --success-modal-btn-hover: #003b19;
}

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;

  --primary-purple-500: #7f79ec;
  --primary-purple-400: #a6a2f5;
  --primary-purple-300: #c2c0fa;
  --primary-purple-200: #dcdafc;
  --primary-purple-100: #eae9fc;

  --secondary-color: rgba(127, 121, 236, 0.1);
  --accent-color: #a6a2f5;
  --border-color: #333333;
  --card-bg: #1e1e1e;
  --link-color: #a6baff;
  --hover-bg: #1a1a1a;
  --input-bg: #1c1c1c;
  --input-border: #444444;
  --shadow-color: rgba(0, 0, 0, 0.5);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition:
    background 0.3s,
    color 0.3s;
}

/* Loader Start  */

.fs-7 {
  font-size: 12px;
}

.lds-ellipsis-container {
  min-height: 100vh;
}

.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-purple-400);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* Loader End  */

/* Login Start  */

.login-container {
  background-color: var(--secondary-color);
}

.authTitle {
  color: var(--text-color);
  font-family: "Urbanist";
  font-weight: 700;
  font-size: 34px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
}

.authTitle1 {
  color: var(--text-color);
  font-family: "Urbanist";
  font-weight: 700;
  font-size: 25px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
}

.authText {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: center;
  color: var(--accent-color);
}

.inputLable {
  font-family: "Urbanist";
  font-weight: 500;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--primary-purple-400);
}

.text-danger {
  font-size: 12px;
}

.form-control:focus {
  box-shadow: 0 0 0 0.25rem var(--secondary-color);
  border-color: var(--primary-purple-400);
}

.form-control {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0px;
  color: var(--text-color) !important;
}

.form-select:focus {
  box-shadow: 0 0 0 0.25rem var(--secondary-color);
  border-color: var(--primary-purple-400);
}

.form-select {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0px;
  color: var(--color-neutral) !important;
}

.form-file:focus {
  box-shadow: 0 0 0 0.25rem var(--secondary-color);
  border-color: var(--primary-purple-400);
}

.form-file {
  padding: 12px 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0px;
  color: var(--input-text) !important;
}

.login-container .input-group-text {
  background-color: var(--bg-color);
}

.primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Urbanist", sans-serif;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 14px;
  color: var(--bg-color) !important;
  background-color: var(--primary-purple-400) !important;
  border: 1px solid var(--primary-purple-400) !important;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Hover State */
.primaryButton:hover {
  background-color: var(--primary-purple-500) !important;
  border-color: var(--primary-purple-500) !important;
  color: var(--bg-color) !important;
}

/* Active (click) State */
.primaryButton:active {
  background-color: var(--primary-purple-300) !important;
  border-color: var(--primary-purple-300) !important;
  transform: scale(0.98);
}

/* Focus State */
.primaryButton:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-purple-200);
}

/* Disabled State */
.primaryButton:disabled {
  background-color: var(--primary-purple-100);
  border-color: var(--primary-purple-100);
  color: var(--input-text);
  cursor: not-allowed;
  opacity: 0.7;
}

.linkText {
  font-family: "Urbanist", sans-serif;
  font-weight: 500 !important;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0px;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  color: var(--text-color);
}

.linkSubText {
  font-family: "Urbanist";
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0px;
  text-align: right;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  color: var(--input-text);
}

.textTerms {
  font-family: "Urbanist";
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0px;
  text-align: center;
  color: var(--input-text);
}

/* Login End  */

/* Top Bar Start */
.topBar {
  background-color: var(--primary-purple-100);
}

.logoText {
  font-weight: 600;
  font-family: "Urbanist";
  font-size: 24px;
}

.topBar .navbar-expand .navbar-nav .nav-link {
  padding: 0px !important;
}

/* Remove dropdown caret */
.no-caret-dropdown .dropdown-toggle::after {
  display: none !important;
}

.iconContainer {
  gap: 10px;
  border-radius: 5px;
  padding: 10px 10px;
  background-color: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  cursor: pointer;
}

.iconContainer:hover {
  box-shadow: var(--shadow-color) 0px 7px 7px 0px;
}

.iconBackground {
  background-color: var(--bg-color);
}

.dropdownMenu {
  font-size: 14px;
  font-family: "Urbanist";
}

.dropdownLogoutMenu {
  color: var(--color-red);
  font-size: 14px;
  font-family: "Urbanist";
}

.dropdownLogoutMenu:hover {
  background-color: var(--color-red-light);
  color: var(--color-red);
}

/* Page Start  */
.home-content {
  background: var(--card-bg);
}

/* Page End  */

/* Master Data Start */
.capitalizeFirstLetter::first-letter {
  text-transform: uppercase;
}

.ql-toolbar.ql-snow {
  border-radius: 5px;
  border-color: var(--input-border) !important;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-radius: 5px;
  border-color: var(--input-border) !important;
}

.masterHeading {
  font-family: "Urbanist";
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--text-color);
}

.masterHeading1 {
  font-family: "Urbanist";
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--primary-purple-400);
}

.masterText {
  font-family: "Plus Jakarta Sans";
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--color-grey);
}

.masterSubText {
  font-family: "Urbanist";
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--accent-color);
}

.form-check-input:checked {
  background-color: var(--primary-purple-400);
  border: var(--primary-purple-400);
}

.masterCardText {
  font-family: "Urbanist";
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--color-neutral);
}

.masterCardNumber {
  font-family: "Urbanist";
  font-weight: 700;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--color-neutral);
}

.masterCardNumber1 {
  font-family: "Urbanist";
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--color-neutral);
}

.masterPercentage {
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  font-size: 8px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  border: 1px solid var(--color-green);
  background-color: var(--color-green-light);
  color: var(--color-green);
  border-radius: 10px;
  padding: 3px;
}

.tableHeading {
  font-family: "Urbanist";
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0%;
  color: var(--color-neutral);
  margin-bottom: 0px;
  margin-left: 15px;
}

.css-1hoqul-MuiPaper-root {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  border-radius: 10px !important;
}

.tableMainText {
  font-family: "Urbanist";
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0%;
  color: var(--color-neutral);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

.tableSecondaryText1 {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0px;
  color: var(--color-neutral);
  display: inline-block;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tableSubText {
  font-family: "Urbanist";
  font-weight: 600;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--color-neutral-700);
}

.letterIcon {
  font-family: "Urbanist";
  font-weight: 500;
  font-size: 18px;
  width: 30px;
  height: 30px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: var(--primary-purple-200);
  background-color: var(--primary-purple-300);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.letterIcon1 {
  font-family: "Urbanist";
  font-weight: 500;
  font-size: 12px;
  width: 20px;
  height: 20px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: var(--primary-purple-200);
  background-color: var(--primary-purple-300);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}

.tableActionIcon {
  width: 26px;
  /* height: 26px; */
  border-radius: 6px;
  background-color: #faf8f8;
  border: 1px solid #0000001e;
  color: #0000004e;
  display: flex;
  align-items: center;
  padding: 6px;
  justify-content: center;
}

.tableActionIcon:hover {
  background-color: #f348482f;
}

.MuiBox-root .css-1p0wbhh {
  display: none;
}

/* Master Data End  */

/* Master Lead Add Start */
@media (min-width: 1025px) {
  .discard-btn::after {
    content: "Discard Changes";
    margin-left: 6px;
    display: inline-block;
    font-weight: 600;
  }
}

.discard-btn {
  background-color: var(--color-red-light);
  color: var(--color-red);
  font-size: 12px;
}

.discard-btn:hover {
  background-color: var(--color-red);
  color: var(--input-bg);
}

.save-btn {
  background-color: var(--primary-purple-400) !important;
  padding: 6px 9px;
  color: var(--bg-color) !important;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--primary-purple-400) !important;
}

.add-btn {
  background-color: var(--primary-purple-400) !important;
  padding: 6px 9px;
  color: var(--bg-color) !important;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--primary-purple-400);
}

.add-btn svg {
  margin-bottom: 2px;
}

a .add-btn svg {
  margin-bottom: 1px !important;
}

.add-btn:hover,
.add-btn:active {
  background-color: var(--primary-purple-500) !important;
  color: var(--primary-purple-100) !important;
}

.parent-class {
  overflow: visible !important;
  position: relative;
  z-index: 0;
}

.phone-input-container {
  width: 100%;
  position: relative;
  z-index: 1;
}

.phone-input-container .special-label {
  display: none;
}

.phone-input-container .flag-dropdown {
  position: absolute;
  left: 0;
  z-index: 1050;
}

.phone-input-container .country-list {
  position: absolute !important;
  padding: 10px;
  top: 100% !important;
  left: 0;
  right: 20;
  width: 300px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1051;
  background: var(--bg-color);
  box-shadow: 0 2px 8px #00000026;
  cursor: pointer;
}

/* Optional: improve dropdown scroll appearance */
.phone-input-container .country-list::-webkit-scrollbar {
  width: 6px;
}

.phone-input-container .country-list::-webkit-scrollbar-thumb {
  background-color: #00000033;
  border-radius: 4px;
}

.phone-input-container .country-list .search-box {
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: "Outfit", system-ui;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  outline: none;
}

.phone-input-container .country-list .search .search-emoji {
  display: none;
}

.phone-input-container .country-list .country {
  font-size: 15px;
  font-family: "Outfit", system-ui;
  color: var(--input-text);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.phone-input-container .country-list .country:hover {
  background-color: var(--card-bg);
  color: var(--primary-purple-300);
}

/* Input Field */
.phone-input {
  width: 100% !important;
  height: 35px !important;
  padding-left: 48px !important;
  font-size: 1rem;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  font-family: "Outfit", system-ui;
  box-shadow: none !important;
}

/* .phone-input-container .flag-dropdown {
  top: 18px !important;
} */

/* Hide the flag but keep dropdown button clickable */
.phone-flag-button {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Hide flag image but show dropdown arrow */
.phone-flag-button .flag {
  display: block !important;
}

.phone-flag-button .arrow {
  position: absolute;
  top: 105%;
  transform: translateY(-50%);
  left: 30px;
  width: 0;
  height: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* Master Lead Add End */

/* Master View Start */
.del-btn,
.del-btn:hover,
.del-btn:active {
  background-color: var(--color-red-light) !important;
  padding: 8px 15px;
  color: var(--color-red) !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

.del-btn:hover {
  background-color: var(--color-red) !important;
  padding: 8px 15px;
  color: var(--bg-color) !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

.masterView .nav-tabs .nav-link.active {
  color: var(--primary-purple-400);
  border: 1px solid var(--primary-purple-400);
  background-color: var(--primary-purple-100);
}

.masterView .nav-tabs .nav-link {
  font-family: "Urbanist";
  font-weight: 500;
  color: var(--text-color);
}

.activityText {
  font-family: "Urbanist";
  font-weight: 600;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--color-neutral-700);
}

.two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cancel-btn {
  background-color: var(--primary-purple-100) !important;
  color: var(--primary-purple-300) !important;
  border: 1px solid var(--primary-purple-300) !important;
  padding: 6px !important;
  font-size: 12px;
  font-weight: 600;
}

.back-btn {
  background-color: var(--primary-purple-100) !important;
  padding: 9px;
  color: var(--primary-purple-300) !important;
  font-size: 10px;
  font-weight: 400;
  border: 1px solid var(--primary-purple-300) !important;
}

.back-btn:hover,
.back-btn:active {
  background-color: var(--primary-purple-200) !important;
  padding: 9px;
  color: var(--primary-purple-400) !important;
  font-size: 10px;
  font-weight: 400;
  border: 1px solid var(--primary-purple-400) !important;
}

.back-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-purple-300);
}

.edit-btn,
.edit-btn:active {
  background-color: var(--primary-purple-100) !important;
  padding: 8px 15px;
  color: var(--primary-purple-300) !important;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--primary-purple-300) !important;
}

.edit-btn:hover {
  background-color: var(--primary-purple-400) !important;
  padding: 8px 15px;
  color: var(--primary-purple-100) !important;
  font-size: 14px;
  font-weight: 600;
}

.side-heading {
  color: var(--primary-purple-400);
  margin: 0px;
  font-weight: 600;
  font-size: 18px;
}

.view-heading {
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 400;
}

.view-text {
  color: var(--text-color);
  font-weight: 500;
}

.big-input {
  max-height: 195px;
  overflow: auto;
}

.modal-big-input {
  max-height: 195px;
  overflow: auto;
  word-break: break-word;
}

/* Master View End */

/* Delete Modal Start */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.close-btn,
.close-btn:hover,
.close-btn:active {
  background-color: var(--color-neutral-400) !important;
  padding: 9px 12px;
  color: var(--color-neutral-800) !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

.modal-del-btn,
.modal-del-btn:hover,
.modal-del-btn:active {
  background-color: var(--color-red) !important;
  /* padding: 9px 12px; */
  color: var(--bg-color) !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

.modal-close-btn {
  position: absolute;
  top: 2px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-grey-close);
}

.delText {
  color: var(--color-red);
  font-size: 20px;
}

.modalHeading {
  font-size: 20px;
  font-weight: 600;
}

.modalText {
  font-size: 14px;
  color: var(--accent-color);
}

.deleteModal .modal-header {
  border-bottom: none;
  padding: 0px;
}

.deleteModal .modal-header .btn-close {
  margin-right: 15px !important;
  font-size: 10px;
}

.deleteModal .modal-footer {
  border-top: none;
}

/* Delete Modal End */

/* Badge Start  */

.customBadge {
  padding-top: 6px;
  padding-right: 16px;
  padding-bottom: 5px;
  padding-left: 16px;
  border-radius: 10px;
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0%;
}

.yellowBadge {
  background-color: var(--color-yellow-light);
  color: var(--color-yellow);
}

.redBadge {
  background-color: var(--color-red-light);
  color: var(--color-red);
}

.blueBadge {
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

.infoBadge {
  background-color: var(--color-blue-light);
  color: var(--color-blue);
}

.greenBadge {
  background-color: var(--color-green-light);
  color: var(--color-green);
}

.orangeBadge {
  background-color: var(--color-orange-light);
  color: var(--color-orange);
}

.purpleBadge {
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-600);
}

.grayBadge {
  background-color: var(--color-gray-light);
  color: var(--color-gray-dark);
}

.tealBadge {
  background-color: var(--color-teal-light);
  color: var(--color-teal);
}

.pinkBadge {
  background-color: var(--color-pink-light);
  color: var(--color-pink);
}

.indigoBadge {
  background-color: var(--color-indigo-light);
  color: var(--color-indigo);
}

.brownBadge {
  background-color: var(--color-brown-light);
  color: var(--color-brown);
}

.cyanBadge {
  background-color: var(--color-cyan-light);
  color: var(--color-cyan);
}

.blackBadge {
  background-color: #e6e6e6;
  color: #000000;
}

/* Badge End  */

/* Quote Start */
.menu-dropdown {
  text-decoration: none;
}

.accordion_custom {
  font-size: large !important;
}

.accordion_custom:focus {
  box-shadow: none !important;
  font-size: large !important;
}

.accordion-button:not(.collapsed) {
  background: transparent;
  border: none;
}

.accordion-button:not(.collapsed) {
  color: #16192c;
  background-color: transparent;
  box-shadow: inset 0 -1px 0 #e7eaf0;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316192C'%3e%3cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
  transform: rotate(180deg);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23525F7F'%3e%3cpath fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.quoteSection .accordion {
  border: none;
}

.finder_btn:focus {
  box-shadow: none;
}

.save-btn:hover {
  background-color: var(--primary-purple-500) !important;
  color: var(--primary-purple-100) !important;
}

.save-btn {
  background-color: var(--primary-purple-400) !important;
  padding: 9px;
  color: var(--bg-color) !important;
  font-size: 12px;
  font-weight: 600;
}

.table > :not(caption) > * > * {
  background: none;
}

.quoteSection.quote-table-bg {
  background-color: var(--color-table-bg) !important;
  color: var(--bg-color) !important;
}

.table_data {
  font-size: 12px;
}

.total_val {
  background: none;
}

.quoteSection .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316192C'%3e%3cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
  transform: rotate(180deg);
}

.product_listH {
  font-size: 11px !important;
}

.list_item {
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: none;
}

.list_item:hover {
  background: var(--hover-bg);
  cursor: pointer;
}

.list_item.active {
  background: var(--hover-bg);
}

.list-group-item.active {
  color: var(--color-neutral);
}

.inv_dtls {
  font-size: 11px !important;
}

.inv_dt {
  font-size: 13px;
}

.inv_dt p {
  margin-bottom: 0;
}

.btn_foucs {
  box-shadow: none !important;
  border: none !important;
}

.btn_foucs:focus {
  box-shadow: none !important;
  border: none !important;
}

/* .dd_badgess {
  background: none;
  text-align: center;
  color: #fff !important;
}*/
.dd_badgess option {
  background-color: #fff !important;
  color: #000 !important;
}

/* Quote End */

/* Appointment Start */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.custom-tab .nav-link {
  font-weight: 500;
  font-size: 12px;
}

.custom-tab .nav-link.active {
  border: none !important;
  color: var(--primary-purple-400) !important;
  background-color: var(--primary-purple-100) !important;
  border: 1px solid var(--primary-purple-400) !important;
  box-shadow: none;
}

.custom-tab .nav-link {
  border: none !important;
  color: var(--text-color) !important;
}

.view-answer {
  color: var(--primary-purple-500);
  font-size: 14px;
  font-weight: 500;
  padding: 5px;
}

.view-answer:hover {
  cursor: pointer;
  background-color: var(--primary-purple-200);
  border-color: var(--primary-purple-400);
  border-radius: 5px;
  color: var(--primary-purple-400);
  padding: 5px;
}

/* Appointment End */

/* Master Bulk Add Start */
.upload-box {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1.5rem 0;
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed var(--primary-purple-400);
  border-radius: 10px;
}

.upload-instruction {
  color: var(--accent-color);
  margin-bottom: 10px;
}

.select-file-btn {
  background-color: var(--primary-purple-400);
  color: var(--bg-color);
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.hidden-input {
  display: none;
}

.linkTexts {
  color: var(--primary-purple-400);
}

.btnSuccess {
  color: var(--color-green);
  /* Bootstrap success color */
  background-color: var(--color-green-light);
  border: 1px solid var(--color-green);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Hover effect */
.btnSuccess:hover {
  color: #fff;
  background-color: var(--color-green);
  border-color: var(--color-green);
}

/* Active (when clicked) */
.btnSuccess:active,
.btnSuccess.active {
  color: #fff;
  background-color: var(--color-green);
  border-color: var(--color-green);
  box-shadow: 0 0 0 0.2rem var(--color-gray-light);
}

/* Focus (keyboard or mouse focus) */
.btnSuccess:focus {
  color: var(--color-green);
  background-color: transparent;
  border-color: var(--color-green);
  box-shadow: 0 0 0 0.2rem var(--color-gray-light);
  outline: none;
}

/* Disabled state */
.btnSuccess:disabled,
.btnSuccess.disabled {
  color: var(--color-green);
  background-color: transparent;
  border-color: var(--color-green);
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

/* Master Bulk Add End  */

/* Time Slot Start */
/* .Calenderview {
  background-color: var(--primary-purple-400); 
  color: var(--bg-color); 
  font-weight: bold; 
  height: 3rem;
} */
.calenderEdit-icon {
  position: absolute;
  right: 60px;
  top: 4px;
}

.custom-bg-table {
  background-color: var(--primary-purple-300);
}

.cancel-btn {
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-300);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 18px;
  border: 1px solid var(--primary-purple-300);
}

.cancel-btn:hover {
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-300);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 18px;
  border: 1px solid var(--primary-purple-300);
}

/* Time Slot End */

.sticky-add-lead-bar {
  position: sticky;
  top: 0px;
  background-color: var(--card-bg);
  z-index: 1030;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  z-index: 9999;
}

/* Edit Modal Start */
.editModal .modal-header {
  border-bottom: none;
  padding: 0px;
}

.editModal .modal-header .btn-close {
  margin-right: 15px !important;
  font-size: 10px;
}

.editModal .modal-footer {
  border-top: none;
}

.editText {
  color: var(--primary-purple-400);
  font-size: 18px;
}

/* Edit Modal End */
/* Loader for Add and Edit Pages Start */
.loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--primary-purple-400);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Loader for Add and Edit Pages End */

/* Invoive Start */
.invoice-email {
  font-size: small;
}

@media screen and (max-width: 380px) and (min-width: 320px) {
  .invoice-fs-email {
    font-size: 10px !important;
  }
}

.dashed-line {
  border-bottom: 2px dashed var(--accent-color);
}

.invoice-bg-logo {
  background-color: var(--primary-purple-200);
  border-top-left-radius: 90px;
  border-bottom-left-radius: 90px;
  text-align: end;
  padding: 10px 20px 5px 0px;
}

@media screen and (max-width: 576px) and (min-width: 320px) {
  .invoice-bg-logo {
    text-align: end;
  }
}

.invoice-logo {
  height: 80px;
  width: auto;
}

@media screen and (max-width: 440px) and (min-width: 320px) {
  .invoice-logo {
    width: 40%;
  }
}

.pdf_view_font {
  font-size: 11px;
  font-weight: 500;
}

.fd > :not(caption) > * > * {
  border-bottom: 1px solid;
  color: #000;
}

.quote_search:focus {
  box-shadow: none;
}

.delete-btn:focus {
  box-shadow: none;
  outline: none;
}

.dropstart .nav-link {
  display: flex;
  align-items: center;
}

.dropstart .dropdown-toggle::before {
  height: 2px !important;
}

/* Add these styles to your CSS file */
.cursor-pointer {
  cursor: pointer;
}

.info-dropdown {
  max-width: 250px !important;
  z-index: 1000;
  border: none;
  top: 5;
  right: 45px !important;
}

.info-dropdown::before {
  content: "";
  position: absolute;
  top: 16%;
  right: -7px;
  width: 15px;
  height: 15px;
  background: #fff;
  box-shadow: #000000bf;
  transform: rotate(45deg);
  z-index: -1;
}

@media screen and (max-width: 992px) {
  .info-dropdown::before {
    content: none;
  }

  .info-dropdown {
    max-width: 450px !important;
    z-index: 1000;
    border: none;
    top: 0;
    right: 40px !important;
  }
}

/* Invoive End */

.suggestion-item:hover {
  background-color: var(--color-grey);
  color: var(--bg-color);
}

.priceCard {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  cursor: pointer;
}

.priceCard:hover {
  border: 1px solid var(--primary-purple-300) !important;
}

.fiter_placeholder {
  color: #202020 !important;
}

.fiter_placeholder::placeholder {
  color: #202020 !important;
}

/* Suggestions dropdown styles */
.suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 2px;
}

.suggestion-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #eee;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: #f5f5f5;
}

.suggestion-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #eee;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background-color: #f5f5f5;
  color: #000;
}

.modal-download-btn,
.modal-download-btn:hover,
.modal-download-btn:active {
  background-color: var(--primary-purple-400) !important;
  padding: 9px 12px;
  color: var(--primary-purple-100) !important;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

.download-card.selected {
  border: 1px solid var(--primary-purple-500);
}

.download-card:hover {
  background-color: var(--primary-purple-200);
  color: var(--primary-purple-400);
  border: 1px solid var(--primary-purple-500);
}

.decendingArrowBackground {
  background-color: var(--bg-color);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.piplineHeading {
  font-size: 14px;
  font-weight: 600;
}

.success-btn:active,
.success-btn:focus-visible {
  border: 1.5px solid var(--primary-purple-400);
  outline: none;
  color: var(--primary-purple-400);
  background-color: var(--card-bg);
}

.success-btn {
  border: 1.5px solid var(--primary-purple-400);
  color: var(--primary-purple-400);
  background-color: var(--card-bg);
  padding: 7px 10px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
}

@media (max-width: 767px) {
  .success-btn {
    font-size: 12px;
  }

  .success-btn svg {
    margin-bottom: 0px;
  }
}

.success-btn:hover {
  background-color: var(--primary-purple-400);
  color: var(--bg-color);
}

.success-btn:active,
.success-btn:focus-visible {
  border: 1.5px solid var(--primary-purple-400);
  outline: none;
  color: var(--primary-purple-400);
  background-color: var(--card-bg);
}

.successMagnetButton {
  background-color: var(--success-modal) !important;
  color: var(--bg-color) !important;
  position: relative;
}

.successMagnetButton i {
  transition: transform 0.3s ease;
}

.successMagnetButton:hover .back-img {
  color: var(--success-modal-hover);
  transform: translateX(-4px);
}

.successMagnetButton:hover {
  color: var(--success-modal-btn-hover);
}

/* .successHeading {
  color: #fff;
  background-color: var(--primary-purple-400);
  border-radius: 0px;
  font-size: 16px !important;
}

.SuccessMagnetSubHeading {
  color: var(--color-gray-dark);
  font-size: 16px;
  font-weight: 600 !important;
} */

.finBadge {
  background-color: var(--color-green);
  color: var(--bg-color);
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
}

.fs-7 {
  font-size: 0.9rem !important;
}

.fs-8 {
  font-size: 0.8rem !important;
}

.css-8k4lth {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: flex-end;
  position: relative;
  padding: 5px !important;
  z-index: 2;
}

/* Social Media css */
.post-preview-container {
  max-width: 600px;
  margin: 0 auto;
}

.post-preview {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.post-preview .card-header {
  background-color: #f8f9fa;
}

.post-preview .platform-icon .badge {
  padding: 5px 10px;
  font-weight: 600;
}

.post-preview .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.post-preview .card-text {
  font-size: 1rem;
  line-height: 1.5;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.post-preview .media-container {
  text-align: center;
}

.post-preview .media-container img,
.post-preview .media-container video {
  border-radius: 4px;
}

.post-preview .card-footer {
  font-size: 0.875rem;
  background-color: #f8f9fa;
}

.post-preview .card-footer p {
  margin-bottom: 0.5rem;
}

.main-menu-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 5px;
}

/* Responsive code for lead */

.first-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 550px) {
  .first-section {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: start;
  }

  .masterHeading {
    font-family: "Urbanist";
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--text-color);
  }

  .masterText {
    font-family: "Plus Jakarta Sans";
    font-weight: 500;
    font-size: 10px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--color-grey);
  }

  .masterCardText {
    font-family: "Urbanist";
    font-weight: 600;
    font-size: 8px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--color-neutral);
    margin-bottom: 5px !important;
  }

  .masterCardNumber {
    font-family: "Urbanist";
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--color-neutral);
  }

  .masterSubText {
    font-family: "Urbanist";
    font-weight: 600;
    font-size: 11px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--accent-color);
  }

  .card-size {
    height: 50px;
  }

  /* Table content */
  .tableMainText {
    font-family: "Urbanist";
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0%;
    color: var(--color-neutral);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: inline-block;
  }

  .tableSecondaryText,
  .tableSecondaryText1 {
    font-family: "Plus Jakarta Sans";
    font-weight: 400;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0px;
    color: var(--color-neutral);
    display: inline-block;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tableSubText {
    font-family: "Urbanist";
    font-weight: 600;
    font-size: 8px;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--color-neutral-700);
  }

  .letterIcon {
    font-family: "Urbanist";
    font-weight: 500;
    font-size: 18px;
    width: 20px;
    height: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--primary-purple-200);
    background-color: var(--primary-purple-300);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }

  .letterIcon1 {
    font-family: "Urbanist";
    font-weight: 500;
    font-size: 10px;
    width: 20px;
    height: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: var(--primary-purple-200);
    background-color: var(--primary-purple-300);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
  }

  .tableActionIcon {
    width: 25px;
    height: 25px;
    border-radius: 10px;
    background-color: var(--color-neutral-300);
    display: flex;
    align-items: center;
    padding: 6px;
    justify-content: center;
  }

  .main-menu-options {
    display: flex;
    flex-direction: column;
    /* stack items vertically */
    align-items: flex-start !important;
    /* align to left */
    justify-content: flex-start !important;
    width: 100%;
    gap: 8px;
    padding-left: 10px;
  }

  .main-menu-options .navHeaderLink {
    width: 100%;
    justify-content: flex-start !important;
    /* icons + text aligned to left */
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    /* optional, looks cleaner */
    height: 35px;
  }

  .main-menu-options .navHeaderIcon {
    font-size: 18px;
    margin-right: 8px;
  }

  /* Dropdown style fixes for small screens */
  .main-menu-options .dropdownMenu {
    width: 100%;
    text-align: left;
  }

  .col-name {
    width: 50px !important;
  }
}

@media (max-width: 768px) {
  .toolbar-container {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .toolbar-actions {
    justify-content: flex-start !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .toolbar-search-input {
    width: 100% !important;
    max-width: 100%;
  }

  .tableHeading {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .toolbar-actions .MuiIconButton-root {
    padding: 4px !important;
  }

  .tableHeading {
    font-size: 12px !important;
  }
}

/* Event  badge */
.badge-reflect {
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.3),
    inset 0 0 8px rgba(255, 255, 255, 0.2);
  color: #000;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ✨ Reflection shine effect */
.badge-reflect::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ✨ Add shine on hover */
.badge-reflect:hover::after {
  top: -30%;
  left: -10%;
  opacity: 1;
  animation: shineMove 1.2s linear forwards;
}

@keyframes shineMove {
  0% {
    transform: translateX(-150%) rotate(25deg);
  }

  100% {
    transform: translateX(150%) rotate(25deg);
  }
}

.btn-reflect {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #3685fc, #007bff);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

/* Glass glow effect */
.btn-reflect:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(13, 110, 253, 0.4);
}

/* ✨ Reflection streak */
.btn-reflect::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.2) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
}

/* ✨ Shine animation on hover (one time only) */
.btn-reflect:hover::after {
  opacity: 1;
  animation: shineOnce 1s ease forwards;
}

@keyframes shineOnce {
  0% {
    left: -75%;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}

/* ✅ Make cards equal height on all screens */
.row.align-items-stretch {
  display: flex;
  align-items: stretch;
}

/* Ensure equal height even if content is small */
.card.flex-fill {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* On smaller screens, stack naturally */
@media (max-width: 991px) {
  .row.align-items-stretch {
    display: block !important;
  }

  .card.flex-fill {
    height: auto !important;
  }
}

/* ---------- STAT CARDS ---------- */

.stats-card {
  border-radius: 14px;
  border: 1px solid #eee;
  background: var(--bg-color);
  transition: all 0.25s ease;
  padding: 18px;
  text-align: center;
  height: 100%;
  cursor: pointer;
  /* background-color: var(--primary-purple-200); */
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
}

.stats-color-blue {
  color: var(--primary-purple-400);
}

/* Title */
.stats-title {
  color: var(--color-grey);
  font-weight: 500;
  margin-bottom: 6px;
}

/* Number */
.stats-value {
  font-size: 26px;
  font-weight: 700;
}

/* ---------- TOTAL PROCESSED CARD ---------- */

.stats-total-card {
  border-radius: 14px;
  background: var(--primary-purple-400);
  transition: all 0.25s ease;
  padding: 18px;
  text-align: center;
  height: 100%;
  color: var(--bg-color);
  cursor: pointer;
}

.stats-total-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.4);
}

/* ---------- CRM OPTION CARDS ---------- */

.crm-card {
  height: 120px;
  cursor: pointer;
  border: none !important;
  border-radius: 16px !important;
  transition: all 0.25s ease;
}

.crm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.mrt-row-selected {
  background-color: #e8f0fe !important;
  animation: flashHighlight 1s ease;
}

@keyframes flashHighlight {
  from {
    background-color: #cfe0ff;
  }

  to {
    background-color: #e8f0fe;
  }
}

.ai-bot-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}

/* Tooltip (LEFT side) */
.ai-bot-tooltip {
  background-color: #111827;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  max-width: 220px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ai-bot-tooltip button {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}

/* Button + drag hint wrapper */
.ai-bot-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Floating button */
.ai-bot-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #4f46e5;
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-bot-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Drag hint text */
.ai-bot-drag-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  white-space: nowrap;
}

/* Drag cursor feedback */
.ai-bot-container.draggable {
  cursor: grab;
}

.ai-bot-container.draggable:active {
  cursor: grabbing;
}

/* ========== Global Scrollbar ========== */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #e2e2e2 transparent;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 6px;
  /* change if you want thinner */
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #e2e2e2;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #c7c7c7;
}

/* modal add  */
.download-modal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.download-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
}

.download-modal-header .modal-title {
  display: flex;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.modal-close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.download-modal-body {
  padding: 24px;
}

.format-label {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--view-text-light);
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.format-card {
  position: relative;
  padding: 20px 16px;
  background-color: var(--view-bg);
  border: 2px solid var(--view-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
}

.format-card:hover {
  border-color: var(--primary-purple-400);
  background-color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.format-card.selected {
  border-color: var(--primary-purple-500);
  background: linear-gradient(135deg, #f5f0ff 0%, #ffffff 100%);
}

.format-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.format-icon.pdf {
  color: #f40f02;
}

.format-icon.word {
  color: #2b5797;
}

.format-info {
  display: flex;
  flex-direction: column;
}

.format-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--view-text);
  margin-bottom: 2px;
}

.format-size {
  font-size: 11px;
  color: var(--view-muted);
}

.check-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background-color: var(--primary-purple-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 2px solid white;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.modal-btn.cancel {
  background-color: var(--view-bg);
  color: var(--view-text-light);
  border: 1px solid var(--view-border);
}

.modal-btn.cancel:hover:not(:disabled) {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.modal-btn.download {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-width: 140px;
}

.modal-btn.download:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.modal-btn.download:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-btn.cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* modal end  */

/* FULL SCREEN OVERLAY */
.ocr-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 20, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

/* BOX */
.ocr-loader-box {
  text-align: center;
  color: #fff;
  animation: fadeIn 0.3s ease-in-out;
}

/* AI ANIMATION */
.ai-brain {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #4f46e5;
  border-top: 4px solid transparent;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

/* TEXT */
.ocr-loader-box h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.ocr-loader-box p {
  font-size: 14px;
  opacity: 0.7;
}

/* ANIMATIONS */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* OVERLAY */
.ai-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  /* dark blur */
  backdrop-filter: blur(8px);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* CONTENT */
.ai-loader-content {
  text-align: center;
  color: #1e293b;
  background: transparent;
}

/* IMAGE */
.ai-loader-img {
  width: 300px;
  animation: floatBot 2.5s ease-in-out infinite;
}

/* TEXT */
.ai-loader-content h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e293b;
}

.ai-loader-content p {
  font-size: 14px;
  color: #64748b;
}

/* DOT LOADER */
.ai-dots {
  margin-top: 15px;
}

.ai-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: #6366f1;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.ai-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.ai-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

/* ANIMATIONS */
@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

@keyframes floatBot {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* ========================================
   LeadOutreach.css — External Stylesheet
   ======================================== */

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Root Wrapper */
.lo-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #f5f5f3;
  min-height: 100vh;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-size: 13px;
  color: #1a1a1a;
}

/* ========== CARD ========== */
.lo-card {
  background: #ffffff;
  border: 1px solid rgb(240, 240, 240) !important;
  border-radius: 14px;
  /* padding: 30px 30px; */
  padding: 15px;
}

.custom-bgcolor {
  background-color: #f1f5ff;
}

.lo-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left;
  /* padding-left: 0; */
  font-weight: bold;
  border-right: 1px solid rgb(221, 220, 220);
}

.start {
  font-size: 11px;
}

.lo-info-chip {
  margin-bottom: 2px;
  margin-left: 0%;
  /* optional spacing */
}

/* ========== HEADER CARD ========== */
.lo-header-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px !important;
}

.lo-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.lo-small-label {
  font-size: 10px;
  color: rgb(53, 53, 53);
  margin-bottom: 2px;
  font-size: 400;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lo-stage-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #111;
}

.lo-muted1 {
  font-size: 11px;
  color: #181818;
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
}

.lo-muted {
  font-size: 11px;
  color: #181818;
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
  border-right: 1px solid rgb(189, 189, 189);
}

.lo-seq-pill {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  /* flex-wrap: wrap; */
  font-size: 13px;
  font-weight: 500;
}

.lo-seq-meta {
  /* display: flex; */
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.warm-backcolr {
  background-color: rgb(213, 228, 250);
  padding: 5px 10px;
  border-radius: 25px;
  box-shadow: 0 1px 3px 3px rgb(213, 228, 250);
  font-size: 12px;
  font-weight: bold;
}

.lo-info-chip {
  font-size: 10px;
  color: #0a0a0a;
  font-weight: bold;
  display: flex;
  align-items: center;

  /* gap: 4px; */
}

.lo-info-chip strong {
  color: #1a1a1a;
  font-weight: 500;
}

.lo-health-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #639922;
  margin-left: 4px;
}

.lo-seq-pill.row {
  display: flex;
  flex-wrap: nowrap;
  /* force single row */
  align-items: center;
  justify-content: space-between;
  /* spread evenly */
}

/* Override Bootstrap column widths */
.lo-seq-pill .col-1,
.lo-seq-pill .col-2 {
  flex: 1;
  /* all take equal space */
  max-width: none;
  /* remove bootstrap restriction */
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  /* truncate long text */
}

/* Vertical separators */
.lo-seq-pill .col-1 {
  border-right: 1px solid #ddd;
  padding-right: 10px;
  margin-right: 10px;
}

/* ========== SECTION TITLE ========== */
.lo-section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #111;
}

/* ========== BADGES ========== */
.lo-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-blue {
  background: #e6f1fb;
  color: #0e61b4;
}

.badge-green {
  background: #eaf3de;
  color: #3b6d11;
}

.lo-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid rgb(224, 224, 224);
  margin-right: 10px;
}

.lo-seq-pill.row > div {
  border-right: 1px solid #ddd;
  display: flex;
  align-items: center;
  /* vertically center content */
}

/* remove last column border */
.lo-seq-pill.row > div:last-child {
  border-right: none;
}

/* Progress track */
.lo-progress {
  width: 60px;
  height: 6px;
  background: #e5e7eb;
  /* light gray */
  border-radius: 10px;
  overflow: hidden;
}

/* Progress fill */
.lo-progress-fill {
  width: 60%;
  height: 100%;
  background: #6366f1;
  /* purple/blue like screenshot */
  border-radius: 10px;
}

.badge-amber {
  background: #faeeda;
  color: #854f0b;
}

.badge-red {
  background: #fcebeb;
  color: #a32d2d;
}

.badge-purple {
  background: #eeedfe;
  color: #3c3489;
}

.badge-gray {
  background: #f1efe8;
  color: #5f5e5a;
}

.lo-wf-scroll {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  /* IMPORTANT */
  gap: 4px;
  width: auto;
  justify-content: start;
}

.lo-wf-step {
  display: grid;
  justify-items: center;
  width: max-content;
  flex: 0 0 auto;
  height: 70px;
}

.lo-wf-box {
  padding-top: 10px;
  border-radius: 8px;
  font-size: 10px;
  /* font-weight: 500; */
  text-align: center;
  width: max-content;
  max-width: max-content;
  display: grid;
  justify-items: center;
  gap: 2px;
  white-space: normal;
}

.lo-wf-step,
.lo-wf-box {
  justify-self: start;
}

.lo-wf-box span {
  font-size: 9px !important;
}

.lo-wf-done {
  background: #e6fbf0;
  color: black;
  font-size: 10px;
  font-weight: bold;
  border-color: #97ddc6;
  padding: 8px 10px;
  border: 1px solid rgb(184, 253, 184);
}

.lo-item {
  min-width: 150px;
  /* gives breathing space */
}

.lo-title-wrap {
  min-width: 200px;
}

.lo-seq-pill {
  gap: 3px;
}

.lo-seq-pill {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lo-seq-pill::-webkit-scrollbar {
  display: none;
}

.lo-wf-active {
  background: linear-gradient(135deg, #9271f3, #bb8de6);
  color: #000000;
  border-color: #afa9ec;
  box-shadow: 0 0 0 3px #eeedfe;
  padding: 5px 12px;
}

.lo-wf-todo {
  background: #e8e8f0;
  color: black;
  border-color: #c7cde0;
  font-size: bold;
  padding-top: 10px;
  font-size: 11px;
  font-weight: bold;
  border: 1px solid #b0aaf7;
  padding: 11px 10px;
}

.lo-wf-check {
  font-size: 10px;
  padding-top: 10px;
  align-items: center;
}

.lo-wf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 20px;
}

.lo-sub-labels {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.lo-sub-label {
  font-size: 9px;
  color: #888;
  text-align: center;
}

/* ========== 4-COLUMN GRID ========== */
.lo-grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .lo-grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .lo-grid4 {
    grid-template-columns: 1fr;
  }
}

/* ========== KEY-VALUE ROWS ========== */
.lo-kv {
  /* justify-content: space-between; */
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
  gap: 8px;
}

.lo-kv:last-of-type {
  border-bottom: none;
}

.lo-k {
  color: black;
  flex-shrink: 0;
  font-size: 10px !important;
  font-weight: bold;
}

.lo-v {
  color: black;
  flex-shrink: 0;
  font-size: 10px !important;
  font-weight: bold;
  text-align: right;
}

/* ========== OVERRIDE BUTTON ========== */
.lo-override-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 3px;
  border-radius: 8px;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: #ffffff;
  color: #1a1a1a;
  font-size: 12px;
  /* font-weight: 500; */
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
  font-family: inherit;
}

.lo-override-btn:hover {
  background: #f5f5f3;
}

.lo-override-btn:active,
.lo-override-active {
  transform: scale(0.98);
  background: #eaf3de;
  color: #3b6d11;
  border-color: #c0dd97;
}

/* ========== DECISION LOGIC ========== */
.lo-logic-note {
  font-size: 10px;
  color: #0e0d0d;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.lo-if-row {
  /* display: flex; */
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 5px;
  line-height: 1.5;
}

.lo-if-kw {
  color: #185fa5;
  font-weight: 600;
}

.lo-then-kw {
  color: black;
  font-size: 10px;

  font-weight: bold;
}

.lo-if-val {
  font-size: 10px;
  font-weight: bold;
  color: #000;
}

.lo-then-val {
  font-size: 10px;
  font-weight: bold;
  color: #000;
}

/* ========== SPARKLINE ========== */
.lo-sparkline {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  display: block;
}

/* ========== TIMELINE ========== */
.lo-tl-scroll {
  display: flex;
  overflow: hidden;
  /* ❌ no scroll */
  width: 100%;
}

.lo-tl-item {
  flex: 0 0 auto;
  width: 100px;
  min-width: 170px;
  height: 90px;
  font-weight: 10px;
  font-weight: bold;
  padding: 6px;
  border-right: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  border: 1px solid rgb(216, 216, 216);
}

.lo-tl-title,
.lo-tl-sub,
.lo-tl-time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* ✅ adds ... */
}

.lo-tl-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 10px;
}

.lo-card .lo-wf-scroll {
  align-items: flex-start;
}

.lo-tl-title {
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 2px;
  color: #111;
  line-height: 1.4;
}

.lo-text-wrap {
  display: flex;
  flex-direction: column;
}

.lo-tl-sub {
  font-size: 10px;
  color: #888;
  margin-bottom: 2px;
}

.lo-tl-time {
  font-size: 10px;
  color: #aaa;
  margin-bottom: 6px;
}

.lo-tl-bottom {
  margin-top: auto;
  /* 👈 pushes it to bottom */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ========== AVATARS ========== */
.lo-avatar-row {
  display: flex;
  align-items: center;
}

.lo-av {
  width: 20px;
  height: 17px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ffffff;
  flex-shrink: 0;
}

.lo-avatar-row {
  overflow: hidden;
}

.lo-av {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

/* Multi-select dropdown styles */
.multi-select-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger:hover {
  border-color: #86b7fe !important;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.ms-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.ms-subtitle {
  font-size: 0.875rem;
  color: #6c757d;
}

.btn-close:hover {
  opacity: 0.75;
}

.qa-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
  color: #212529;
}

.qa-card-body {
  padding: 0.5rem 0;
}

.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s;
  cursor: pointer;
  border: 1px solid transparent;
}

.ms-btn--primary {
  background-color: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

.ms-btn--primary:hover:not(:disabled) {
  background: #4338ca;

  border-color: #0a58ca;
}

.ms-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.ms-btn--outline {
  background-color: transparent;
  color: #6c757d;
  border-color: #dee2e6;
}

.ms-btn--outline:hover {
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

.multi-select-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-trigger:hover {
  border-color: #86b7fe !important;
}

/* Custom scrollbar */
.dropdown-menu::-webkit-scrollbar {
  width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Form control styles */
.form-control:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Switch styles */
.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  cursor: pointer;
}

.form-switch .form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.form-check-label {
  cursor: pointer;
  margin-left: 0.5rem;
}

/* =========================
   ROW SCROLL
========================= */
.email-scroll-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}

.email-scroll-row::-webkit-scrollbar {
  height: 6px;
}

.email-scroll-row::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

/* =========================
   CARD
========================= */
.email-card {
  flex: 0 0 auto;
  width: 290px;
  height: 300px;

  display: flex;
  flex-direction: column;

  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

  scroll-snap-align: start;
  overflow: hidden;
}

/* =========================
   HEADER
========================= */
.email-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;

  padding: 12px;

  border-bottom: 1px solid #f3f4f6;
  background: #fff;
}

/* TOP ROW */
.email-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* SUBJECT */
.email-subject {
  flex: 1;
  min-width: 0;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  color: #111827;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DATE */
.email-meta {
  font-size: 12px;
  color: #9ca3af;
}

/* STATUS BADGE */
.email-status {
  flex-shrink: 0;

  font-size: 11px;
  font-weight: 600;

  padding: 3px 10px;
  border-radius: 999px;

  white-space: nowrap;
}

/* STATUS COLORS */
.email-status.SENT {
  background: #e7f7ef;
  color: #198754;
}

.email-status.OPENED {
  background: #e7f1ff;
  color: #0d6efd;
}

.email-status.FAILED {
  background: #fee2e2;
  color: #dc2626;
}

.email-status.DRAFT {
  background: #f3f4f6;
  color: #6b7280;
}

/* =========================
   BODY
========================= */
.email-card-body {
  flex: 1;

  overflow-y: auto;

  padding: 10px 12px;

  background: #f9fafb;
}

.email-preview {
  font-size: 11px;
  line-height: 1.6;
  color: #4b5563;

  white-space: pre-line;
}

/* =========================
   FOOTER
========================= */
.email-card-footer {
  padding: 10px 12px;

  border-top: 1px solid #f3f4f6;
  background: #fff;
}

.email-toggle-btn {
  background: none;
  border: none;

  color: #6366f1;

  font-size: 12px;
  cursor: pointer;

  padding: 0;
}

.email-toggle-btn:hover {
  text-decoration: underline;
}

.email-stats {
  display: flex;
  justify-content: space-between;

  margin-top: 6px;

  font-size: 11px;
  color: #9ca3af;
  font-weight: 600;
}

.lo-tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}

.lo-tl-scroll::-webkit-scrollbar {
  display: none;
}

.gconnect-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.gconnect-modal {
  background: #fff;
  border-radius: 10px;
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.gconnect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.gconnect-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.gconnect-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
}

.gconnect-body {
  padding: 16px 20px;
}

.gconnect-sub {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px;
}

.gconnect-user-info {
  background: #f8f9fb;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gconnect-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
}

.gconnect-error {
  margin-top: 10px;
  color: #d33;
  font-size: 12px;
}

.gconnect-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #eee;
}

.btn-google-disconnect {
  background-color: #fdecea !important;
  color: #d33 !important;
  border: 1px solid #f5c6cb !important;
}

.btn-google-disconnect:hover:not(:disabled) {
  background-color: #f8d7da !important;
  color: #b02a37 !important;
  border-color: #f1aeb5 !important;
}

.btn-google-disconnect:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.rt-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  display: inline-block;
  vertical-align: middle;
}

.rt-client-text {
  min-width: 0;
  overflow: hidden;
}

.rt-date-cell-stacked {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.rt-date-cell-top {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rt-duration-badge {
  margin-left: 16px;
}

.campaign-table-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.campaign-tabs-row {
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  border-radius: 8px 8px 0 0;
}

.campaign-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.campaign-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.campaign-tab:hover {
  color: #374151;
}

.campaign-tab.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
  font-weight: 600;
}

/* Add modal css  */
.ccm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ccm-modal {
  background: var(--bg-color);
  border-radius: 14px;
  width: 640px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 8px 30px var(--shadow-color);
}

.ccm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ccm-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 3px 0;
}

.ccm-subtitle {
  font-size: 11px;
  color: var(--accent-color);
  margin: 0;
}

.ccm-close {
  background: none;
  border: none;
  color: var(--color-grey-close);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: flex;
}

.ccm-close:hover {
  background: var(--hover-bg);
}

.ccm-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ccm-option {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.ccm-option-blue {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-200);
}

.ccm-option-green {
  background: var(--color-green-light);
  border-color: var(--color-green);
}

.ccm-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #ffffff;
}

.ccm-icon-blue {
  background: var(--primary-purple-400);
}

.ccm-icon-green {
  background: var(--color-green);
}

.ccm-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 6px 0;
}

.ccm-option-desc {
  font-size: 11px;
  color: var(--accent-color);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.ccm-feature-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ccm-feature-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-neutral-800);
}

.ccm-option-blue .ccm-feature-list li svg {
  color: var(--primary-purple-400);
}

.ccm-option-green .ccm-feature-list li svg {
  color: var(--color-green);
}

.ccm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ccm-btn-blue {
  background: var(--primary-purple-400);
}

.ccm-btn-blue:hover {
  background: var(--primary-purple-500);
}

.ccm-btn-green {
  background: var(--color-green);
}

.ccm-btn-green:hover {
  background: var(--success-modal-hover);
}

@media (max-width: 560px) {
  .ccm-options {
    grid-template-columns: 1fr;
  }
}

.btn-appt-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

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

.upl-page-header .qa-back-btn {
  margin: 0;
}

.upl-page-header .btn-appt-primary {
  margin: 0;
}

/* =========================================================
   DRAWER OVERLAY
========================================================= */

.overlay {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background: rgba(20, 22, 35, 0.28);

  /* Blur entire application behind drawer */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  z-index: 9998;

  cursor: default;

  animation: overlayFadeIn 0.18s ease-out;
}

/* =========================================================
   DRAWER
========================================================= */

.drawer {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  width: min(680px, 100vw);

  background: #ffffff;

  z-index: 9999;

  display: flex;
  flex-direction: column;

  box-shadow: -12px 0 35px rgba(20, 24, 40, 0.14);

  animation: drawerSlideIn 0.22s ease-out;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes drawerSlideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================================
   DELETE MODAL - BLUR ENTIRE APPLICATION
   Including Sidebar
========================================================= */

.deleteModalBackdrop {
  position: fixed !important;
  inset: 0 !important;

  z-index: 9998 !important;

  background: rgba(20, 22, 35, 0.42) !important;

  opacity: 1 !important;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
/* ================================================================
   REUSABLE TABLE + FILTER PANEL — Shared Styles
   All colors via CSS variables only. Zero hardcoded hex.
   Import once in main.jsx / App.jsx
   ================================================================ */

:root {
  --table-header-bg: var(--primary-purple-100, #eae9fc);
  --table-header-color: var(--primary-purple-400, #4f46e5);
  --table-border: var(--border-color, #e0e0e0);
  --table-row-hover: var(--primary-purple-100, #eae9fc);
  --table-row-selected: var(--primary-purple-100, #eae9fc);
  --table-cell-color: var(--color-neutral-700, #5d5d5d);

  --badge-pending-bg: var(--color-yellow-light, rgba(255, 219, 67, 0.12));
  --badge-pending-color: var(--color-yellow, #dfb400);
  --badge-confirmed-bg: var(--color-green-light, #e6fbf0);
  --badge-confirmed-color: var(--color-green, #1fc16b);
  --badge-cancelled-bg: var(--color-red-light, rgba(251, 55, 72, 0.1));
  --badge-cancelled-color: var(--color-red, #fb3748);
  --badge-rescheduled-bg: var(--color-indigo-light, #ede7f6);
  --badge-rescheduled-color: var(--color-indigo, #6610f2);
  --badge-completed-bg: var(--color-green-light, #e6fbf0);
  --badge-completed-color: var(--color-green, #1fc16b);
  --badge-paid-bg: var(--color-green-light, #e6fbf0);
  --badge-paid-color: var(--color-green, #1fc16b);
  --badge-unpaid-bg: var(--color-red-light, rgba(251, 55, 72, 0.1));
  --badge-unpaid-color: var(--color-red, #fb3748);
  --badge-partial-bg: var(--color-orange-light, #fff3e0);
  --badge-partial-color: var(--color-orange, #ff6f00);

  --filter-panel-bg: var(--bg-color, #ffffff);
  --filter-panel-border: var(--border-color, #e0e0e0);
  --filter-active-bg: var(--primary-purple-100, #eae9fc);
  --filter-active-color: var(--primary-purple-400, #4f46e5);
  --action-icon-hover: var(--primary-purple-200, #d4d2f9);
  --action-icon-color: var(--color-neutral-700, #5d5d5d);
  --stat-card-bg: var(--bg-color, #ffffff);
  --stat-card-border: var(--border-color, #e0e0e0);

  /* Height budget constants — tune these to match your app chrome */
  --page-chrome-h: 180px;
  /* navbar + page header + stat cards + breadcrumb + body gap */
}

/* ================================================================
   PAGE
   ================================================================ */
.appt-page {
  background: var(--card-bg);
  padding: 12px 12px 0;
  /* min-height: 100vh; */
}

.appt-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.appt-page-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-color);
  margin: 0;
}

.appt-page-sub {
  font-size: 10px;
  color: var(--color-grey);
  margin: 1px 0 0;
}

.appt-breadcrumb {
  font-size: 10px;
  color: var(--color-grey);
  margin-bottom: 8px;
}

.appt-header-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-appt-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-purple-400);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-appt-primary:hover {
  background: var(--primary-purple-500);
}

.btn-appt-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-cyan-light);
  color: var(--color-cyan);
  border: 1px solid var(--color-cyan);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-appt-secondary:hover {
  background: var(--color-cyan);
  color: #fff;
}

.btn-appt-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dc2626;
  color: #fff;
  border: 1px solid #dc2626;
  border-radius: 7px;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-appt-delete:hover {
  background: #aa0000;
}

.btn-appt-outline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--color-neutral-700);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-appt-outline:hover {
  border-color: var(--primary-purple-400);
  color: var(--primary-purple-400);
  background: var(--primary-purple-100);
}

/* ================================================================
   STAT CARDS
   ================================================================ */
.appt-stat-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .appt-stat-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .appt-stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.appt-stat-cards2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .appt-stat-cards2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .appt-stat-cards2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.appt-stat-cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .appt-stat-cards3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .appt-stat-cards3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.appt-stat-card {
  background: var(--stat-card-bg);
  border: 1px solid var(--stat-card-border);
  border-radius: 9px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.appt-stat-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 0 0 9px 9px;
}

.appt-stat-card.pending::after {
  background: var(--color-yellow);
}

.appt-stat-card.confirmed::after {
  background: var(--color-green);
}

.appt-stat-card.cancelled::after {
  background: var(--color-red);
}

.appt-stat-card.rescheduled::after {
  background: var(--color-indigo);
}

.appt-stat-card.today::after {
  background: var(--primary-purple-400);
}

.stat-card-left label {
  display: block;
  font-size: 9.5px;
  color: var(--color-grey);
  margin-bottom: 2px;
  font-weight: 500;
}

.stat-card-left .stat-number {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-color);
  line-height: 1;
}

/* wrapper */
.form-password-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.form-password-wrap .form-input {
  padding-right: 36px;
}

/* icon button */
.form-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-grey);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover effect */
.form-password-toggle:hover {
  color: var(--color-indigo);
}

.stat-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card-icon.pending {
  background: var(--color-yellow-light);
  color: var(--color-yellow);
}

.stat-card-icon.confirmed {
  background: var(--color-green-light);
  color: var(--color-green);
}

.stat-card-icon.cancelled {
  background: var(--color-red-light);
  color: var(--color-red);
}

.stat-card-icon.rescheduled {
  background: var(--color-indigo-light);
  color: var(--color-indigo);
}

.stat-card-icon.today {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

/* ================================================================
   BODY LAYOUT
   ─ filter: fixed width, sticky, same height as table-area
   ─ table-area: flex:1, takes all remaining width
   ─ align-items:stretch makes both children the same height
   ================================================================ */
.appt-body {
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* KEY: both columns same height */
}

/* ================================================================
   FILTER PANEL
   ─ Does NOT set height itself — it is stretched by the parent flex.
   ─ Internal scroll handles overflow.
   ─ position:sticky so it stays visible while the PAGE scrolls.
   ================================================================ */
.filter-panel {
  width: 200px;
  flex-shrink: 0;
  background: var(--filter-panel-bg);
  border: 1px solid var(--filter-panel-border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

  position: sticky;
  top: 8px;
  max-height: calc(100vh - var(--page-chrome-h));

  display: flex;
  flex-direction: column;
}

.filter-panel::-webkit-scrollbar {
  width: 3px;
}

.filter-panel::-webkit-scrollbar-track {
  background: transparent;
}

.filter-panel::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.filter-panel-body::-webkit-scrollbar {
  width: 3px;
}

.filter-panel-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.filter-panel-header {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border-color);
}

.filter-panel-footer {
  padding: 6px 10px;
  border-top: 1px solid var(--border-color);
  background: var(--filter-panel-bg);
}

.filter-panel-inner {
  padding: 10px 10px 0;
}

.filter-section-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 4px;
  padding-top: 2px;
}

.filter-quick-pills {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 7px;
}

.filter-quick-pill {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.1s;
}

.filter-quick-pill:hover {
  background: var(--hover-bg);
}

.filter-quick-pill.active {
  background: var(--filter-active-bg);
  color: var(--filter-active-color);
  font-weight: 600;
}

.filter-divider {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 6px 0;
}

.filter-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 7px;
}

.filter-checkbox-row {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.filter-checkbox-row input[type="checkbox"] {
  width: 11px;
  height: 11px;
  accent-color: var(--primary-purple-400);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-checkbox-row label {
  font-size: 10.5px;
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.filter-select {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 5px;
  padding: 4px 22px 4px 6px;
  font-size: 10.5px;
  color: var(--text-color);
  background: var(--input-bg);
  outline: none;
  margin-bottom: 7px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
}

.filter-select:focus {
  border-color: var(--primary-purple-400);
  outline: none;
}

.filter-search-wrap {
  position: relative;
  margin-bottom: 7px;
}

.filter-search-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-grey);
  pointer-events: none;
  width: 10px;
  height: 10px;
}

.filter-search-input {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 5px;
  padding: 4px 6px 4px 22px;
  font-size: 10.5px;
  color: var(--text-color);
  background: var(--input-bg);
  outline: none;
}

.filter-search-input:focus {
  border-color: var(--primary-purple-400);
}

.filter-search-input::placeholder {
  color: var(--input-text);
  font-size: 10px;
}

.filter-date-input {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 5px;
  padding: 4px 6px;
  font-size: 10.5px;
  color: var(--text-color);
  background: var(--input-bg);
  outline: none;
  margin-bottom: 5px;
}

.filter-date-input:focus {
  border-color: var(--primary-purple-400);
}

.filter-actions {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  padding-bottom: 6px;
}

.btn-filter-clear {
  flex: 1;
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: 5px;
  padding: 5px 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-neutral-700);
  cursor: pointer;
  transition: all 0.12s;
}

.btn-filter-clear:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.btn-filter-apply {
  flex: 1;
  border: none;
  background: var(--primary-purple-400);
  border-radius: 5px;
  padding: 5px 0;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.12s;
}

.btn-filter-apply:hover {
  background: var(--primary-purple-500);
}

/* ================================================================
   TABLE AREA
   ─ flex:1 + min-width:0  — fills remaining space, never overflows
   ─ display:flex column   — toolbar / scroll area / pagination stacked
   ─ The scroll container grows (flex:1) and clips with overflow
   ================================================================ */
.table-area {
  flex: 1;
  min-width: 0;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  /* match filter panel max-height so both stop at same point */
  max-height: calc(100vh - var(--page-chrome-h));
}

/* ── Toolbar ──────────────────────────────────────────────── */
.rt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border-color);
  gap: 6px;
  flex-wrap: wrap;
  background: var(--bg-color);
  flex-shrink: 0;
}

.rt-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rt-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-color);
}

.rt-count-badge {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-radius: 20px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
}

.rt-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Search */
.rt-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.rt-search-wrap>svg {
  position: absolute;
  left: 6px;
  pointer-events: none;
  color: var(--color-grey);
  width: 11px;
  height: 11px;
}

.rt-search-input {
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 4px 24px 4px 22px;
  font-size: 10.5px;
  color: var(--text-color);
  background: var(--input-bg);
  outline: none;
  width: 180px;
  transition: border-color 0.15s;
}

.rt-search-input:focus {
  border-color: var(--primary-purple-400);
}

.rt-search-input::placeholder {
  color: var(--input-text);
  font-size: 10px;
}

.rt-search-clear {
  position: absolute;
  right: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-grey);
  display: flex;
  align-items: center;
  padding: 2px;
}

.rt-search-clear:hover {
  color: var(--color-red);
}

/* View toggle */
.rt-view-toggle {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  overflow: hidden;
}

.rt-view-btn {
  border: none;
  background: transparent;
  padding: 3px 7px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--color-grey);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  border-right: 1px solid var(--border-color);
  white-space: nowrap;
  transition: all 0.1s;
}

.rt-view-btn:last-child {
  border-right: none;
}

.rt-view-btn.active {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  font-weight: 600;
}

.rt-view-btn:hover:not(.active) {
  background: var(--hover-bg);
}

/* Icon buttons */
.rt-icon-btn {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--bg-color);
  cursor: pointer;
  color: var(--color-neutral-700);
  transition: all 0.1s;
  flex-shrink: 0;
}

.rt-icon-btn:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

.rt-icon-btn svg {
  width: 11px;
  height: 11px;
}

/* ================================================================
   TABLE SCROLL AREA
   ─ flex:1 → takes all remaining height inside .table-area
   ─ overflow-x: auto → horizontal scroll if columns still don't fit
   ─ overflow-y: auto → row scroll
   ─ NO max-height needed — parent clips it
   ================================================================ */
.rt-table-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.rt-table-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.rt-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.rt-table-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

/* ================================================================
   THE TABLE
   ─ table-layout: auto  (NOT fixed!)
     "auto" lets the browser size columns to their content then
     compress proportionally — this is why all columns show.
   ─ width: 100% fills container; min-width prevents collapse below
     a usable size (triggers horizontal scroll instead).
   ─ Individual columns get white-space:nowrap so content drives
     their natural width, then the browser compresses proportionally.
   ================================================================ */
.rt-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  /* width: 100%; */
  /* min-width: 700px; */
  /* horizontal scroll kicks in below this */
  /* border-collapse: collapse; */
  /* table-layout: auto; */
  /* table-layout: fixed; */
  /* KEY FIX: auto sizing, all columns visible */
  font-family:
    "Plus Jakarta Sans",
    "Urbanist",
    -apple-system,
    sans-serif;
}

/* HEAD */
.rt-thead th {
  background: var(--table-header-bg);
  color: var(--table-header-color);
  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 7px 7px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.rt-thead th:first-child {
  padding-left: 9px;
}

.rt-thead .th-check {
  width: 30px;
  text-align: center;
  padding: 7px 4px;
}

/* BODY ROWS */
.rt-tbody tr {
  border-bottom: 1px solid var(--table-border);
  cursor: pointer;
  transition: background 0.08s;
}

.rt-tbody tr:last-child {
  border-bottom: none;
}

.rt-tbody tr:hover {
  background: var(--table-row-hover);
}

.rt-tbody tr.rt-row-selected {
  background: var(--table-row-selected);
}

/* BODY CELLS */
.rt-tbody td {
  padding: 6px 7px;
  font-size: 10.5px;
  color: var(--table-cell-color);
  vertical-align: middle;
  white-space: nowrap;
  /* keeps each cell compact (drives auto-layout width) */
}

.rt-tbody td:first-child {
  padding-left: 9px;
}

.rt-tbody .td-check {
  text-align: center;
  width: 30px;
}

.rt-tbody .actions-column {
  white-space: nowrap;
}

/* ── Cell content helpers ─────────────────────────────────── */
.rt-client-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rt-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rt-avatar-initials {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-purple-200);
  color: var(--primary-purple-500);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt-client-info {
  min-width: 0;
}

.rt-client-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-color);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt-client-phone {
  font-size: 9.5px;
  color: var(--color-grey);
}

.rt-date-cell {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--table-cell-color);
}

.rt-date-cell svg {
  color: var(--color-grey);
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.rt-duration-badge {
  display: inline-flex;
  align-items: center;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.rt-assigned-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
}

/* ── Status badges ────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.pending {
  background: var(--badge-pending-bg);
  color: var(--badge-pending-color);
}

.status-badge.confirmed {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}

.status-badge.cancelled {
  background: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-color);
}

.status-badge.rescheduled {
  background: var(--badge-rescheduled-bg);
  color: var(--badge-rescheduled-color);
}

.status-badge.completed {
  background: var(--badge-completed-bg);
  color: var(--badge-completed-color);
}

.status-badge.rejected {
  background: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-color);
}

/* ── Payment badges ───────────────────────────────────────── */
.payment-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.payment-badge.paid {
  background: var(--badge-paid-bg);
  color: var(--badge-paid-color);
}

.payment-badge.unpaid {
  background: var(--badge-unpaid-bg);
  color: var(--badge-unpaid-color);
}

.payment-badge.partiallypaid {
  background: var(--badge-partial-bg);
  color: var(--badge-partial-color);
}

/* ── Action icons ─────────────────────────────────────────── */
.rt-actions-cell {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}

.rt-action-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--action-icon-color);
  transition: all 0.1s;
  flex-shrink: 0;
}

.rt-action-icon:hover {
  background: var(--action-icon-hover);
  color: var(--primary-purple-400);
}

.rt-action-icon svg {
  width: 11px;
  height: 11px;
}

/* ── Checkbox ─────────────────────────────────────────────── */
.rt-checkbox {
  width: 12px;
  height: 12px;
  accent-color: var(--primary-purple-400);
  cursor: pointer;
}

.event-mode-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.mode-online {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}

.mode-offline {
  background: var(--badge-rescheduled-bg);
  color: var(--badge-rescheduled-color);
}

.mode-hybrid {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

/* ── Column-visibility menu ───────────────────────────────── */
.rt-col-menu {
  position: absolute;
  right: 0;
  top: 29px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  padding: 7px 9px;
  z-index: 200;
  min-width: 155px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.rt-col-menu-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-grey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.rt-col-menu label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  margin-bottom: 3px;
  cursor: pointer;
}

.rt-client-phone {
  display: flex;
  align-items: center;
  padding-top: 4px;
  gap: 4px;
  /* space between icon and text */
}

/* ── Bulk action bar ──────────────────────────────────────── */
.rt-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-color);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.rt-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  transition: opacity 0.1s;
}

.rt-bulk-btn.confirm {
  color: var(--color-green);
}

.rt-bulk-btn.cancel {
  color: var(--color-red);
}

.rt-bulk-btn.reschedule {
  color: var(--color-indigo);
}

.rt-bulk-btn.assign {
  color: var(--color-neutral-700);
}

.rt-bulk-btn.export {
  color: var(--color-neutral-700);
}

.rt-bulk-btn:hover {
  opacity: 0.7;
}

.rt-bulk-btn svg {
  width: 10px;
  height: 10px;
}

.rt-bulk-selected {
  margin-left: auto;
  font-size: 10px;
  color: var(--color-grey);
}

/* ── Pagination ───────────────────────────────────────────── */
.rt-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 5px 9px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-color);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.rt-pagination-label {
  font-size: 10px;
  color: var(--color-grey);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rt-rows-select {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 18px 2px 5px;
  font-size: 10px;
  color: var(--text-color);
  background: var(--input-bg);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4 3.5-4z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  outline: none;
  cursor: pointer;
}

.rt-page-info {
  font-size: 10px;
  color: var(--color-grey);
}

.rt-page-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutral-700);
  transition: all 0.1s;
}

.rt-page-btn:hover:not(:disabled) {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

.rt-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.rt-page-btn svg {
  width: 11px;
  height: 11px;
}

/* ── Empty state ──────────────────────────────────────────── */
.rt-empty {
  text-align: center;
  padding: 24px 20px;
  color: var(--color-grey);
  font-size: 10.5px;
}

.rt-empty svg {
  width: 26px;
  height: 26px;
  margin: 0 auto 6px;
  display: block;
  opacity: 0.3;
}

/* ── Skeleton shimmer ─────────────────────────────────────── */
@keyframes rt-shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.rt-skeleton-row td {
  padding: 7px 7px;
}

.rt-skeleton-cell {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f5 25%, #e8e8ef 50%, #f0f0f5 75%);
  background-size: 400px 100%;
  animation: rt-shimmer 1.3s infinite;
}

/* ── Backward-compat badge classes ───────────────────────── */
.customBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}

.yellowBadge {
  background: var(--badge-pending-bg);
  color: var(--badge-pending-color);
}

.greenBadge {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}

.redBadge {
  background: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-color);
}

.indigoBadge {
  background: var(--badge-rescheduled-bg);
  color: var(--badge-rescheduled-color);
}

.orangeBadge {
  background: var(--color-orange-light);
  color: var(--color-orange);
}

.blueBadge {
  background: var(--color-blue-light);
  color: var(--color-blue);
}

.tableSubText {
  font-size: 9.5px;
  color: var(--color-grey);
}

.tableMainText {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-color);
}

.tableHeading {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-color);
}

.tableActionIcon {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.vcard-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-radius: 6px;
}

.v-mode {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  font-weight: 600;
}

.v-mode.online {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}

.v-mode.offline {
  background: var(--badge-partial-bg);
  color: var(--badge-partial-color);
}

.vemail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-radius: 14px;
  font-size: 12px;
  text-decoration: none;
}

.attachment-card {
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.attachment-card:hover {
  border-color: var(--primary-purple-400);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.1);
}

.attachment-preview {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 8px;
}

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

.attachment-icon {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--view-muted);
}

.attachment-name {
  font-size: 11px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-download {
  display: block;
  padding: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-purple-500);
  background-color: var(--primary-purple-100);
  text-decoration: none;
  border-top: 1px solid var(--view-border);
  transition: all 0.2s;
}

.attachment-download:hover {
  background-color: var(--primary-purple-200);
  color: var(--primary-purple-600);
}

.enquiry-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enquiry-item {
  position: relative;
}

.enquiry-card {
  padding: 12px;
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.enquiry-card:hover {
  border-color: var(--primary-purple-400);
  background-color: white;
}

.enquiry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.enquiry-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.enquiry-currency {
  font-size: 12px;
  font-weight: 600;
  color: var(--view-muted);
}

.enquiry-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-purple-500);
}

.enquiry-actions {
  display: flex;
  gap: 8px;
}

.enquiry-supplier {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--view-text-light);
}

.enquiry-badge {
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  background: var(--badge-pending-bg);
  color: var(--badge-pending-color);
  border-radius: 10px;
}

/* section subtitle */
.section-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--table-cell-color);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--table-border);
}

/* image section */
.product-image-section {
  background: var(--stat-card-bg);
  border-radius: 8px;
  padding: 16px;
}

.product-image-wrapper {
  display: inline-block;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--table-border);
  border-radius: 8px;
}

.product-image {
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
}

/* summary */
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--table-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  font-size: 12px;
  color: var(--table-cell-color);
}

.summary-value {
  font-size: 13px;
  font-weight: 500;
}

.summary-value.price {
  color: var(--primary-purple-400);
  font-weight: 600;
}

.summary-value.discount {
  color: var(--badge-confirmed-color);
  font-weight: 600;
}

/* status badge */
.status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.active {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}

.status-badge.inactive {
  background: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-color);
}

.status-badge.in-stock {
  background: var(--badge-confirmed-bg);
  color: var(--badge-confirmed-color);
}

.status-badge.out-of-stock {
  background: var(--badge-cancelled-bg);
  color: var(--badge-cancelled-color);
}

.qr-code-container {
  padding: 16px;
  background-color: var(--view-bg);
  border-radius: 12px;
  border: 1px solid var(--view-border);
}

.qr-code-wrapper {
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  display: inline-block;
}

.qr-code-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.qr-code-text {
  font-size: 12px;
  color: var(--view-muted);
  word-break: break-all;
}

.form-fields-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-field-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-500);
  border-radius: 20px;
}

.form-field-badge.custom {
  background-color: #fef9c3;
  color: #854d0e;
}

.custom-options {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.8;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 12px;
  color: var(--view-muted);
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-purple-500);
}

.company-logo {
  max-width: 150px;
  border-radius: 8px;
  border: 1px solid var(--view-border);
  padding: 8px;
  background-color: white;
}

.quote-content-wrapper {
  background-color: var(--view-surface);
  border-radius: 12px;
  overflow: hidden;
}

.tax-badge {
  display: inline-block;
  padding: 2px 6px;
  background-color: #e0f2fe;
  color: #0369a1;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.discount-badge {
  display: inline-block;
  padding: 2px 6px;
  background-color: #fef9c3;
  color: #854d0e;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.total-row {
  border-top: 2px dashed var(--view-border);
}

.total-amount {
  color: var(--primary-purple-500);
  font-size: 15px;
}

.vf-label1 {
  font-size: 15px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--view-border);
}

.summary-label {
  font-size: 12px;
  color: var(--view-muted);
}

.summary-value {
  font-size: 13px;
  font-weight: 500;
}

.summary-value.total-amount {
  color: var(--primary-purple-500);
  font-weight: 700;
}

.company-detail {
  display: flex;
  margin-bottom: 6px;
  font-size: 12px;
}

.detail-label {
  width: 60px;
  color: var(--view-muted);
}

.detail-value {
  flex: 1;
  color: var(--view-value-color);
  text-decoration: none;
}

.detail-value:hover {
  color: var(--primary-purple-500);
}

.terms-content {
  max-height: 150px;
  overflow-y: auto;
  padding: 8px;
  background-color: var(--view-bg);
  border-radius: 6px;
}

.payment-details {
  padding: 12px;
  background-color: var(--view-bg);
  border-radius: 8px;
}

.delivery-content-wrapper {
  background-color: var(--view-surface);
  border-radius: 12px;
  overflow: hidden;
}

.quantity-badge {
  display: inline-block;
  padding: 4px 10px;
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-500);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.notes-content {
  padding: 12px;
  background-color: var(--view-bg);
  border-radius: 8px;
  min-height: 100px;
}

.delivery-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
}

.step-indicator.completed {
  background-color: #dcfce7;
  color: #166534;
}

.step-indicator.pending {
  background-color: #f1f5f9;
  color: #64748b;
}

.step-content {
  flex: 1;
}

.step-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--view-text);
}

.step-date {
  margin: 0;
  font-size: 11px;
  color: var(--view-muted);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--view-border);
}

.summary-label {
  font-size: 12px;
  color: var(--view-muted);
}

.summary-value {
  font-size: 13px;
  font-weight: 500;
}

.summary-value.total-amount {
  color: var(--primary-purple-500);
  font-weight: 700;
}

.company-detail {
  display: flex;
  margin-bottom: 6px;
  font-size: 12px;
}

.detail-label {
  width: 60px;
  color: var(--view-muted);
}

.detail-value {
  flex: 1;
  color: var(--view-value-color);
  text-decoration: none;
}

.detail-value:hover {
  color: var(--primary-purple-500);
}

.enquiry-count-badge {
  margin-left: 8px;
  padding: 2px 8px;
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-500);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.enquiry-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enquiry-item {
  position: relative;
}

.enquiry-card {
  padding: 12px;
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.enquiry-card:hover {
  border-color: var(--primary-purple-400);
  background-color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.enquiry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.enquiry-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.enquiry-currency {
  font-size: 12px;
  font-weight: 600;
  color: var(--view-muted);
}

.enquiry-amount {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-purple-500);
}

.enquiry-unit {
  font-size: 11px;
  color: var(--view-muted);
  margin-left: 2px;
}

.enquiry-actions {
  display: flex;
  gap: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.enquiry-card:hover .enquiry-actions {
  opacity: 1;
}

.enquiry-supplier {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--view-text-light);
}

.enquiry-badge {
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 10px;
}

.enquiry-badge.final {
  background-color: #dcfce7;
  color: #166534;
}

.attachment-card {
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.attachment-card:hover {
  border-color: var(--primary-purple-400);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.1);
}

.attachment-preview {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  padding: 8px;
}

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

.attachment-icon {
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--view-muted);
}

.attachment-name {
  font-size: 11px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-download {
  display: block;
  padding: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary-purple-500);
  background-color: var(--primary-purple-100);
  text-decoration: none;
  border-top: 1px solid var(--view-border);
  transition: all 0.2s;
}

.attachment-download:hover {
  background-color: var(--primary-purple-200);
  color: var(--primary-purple-600);
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  font-size: 12px;
  color: var(--view-muted);
}

.summary-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-purple-500);
}

.v-status.pending {
  background-color: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
}

.v-status.finalized {
  background-color: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.v-status.cancelled {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.v-status.draft {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.email-recipients-section {
  padding: 16px;
  background-color: var(--view-bg);
  border-radius: 8px;
  border: 1px solid var(--view-border);
}

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

.email-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: white;
  border: 1px solid var(--view-border);
  border-radius: 20px;
  font-size: 12px;
  transition: all 0.2s;
}

.email-chip:hover {
  border-color: var(--primary-purple-400);
  background-color: var(--primary-purple-100);
}

.email-link {
  color: var(--view-text);
  text-decoration: none;
}

.email-link:hover {
  color: var(--primary-purple-500);
}

.audit-section {
  padding: 16px;
  background-color: white;
  border-radius: 8px;
}

.audit-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background-color: var(--view-bg);
  border-radius: 8px;
  border: 1px solid var(--view-border);
}

.audit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-500);
  border-radius: 6px;
}

.audit-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--view-muted);
}

.audit-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--view-value-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-time {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--view-muted);
  margin-left: 4px;
}

.v-status.completed {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vgrid-3 {
    grid-template-columns: 1fr;
  }

  .audit-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

.vaudit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.vaudit-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light, #f8f9fa);
  border-radius: 6px;
  color: var(--primary-purple-400, #4f46e5);
}

.vaudit-content {
  flex: 1;
}

.vaudit-label {
  display: block;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vaudit-value {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.vaudit-datetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vaudit-time {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
}

.v-av-small {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-purple-100, #e0e7ff);
  color: var(--primary-purple-400, #4f46e5);
  font-size: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.vassigned {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vcode {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}

.vlink {
  color: var(--primary-purple-400, #4f46e5);
  text-decoration: none;
  font-weight: 500;
}

.vlink:hover {
  text-decoration: underline;
}

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

.vemail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  font-size: 11px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.vemail-chip:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.vqa-full {
  width: 100%;
  justify-content: center;
  margin: 4px 0;
}

.vtl-user {
  color: var(--view-muted, #6c757d);
  font-size: 10px;
  margin-left: 4px;
}

.vgrid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vcode {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}

.vinfo-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 6px;
}

.vinfo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6c757d;
}

.vcard-hdr.clickable {
  cursor: pointer;
  transition: background-color 0.2s;
}

.vcard-hdr.clickable:hover {
  background-color: #f8f9fa;
}

.vcard-toggle {
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-purple-400, #4f46e5);
}

.proposal-content {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
}

.proposal-content.financial {
  background-color: #f0fdf4;
  border-left: 3px solid #86efac;
}

.proposal-content.terms {
  background-color: #fff7ed;
  border-left: 3px solid #fdba74;
}

.vattachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vattachment-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}

.vattachment-item:hover {
  border-color: var(--primary-purple-400, #4f46e5);
  background: #fff;
}

.vattachment-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 12px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vattachment-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vattachment-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #dc2626;
}

.vattachment-pdf-label {
  font-size: 8px;
  font-weight: 600;
}

.vattachment-icon {
  color: #6c757d;
}

.vattachment-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vattachment-name {
  font-size: 11px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vattachment-download {
  color: var(--primary-purple-400, #4f46e5);
  opacity: 0.7;
}

.vqa-full {
  width: 100%;
  justify-content: center;
  margin: 4px 0;
}

.vtl-user {
  color: var(--view-muted, #6c757d);
  font-size: 10px;
  margin-left: 4px;
}

.v-status.approved {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.v-status.draft {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}

.v-status.rejected {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.v-status.pending {
  background: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
}

.v-status.expired {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.v-status.default {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.enquiry-modal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.enquiry-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-bottom: none;
}

.enquiry-modal-header .modal-title {
  display: flex;
  align-items: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-close-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}

.modal-close-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.enquiry-modal-body {
  padding: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group.checkbox-group {
  justify-content: flex-end;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 24px;
}

.checkbox-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  cursor: pointer;
  accent-color: #a855f7;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--view-text);
  cursor: pointer;
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--view-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.required-star {
  color: #ef4444;
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 10px;
  border: 1px solid var(--view-border);
  border-radius: 8px;
  transition: all 0.2s;
}

.form-control:focus {
  border-color: #a855f7;
  outline: none;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.form-control.is-invalid {
  border-color: #ef4444;
}

.input-group {
  display: flex;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px 0 0 8px;
  color: var(--view-muted);
}

.input-group .form-control {
  border-radius: 0 8px 8px 0;
  border-left: none;
}

.error-message {
  margin-top: 4px;
  font-size: 11px;
  color: #ef4444;
}

.react-select-container {
  font-size: 13px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--view-border);
}

.btn-cancel {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--view-text-light);
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel:hover:not(:disabled) {
  background-color: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.btn-submit {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-cancel:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .checkbox-wrapper {
    padding-top: 0;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .btn-cancel,
  .btn-submit {
    width: 100%;
    justify-content: center;
  }
}

.vgrid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vcode {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}

/* User Avatar */
.vuser-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg,
      var(--primary-purple-400),
      var(--primary-purple-600));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Contact Grid */
.vuser-contact-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vuser-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
}

.vuser-contact-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  color: var(--primary-purple-400, #4f46e5);
}

.vuser-contact-content {
  flex: 1;
}

.vuser-contact-label {
  display: block;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vuser-contact-value {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

.vuser-contact-value a {
  color: var(--primary-purple-400, #4f46e5);
  text-decoration: none;
}

.vuser-contact-value a:hover {
  text-decoration: underline;
}

/* Role Badges */
.vuser-role-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #e0e7ff;
  color: var(--primary-purple-400, #4f46e5);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.vuser-role-badge.secondary {
  background: #f1f5f9;
  color: #475569;
}

/* Status Grid */
.vuser-status-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vuser-status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
}

.vuser-status-item:last-child {
  border-bottom: none;
}

.vuser-status-label {
  font-size: 12px;
  color: var(--view-muted, #6c757d);
}

.vuser-status-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.vuser-status-value.approved {
  background: #d4edda;
  color: #155724;
}

.vuser-status-value.rejected {
  background: #f8d7da;
  color: #721c24;
}

.vuser-status-value.pending {
  background: #fff3cd;
  color: #856404;
}

.vuser-status-value.active {
  background: #d4edda;
  color: #155724;
}

.vuser-status-value.inactive {
  background: #f1f5f9;
  color: #475569;
}

.vuser-status-value.default {
  background: #f1f5f9;
  color: #475569;
}

/* Status Badges */
.v-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.v-status.approved {
  background: #d4edda;
  color: #155724;
  border: 1px solid #86efac;
}

.v-status.rejected {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #fecaca;
}

.v-status.pending {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #fde047;
}

.v-status.default {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* Quick Actions */
.vqa-full {
  width: 100%;
  justify-content: center;
  margin: 4px 0;
}

/* Timeline */
.vtl-user {
  color: var(--view-muted, #6c757d);
  font-size: 10px;
  margin-left: 4px;
}

.proposal-content {
  padding: 16px;
  background-color: var(--view-bg);
  border-radius: 8px;
  border: 1px solid var(--view-border);
  max-height: 300px;
  overflow-y: auto;
}

.proposal-content.financial {
  background-color: #f0fdf4;
  border-color: #86efac;
}

.proposal-content.terms {
  background-color: #fff7ed;
  border-color: #fdba74;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  font-size: 12px;
  color: var(--view-muted);
}

.summary-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--view-value-color);
}

.summary-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.summary-status.approved {
  background-color: #dcfce7;
  color: #166534;
}

.summary-status.draft {
  background-color: #e0f2fe;
  color: #0369a1;
}

.summary-status.rejected {
  background-color: #fee2e2;
  color: #991b1b;
}

.summary-status.pending {
  background-color: #fef9c3;
  color: #854d0e;
}

.summary-status.expired {
  background-color: #f1f5f9;
  color: #475569;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-item {
  border: 1px solid var(--view-border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.attachment-item:hover {
  border-color: var(--primary-purple-400);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.1);
}

.attachment-preview {
  height: 120px;
  background-color: var(--view-bg);
  position: relative;
  overflow: hidden;
}

.attachment-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-pdf-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.attachment-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}

.attachment-pdf-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}

.attachment-pdf-preview:hover .attachment-pdf-overlay {
  opacity: 1;
}

.attachment-file-icon {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--view-muted);
}

.attachment-file-type {
  font-size: 10px;
  font-weight: 600;
}

.attachment-info {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background-color: white;
}

.attachment-name {
  margin: 0;
  font-size: 11px;
  color: var(--view-text-light);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--primary-purple-500);
  background-color: var(--primary-purple-100);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.attachment-download-btn:hover {
  background-color: var(--primary-purple-200);
  color: var(--primary-purple-600);
}

.v-status.approved {
  background-color: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.v-status.draft {
  background-color: #e0f2fe;
  color: #0369a1;
  border-color: #7dd3fc;
}

.v-status.rejected {
  background-color: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.v-status.pending {
  background-color: #fef9c3;
  color: #854d0e;
  border-color: #fde047;
}

.v-status.expired {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.v-status.default {
  background-color: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.vgrid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vdatetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vtime {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
}

.price {
  font-weight: 600;
  color: var(--primary-purple-400, #4f46e5);
}

.vcode {
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: monospace;
}

.vurl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  color: var(--primary-purple-400, #4f46e5);
  text-decoration: none;
  font-size: 12px;
  word-break: break-all;
}

.vurl:hover {
  background: #e9ecef;
  text-decoration: underline;
}

.v-status.stock.in-stock {
  background: #d4edda;
  color: #155724;
}

.v-status.stock.out-of-stock {
  background: #f8d7da;
  color: #721c24;
}

.vaudit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.vaudit-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light, #f8f9fa);
  border-radius: 6px;
  color: var(--primary-purple-400, #4f46e5);
}

.vaudit-content {
  flex: 1;
}

.vaudit-label {
  display: block;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vaudit-value {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.vaudit-datetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vaudit-time {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
}

.v-av-small {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-purple-100, #e0e7ff);
  color: var(--primary-purple-400, #4f46e5);
  font-size: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.vassigned {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vqa-full {
  width: 100%;
  justify-content: center;
  margin: 4px 0;
}

.vtl-user {
  color: var(--view-muted, #6c757d);
  font-size: 10px;
  margin-left: 4px;
}

.filter-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-price-input {
  width: 100%;
  border-radius: 4px;
  padding-left: 5px !important;
  border: 1px solid var(--input-border);
}

.price-separator {
  font-weight: bold;
}

.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.summary-stat-item {
  flex: 1;
  min-width: 100px;
  padding: 12px;
  background: var(--bg-light, #f8f9fa);
  border-radius: 8px;
  text-align: center;
}

.summary-stat-label {
  display: block;
  font-size: 11px;
  color: var(--view-muted, #6c757d);
  margin-bottom: 4px;
}

.summary-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-purple-400, #4f46e5);
}

.vattachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vattachment-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-light, #f8f9fa);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s;
}

.vattachment-item:hover {
  background: #e9ecef;
}

.vattachment-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 12px;
}

.vattachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vattachment-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  border-radius: 4px;
  margin-right: 12px;
  color: #6c757d;
}

.vattachment-name {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vattachment-download {
  color: var(--primary-purple-400, #4f46e5);
  opacity: 0.7;
}

.enquiry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enquiry-item {
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
}

.enquiry-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.enquiry-card {
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.enquiry-card:hover {
  background: #f8f9fa;
}

.enquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.enquiry-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.enquiry-currency {
  font-size: 12px;
  color: var(--primary-purple-400, #4f46e5);
  font-weight: 600;
}

.enquiry-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-purple-400, #4f46e5);
}

.enquiry-unit {
  font-size: 11px;
  color: #6c757d;
}

.enquiry-actions {
  display: flex;
  gap: 4px;
}

.enquiry-supplier {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #6c757d;
}

.enquiry-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 12px;
  margin-left: 8px;
  font-weight: 500;
}

.enquiry-badge.final {
  background: #d4edda;
  color: #155724;
}

.vqa-full {
  width: 100%;
  margin: 4px 0;
}

.v-status.pending {
  background: #fff3cd;
  color: #856404;
}

.v-status.finalized {
  background: #d4edda;
  color: #155724;
}

.v-status.cancelled {
  background: #f8d7da;
  color: #721c24;
}

/* Map Preview Styles */
.map-preview-container {
  background: var(--view-bg-light);
  border-radius: 12px;
  padding: 16px;
}

.map-preview-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--view-border);
}

.map-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.map-preview-wrapper:hover .map-preview-overlay {
  opacity: 1;
}

.map-preview-overlay svg {
  margin-bottom: 8px;
}

.map-preview-overlay span {
  font-size: 14px;
  font-weight: 500;
}

/* Icon Button Styles */
.vbtn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--view-border);
  border-radius: 4px;
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.text-muted span {
  font-size: 13px;
  padding-left: 5px;
}

.vbtn-icon:hover {
  background: var(--view-bg-hover);
  color: var(--primary-purple-400);
  border-color: var(--primary-purple-400);
}

/* Stat Item Styles */
.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border-light);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 13px;
  color: var(--view-text-light);
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--view-text);
}

/* Form Field Badge for emails */
.form-field-badge {
  display: inline-block;
  padding: 6px 12px;
  background: var(--primary-purple-50);
  color: var(--primary-purple-600);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--primary-purple-200);
}

/* HTML Content Styles */
.vf-html {
  font-size: 14px;
  line-height: 1.6;
  color: var(--view-text);
  background: var(--view-bg-light);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--view-border);
}

/* Adjust vgrid for better spacing */
.vgrid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .vgrid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .vgrid-3 {
    grid-template-columns: 1fr;
  }
}

.vcompany-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vcompany-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vcompany-item.full-width {
  grid-column: 1 / -1;
}

.vcompany-label {
  font-size: 10px;
  color: var(--view-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vcompany-value {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  word-break: break-word;
}

.vcompany-value.link {
  color: var(--primary-purple-400, #4f46e5);
  text-decoration: none;
}

.vcompany-value.link:hover {
  text-decoration: underline;
}

.vcompany-value.highlight {
  color: var(--primary-purple-400, #4f46e5);
  font-weight: 600;
}

.vcompany-value.code {
  font-family: monospace;
  background: #f1f3f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.vcompany-message {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  max-height: 150px;
  overflow-y: auto;
}

.vcompany-message.kb {
  background: #fff7ed;
  border-left: 3px solid #fdba74;
}

.vcompany-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.vcompany-badge.success {
  background: #d4edda;
  color: #155724;
}

.vcompany-badge.secondary {
  background: #f1f5f9;
  color: #475569;
}

.vmap-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.vmap-preview:hover {
  border-color: var(--primary-purple-400, #4f46e5);
  background: #fff;
}

.vmap-icon {
  color: var(--primary-purple-400, #4f46e5);
  font-size: 16px;
}

.vmap-address {
  font-size: 13px;
  color: #333;
}

.vemail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.vemail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  font-size: 11px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.vemail-chip:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.vaudit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.vaudit-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 6px;
  color: var(--primary-purple-400, #4f46e5);
}

.vaudit-content {
  flex: 1;
}

.vaudit-label {
  display: block;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vaudit-value {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #333;
}

.vaudit-datetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vaudit-time {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--view-muted, #6c757d);
}

.v-av-small {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e0e7ff;
  color: var(--primary-purple-400, #4f46e5);
  font-size: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.vassigned {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vqa-full {
  width: 100%;
  justify-content: center;
  margin: 4px 0;
}

.vqa-blue {
  background: #e0f2fe;
  color: #0369a1;
}

.vqa-blue:hover {
  background: #bae6fd;
}

.vtl-user {
  color: var(--view-muted, #6c757d);
  font-size: 10px;
  margin-left: 4px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #6c63ff;
  color: white;
  font-weight: 600;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-title h2 {
  margin: 0;
  font-size: 18px;
}

.profile-username {
  font-size: 12px;
  color: #7c7c7c;
}

.profile-badges {
  margin-top: 6px;
  display: flex;
  gap: 8px;
}

.role-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.role-badge.admin {
  background: #ffe5e5;
  color: #d63031;
}

.role-badge.superadmin {
  background: #e3e8ff;
  color: #4b4eff;
}

.role-badge.manager {
  background: #e6fff2;
  color: #00a65a;
}

.role-badge.user {
  background: #f1f1f1;
  color: #666;
}

/* ================= STATUS BADGE ================= */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 16px;
}

.status-badge.approved {
  background: #e9fbef;
  color: #2e7d32;
}

.status-badge.rejected {
  background: #ffeaea;
  color: #c62828;
}

.feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: #f9fafb;
  transition: background 0.2s ease;
}

.feature-item:hover {
  background: #f3f4f6;
}

/* Feature name */
.feature-name {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  text-transform: capitalize;
}

/* Feature icon */
.feature-value {
  display: flex;
  align-items: center;
}

.filter-section-title1 {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 4px;
  padding-top: 2px;
  /* border: 1px solid var(--filter-panel-border); */
  border: 1px solid var(--input-border);
  padding: 4px 6px;
  border-radius: 5px;
}

.export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  white-space: nowrap;
  width: auto;
}

.export-btn span {
  font-size: 12px;
}

/* ---- Layout ---- */
.dashboard-container {
  max-width: 1600px;
}

.kpi-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.kpi-bottom-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  margin-top: 18px;
}

/* ---- Shared Card ---- */
.kpi-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.kpi-card-title {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1d2e;
}

/* ============================================================
   HEADER
   ============================================================ */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.dashboard-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1a1d2e;
}

.dashboard-subtitle {
  margin: 3px 0 0;
  font-size: 13px;
  color: #8b8fa8;
}

.dashboard-header-actions {
  display: flex;
  gap: 10px;
}

.dashboard-btn-outline {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid #e5e7f0;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d2e;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.dashboard-btn-outline:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

.dashboard-btn-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dashboard-btn-primary {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #4f46e5;
  border: none;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.dashboard-btn-primary:hover {
  background: #4338ca;
}

/* ============================================================
   FILTERS
   ============================================================ */
.dashboard-filters {
  background: #fff;
  border-radius: 14px;
  padding: 18px 24px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.dashboard-user-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.dashboard-user-label {
  font-size: 11px;
  color: #8b8fa8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-user-wrapper {
  position: relative;
}

.dashboard-user-select {
  appearance: none;
  background: #fff;
  border: 1.5px solid #e5e7f0;
  border-radius: 8px;
  padding: 7px 28px 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d2e;
  cursor: pointer;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.dashboard-user-select:focus {
  border-color: #7c3aed;
}

.dashboard-user-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b8fa8;
  font-size: 10px;
  pointer-events: none;
}

.dashboard-filter-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #4f46e5;
  border: none;
  border-radius: 9px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  align-self: flex-end;
  height: 36px;
  transition: background 0.15s;
  white-space: nowrap;
}

.dashboard-filter-btn:hover {
  background: #4338ca;
}

.dashboard-filter-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.dashboard-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.kpi-score-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kpi-donut-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

.kpi-donut-container {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-donut-svg {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
  position: absolute;
  top: 0;
  left: 0;
}

.kpi-donut-track {
  fill: none;
  stroke: #ede9fe;
  stroke-width: 10;
}

.kpi-donut-fill {
  fill: none;
  stroke: #7c3aed;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.kpi-donut-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.kpi-donut-percent {
  font-size: 26px;
  font-weight: 800;
  color: #1a1d2e;
  line-height: 1;
  margin: 0;
}

.kpi-donut-label {
  font-size: 11px;
  color: #8b8fa8;
  margin: 4px 0 0;
  text-align: center;
}

/* Indicator dot at the top of the arc */
.kpi-donut-dot {
  width: 10px;
  height: 10px;
  background: #7c3aed;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   TARGET VS ACHIEVED CHART
   ============================================================ */
.kpi-chart-card {
  /* extends .kpi-card */
}

.kpi-chart-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.kpi-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8b8fa8;
  font-weight: 500;
}

.kpi-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.kpi-legend-dot--target {
  background: #c4b5fd;
}

.kpi-legend-dot--achieved {
  background: #7c3aed;
}

.kpi-bar-chart-area {
  height: 180px;
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.kpi-insights-card {
  /* extends .kpi-card */
}

.kpi-insight-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kpi-insight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #f3f4f8;
  font-size: 13px;
  color: #3d4063;
  font-weight: 500;
  line-height: 1.4;
}

.kpi-insight-item:last-child {
  border-bottom: none;
}

.kpi-insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.kpi-insight-icon--purple {
  background: #ede9fe;
  color: #7c3aed;
}

.kpi-insight-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.kpi-insight-icon--green {
  background: #dcfce7;
  color: #16a34a;
}

.kpi-insight-icon--red {
  background: #fee2e2;
  color: #dc2626;
}

.kpi-insight-icon--orange {
  background: #fef3c7;
  color: #d97706;
}

/* ============================================================
   PERFORMANCE BREAKDOWN
   ============================================================ */
.kpi-perf-card {
  /* extends .kpi-card */
}

.kpi-perf-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.kpi-perf-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #f3f4f8;
}

.kpi-perf-item:last-child {
  border-bottom: none;
}

.kpi-perf-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.kpi-perf-info {
  flex: 0 0 140px;
  /* fixed width so bar always has space */
  min-width: 0;
}

.kpi-perf-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1d2e;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-perf-achieved {
  font-size: 12px;
  color: #8b8fa8;
  margin: 0;
}

.kpi-perf-achieved strong {
  color: #1a1d2e;
  font-weight: 700;
}

.kpi-perf-bar-wrapper {
  flex: 1;
  height: 6px;
  background: #f0f0f3;
  border-radius: 99px;
  min-width: 40px;
  overflow: hidden;
  /* prevents fill from overflowing on 100%+ values */
}

.kpi-perf-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: #7c3aed;
  transition: width 0.8s ease;
  max-width: 100%;
  /* safety: never exceed wrapper */
}

.kpi-perf-percent {
  font-size: 12px;
  font-weight: 700;
  color: #8b8fa8;
  min-width: 42px;
  text-align: right;
  flex-shrink: 0;
}

/* ============================================================
   DETAILED KPI RECORDS TABLE
   ============================================================ */
.kpi-table-card {
  /* extends .kpi-card */
}

.kpi-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
}

.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kpi-table thead tr {
  border-bottom: 1.5px solid #f0f0f3;
}

.kpi-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #8b8fa8;
  white-space: nowrap;
  background: #fafafc;
}

.kpi-table th:first-child {
  border-radius: 8px 0 0 0;
}

.kpi-table th:last-child {
  border-radius: 0 8px 0 0;
}

.kpi-table td {
  padding: 12px 12px;
  color: #1a1d2e;
  font-weight: 500;
  border-bottom: 1px solid #f6f6f9;
  white-space: nowrap;
}

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

.kpi-table tbody tr:hover td {
  background: #fafafc;
}

.kpi-table-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-table-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Status badge */
.kpi-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.kpi-status-badge--active {
  background: #dcfce7;
  color: #16a34a;
}

.kpi-status-badge--inactive {
  background: #f3f4f8;
  color: #8b8fa8;
}

.kpi-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.kpi-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f3;
  flex-wrap: wrap;
  gap: 8px;
}

.kpi-pagination-info {
  font-size: 12px;
  color: #8b8fa8;
}

.kpi-pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-page-btn {
  min-width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1.5px solid #e5e7f0;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d2e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}

.kpi-page-btn:hover:not(:disabled) {
  border-color: #7c3aed;
  color: #7c3aed;
}

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

.kpi-page-btn--active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

.kpi-page-btn--active:hover {
  background: #4338ca;
  border-color: #4338ca;
  color: #fff;
}

.kpi-page-btn--nav {
  color: #8b8fa8;
  font-size: 16px;
}

/* ============================================================
   EMPTY STATE & LOADING
   ============================================================ */
.kpi-empty-state {
  text-align: center;
  padding: 60px 0;
  color: #8b8fa8;
}

.kpi-empty-state p {
  font-size: 15px;
  margin: 0;
}

.kpi-loading-state {
  text-align: center;
  padding: 80px 0;
  color: #7c3aed;
}

.kpi-loading-state p {
  margin-top: 12px;
  color: #8b8fa8;
  font-size: 14px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .kpi-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-insights-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .kpi-bottom-grid {
    grid-template-columns: 1fr;
  }

  .kpi-bottom-row {
    grid-template-columns: 1fr;
  }

  .dashboard-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-filter-btn {
    width: 100%;
    justify-content: center;
  }

  .dashboard-header {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .dashboard-stats {
    flex-direction: column;
  }

  .kpi-perf-info {
    flex: 1;
  }
}

.rt-selected-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.rt-clear-selection {
  appearance: none;
  border: none;
  background: transparent;
  padding: 2px 6px;
  border-radius: 4px;
  font: inherit;
  font-weight: 600;
  color: #4f46e5;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rt-clear-selection:hover {
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
}

.rt-clear-selection:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 1px;
}

/* ── Refund Modal Styles ─────────────────────────────────────── */
.refund-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  animation: refundOverlayIn 0.2s ease;
}

@keyframes refundOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.refund-modal {
  background: #fff;
  border-radius: 12px;
  width: 520px;
  max-width: 92vw;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: refundModalIn 0.25s ease;
  display: flex;
  flex-direction: column;
}

@keyframes refundModalIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.refund-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #e9edf4;
  flex-shrink: 0;
}

.refund-modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a2332;
  margin: 0;
}

.refund-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #8a94a6;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.refund-modal-close:hover {
  background: #f0f2f5;
  color: #1a2332;
}

.refund-modal-body {
  padding: 20px 24px 16px;
  overflow-y: auto;
  flex: 1;
}

.refund-modal-info {
  font-size: 14px;
  color: #4a5568;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: #f7f8fa;
  border-radius: 8px;
  line-height: 1.6;
}

.refund-modal-info strong {
  color: #1a2332;
}

.refund-form-group {
  margin-bottom: 16px;
}

.refund-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 5px;
}

.refund-form-group label span {
  color: #ef4444;
}

.refund-input,
.refund-select,
.refund-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d1d7e0;
  border-radius: 8px;
  font-size: 14px;
  color: #1a2332;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.refund-input:focus,
.refund-select:focus,
.refund-textarea:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

.refund-input.error,
.refund-select.error {
  border-color: #ef4444;
}

.refund-input.error:focus,
.refund-select.error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.refund-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.refund-textarea {
  resize: vertical;
  min-height: 60px;
}

.refund-error {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
}

.refund-modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 24px 20px;
  border-top: 1px solid #e9edf4;
  flex-shrink: 0;
}

.refund-btn-cancel {
  padding: 9px 20px;
  border: 1px solid #d1d7e0;
  border-radius: 8px;
  background: #fff;
  color: #4a5568;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.refund-btn-cancel:hover:not(:disabled) {
  background: #f7f8fa;
  border-color: #b8c0cc;
}

.refund-btn-confirm {
  padding: 9px 24px;
  border: none;
  border-radius: 8px;
  background: #6c5ce7;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.refund-btn-confirm:hover:not(:disabled) {
  background: #5a4bd1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.refund-btn-cancel:disabled,
.refund-btn-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}/* ================================================================
   SHARED FORM CSS — Add / Edit pages across ALL modules
   Follows the Lead Add design reference exactly.
   All colors via CSS variables from your existing :root.
   Import ONCE in main.jsx / App.jsx.
   ================================================================ */

/* ── Additional variables (merge into your :root block) ─────── */
:root {
  --form-bg: var(--bg-color, #ffffff);
  --form-page-bg: var(--card-bg, #f4f3fb);
  --form-border: var(--border-color, #e0e0e0);
  --form-border-focus: var(--primary-purple-400, #4f46e5);
  --form-border-error: var(--color-red, #fb3748);
  --form-label-color: var(--color-neutral-700, #5d5d5d);
  --form-required-color: var(--color-red, #fb3748);
  --form-helper-color: var(--color-grey, #999999);
  --form-input-bg: var(--input-bg, #ffffff);
  --form-input-border: var(--input-border, #dee2e6);
  --form-input-color: var(--text-color, #191919);
  --form-input-placeholder: var(--input-text, #999999);
  --form-input-disabled-bg: var(--color-neutral-400, #eeeeee);
  --form-card-radius: 10px;
  --form-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  --form-tag-bg: var(--primary-purple-100, #eae9fc);
  --form-tag-color: var(--primary-purple-500, #2219b3);
  --form-tag-border: var(--primary-purple-200, #d4d2f9);
  --form-bar-bg: var(--bg-color, #ffffff);
  --form-bar-border: var(--border-color, #e0e0e0);
  --form-bar-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  --form-panel-bg: var(--bg-color, #ffffff);
  --form-panel-border: var(--border-color, #e0e0e0);
}

/* ================================================================
   PAGE WRAPPER
   ================================================================ */
.form-page {
  background: var(--form-page-bg);
  min-height: 100vh;
  padding-bottom: 60px; /* room for fixed footer bar */
}

/* ================================================================
   STICKY TOP HEADER BAR
   ================================================================ */
.form-header-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* background: var(--form-bar-bg); */
  /* border-bottom: 1px solid var(--form-bar-border); */
  /* box-shadow: var(--form-bar-shadow); */
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 56px;
}

/* Left side: breadcrumb + title */
.form-header-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.form-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 6px !important;
  color: var(--color-grey);
  margin-bottom: 1px;
}
.form-breadcrumb a {
  color: var(--color-grey);
  text-decoration: none;
  font-size: 11px !important;
  transition: color 0.12s;
}
.form-breadcrumb a:hover {
  color: var(--primary-purple-400);
  text-decoration: underline;
}
.form-breadcrumb-sep {
  font-size: 10px;
  color: var(--color-grey);
}

.form-page-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-color);
  margin: 0;
  line-height: 1.2;
}
.form-page-sub {
  font-size: 10.5px;
  color: var(--color-grey);
  margin: 0;
}

/* Right side: action buttons */
.form-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Button: primary save */
.btn-form-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-purple-400);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-form-primary:hover:not(:disabled) {
  background: var(--primary-purple-500);
}
.btn-form-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button: secondary (outline purple) */
.btn-form-secondary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--secondary-color, rgba(79, 70, 229, 0.08));
  color: var(--primary-purple-400);
  border: 1px solid var(--primary-purple-200);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-form-secondary:hover:not(:disabled) {
  background: var(--primary-purple-200);
}
.btn-form-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button: cancel/discard */
.btn-form-cancel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--color-neutral-700);
  border: 1px solid var(--form-border);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-form-cancel:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

/* Back arrow icon-button */
.btn-form-back {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--form-border);
  border-radius: 7px;
  cursor: pointer;
  color: var(--color-neutral-700);
  transition: all 0.12s;
  flex-shrink: 0;
  text-decoration: none;
}
.btn-form-back:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

/* Spinner inside button */
.btn-spinner {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: form-spin 0.7s linear infinite;
}
@keyframes form-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ================================================================
   MAIN TWO-COLUMN LAYOUT: left form + right sidebar
   ================================================================ */
.form-layout {
  display: flex;
  gap: 14px;
  padding: 16px 20px 0;
  align-items: flex-start;
  max-width: 1400px;
  margin: 0 auto;
}
.form-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-sidebar {
  width: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1024px) {
  .form-layout {
    flex-direction: column;
    padding: 12px 14px 0;
  }
  .form-sidebar {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .form-layout {
    padding: 10px 10px 0;
  }
}

/* ================================================================
   SECTION CARD — white box with title + sub
   ================================================================ */
.form-section {
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--form-card-radius);
  box-shadow: var(--form-card-shadow);
  overflow: visible;
}
.form-section-header {
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--form-border);
}
.form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 2px;
}
.form-section-sub {
  font-size: 10.5px;
  color: var(--color-grey);
  margin: 0;
}
.form-section-body {
  padding: 16px 16px 4px;
}

/* ================================================================
   FIELD ROWS — responsive grid using flex
   ================================================================ */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}

/* Individual field wrapper */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  min-width: 0;
}

/* Fractional width classes (12-column style) */
.ff-3 {
  flex: 0 0 calc(25% - 11px);
} /* 3/12 */
.ff-4 {
  flex: 0 0 calc(33.33% - 10px);
} /* 4/12 */
.ff-6 {
  flex: 0 0 calc(50% - 7px);
} /* 6/12 */
.ff-8 {
  flex: 0 0 calc(66.66% - 5px);
} /* 8/12 */
.ff-12 {
  flex: 0 0 100%;
} /* full */

@media (max-width: 768px) {
  .ff-3,
  .ff-4,
  .ff-6,
  .ff-8 {
    flex: 0 0 100%;
  }
}

/* ================================================================
   LABEL
   ================================================================ */
.form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--form-label-color);
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 2px;
}
.form-label-required {
  color: var(--form-required-color);
}

/* ================================================================
   INPUT / SELECT / TEXTAREA
   ================================================================ */
.form-input,
.form-select-ctrl,
.form-textarea {
  width: 100%;
  border: 1px solid var(--form-input-border);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--form-input-color);
  background: var(--form-input-bg);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  font-family: inherit;
  line-height: 1.5;
}
.form-input:focus,
.form-select-ctrl:focus,
.form-textarea:focus {
  border-color: var(--form-border-focus);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.09);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--form-input-placeholder);
  font-size: 12px;
}
.form-input.is-error,
.form-select-ctrl.is-error,
.form-textarea.is-error {
  border-color: var(--form-border-error);
  box-shadow: 0 0 0 3px rgba(251, 55, 72, 0.07);
}
.form-input:disabled,
.form-select-ctrl:disabled,
.form-textarea:disabled {
  /* background: var(--form-input-disabled-bg); */
  color: var(--color-grey);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-control:disabled {
    background-color: transparent !important;
    opacity: 1;
}
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Native select arrow */
.form-select-ctrl {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.form-select-ctrl:disabled {
  cursor: not-allowed;
}

/* Error message */
.form-error-msg {
  font-size: 10.5px;
  color: var(--form-border-error);
  margin: 0;
}

/* Helper text */
.form-helper {
  font-size: 10.5px;
  color: var(--form-helper-color);
  margin: 0;
}

/* ================================================================
   MODE PILL TOGGLE — Online / Offline
   ================================================================ */
.form-mode-toggle {
  display: flex;
  border: 1px solid var(--form-input-border);
  border-radius: 7px;
  overflow: hidden;
  width: 100%;
}
.form-mode-btn {
  flex: 1;
  border: none;
  background: var(--form-input-bg);
  color: var(--color-neutral-700);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  border-right: 1px solid var(--form-input-border);
  text-align: center;
  white-space: nowrap;
}
.form-mode-btn:last-child {
  border-right: none;
}
.form-mode-btn.active {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  font-weight: 700;
}
.form-mode-btn:hover:not(.active) {
  background: var(--hover-bg);
}
.form-mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ================================================================
   SWITCH TOGGLE (All-day, etc.)
   ================================================================ */
.form-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.form-switch-input {
  display: none;
}
.form-switch-track {
  width: 34px;
  height: 18px;
  border-radius: 18px;
  background: var(--color-neutral-500, #c0c0c0);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  cursor: pointer;
}
.form-switch-input:checked ~ .form-switch-track {
  background: var(--primary-purple-400);
}
.form-switch-track::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.form-switch-input:checked ~ .form-switch-track::after {
  transform: translateX(16px);
}
.form-switch-label {
  font-size: 12px;
  color: var(--text-color);
  user-select: none;
}

/* ================================================================
   REACT-QUILL RICH TEXT EDITOR overrides
   ================================================================ */
.form-quill-wrap {
  border-radius: 7px;
  overflow: hidden;
}
.form-quill-wrap .ql-toolbar.ql-snow {
  border: 1px solid var(--form-input-border) !important;
  border-bottom: none !important;
  border-radius: 7px 7px 0 0 !important;
  padding: 4px 8px !important;
  background: var(--color-neutral-300, #fafafa);
}
.form-quill-wrap .ql-container.ql-snow {
  border: 1px solid var(--form-input-border) !important;
  border-radius: 0 0 7px 7px !important;
  font-size: 12.5px;
  font-family: inherit;
  height: 100px;
}
.form-quill-wrap .ql-container.ql-snow:focus-within {
  border-color: var(--form-border-focus) !important;
}
.form-quill-wrap .ql-editor {
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
}
.form-quill-wrap .ql-editor.ql-blank::before {
  color: var(--form-input-placeholder);
  font-style: normal;
  font-size: 12px;
}
.form-quill-wrap.is-error .ql-toolbar.ql-snow,
.form-quill-wrap.is-error .ql-container.ql-snow {
  border-color: var(--form-border-error) !important;
}

/* ================================================================
   EMAIL / TAG CHIPS
   ================================================================ */
.form-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.form-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--form-tag-bg);
  color: var(--form-tag-color);
  border: 1px solid var(--form-tag-border);
  border-radius: 20px;
  padding: 3px 10px 3px 11px;
  font-size: 11.5px;
  font-weight: 500;
}
.form-tag-remove {
  width: 15px;
  height: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--form-tag-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.1s;
}
.form-tag-remove:hover {
  background: var(--primary-purple-200);
  color: var(--primary-purple-500);
}

/* ================================================================
   EMAIL AUTOCOMPLETE DROPDOWN
   ================================================================ */
.form-autocomplete-wrap {
  position: relative;
}
.form-autocomplete-list {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  z-index: 200;
  max-height: 160px;
  overflow-y: auto;
}
.form-autocomplete-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  font-size: 12px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  transition: background 0.1s;
}
.form-autocomplete-item:hover {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

/* ================================================================
   SIDEBAR PANELS
   ================================================================ */
.form-panel {
  background: var(--form-panel-bg);
  border: 1px solid var(--form-panel-border);
  border-radius: var(--form-card-radius);
  box-shadow: var(--form-card-shadow);
  overflow: hidden;
}
.form-panel-header {
  padding: 12px 14px 9px;
  border-bottom: 1px solid var(--form-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-panel-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}
.form-panel-body {
  padding: 12px 14px 14px;
}

/* Panel quick-action buttons */
.form-panel-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--color-neutral-300, #fafafa);
  border: 1px solid var(--form-border);
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.12s;
}
.form-panel-btn:last-child {
  margin-bottom: 0;
}
.form-panel-btn:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

/* Suggestion rows */
.form-suggestion-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}
.form-suggestion-row:last-child {
  margin-bottom: 0;
}
.form-suggestion-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
}
.form-suggestion-text {
  font-size: 11.5px;
  color: var(--text-color);
  line-height: 1.45;
}

/* ================================================================
   FIXED BOTTOM FOOTER BAR
   ================================================================ */
.form-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--form-bar-bg);
  border-top: 1px solid var(--form-bar-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.07);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.form-footer-hint {
  font-size: 11px;
  color: var(--color-grey);
}
.form-footer-hint strong {
  color: var(--text-color);
  font-weight: 600;
}
.form-footer-required {
  font-size: 11px;
  color: var(--color-grey);
}
.form-footer-required span {
  color: var(--form-required-color);
  font-weight: 600;
}

/* ================================================================
   PAGE LOADING STATE (skeleton)
   ================================================================ */
@keyframes form-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.form-skeleton-line {
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(90deg, #f0f0f5 25%, #e8e8ef 50%, #f0f0f5 75%);
  background-size: 400px 100%;
  animation: form-shimmer 1.2s infinite;
  margin-bottom: 4px;
}
.form-skeleton-label {
  height: 10px;
  width: 40%;
  border-radius: 4px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #f0f0f5 25%, #e8e8ef 50%, #f0f0f5 75%);
  background-size: 400px 100%;
  animation: form-shimmer 1.2s infinite;
}

/* ================================================================
   STATUS BADGE PILL (Add / Edit header badge)
   ================================================================ */
.form-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.form-status-pill.confirmed {
  background: var(--color-green-light, #e6fbf0);
  color: var(--color-green, #1fc16b);
}
.form-status-pill.pending {
  background: var(--color-yellow-light, rgba(255, 219, 67, 0.12));
  color: var(--color-yellow, #dfb400);
}
.form-status-pill.cancelled {
  background: var(--color-red-light, rgba(251, 55, 72, 0.1));
  color: var(--color-red, #fb3748);
}
.form-status-pill.rescheduled {
  background: var(--color-indigo-light, #ede7f6);
  color: var(--color-indigo, #6610f2);
}

/* ================================================================
   DIVIDER within sections
   ================================================================ */
.form-divider {
  border: none;
  border-top: 1px solid var(--form-border);
  margin: 4px 0 18px;
}


.upl-top-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.8fr;
  gap: 16px;
  margin-bottom: 20px;
}

.upl-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
}

.upl-file-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-color);
}

/* File summary card */
.upl-file-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.upl-file-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-green-light);
  color: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upl-file-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.upl-file-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.upl-file-sub {
  font-size: 11px;
  color: var(--color-grey);
}

.upl-replace-btn {
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 12px;
}

.upl-file-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.upl-file-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upl-file-stat-label {
  font-size: 11px;
  color: var(--color-grey);
}

.upl-file-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-color);
}

.upl-value-red {
  color: var(--color-red);
}

.upl-value-orange {
  color: var(--color-orange);
}

.upl-value-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-purple-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Workflow card */
.upl-workflow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.upl-workflow-sub {
  font-size: 11px;
  color: var(--color-grey);
  margin-top: 2px;
}

.upl-add-step-btn {
  padding: 6px 12px;
  font-size: 12px;
}

.upl-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 280px;
  overflow-y: auto;
}

.upl-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--color-neutral-400);
  padding-bottom: 12px;
}

.upl-step-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.upl-step-order {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-neutral-400);
  color: var(--color-neutral-700);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upl-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upl-step-content {
  flex: 1;
  min-width: 0;
}

.upl-step-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.upl-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}

.upl-step-channel-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-green);
  background: var(--color-green-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.upl-step-desc {
  font-size: 11px;
  color: var(--color-grey);
}

.upl-step-timing {
  font-size: 11px;
  color: var(--accent-color);
  white-space: nowrap;
}

.upl-step-actions {
  display: flex;
  gap: 4px;
}

/* Progress card */
.upl-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.upl-progress-pct {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-purple-400);
}

.upl-progress-bar-track {
  width: 100%;
  height: 8px;
  background: var(--color-neutral-400);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.upl-progress-bar-fill {
  height: 100%;
  background: var(--primary-purple-400);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.upl-progress-desc {
  font-size: 12px;
  color: var(--accent-color);
  line-height: 1.4;
  margin-bottom: 16px;
}

.upl-progress-eta-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-top: 4px;
}

/* Stat cards row (6) */
.upl-stat-cards6 {
  grid-template-columns: repeat(6, 1fr);
}

.appt-stat-card.orange .stat-card-icon,
.stat-card-icon.orange {
  background: var(--color-orange-light);
  color: var(--color-orange);
}

.appt-stat-card.purple .stat-card-icon,
.stat-card-icon.purple {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

.stat-card-sub {
  font-size: 11px;
  color: var(--color-grey);
}

/* Action row */
.upl-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.upl-actions-left,
.upl-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upl-table-body {
  display: block;
}

.lead-score-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
}/* ================================================================
   VIEW.CSS — Shared styles for Quick View (drawer) + Full View page.
   Zero hardcoded colors — all via CSS variables.
   Import once in main.jsx.
   ================================================================ */

:root {
  --view-bg: var(--bg-color, #ffffff);
  --view-border: var(--border-color, #e8e8ef);
  --view-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --view-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.1);
  --view-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.16);
  --view-radius: 10px;
  --view-label-color: var(--color-neutral-700, #6b7280);
  --view-value-color: var(--text-color, #111827);
  --view-muted: var(--color-grey, #9ca3af);
  --drawer-width: 500px;

  --vstatus-confirmed-bg: rgba(31, 193, 107, 0.1);
  --vstatus-confirmed-color: #1aaa5e;
  --vstatus-pending-bg: rgba(255, 170, 0, 0.12);
  --vstatus-pending-color: #b07d00;
  --vstatus-cancelled-bg: rgba(251, 55, 72, 0.1);
  --vstatus-cancelled-color: #e0263a;
  --vstatus-rescheduled-bg: rgba(79, 70, 229, 0.1);
  --vstatus-rescheduled-color: var(--primary-purple-400, #4f46e5);

  --vpay-paid-bg: rgba(31, 193, 107, 0.1);
  --vpay-paid-color: #1aaa5e;
  --vpay-unpaid-bg: rgba(251, 55, 72, 0.1);
  --vpay-unpaid-color: #e0263a;
  --vpay-partial-bg: rgba(255, 170, 0, 0.12);
  --vpay-partial-color: #b07d00;
}

/* ================================================================
   OVERLAY
================================================================ */

.vdrawer-overlay {
  position: fixed;
  inset: 0;

  /* IMPORTANT:
     Sidebar = 2000
     Overlay = 9998
     Drawer = 9999
  */
  z-index: 9998;

  background: rgba(10, 10, 18, 0.38);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  animation: vfadein 0.18s ease;
  -webkit-animation: vfadein 0.18s ease;
}

@keyframes vfadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ================================================================
   QUICK-VIEW DRAWER
   ================================================================ */
.vdrawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--drawer-width);
  max-width: 100vw;
  z-index: 9999;
  background: var(--view-bg);
  box-shadow: var(--view-shadow-lg);
  display: flex;
  flex-direction: column;
  animation: vslidein 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes vslidein {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Header */
.vdrawer-hdr {
  padding: 15px 18px 11px;
  border-bottom: 1px solid var(--view-border);
  flex-shrink: 0;
}

.vdrawer-hdr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vdrawer-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--view-value-color);
  margin: 0 0 3px;
}

.vdrawer-meta {
  font-size: 11px;
  color: var(--view-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.vdrawer-meta-dot {
  color: var(--view-border);
}

/* Close X */
.vdrawer-x {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--view-border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--view-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}

.vdrawer-x:hover {
  background: var(--vstatus-cancelled-bg);
  color: var(--vstatus-cancelled-color);
  border-color: var(--vstatus-cancelled-color);
}

/* Action bar (Edit / Reschedule / Cancel) */
.vdrawer-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.vdrawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--view-border);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  background: var(--view-bg);
  color: var(--view-value-color);
}

.vdrawer-btn:hover {
  background: var(--hover-bg, #f5f5fa);
}

.vdrawer-btn.danger {
  color: var(--vstatus-cancelled-color);
  border-color: var(--vstatus-cancelled-color);
  background: var(--vstatus-cancelled-bg);
}

.vdrawer-btn.danger:hover {
  background: rgba(224, 38, 58, 0.16);
}

.vdrawer-btn svg {
  width: 11px;
  height: 11px;
}

/* Open full view link */
.vdrawer-fullview {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-purple-400);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--primary-purple-200);
  background: var(--primary-purple-100);
  transition: all 0.12s;
  white-space: nowrap;
}

.vdrawer-fullview:hover {
  background: var(--primary-purple-200);
}

.vdrawer-fullview svg {
  width: 11px;
  height: 11px;
}

/* Scrollable body */
.vdrawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--view-border) transparent;
}

.vdrawer-body::-webkit-scrollbar {
  width: 3px;
}

.vdrawer-body::-webkit-scrollbar-thumb {
  background: var(--view-border);
  border-radius: 2px;
}

/* Footer */
.vdrawer-ftr {
  border-top: 1px solid var(--view-border);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--view-muted);
}

/* ================================================================
   FULL-VIEW PAGE
   ================================================================ */
.vpage {
  min-height: 100vh;
  background: var(--form-page-bg, #f4f3fb);
  padding-bottom: 40px;
}

.vpage-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  /* background: var(--view-bg);
  border-bottom: 1px solid var(--view-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 56px;
}

.vpage-hdr1 {
  position: sticky;
  top: 0;
  z-index: 20;
  /* background: var(--view-bg);
  border-bottom: 1px solid var(--view-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 16px;
}

.vpage-hdr-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vpage-back {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--view-border);
  border-radius: 7px;
  cursor: pointer;
  color: var(--view-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.12s;
  flex-shrink: 0;
}

.vpage-back:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

.vpage-back1 {
  width: 32px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--view-border);
  border-radius: 7px;
  cursor: pointer;
  color: var(--view-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.12s;
  flex-shrink: 0;
}

.vpage-back1:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

.vpage-breadcrumb {
  font-size: 10.5px;
  color: var(--view-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 1px;
}

.vpage-breadcrumb a {
  color: var(--view-muted);
  text-decoration: none;
}

.vpage-breadcrumb a:hover {
  color: var(--primary-purple-400);
}

.vpage-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--view-value-color);
  margin: 0;
  line-height: 1.2;
}

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

/* Page layout */
.vpage-layout {
  display: flex;
  gap: 14px;
  padding: 18px 22px 0;
  align-items: flex-start;
  /* max-width: 1300px; */
}

.vpage-layout1 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 22px 0;
  gap: 14px;
  display: block;
}

.vpage-layout1>* {
  width: 100%;
  max-width: 100%;
}

.vpage-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* gap: 12px; */
}

.vpage-side {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1024px) {
  .vpage-layout {
    flex-direction: column;
    padding: 12px 14px 0;
  }

  .vpage-side {
    width: 100%;
  }
}

.v-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* Active */
.v-status.active {
  background: #dcfce7;
  color: #166534;
}

/* Inactive */
.v-status.inactive {
  background: #fee2e2;
  color: #991b1b;
}

/* Stock */
.v-status.stock.in-stock {
  background: #dcfce7;
  color: #166534;
}

.v-status.stock.out-of-stock {
  background: #fee2e2;
  color: #991b1b;
}

/* ================================================================
   SHARED CARD — used in drawer, full view, sidebar
   ================================================================ */
.vcard {
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius);
  box-shadow: var(--view-shadow-sm);
  /* overflow: hidden; */
  margin-top: 15px;
}

/* APINVOICE NEW VCARD CSS */

/* ==========================
   Quick Actions Card
========================== */

.qa-card {
  border-radius: 16px;
  overflow: hidden;
  padding: 5px;
}

.qa-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
}

.qa-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qa-action {
  height: 42px;
  width: auto;
  border-radius: 12px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  transition: 0.25s ease;

  border: 1px solid transparent;
}

.qa-action svg {
  font-size: 18px;
}

.qa-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.qa-action span {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
}

/* Full Width */

.qa-action-full {
  grid-column: 1 / -1;
}

/* Green */

.qa-action-success {
  background: #e8f9ec;

  color: #15803d;

  border: 1px solid #b7e4c7;
}

.qa-action-success:hover {
  background: #dcfce7;
}

/* Purple */

.qa-action-purple {
  background: #f5f3ff;

  color: #4f46e5;

  border: 1px solid #c7d2fe;
}

.qa-action-purple:hover {
  background: #eef2ff;
}

/* White */

.qa-action-outline {
  background: #fff;

  color: #111827;

  border: 1px solid #e5e7eb;
}

.qa-action-outline:hover {
  background: #f9fafb;
}

@media (max-width: 768px) {
  .qa-actions-grid {
    grid-template-columns: 1fr;
  }

  .qa-action-full {
    grid-column: auto;
  }
}

.vcard1 {
  background: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: var(--view-radius);
  box-shadow: var(--view-shadow-sm);
  /* overflow: hidden; */
}

.vcard-hdr {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--view-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vcard-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--view-value-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vcard-icon {
  width: 22px;
  height: 22px;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.vcard-hdr-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-purple-400);
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 3px 7px;
  border-radius: 5px;
  transition: background 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.vcard-hdr-btn:hover {
  background: var(--primary-purple-100);
}

.vcard-body {
  padding: 5px 14px;
}

/* Plain colored status text */

.v-status-text {
  display: inline-block;

  padding: 2px;
  margin: 0;

  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
}

/* Order Status */

.v-status-text.approved {
  color: #16a34a;
}

.v-status-text.paid {
  color: #059669;
}

.v-status-text.overdue {
  color: #dc2626;
}

.v-status-text.processing {
  color: #3b82f6;
}

.v-status-text.status-draft {
  color: #6b7280;
}

.v-status-text.status-confirmed {
  color: #10b981;
}

.v-status-text.status-processing {
  color: #3b82f6;
}

.v-status-text.status-shipped {
  color: #6366f1;
}

.v-status-text.status-delivered {
  color: #16a34a;
}

.v-status-text.status-cancelled {
  color: #ef4444;
}

.v-status-text.status-pending {
  color: #f59e0b;
}

/* ==============================
   Sales Order Status
============================== */

.so-status-text {
  display: inline-block;
  position: relative;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: uppercase;

  padding-bottom: 2px;
  white-space: nowrap;
}

/* underline */

/* .so-status-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: currentColor;
  opacity: 0.35;
} */

/* ==============================
   Payment
============================== */

.payment-pending {
  color: #eab308;
}

.payment-partial {
  color: #2563eb;
}

.payment-paid {
  color: #16a34a;
}

.payment-overdue {
  color: #ef4444;
}

/* ==============================
   Order
============================== */

.order-draft {
  color: #3b82f6;
}

.order-confirmed {
  color: #16a34a;
}

.order-processing {
  color: #f59e0b;
}

.order-shipped {
  color: #f97316;
}

.order-delivered {
  color: #22c55e;
}

.order-cancelled {
  color: #e40a0a;
}

/* ================================================================
   FIELD GRID — label/value pairs
   ================================================================ */
.vgrid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(2, 1fr);
}

.vgrid-3 {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(3, 1fr);
}

.vgrid-1 {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (max-width: 640px) {

  .vgrid,
  .vgrid-3 {
    grid-template-columns: 1fr;
  }
}

.vfield {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vfield.span2 {
  grid-column: span 2;
}

.vfield.span3 {
  grid-column: span 3;
}

.vf-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--view-label-color);
  margin: 0;
}

.vf-val {
  font-size: 12px !important;
  color: var(--view-value-color);
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
  font-weight: 400;
}

.vf-val.muted {
  color: var(--view-muted);
  font-style: italic;
  font-weight: 400;
}

.vf-val a {
  color: var(--primary-purple-400);
  text-decoration: none;
}

.vf-val a:hover {
  text-decoration: underline;
}

/* Rich text from ReactQuill */
.vf-html {
  font-size: 12.5px;
  color: var(--view-value-color);
  line-height: 1.6;
}

.vf-html p {
  margin: 0 0 5px;
}

.vf-html ul {
  margin: 0;
  padding-left: 16px;
}

.vf-html li {
  margin-bottom: 3px;
}

/* ================================================================
   STATUS / MODE BADGES
   ================================================================ */
.v-status {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.v-status.confirmed {
  background: var(--vstatus-confirmed-bg);
  color: var(--vstatus-confirmed-color);
}

.v-status.pending {
  background: var(--vstatus-pending-bg);
  color: var(--vstatus-pending-color);
}

.v-status.cancelled {
  background: var(--vstatus-cancelled-bg);
  color: var(--vstatus-cancelled-color);
}

.v-status.scheduled {
  background: #e0f2fe;
  color: #0284c7;
}

.v-status.rescheduled {
  background: var(--vstatus-rescheduled-bg);
  color: var(--vstatus-rescheduled-color);
}

.v-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.v-mode.online {
  background: rgba(31, 193, 107, 0.09);
  color: #1aaa5e;
}

.v-mode.offline {
  background: rgba(79, 70, 229, 0.09);
  color: var(--primary-purple-400);
}

.v-pay {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.v-pay.paid {
  background: var(--vpay-paid-bg);
  color: var(--vpay-paid-color);
}

.v-pay.unpaid {
  background: var(--vpay-unpaid-bg);
  color: var(--vpay-unpaid-color);
}

.v-pay.partial {
  background: var(--vpay-partial-bg);
  color: var(--vpay-partial-color);
}

/* ===== Status Text ===== */

.vpay-status-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;

  background: transparent !important;
  border: none !important;
  padding: 0;
  border-radius: 0;
  box-shadow: none;

  display: inline-block;
}

/* ===== Order Status ===== */

.vpay-status-text.status-draft {
  color: #6b7280;
}

.vpay-status-text.status-confirmed {
  color: #16a34a;
}

.vpay-status-text.status-shipped {
  color: #7c3aed;
}

.vpay-status-text.status-delivered {
  color: #059669;
}

.vpay-status-text.status-cancelled {
  color: #dc2626;
}

/* ===== Payment Status ===== */

.vpay-status-text.payment-pending {
  color: #d97706;
}

.vpay-status-text.payment-partial {
  color: #2563eb;
}

.vpay-status-text.payment-paid {
  color: #16a34a;
}

.vpay-status-text.payment-overdue {
  color: #dc2626;
}

/* Order and Payment Status */

.status-text-only {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ================================================================
   QUICK ACTIONS GRID
   ================================================================ */
.vqa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.vqa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid var(--view-border);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  background: var(--view-bg);
  color: var(--view-value-color);
  white-space: nowrap;
  text-align: center;
}

.vqa-btn:hover {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
  color: var(--primary-purple-400);
}

.vqa-btn.vqa-green {
  background: var(--vstatus-confirmed-bg);
  color: var(--vstatus-confirmed-color);
  border-color: var(--vstatus-confirmed-color);
}

.vqa-btn.vqa-green:hover {
  background: rgba(31, 193, 107, 0.18);
}

.vqa-btn.vqa-purple {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border-color: var(--primary-purple-300);
}

.vqa-btn.vqa-purple:hover {
  background: var(--primary-purple-200);
}

.vqa-btn.vqa-red {
  background: var(--vstatus-cancelled-bg);
  color: var(--vstatus-cancelled-color);
  border-color: var(--vstatus-cancelled-color);
}

.vqa-btn.vqa-red:hover {
  background: rgba(224, 38, 58, 0.14);
}

.vqa-btn.vqa-full {
  grid-column: span 2;
}

.vqa-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ================================================================
   PAYMENT SECTION
   ================================================================ */
.vpay-amount-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.vpay-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--view-value-color);
}

.vpay-currency {
  font-size: 14px;
  font-weight: 600;
  color: var(--view-muted);
}

.vpay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--view-border);
  font-size: 12px;
}

.vpay-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.vpay-lbl {
  color: var(--view-muted);
}

.vpay-val {
  color: var(--view-value-color);
  font-weight: 600;
}

.vpay-cta {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: var(--vstatus-confirmed-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  text-align: center;
}

.vpay-cta:hover {
  opacity: 0.86;
}

/* ================================================================
   ACTIVITY TIMELINE
   ================================================================ */
.vtl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vtl-item {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  position: relative;
}

.vtl-item:last-child {
  padding-bottom: 0;
}

.vtl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.vtl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--view-border);
  background: var(--view-bg);
  margin-top: 3px;
}

.vtl-dot.done {
  background: var(--vstatus-confirmed-color);
  border-color: var(--vstatus-confirmed-color);
}

.vtl-dot.active {
  background: var(--primary-purple-400);
  border-color: var(--primary-purple-400);
  box-shadow: 0 0 0 3px var(--primary-purple-100);
}

.vtl-line {
  flex: 1;
  width: 1.5px;
  background: var(--view-border);
  margin: 4px 0 0;
}

.vtl-item:last-child .vtl-line {
  display: none;
}

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

.vtl-event {
  font-size: 12px;
  font-weight: 600;
  color: var(--view-value-color);
  margin: 0 0 1px;
}

.vtl-time {
  font-size: 10.5px;
  color: var(--view-muted);
  margin: 0;
}

/* ================================================================
   EMAIL CHIPS
   ================================================================ */
.vemail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.vemail-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  border: 1px solid var(--primary-purple-200);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s;
}

.vemail-chip:hover {
  background: var(--primary-purple-200);
}

/* ================================================================
   META ROW (created / updated)
   ================================================================ */
.vmeta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: var(--view-muted);
}

.vmeta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vmeta-item strong {
  color: var(--view-value-color);
  font-weight: 600;
}

/* ================================================================
   AVATAR
   ================================================================ */
.v-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Assigned user row */
.vassigned {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vassigned-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--view-value-color);
}

/* Action buttons (page-level) */
.vbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
  border: 1px solid transparent;
}

.vbtn-primary {
  background: var(--primary-purple-400);
  color: #fff;
}

.vbtn-primary:hover {
  background: var(--primary-purple-500);
}

.vbtn-outline {
  background: var(--bg-color);
  border-color: var(--view-border);
  color: var(--view-value-color);
}

.vbtn-outline:hover {
  background: var(--hover-bg, #f5f5fa);
}

.vbtn-danger {
  background: var(--vstatus-cancelled-bg);
  color: var(--vstatus-cancelled-color);
  border-color: var(--vstatus-cancelled-color);
}

.vbtn-danger:hover {
  background: rgba(224, 38, 58, 0.16);
}

.vbtn svg {
  width: 13px;
  height: 13px;
}

/* Responsive */
@media (max-width: 600px) {
  .vdrawer {
    width: 100vw;
  }

  .vqa {
    grid-template-columns: 1fr;
  }

  .vqa-btn.vqa-full {
    grid-column: span 1;
  }
}

@media (min-width: 330px) and (max-width: 550px) {
  .table-responsive-mobile {
    overflow-x: auto;
    /* still allow scroll if necessary */
  }

  .table-responsive-mobile .table th,
  .table-responsive-mobile .table td {
    font-size: 12px;
    /* reduce text size */
    padding: 4px 6px;
    /* reduce cell padding */
  }

  .table-responsive-mobile .table th {
    font-size: 11px;
    /* smaller headers */
  }

  .table-cell-break {
    max-width: 120px;
    /* reduce max width for long item names */
  }
}

@media (min-width: 330px) and (max-width: 550px) {
  .table-nowrap td:not(:nth-child(2)) {
    white-space: nowrap;
    /* keep numbers in one line */
  }

  .table-cell-break {
    white-space: normal;
    /* allow wrapping for item names */
  }

  .ivoice-head {
    font-size: 10px !important;
  }

  .invoice-para {
    font-size: 10px !important;
  }

  .vcard1 {
    max-width: fit-content;
  }

  .companylogo {
    height: 40px;
    width: 150px;
  }

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

  .payment-value .vf-label {
    min-width: 140px;
    font-weight: 600;
  }

  .payment-value .vf-val {
    margin-left: 8px;
  }
}

.vf-val.email,
.vf-val.phone {
  color: var(--primary-purple-500);
  text-decoration: none;
}

.vf-val.email:hover,
.vf-val.phone:hover {
  text-decoration: underline;
}

.vf-val.role-badge {
  display: inline-block;
  padding: 4px 10px;
  background-color: var(--primary-purple-100);
  color: var(--primary-purple-500);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.vf-val.appointment-role {
  display: inline-block;
  padding: 4px 10px;
  background-color: #e0f2fe;
  color: #0369a1;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.approved {
  background-color: #dcfce7;
  color: #166534;
}

.status-badge.rejected {
  background-color: #fee2e2;
  color: #991b1b;
}

.status-badge.pending {
  background-color: #fef9c3;
  color: #854d0e;
}

.status-badge.default {
  background-color: #f1f5f9;
  color: #475569;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #166534;
}

.unverified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #854d0e;
}

.address-section {
  padding: 16px;
  background-color: var(--view-bg);
  border-radius: 12px;
  border: 1px solid var(--view-border);
}

.address-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
  border: 1px solid var(--view-border);
}

.address-icon {
  color: var(--primary-purple-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.address-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--view-text);
  word-break: break-word;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--view-border);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-label {
  font-size: 12px;
  color: var(--view-muted);
}

.summary-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--view-value-color);
}

.vqa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  background-color: var(--view-bg);
  border: 1px solid var(--view-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.vqa-btn:hover {
  background-color: var(--primary-purple-100);
  border-color: var(--primary-purple-400);
  color: var(--primary-purple-500);
}

.vqa-btn.vqa-purple {
  color: var(--primary-purple-500);
  background-color: var(--primary-purple-100);
  border-color: var(--primary-purple-300);
}

.vqa-btn.vqa-purple:hover {
  background-color: var(--primary-purple-200);
}

.vqa-btn.vqa-green {
  color: #166534;
  background-color: #dcfce7;
  border-color: #86efac;
}

.vqa-btn.vqa-green:hover {
  background-color: #bbf7d0;
}

.vqa-btn.vqa-red {
  color: #991b1b;
  background-color: #fee2e2;
  border-color: #fecaca;
}

.vqa-btn.vqa-red:hover {
  background-color: #fecaca;
}

.vqa-btn.vqa-full {
  width: 100%;
}

.vtl-item {
  display: flex;
  gap: 12px;
  position: relative;
}

.vtl-item:last-child .vtl-line {
  display: none;
}

.vtl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
}

.vtl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--view-muted);
  border: 2px solid var(--view-surface);
}

.vtl-dot.done {
  background-color: var(--primary-purple-500);
}

.vtl-line {
  width: 2px;
  flex: 1;
  background-color: var(--view-border);
  margin: 4px 0;
}

.vtl-body {
  flex: 1;
  padding-bottom: 16px;
}

.vtl-event {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--view-text);
}

.vtl-time {
  margin: 0;
  font-size: 11px;
  color: var(--view-muted);
}

.user-top-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.user-top-left {
  min-width: 0;
}

.user-top-right {
  min-width: 0;
}

@media (max-width: 992px) {
  .user-top-layout {
    grid-template-columns: 1fr;
  }
}

.stat-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-color: #d1d5db;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-value {
  /* font-size: 22px; */
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  margin-top: 2px;
}

.stat-sub {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 1px;
}

.activity-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.activity-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity-count-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 20px;
  color: #6b7280;
}

.donut-container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.distribution-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dist-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 4px 0;
}

.dist-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
}

.dist-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dist-value {
  font-weight: 600;
  color: #374151;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
  transition: all 0.2s;
}

.activity-item:hover {
  background: #f3f4f6;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.activity-type {
  display: flex;
  align-items: center;
  gap: 6px;
}

.activity-type-name {
  font-weight: 600;
  font-size: 12px;
  color: #374151;
}

.activity-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.status-approved {
  color: #22c55e;
}

.status-pending {
  color: #f59e0b;
}

.status-cancelled {
  color: #ef4444;
}

.activity-date {
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 4px;
}

.activity-remarks {
  font-size: 10px;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.load-more-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #6366f1;
  cursor: pointer;
  transition: all 0.2s;
}

.load-more-btn:hover {
  background: #e5e7eb;
}

.status-row {
  margin-bottom: 16px;
}

.status-list-horizontal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f9fafb;
  border-radius: 10px;
}

.status-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-value-large {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.status-label-small {
  font-size: 11px;
  color: #9ca3af;
}

.performance-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.performance-container {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gauge-container {
  position: relative;
  flex-shrink: 0;
}

.gauge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.performance-metrics {
  flex: 1;
}

.metric-item {
  margin-bottom: 12px;
}

.metric-label {
  font-size: 11px;
  color: #6b7280;
  display: block;
  margin-bottom: 4px;
}

.metric-bar-bg {
  height: 6px;
  background: #f3f4f6;
  border-radius: 99px;
  overflow: hidden;
  margin: 6px 0;
}

.metric-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}

.metric-value {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.productivity-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

.refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: auto;
}

.refresh-btn:hover:not(:disabled) {
  background: #f3f4f6;
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spin {
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  text-align: center;
  padding: 30px 20px;
}

.empty-icon {
  font-size: 40px;
  opacity: 0.4;
  margin-bottom: 12px;
}

.empty-text {
  font-size: 13px;
  color: #9ca3af;
}

@media (max-width: 1000px) {
  .stat-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }

  .activity-grid-two {
    grid-template-columns: 1fr;
  }

  .status-list-horizontal {
    grid-template-columns: repeat(2, 1fr);
  }
}

.status-performance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.status-performance-row .activity-panel,
.status-performance-row .performance-panel {
  height: 100%;
}

@media (max-width: 992px) {
  .status-performance-row {
    grid-template-columns: 1fr;
  }
}

/* Add step modal  */
.awsm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.awsm-modal {
  width: 100%;
  max-width: 720px;
  height: 92vh;
  max-height: 92vh;
  background: var(--bg-color);
  border-radius: 14px;
  box-shadow: 0 10px 40px var(--shadow-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.awsm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-color);
  z-index: 5;
}

.awsm-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-color);
}

.awsm-subtitle {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--accent-color);
}

.awsm-close-btn {
  background: transparent;
  border: none;
  color: var(--accent-color);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: flex;
  flex-shrink: 0;
}

.awsm-close-btn:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

.awsm-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.awsm-body-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

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

.awsm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.awsm-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color);
}

.awsm-required {
  color: var(--color-red);
}

.awsm-hint {
  font-size: 10px;
  color: var(--color-grey);
}

.awsm-input,
.awsm-textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-color);
  outline: none;
  font-family: inherit;
}

.awsm-input:focus,
.awsm-textarea:focus {
  border-color: var(--primary-purple-400);
  box-shadow: 0 0 0 3px var(--primary-purple-100);
}

.awsm-textarea {
  resize: vertical;
  line-height: 1.5;
  min-height: 80px;
}

/* Custom select */
.awsm-select {
  position: relative;
  width: 100%;
}

.awsm-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-color);
  cursor: pointer;
}

.awsm-select-trigger:hover {
  border-color: var(--primary-purple-300);
}

.awsm-select-value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-purple-500);
  font-weight: 500;
}

.awsm-chevron {
  color: var(--accent-color);
  transition: transform 0.15s ease;
}

.awsm-chevron.open {
  transform: rotate(180deg);
}

.awsm-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--shadow-color);
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

.awsm-select-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-color);
  cursor: pointer;
}

.awsm-select-option:hover {
  background: var(--hover-bg);
}

.awsm-select-option.active {
  background: var(--primary-purple-100);
  color: var(--primary-purple-500);
  font-weight: 500;
}

/* Toggle rows */
.awsm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
}

.awsm-toggle-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color);
}

.awsm-toggle-desc {
  font-size: 10px;
  color: var(--color-grey);
  margin-top: 2px;
}

.awsm-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

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

.awsm-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--color-neutral-500);
  border-radius: 20px;
  transition: 0.2s;
}

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

.awsm-switch input:checked+.awsm-slider {
  background-color: var(--primary-purple-400);
}

.awsm-switch input:checked+.awsm-slider::before {
  transform: translateX(16px);
}

/* Template row */
.awsm-template-row {
  display: flex;
  gap: 8px;
}

.awsm-template-row .awsm-select {
  flex: 1;
}

.awsm-manage-btn {
  white-space: nowrap;
}

/* Message header */
.awsm-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.awsm-message-actions {
  display: flex;
  gap: 10px;
}

.awsm-link-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--primary-purple-400);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.awsm-link-btn:hover {
  color: var(--primary-purple-500);
}

/* AI Suggestion box */
.awsm-ai-box {
  background: var(--primary-purple-100);
  border: 1px solid var(--primary-purple-200);
  border-radius: 12px;
  padding: 14px;
}

.awsm-ai-box-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.awsm-ai-icon {
  color: var(--primary-purple-400);
}

.awsm-ai-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color);
}

.awsm-ai-beta {
  font-size: 9px;
  font-weight: 700;
  color: var(--primary-purple-500);
  background: var(--primary-purple-200);
  padding: 2px 6px;
  border-radius: 20px;
}

.awsm-ai-desc {
  margin: 3px 0;
  font-size: 11px;
  color: var(--accent-color);
}

.awsm-ai-highlight {
  color: var(--text-color);
}

.awsm-ai-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Buttons */
.awsm-btn-primary {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-purple-400);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.awsm-btn-primary:hover {
  background: var(--primary-purple-500);
}

.awsm-btn-outline {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.awsm-btn-outline:hover {
  background: var(--hover-bg);
}

/* Footer */
.awsm-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
  background: var(--bg-color);
  z-index: 5;
}

@media (max-width: 640px) {
  .awsm-grid-2 {
    grid-template-columns: 1fr;
  }

  .awsm-template-row {
    flex-direction: column;
  }
}

/* Add step modal  */

/* campaign lead view page  */

.clv-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--color-neutral-300);
}

.clv-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 18px 20px;
}

.clv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.clv-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-color);
}

.clv-ai-title-icon {
  color: var(--primary-purple-400);
}

/* ---------- Header ---------- */
.clv-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.clv-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.clv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-purple-400);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.clv-header-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.clv-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clv-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color);
}

.clv-status-pill {
  background: var(--color-green-light);
  color: var(--color-green);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
}

.clv-status-pill.small {
  font-size: 11px;
}

.clv-star-btn {
  background: transparent;
  border: none;
  color: var(--color-yellow);
  cursor: pointer;
  display: flex;
  padding: 0;
}

.clv-sub {
  font-size: 12px;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.clv-dot {
  color: var(--color-neutral-500);
}

.clv-header-info {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.clv-header-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 90px;
}

.clv-header-info-label {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-header-info-value {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}

.clv-score-pill {
  display: inline-flex;
  width: fit-content;
  background: var(--color-green-light);
  color: var(--color-green);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
}

.clv-header-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clv-nav-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-color);
  cursor: pointer;
  min-width: 96px;
}

.clv-nav-btn:hover:not(:disabled) {
  background: var(--hover-bg);
}

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

/* ---------- Stepper ---------- */
/* .clv-stepper-card {
  padding: 18px 24px;
}

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

.clv-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  height: 4px;
}

.clv-step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  z-index: 1;
}

.clv-step-done {
  background: var(--color-green);
}

.clv-step-active {
  background: var(--primary-purple-400);
}

.clv-step-pending {
  background: var(--color-neutral-500);
}

.clv-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clv-step-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-color);
}

.clv-step-label-active {
  color: var(--primary-purple-400);
}

.clv-step-label-pending {
  color: var(--color-grey);
}

.clv-step-date {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-step-sub {
  font-size: 11px;
  color: var(--primary-purple-400);
  font-weight: 600;
}

.clv-step-connector {
  position: absolute;
  top: 12px;
  left: calc(50% + 12px);
  width: calc(100% - 24px);
  height: 2px;
  background: var(--border-color);
}

.clv-step-connector.done {
  background: var(--color-green);
} */

/* ===========================
   Lead Stepper Card
=========================== */

.clv-stepper-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 28px;
  border: 1px solid #eef1f6;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.05);
}

/* ===========================
   Stepper
=========================== */

.clv-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.clv-step {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Connector */

.clv-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 34px;
  width: calc(100% - 34px);
  height: 2px;
  background: #e6ebf5;
  z-index: 0;
}

.clv-step.done:not(:last-child)::after {
  background: linear-gradient(90deg, #22c55e 0%, #53d67b 100%);
}

/* ===========================
   Icons
=========================== */

.clv-step-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  position: relative;
  z-index: 2;

  transition: 0.25s ease;
}

/* Completed */

.clv-step-done {
  background: #22c55e;
  color: white;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

/* Active */
/* color:  */
.clv-step-active {
  background: var(--primary-purple-400);
  color: white;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* Pending */

.clv-step-pending {
  background: #f3f5f8;
  color: #a6afbe;
  border: 1px solid #e4e7ec;
}

/* ===========================
   Text
=========================== */

.clv-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: max-content;
}

.clv-step-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.2;
}

.clv-step-label-active {
  color: var(--primary-purple-400);
}

.clv-step-label-pending {
  color: #7b8794;
}

.clv-step-date {
  font-size: 11px;
  color: #98a2b3;
  font-weight: 500;
}

.clv-step-sub {
  font-size: 11px;
  color: var(--primary-purple-400);
  font-weight: 600;
}

/* Hover */

.clv-step:hover .clv-step-icon {
  transform: scale(1.08);
}

/* ===========================
   Responsive
=========================== */

@media (max-width: 900px) {
  .clv-stepper {
    flex-direction: column;
    gap: 24px;
  }

  .clv-step {
    width: 100%;
  }

  .clv-step:not(:last-child)::after {
    left: 12px;
    top: 28px;
    width: 2px;
    height: 32px;
  }
}

/* ---------- Grid layout ---------- */
.clv-grid {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  gap: 16px;
  align-items: start;
}

.clv-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- Lead details list ---------- */
.clv-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clv-detail-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clv-detail-label {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-detail-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
}

.clv-detail-link {
  color: var(--link-color);
}

.clv-detail-notes {
  padding-top: 4px;
  border-top: 1px solid var(--border-color);
}

.clv-edit-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--primary-purple-400);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* ---------- AI card ---------- */
.clv-ai-card {
  background: var(--primary-purple-100);
  border-color: var(--primary-purple-200);
}

.clv-ai-summary {
  font-size: 12.5px;
  color: var(--text-color);
  margin: 0 0 12px;
  line-height: 1.5;
}

.clv-ai-subheading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-grey);
  margin: 10px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.clv-ai-action-link {
  background: transparent;
  border: none;
  color: var(--primary-purple-500);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.clv-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.clv-tag {
  background: var(--primary-purple-200);
  color: var(--primary-purple-500);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ---------- Campaign status ---------- */
.clv-status-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.clv-status-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.clv-status-stat-label {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-status-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-color);
}

.clv-status-stat-date {
  font-size: 13px;
}

.clv-status-stat-pct {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-value-orange {
  color: var(--color-orange);
}

.clv-value-red {
  color: var(--color-red);
}

/* ---------- Tabs ---------- */
.clv-tabs {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.clv-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-grey);
  cursor: pointer;
}

.clv-tab.active {
  color: var(--primary-purple-400);
  border-bottom-color: var(--primary-purple-400);
}

.clv-tab-placeholder {
  font-size: 13px;
  color: var(--color-grey);
  padding: 20px 0;
  text-align: center;
}

/* ---------- Timeline ---------- */
.clv-timeline {
  display: flex;
  flex-direction: column;
}

.clv-timeline-row {
  display: flex;
  gap: 12px;
}

.clv-timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clv-tl-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.clv-tl-icon-green {
  background: var(--color-green-light);
  color: var(--color-green);
}

.clv-tl-icon-orange {
  background: var(--color-orange-light);
  color: var(--color-orange);
}

.clv-tl-icon-purple {
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
}

.clv-tl-icon-blue {
  background: var(--color-blue-light);
  color: var(--color-blue);
}

.clv-tl-line {
  flex: 1;
  width: 2px;
  background: var(--border-color);
  margin: 4px 0;
  min-height: 24px;
}

.clv-timeline-content {
  flex: 1;
  padding-bottom: 18px;
}

.clv-timeline-date {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-timeline-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
}

.clv-timeline-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
}

.clv-timeline-desc {
  font-size: 12px;
  color: var(--accent-color);
  margin: 3px 0 0;
}

.clv-timeline-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.clv-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.clv-badge-green {
  background: var(--color-green-light);
  color: var(--color-green);
}

.clv-badge-orange {
  background: var(--color-orange-light);
  color: var(--color-orange);
}

.clv-badge-purple {
  background: var(--primary-purple-100);
  color: var(--primary-purple-500);
}

.clv-badge-blue {
  background: var(--color-blue-light);
  color: var(--color-blue);
}

.clv-timeline-action-btn {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-purple-400);
  cursor: pointer;
  white-space: nowrap;
}

.clv-timeline-action-btn:hover {
  background: var(--hover-bg);
}

.clv-view-full-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--primary-purple-400);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 0;
}

/* ---------- Next best actions ---------- */
.clv-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.clv-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.clv-action-item:hover {
  background: var(--hover-bg);
}

.clv-action-item.primary {
  background: var(--primary-purple-400);
  border-color: var(--primary-purple-400);
}

.clv-action-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--primary-purple-100);
  color: var(--primary-purple-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.clv-action-item.primary .clv-action-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.clv-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clv-action-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color);
}

.clv-action-desc {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-action-item.primary .clv-action-title,
.clv-action-item.primary .clv-action-desc {
  color: #ffffff;
}

.clv-action-item.primary .clv-action-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Attachments ---------- */
.clv-attachments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clv-attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clv-attachment-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-red-light);
  color: var(--color-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.clv-attachment-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.clv-attachment-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clv-attachment-date {
  font-size: 11px;
  color: var(--color-grey);
}

.clv-attachment-download {
  color: var(--primary-purple-400);
  display: flex;
  flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .clv-grid {
    grid-template-columns: 260px 1fr 260px;
  }

  .clv-header-info {
    justify-content: flex-start;
  }
}

@media (max-width: 992px) {
  .clv-grid {
    grid-template-columns: 1fr;
  }

  .clv-status-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .clv-stepper {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* campaign lead view page  */
.v-status {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  text-transform: capitalize;
}

/* Draft */
.v-status.draft {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
}

/* Pending Approval */
.v-status.pending {
  background: #fff7e6;
  color: #d97706;
  border-color: #fde68a;
}

/* Approved */
.v-status.approved {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

/* Paid */
.v-status.paid {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

/* Partially Paid */
.v-status.partially-paid {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}

/* Not Paid */
.v-status.not-paid {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* Void */
.v-status.void {
  background: #f5f3ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}

/* Cancelled */
.v-status.cancelled {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fecdd3;
}

.v-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px !important;
  font-weight: 600;
}

.status-draft {
  background: #f3f4f6;
  color: #6b7280;
}

.status-pending {
  background: #fff7e6;
  color: #d97706;
}

.status-approved {
  background: #ecfdf5;
  color: #16a34a;
}

.status-paid {
  background: #dcfce7;
  color: #15803d;
}

.status-void {
  background: #f3f4f6;
  color: #4b5563;
}

.status-cancelled {
  background: #fee2e2;
  color: #dc2626;
}

.status-partially-paid {
  background: #ede9fe;
  color: #7c3aed;
  font-size: 11px !important;
  padding: 3px 10px;
  border-radius: 20px;
}

.status-not-paid {
  background: #fef2f2;
  color: #b91c1c;
}

/* Base Status Badge */
.v-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-transform: capitalize;
}

/* PAID */
.v-status.paid {
  background: #dcfce7;
  color: #15803d;
}

/* PARTIALLY_PAID */
.v-status.partial {
  background: #ede9fe;
  color: #7c3aed;
}

/* NOT_PAID */
.v-status.pending {
  background: #fef3c7;
  color: #b45309;
}

/* RETURN */
.v-status.returned {
  background: #dbeafe;
  color: #1d4ed8;
}

/* VOID */
.v-status.void {
  background: #fee2e2;
  color: #dc2626;
}


/* ── Individual Status Dropdown Styles ──────────────────────── */
.status-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.status-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 11px;
  border: 1.5px solid #d1d7e0;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
  justify-content: center;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
}

.status-dropdown-trigger:hover:not(:disabled) {
  background: #f7f8fa;
  border-color: #b8c0cc;
}

.status-dropdown-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.status-dropdown-trigger .status-chevron {
  transition: transform 0.2s;
  margin-left: 2px;
}

.status-dropdown-trigger .status-chevron.open {
  transform: rotate(180deg);
}

.status-dropdown-trigger .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  padding: 4px;
  animation: dropdownFadeIn 0.15s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.status-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  color: #1a2332;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: capitalize;
}

.status-dropdown-item:hover:not(:disabled) {
  background: #f0f2f5;
}

.status-dropdown-item.active {
  background: #f0e6ff;
  color: #6c5ce7;
  font-weight: 500;
}

.status-dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-dropdown-item .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-check {
  margin-left: auto;
  color: #6c5ce7;
  font-size: 14px;
}

/* ── Bulk Status Modal Styles ──────────────────────────────── */
.bulk-status-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.bulk-status-modal {
  background: #fff;
  border-radius: 12px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: bulkStatusSlideIn 0.25s ease;
}

@keyframes bulkStatusSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bulk-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e9edf4;
}

.bulk-status-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a2332;
  margin: 0;
}

.bulk-status-close {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: #8a94a6;
  border-radius: 6px;
  font-size: 18px;
  transition: background 0.2s;
}

.bulk-status-close:hover {
  background: #f0f2f5;
  color: #1a2332;
}

.bulk-status-body {
  padding: 20px 24px 24px;
}

.bulk-status-info {
  font-size: 14px;
  color: #4a5568;
  margin: 0 0 16px;
  line-height: 1.5;
}

.bulk-status-info strong {
  color: #1a2332;
}

.bulk-status-form-group {
  margin-bottom: 20px;
}

.bulk-status-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 6px;
}

.bulk-status-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.bulk-status-dot {
  position: absolute;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 1;
}

.bulk-status-select {
  width: 100%;
  padding: 10px 12px 10px 32px;
  border: 2px solid #d1d7e0;
  border-radius: 8px;
  font-size: 14px;
  color: #1a2332;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.bulk-status-select:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}

.bulk-status-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bulk-status-actions {
  display: flex;

  justify-content: space-between;
  /* padding-top: 8px; */
}