.toastContainer--jJmLj {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

.toast--z7awC {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--color-shadow-medium, rgba(0, 0, 0, 0.15));
  animation: slideIn--dNEoB 0.3s ease-out;
  min-width: 300px;
}

@keyframes slideIn--dNEoB {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toastExiting--_LzEw {
  animation: slideOut--mKu9P 0.3s ease-in forwards;
}

@keyframes slideOut--mKu9P {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.success--z6ZDs {
  background: var(--color-success-50, #f0fdf4);
  border: 1px solid var(--color-success-200, #bbf7d0);
}

.error--DhNnP {
  background: var(--color-error-50, #fef2f2);
  border: 1px solid var(--color-error-200, #fecaca);
}

.warning--f5v0N {
  background: var(--color-warning-50, #fffbeb);
  border: 1px solid var(--color-warning-200, #fde68a);
}

.info--d0DA7 {
  background: var(--color-primary-50, #eff6ff);
  border: 1px solid var(--color-primary-200, #bfdbfe);
}

.icon--vq4Ec {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.success--z6ZDs .icon--vq4Ec {
  color: var(--color-success-500, #22c55e);
}

.error--DhNnP .icon--vq4Ec {
  color: var(--color-error-500, #ef4444);
}

.warning--f5v0N .icon--vq4Ec {
  color: var(--color-warning-500, #f59e0b);
}

.info--d0DA7 .icon--vq4Ec {
  color: var(--color-primary-500, #3b82f6);
}

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

.title--npude {
  font-family: MulishBold, sans-serif;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.success--z6ZDs .title--npude {
  color: var(--color-success-800, #166534);
}

.error--DhNnP .title--npude {
  color: var(--color-error-800, #991b1b);
}

.warning--f5v0N .title--npude {
  color: var(--color-warning-800, #92400e);
}

.info--d0DA7 .title--npude {
  color: var(--color-primary-800, #1e40af);
}

.message--gaaLT {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

.success--z6ZDs .message--gaaLT {
  color: var(--color-success-700, #15803d);
}

.error--DhNnP .message--gaaLT {
  color: var(--color-error-700, #b91c1c);
}

.warning--f5v0N .message--gaaLT {
  color: var(--color-warning-700, #b45309);
}

.info--d0DA7 .message--gaaLT {
  color: var(--color-primary-700, #1d4ed8);
}

.closeButton--EkGhg {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.closeButton--EkGhg:hover {
  opacity: 1;
}

.success--z6ZDs .closeButton--EkGhg {
  color: var(--color-success-800, #166534);
}

.error--DhNnP .closeButton--EkGhg {
  color: var(--color-error-800, #991b1b);
}

.warning--f5v0N .closeButton--EkGhg {
  color: var(--color-warning-800, #92400e);
}

.info--d0DA7 .closeButton--EkGhg {
  color: var(--color-primary-800, #1e40af);
}

.container--yebvi {
  height: 100%;
  background: var(--color-background-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Page Header */
.header--_M6YO {
  background: var(--color-background-primary);
  padding: 10px 45px;
  min-height: 65.38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pageTitle--GOYp2 {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--color-primary-600);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* View Toggle */
.viewToggle--wPg13 {
  display: flex;
  gap: 8px;
  background: var(--color-background-secondary);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
}

.viewButton--emKju,
.viewButtonActive--UkmGc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-secondary);
}

.viewButton--emKju:hover {
  background: var(--color-background-primary);
  color: var(--color-primary);
}

.viewButtonActive--UkmGc {
  background: var(--color-background-primary);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Tabs */
.tabsContainer--lcSQD {
  background: var(--color-background-primary);
  border-top: 1px solid var(--color-border-light);
  position: relative;
}

.tabs--xXwQ6 {
  display: flex;
  gap: 39px;
  padding: 10px 30px;
}

.tab--y1rdq,
.tabActive--IGaIA {
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-transform: capitalize;
  transition: color 0.2s;
  position: relative;
  padding-bottom: 10px;
}

.tab--y1rdq {
  color: var(--color-text-secondary);
}

.tab--y1rdq:hover {
  color: var(--color-primary);
}

.tabActive--IGaIA {
  color: var(--color-primary);
}

.tabActive--IGaIA::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 4px 4px 0 0;
}

/* Search Bar */
.searchBar--kNZ63 {
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-light);
  padding: 20px 30px;
  display: flex;
  align-items: center;
  min-height: 57px;
}

.searchIcon--PP6vW {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* Toolbar Wrapper */
.toolbarWrapper--v1Nrf {
  width: 100%;
  background: var(--color-background-secondary);
  border-bottom: 1px solid var(--color-border-light);
}

/* Content */
.content--yZCBr {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 30px 16px;
  background: var(--color-background-secondary);
  --report-card-width: 265px;
}

.grid--wrDTb {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--report-card-width));
  gap: 20px; /* Fixed gap - never changes with resolution */
  padding: 16px 0;
  justify-content: start; /* Always align cards to the left */
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .content--yZCBr {
    padding: 0 20px 16px;
  }
}

@media (max-width: 768px) {
  .content--yZCBr {
    padding: 0 16px 16px;
    --report-card-width: 240px;
  }
}

@media (max-width: 640px) {
  .grid--wrDTb {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

.loading--sI4LW,
.error--MxQim {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.error--MxQim {
  color: var(--color-error);
}

.errorButton--kFiUu {
  margin-top: 16px;
  padding: 8px 24px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  transition: background 0.2s;
}

.errorButton--kFiUu:hover {
  background: var(--color-primary-600);
}

/* Table View Styles */
.tableWrapper--AnAnm {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-background-primary);
  margin: 0 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tableContainer--zQwVV {
  flex: 1;
  overflow: auto;
}

.actionButton--LO8s7 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  font-size: 14px;
  color: var(--color-text-primary);
  transition: all 0.2s;
}

.actionButton--LO8s7:hover {
  background: var(--color-background-secondary);
}

.deleteAction--wsYnA {
  color: var(--color-error);
}

.deleteAction--wsYnA:hover {
  background: var(--color-error-50);
}

.statusBadge--KB7Kh {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status0--RMZj0 {
  background: var(--color-warning-50);
  color: var(--color-warning-400);
}

.status1--_aB9w {
  background: var(--color-success-50);
  color: var(--color-success-600);
}

.table-container--nAPAk {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ============================================
   EditableStatusDropdown Component
   Reusable dropdown for enabled/disabled status
   with optional dot indicator - used across tables
   ============================================ */

.container--XEhY3 {
  position: relative;
  display: inline-block;
}

.trigger--VcbP8 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid transparent;
  padding: 4px 8px 4px 0; /* Remove left padding so text aligns with column header */
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border-radius: 4px;
  transition: border-color 0.2s, background-color 0.2s;
}

.trigger--VcbP8:hover:not(:disabled) {
  border-color: var(--color-border-light, #e2e8f0);
  background-color: var(--color-background-secondary, #f8fafc);
}

.triggerOpen--lnI6V {
  border-color: transparent;
  background-color: transparent;
}

.trigger--VcbP8:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.arrow--qMuoY {
  width: 12px;
  height: 12px;
  color: var(--color-text-secondary, #64748b);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.arrowOpen--Xhx2D {
  transform: rotate(180deg);
}

.menu--r5HQL {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  background-color: var(--color-background-primary, #ffffff);
  border: 1px solid var(--color-border-light, #e2e8f0);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.option--DYaqL {
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-primary, #1e293b);
  transition: background-color 0.15s;
}

.option--DYaqL:hover {
  background-color: var(--color-background-secondary, #f1f5f9);
}

.optionSelected--_oiEj {
  background-color: var(--color-primary-50, #eff6ff);
  color: var(--color-primary-600, #2563eb);
  font-weight: 500;
}

/* Status text with optional dot indicator */
.statusText--WrpGC {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.statusDot--A34A3 {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status: Disabled (gray dot) */
.statusDotDisabled--Xer4_ {
  background-color: var(--color-status-draft, #9ca3af);
}

/* Status: Enabled (green dot) */
.statusDotEnabled--XolOX {
  background-color: var(--color-status-published, #16a34a);
}


.reports-management-container--h4jW0 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
}

.table-wrapper--FFWcd {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-secondary);
}

/* Action button styles */
button.action-button--UupNK > span {
  font-family: Mulish;
  font-weight: 400;
  font-size: 14px;
}

button.action-button--UupNK {
  gap: 13px;
}

button.action-button--UupNK:hover {
  background-color: transparent !important;
}

button.action-button--UupNK.delete-action--r_rbd > span > svg {
  color: var(--color-error);
}

.saved-reports-container--tT8Q3 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
}

.table-wrapper--drFwt {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-secondary);
}

/* Action button styles */
button.action-button--bMOhf > span {
  font-family: Mulish;
  font-weight: 400;
  font-size: 14px;
}

button.action-button--bMOhf {
  gap: 13px;
}

button.action-button--bMOhf:hover {
  background-color: transparent !important;
}

button.action-button--bMOhf.delete-action--RSC1q > span > svg {
  color: var(--color-error);
}

/**
 * Shared CSS animations
 * Import this file to use these animations in CSS modules
 */

@keyframes slideDownFade--kqj2d {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.field--JrwxB {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label--Pp3IJ {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #1e1e1e);
}

.required--jRfRp {
  color: var(--color-error, #e74c3c);
  margin-left: 4px;
}

.input--cgbvE,
.textarea--oCa1R {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-medium, #d1d5db);
  border-radius: 6px;
  background: var(--color-background-primary, #ffffff);
  color: var(--color-text-primary, #1e1e1e);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input--cgbvE:focus,
.textarea--oCa1R:focus {
  outline: none;
  border-color: var(--color-primary-600, #017aff);
  box-shadow: 0 0 0 3px rgba(1, 122, 255, 0.1);
}

.input--cgbvE:disabled,
.textarea--oCa1R:disabled {
  background: var(--color-background-secondary, #f5f5f5);
  cursor: not-allowed;
}

.input--cgbvE::placeholder,
.textarea--oCa1R::placeholder {
  color: var(--color-text-tertiary, #9ca3af);
}

.textarea--oCa1R {
  resize: vertical;
  min-height: 100px;
}

/* Input error state */
.inputError--mizWE {
  border-color: var(--color-error-500, #ef4444);
}

.inputError--mizWE:focus {
  outline: none;
  border-color: var(--color-error-600, #dc2626);
  box-shadow: 0 0 0 3px var(--color-error-100, #fee2e2);
}

/* Inline field error message */
.fieldError--FHoko {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-error-600, #dc2626);
  margin-top: 6px;
  animation: slideDownFade--diudm 0.2s ease-out;
}


.saved-reports-container--yjsNK {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.saved-reports-more--UigCy {
  display: flex;
  color: var(--color-primary);
}

.cell-overflow-ellipsis--E_2YU {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.scheduled-reports-container--iwtjD {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
}

.table-wrapper--VcHmV {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-background-secondary);
}

/* Action button styles */
button.action-button--xHmYJ > span {
  font-family: Mulish;
  font-weight: 400;
  font-size: 14px;
}

button.action-button--xHmYJ {
  gap: 13px;
}

button.action-button--xHmYJ:hover {
  background-color: transparent !important;
}

button.action-button--xHmYJ.delete-action--fOAUs > span > svg {
  color: var(--color-error);
}

/* Form container */
.form--G6EWa {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Error message */
.error--y5c5w {
  padding: 12px;
  background-color: var(--color-error-100, #fee2e2);
  border: 1px solid var(--color-error-300, #fca5a5);
  border-radius: 6px;
  color: var(--color-error-700, #b91c1c);
  font-size: 14px;
}

/* Field container */
.field--HChWE {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label */
.label--XrhgT {
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #1e1e1e);
}

.required--M7uqH {
  color: var(--color-error, #dc2626);
  margin-left: 2px;
}

/* Input */
.input--_7RyF {
  padding: 10px 12px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--text-primary, #1e1e1e);
  background-color: var(--background-primary, #fff);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input--_7RyF:focus {
  outline: none;
  border-color: var(--color-primary, #017aff);
  box-shadow: 0 0 0 3px rgba(1, 122, 255, 0.1);
}

.input--_7RyF:disabled {
  background-color: var(--background-disabled, #f3f4f6);
  cursor: not-allowed;
}

.input--_7RyF::placeholder {
  color: var(--text-tertiary, #9ca3af);
}

/* Input error state */
.inputError--rWV8X {
  border-color: var(--color-error-500, #ef4444);
}

.inputError--rWV8X:focus {
  outline: none;
  border-color: var(--color-error-600, #dc2626);
  box-shadow: 0 0 0 3px var(--color-error-100, #fee2e2);
}

/* Inline field error message */
.fieldError--D7O8D {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-error-600, #dc2626);
  margin-top: 6px;
  animation: slideDownFade--qlFmm 0.2s ease-out;
}

/* Textarea */
.textarea--quqIf {
  padding: 10px 12px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--text-primary, #1e1e1e);
  background-color: var(--background-primary, #fff);
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.textarea--quqIf:focus {
  outline: none;
  border-color: var(--color-primary, #017aff);
  box-shadow: 0 0 0 3px rgba(1, 122, 255, 0.1);
}

.textarea--quqIf:disabled {
  background-color: var(--background-disabled, #f3f4f6);
  cursor: not-allowed;
}

.textarea--quqIf::placeholder {
  color: var(--text-tertiary, #9ca3af);
}

/* Format options */
.formatOptions--A7HNn {
  display: flex;
  gap: 16px;
}

.formatOption--O9Kve {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 20px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  background-color: var(--background-primary, #fff);
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
  min-width: 100px;
}

.formatOption--O9Kve:hover {
  border-color: var(--color-primary-300, #93c5fd);
  background-color: var(--background-hover, #f9fafb);
}

.formatOption--O9Kve.selected--Cw4q1 {
  border-color: var(--color-primary, #017aff);
  background-color: var(--color-primary-50, #eff6ff);
  box-shadow: 0 0 0 1px var(--color-primary, #017aff);
}

.formatOption--O9Kve input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Format icon */
.formatIcon--8hOFj {
  flex-shrink: 0;
}

/* Format label */
.formatLabel--cUgea {
  font-family: 'Mulish', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary, #1e1e1e);
}

/* Format badge (for table display) */
.formatBadge--BHM6Q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formatBadge--BHM6Q.pdf--ZXrC2 {
  background-color: var(--color-error-100, #fee2e2);
  color: var(--color-error-700, #b91c1c);
}

.formatBadge--BHM6Q.excel--IlWPO {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-700, #15803d);
}


/* ============================================
   Status Badge Component
   Matches Figma design specifications
   ============================================ */

.badge--szwbY {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  width: fit-content;
}

/* Published status - uses success colors from theme */
.published--znDmY {
  background-color: var(--color-success-50);
  color: var(--color-success-600);
}

/* Draft status - uses secondary colors from theme */
.draft--Rl8v6 {
  background-color: var(--color-background-secondary);
  color: var(--color-text-secondary);
}

/* ============================================
   Enabled/Disabled Status Badge Component
   Used for saved reports and scheduled reports
   Matches table column styling with dot indicator
   ============================================ */

.badge--rbCvq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--color-text-primary);
}

.badge--rbCvq::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status: Disabled (gray dot) */
.disabled--eNONC::before {
  background-color: var(--color-status-draft, #9ca3af);
}

/* Status: Enabled (green dot) */
.enabled--Daxf5::before {
  background-color: var(--color-status-published, #16a34a);
}

/* Overlay */
.overlay--KiJOs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Modal Container */
.modal--kqn5L {
  background: var(--background-primary, #fff);
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 655px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: 'Mulish', sans-serif;
}

/* Header */
.header--lPrxB {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  padding-top: 16px;
  padding-bottom: 7px;
}

.title--TlMqd {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  color: var(--color-primary-700, #2c4f7f);
}

.closeButton--VKtyr {
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #666);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s;
}

.closeButton--VKtyr:hover {
  color: var(--text-primary, #333);
}

.closeButton--VKtyr:focus {
  outline: 2px solid var(--color-primary, #017aff);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Divider */
.divider--lPMh6 {
  height: 1px;
  background: var(--border-color, rgba(0, 0, 0, 0.1));
  width: 100%;
}

/* Content */
.content--EOgFm {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Loading/Error/Empty states */
.loading--JJcdd,
.error--GU_uI,
.empty--x4aDa {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--text-secondary, #5f6774);
  text-align: center;
  padding: 24px;
}

.error--GU_uI {
  color: var(--color-error, #dc2626);
}

/* Reports List */
.reportsList--ht08_ {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Report Card */
.reportCard--M1vAU {
  background: var(--background-primary, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.reportInfo--lS5cB {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reportName--N7Azs {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary, #000);
}

.reportDescription--tbJ02 {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #5f6774);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reportDate--o9zwz {
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary, #9199a5);
  margin-top: 4px;
}

/* Run Button */
.runButton--tsqEt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-primary, #017aff);
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  min-width: 70px;
  height: 29px;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: #fff;
  text-transform: capitalize;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.runButton--tsqEt:hover {
  background: var(--color-primary-hover, #0066d6);
}

.runButton--tsqEt:focus {
  outline: 2px solid var(--color-primary, #017aff);
  outline-offset: 2px;
}

.runButton--tsqEt:active {
  background: var(--color-primary-active, #005bb5);
}

.runButton--tsqEt svg {
  width: 8px;
  height: 10px;
}

/* Footer Spacer */
.footerSpacer--tyR53 {
  height: 60px;
  flex-shrink: 0;
}

/* Wide modal variant for read-only table view */
.modalWide--IIKR0 {
  max-width: 700px;
}

/* Table View (read-only mode) */
.table--Q5ghI {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table--Q5ghI th,
.table--Q5ghI td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.table--Q5ghI th {
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  background-color: var(--background-secondary, #f9fafb);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table--Q5ghI td {
  color: var(--text-primary, #1a1a1a);
}

.table--Q5ghI tbody tr:hover {
  background-color: var(--background-hover, #f3f4f6);
}

.nameCell--hYE2x {
  font-weight: 500;
}

.dateCell--ZqBaQ {
  color: var(--text-tertiary, #9199a5);
}

/* Responsive */
@media (max-width: 640px) {
  .modal--kqn5L {
    max-width: 100%;
    margin: 0 16px;
  }

  .header--lPrxB,
  .content--EOgFm {
    padding-left: 12px;
    padding-right: 12px;
  }

  .reportCard--M1vAU {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .runButton--tsqEt {
    width: 100%;
    justify-content: center;
  }
}

/* Overlay */
.overlay--klMt2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

/* Modal Container */
.modal--IIH2F {
  background: var(--background-primary, #fff);
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: 'Mulish', sans-serif;
}

/* Header */
.header--qexW3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  padding-top: 16px;
  padding-bottom: 7px;
}

.title--Em8_m {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  color: var(--color-primary-700, #2c4f7f);
}

.closeButton--sN_8H {
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #666);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s;
}

.closeButton--sN_8H:hover {
  color: var(--text-primary, #333);
}

.closeButton--sN_8H:focus {
  outline: 2px solid var(--color-primary, #017aff);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Divider */
.divider--kgld5 {
  height: 1px;
  background: var(--border-color, rgba(0, 0, 0, 0.1));
  width: 100%;
}

/* Content */
.content--n_oel {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Loading/Error/Empty states */
.loading--ToHpU,
.error--eysn2,
.empty--rw11x {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--text-secondary, #5f6774);
  text-align: center;
  padding: 24px;
}

.error--eysn2 {
  color: var(--color-error, #dc2626);
}

/* Reports List */
.reportsList--sG18D {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Report Card */
.reportCard--BJ7ZJ {
  background: var(--background-primary, #fff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.reportInfo--D2bGG {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reportName--c0VHF {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary, #000);
}

.reportDescription--qdh67 {
  margin: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #5f6774);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reportMeta--ptmQg {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.scheduleInfo--pOtKj {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-success-700, #008236);
}

.scheduleInfo--pOtKj svg {
  flex-shrink: 0;
}

.reportDate--S_OnM {
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary, #9199a5);
}

/* Report Actions */
.reportActions--n8rB6 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Format Badge */
.formatBadge--uFeSC {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.formatBadge--uFeSC.pdf--O1Irm {
  background-color: var(--color-error-100, #fee2e2);
  color: var(--color-error-700, #b91c1c);
}

.formatBadge--uFeSC.excel--yYl7H {
  background-color: var(--color-success-100, #dcfce7);
  color: var(--color-success-700, #15803d);
}

/* Edit Button */
.editButton--hYkjw {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-primary, #017aff);
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  min-width: 70px;
  height: 29px;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: #fff;
  text-transform: capitalize;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.editButton--hYkjw:hover {
  background: var(--color-primary-hover, #0066d6);
}

.editButton--hYkjw:focus {
  outline: 2px solid var(--color-primary, #017aff);
  outline-offset: 2px;
}

.editButton--hYkjw:active {
  background: var(--color-primary-active, #005bb5);
}

.editButton--hYkjw svg {
  width: 10px;
  height: 12px;
}

/* Footer Spacer */
.footerSpacer--a4ZXb {
  height: 60px;
  flex-shrink: 0;
}

/* Wide modal variant for read-only table view */
.modalWide--CQ4BE {
  max-width: 750px;
}

/* Table View (read-only mode) */
.table--pMktV {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table--pMktV th,
.table--pMktV td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

.table--pMktV th {
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  background-color: var(--background-secondary, #f9fafb);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table--pMktV td {
  color: var(--text-primary, #1a1a1a);
}

.table--pMktV tbody tr:hover {
  background-color: var(--background-hover, #f3f4f6);
}

.nameCell--vCwNj {
  font-weight: 500;
}

.dateCell--rJt27,
.frequencyCell--BgEeL {
  color: var(--text-tertiary, #9199a5);
}

/* Responsive */
@media (max-width: 640px) {
  .modal--IIH2F {
    max-width: 100%;
    margin: 0 16px;
  }

  .header--qexW3,
  .content--n_oel {
    padding-left: 12px;
    padding-right: 12px;
  }

  .reportCard--BJ7ZJ {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .reportActions--n8rB6 {
    justify-content: space-between;
  }

  .editButton--hYkjw {
    flex: 1;
    justify-content: center;
  }

  .reportMeta--ptmQg {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}



/* ============================================
   Report Card - Specific Overrides
   Matches Figma design: https://www.figma.com/design/DwhBVgd7QzzcwqWz8tzRnx/Reports?node-id=550-19026
   ============================================ */

/* CSS Variables for card dimensions */
.card--mOuic {
  --report-card-width: 265px;
  --report-card-icon-container-size: 34px;
  --report-card-icon-size: 23px;
}

/* Additional class for report card specific sizing */
.card--mOuic {
  width: var(--report-card-width);
  /* min-height removed - let content flow naturally */
}

/* Icon container with specific report card styling */
.iconContainer--Yei9s {
  background: var(--color-primary-100);
  border-radius: 50%; /* Perfect circle (was 100px) */
  width: var(--report-card-icon-container-size);
  height: var(--report-card-icon-container-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon--TGA07 {
  width: var(--report-card-icon-size);
  height: var(--report-card-icon-size);
  color: var(--color-primary-700);
}

/* Title color override for reports */
.title--mPY9l {
  color: var(--color-primary-700);
}
.card--mOuic h3 {
  color: var(--color-primary-700) !important;
}

/* Description styling */
.description--D_uKm {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  /* min-height removed - let line-clamp define height naturally */
}

/* Tooltip wrapper should not affect layout */
.descriptionTooltipWrapper--hYcZm {
  display: block;
  width: 100%;
}

/* Menu Container for ActionsCell */
.menuContainer--vfXyu {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0;
  height: 32px; /* Matches design system button height */
}

/* Force the dots to be specific gray color - overrides 3rd party component */
.menuContainer--vfXyu button span span {
  background: var(--color-text-secondary) !important;
}

/* Override ActionsCell component styles for card context - 3rd party component requires !important */
.menuContainer--vfXyu [class*="actions-button"] {
  background: inherit !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: auto;
  min-height: auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.menuContainer--vfXyu [class*="actions-button"]:focus,
.menuContainer--vfXyu [class*="actions-button"]:focus-visible,
.menuContainer--vfXyu [class*="actions-button"]:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: inherit !important;
}

.menuContainer--vfXyu [class*="actions-button"]:hover {
  background-color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.menuContainer--vfXyu [class*="actions-dots-container"] {
  margin: 0;
  padding: 0;
}

/* Footer Buttons Container */
.footerButtons--rUiKl {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Footer Button Styling */
.viewSavedButton--T_sGy,
.viewScheduledButton--bZjup {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.viewSavedButton--T_sGy:hover,
.viewScheduledButton--bZjup:hover {
  opacity: 0.8;
}

.folderIcon--h39_K,
.clockIcon--af1xy {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}


.container--bI5ee {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background-primary);
  border-radius: 8px;
  overflow: hidden;
}

.header--COOon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 8px 16px;
  min-height: 48px;
}

.drag-handle {
  cursor: move;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.title--MqZqL {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}

.editActions--ye2PK {
  display: flex;
  gap: 4px;
  z-index: 100;
  position: relative;
  flex-shrink: 0;
}

.editButton--BnaBD,
.deleteButton--E6IZn {
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  z-index: 101;
  position: relative;
  pointer-events: auto;
}

.editButton--BnaBD:hover {
  background-color: var(--color-primary-100);
  transform: scale(1.1);
}

.deleteButton--E6IZn:hover {
  background-color: var(--color-error-50);
  transform: scale(1.1);
}

.editButton--BnaBD:active,
.deleteButton--E6IZn:active {
  transform: scale(0.95);
}

.content--N3uYr {
  flex: 1;
  padding: 4px 16px 16px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.error--GzbIX {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: var(--color-error);
  font-size: 14px;
  text-align: center;
}

.placeholder--omxgS {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 150px;
  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
  border-radius: 8px;
  padding: 20px;
}

.placeholderIcon--l0qiP {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.placeholderText--j6j5m {
  text-align: center;
  color: var(--color-text-tertiary);
}

.placeholderText--j6j5m strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.placeholderText--j6j5m p {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}


.container--R4d8j {
  width: 100%;
}

.sectionMargin--Ohrvl {
  margin-top: 24px;
}

.selectPrompt--Kul_9 {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 0 16px 0;
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
}

/* Visualization Grid */
.vizGrid--_nZ_p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Visualization Card */
.vizCard--jAxqy {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.vizCard--jAxqy:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.vizCard--jAxqy.selected--MO3Zx {
  border-color: var(--color-primary);
  border-width: 2px;
  background-color: var(--color-primary-50);
  padding: 15px;
}

/* Icon */
.vizIcon--yRXE1 {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.vizIcon--yRXE1 svg {
  width: 24px;
  height: 24px;
}

.vizCard--jAxqy.selected--MO3Zx .vizIcon--yRXE1 {
  color: var(--color-primary);
}

/* Title */
.vizTitle--fs2Zu {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Mulish', sans-serif;
  line-height: 24px;
}

/* Description */
.vizDescription--cgWLE {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 20px;
  font-family: 'Mulish', sans-serif;
}

/* Responsive */
@media (max-width: 1200px) {
  .vizGrid--_nZ_p {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: auto;
  }
}

@media (max-width: 768px) {
  .vizGrid--_nZ_p {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

/* ============================================
   Widget Wizard - Custom Styles
   Using Common Wizard Component
   ============================================ */

/* Widget Wizard Specific Overrides */
.widgetWizard--cI_lL {
  display: flex;
  flex-direction: column;
}

/* Step Title */
.stepTitle--DwUp3 {
  font-family: 'Bai Jamjuree', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 0 0 16px 0;
}

/* Form Input */
.formInput--BmH3s {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  transition: border-color 0.2s;
}

.formInput--BmH3s:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Footer Content - Show Preview Section */
.footerContent--QoQsY {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border);
}

/* Preview Toggle Button Wrapper - Same height as previewButtonContainer when open */
.previewButtonWrapper--cSCUq {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0;
}

.previewToggleButton--ybh4C {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 137px;
}

.previewToggleButton--ybh4C svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.iconRotated--rp_M4 {
  transform: rotate(180deg);
}

/* Preview Panel - Below wizard content, above footer */
.previewPanel--LUnRC {
  position: fixed;
  bottom: 80px; /* Leave space for wizard footer with navigation buttons */
  left: 192px; /* Start after sidebar */
  right: 0;
  background: var(--color-background-primary);
  border-top: 1px solid var(--color-border-light);
  border-left: 1px solid var(--color-border-light);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10000;
  height: calc(100vh - 280px); /* Larger fixed height: viewport minus top wizard content and footer */
  min-height: 457px; /* Matches Figma design exactly */
  max-height: calc(100vh - 280px);
  display: flex;
  flex-direction: column;
  padding: 25px 24px 17px 24px;
  gap: 16px;
  overflow: hidden;
}

.previewButtonContainer--HdyND {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0;
}

.hidePreviewButton--CmdhX {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 137px;
}

.hidePreviewButton--CmdhX svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.previewInnerContainer--jxkZW {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.previewHeader--nGgyS {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.previewTitle--XiHVR {
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  margin: 0;
}

.previewSubtitle--UwG4i {
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-secondary);
  margin: 0;
}

.previewContent--N8xf5 {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  flex: 1 1 0;
  min-height: 0; /* Allow flex to control height, prevents overflow */
  max-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  box-sizing: border-box;
  width: 100%;
  padding: 16px;
}

.previewWidget--TNMjj {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Preview Placeholder States */
.previewPlaceholder--Dus9k {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.eyeIconContainer--cqITp {
  width: 48px;
  height: 48px;
  background: var(--color-background-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eyeIcon--WKwEw {
  width: 24px;
  height: 24px;
  color: var(--color-text-secondary);
  opacity: 0.4;
  stroke: var(--color-text-secondary);
  stroke-width: 1.5;
  fill: none;
}

/* Widget icon container - blue icon, larger size */
.widgetIconContainer--Hgci6 {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widgetIcon--Fdy6q {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  stroke: var(--color-primary);
  stroke-width: 2;
}

/* Widget type label - shown below icon */
.widgetTypeLabel--WEFQo {
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0;
}

/* Placeholder message text */
.placeholderMessage--jwaif {
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 400px;
  white-space: pre-line;
}

/* Media Queries for Responsiveness */
@media (max-height: 900px) {
  .previewPanel--LUnRC {
    height: calc(100vh - 250px);
    min-height: 350px;
    max-height: calc(100vh - 250px);
  }
}

@media (max-height: 800px) {
  .previewPanel--LUnRC {
    height: calc(100vh - 220px);
    min-height: 300px;
    max-height: calc(100vh - 220px);
    padding: 20px 20px 15px 20px;
    gap: 12px;
  }
  .previewInnerContainer--jxkZW {
    padding: 15px;
    gap: 10px;
  }
  .previewHeader--nGgyS {
    padding: 10px;
  }
}

@media (max-height: 600px) {
  .previewPanel--LUnRC {
    height: calc(100vh - 180px);
    min-height: 250px;
    max-height: calc(100vh - 180px);
    padding: 15px 15px 10px 15px;
    gap: 10px;
  }
  .previewInnerContainer--jxkZW {
    padding: 10px;
    gap: 8px;
  }
  .previewHeader--nGgyS {
    padding: 8px;
  }
}

@media (max-width: 1200px) {
  .previewPanel--LUnRC {
    left: 0; /* Full width on smaller screens */
  }
}

.container--h_Jeu {
  width: 100%;
}

/* Tab Section */
.tabSection--b5mUI {
  margin-bottom: 24px;
}

.sectionLabel--AUOpW {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
}

.tabContainer--SfNg0 {
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 4px;
  display: inline-flex;
  gap: 8px;
}

.tabButtons--rgxoE {
  display: flex;
  gap: 8px;
}

.tabButton--HgWeq {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Mulish', sans-serif;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 24px;
  min-height: 40px;
}

.tabButton--HgWeq:hover {
  background-color: var(--color-primary-50);
}

.tabButton--HgWeq.active--CBrPk {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Entity Selection */
.entitySection--wc3KI {
  margin-top: 24px;
}

.labelRow--kIdQa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.limitText--XwIOp {
  font-weight: 400;
  color: var(--color-text-secondary);
}

.counterBadge--gQXYp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background-color: var(--color-primary-100, #e6f2ff);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-primary, #0071eb);
  font-family: 'Mulish', sans-serif;
  white-space: nowrap;
}

.entityList--FxY6R {
  width: 100%;
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  overflow: hidden;
  max-height: 422px;
  overflow-y: auto;
}

.loadingState--KUGm6 {
  padding: 32px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-family: 'Mulish', sans-serif;
}

.entityItem--O1eBY {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 81px;
}

.entityItem--O1eBY:last-child {
  border-bottom: none;
}

.entityItem--O1eBY:hover {
  background-color: var(--color-background-secondary);
}

.entityItem--O1eBY.selected--m29mh {
  background-color: var(--color-primary-50);
  border-left: 3px solid var(--color-primary);
  padding-left: 13px;
}

.entityTitle--U5Ma0 {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary);
  font-family: 'Mulish', sans-serif;
  line-height: 24px;
  padding-left: 8px;
}

.entityDescription--c2ob_ {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
  padding-left: 8px;
}

/* Custom Query */
.querySection--g8Vqq {
  margin-top: 24px;
}

.queryTextarea--Q_4nz {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  resize: vertical;
  min-height: 200px;
  box-sizing: border-box;
}

.queryTextarea--Q_4nz:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.queryTextareaError--BV4Rl {
  border-color: var(--color-error, #dc3545);
}

.queryTextareaError--BV4Rl:focus {
  border-color: var(--color-error, #dc3545);
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

.validatingText--vCKh5 {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 8px 0 0 0;
  font-family: 'Mulish', sans-serif;
  line-height: 18px;
  font-style: italic;
}

.helpText--qVbDB {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 8px 0 0 0;
  font-family: 'Mulish', sans-serif;
  line-height: 18px;
}

.helpTextSpaced--DH5Tn {
  margin-bottom: 8px;
}

/* Disabled state for items when limit reached */
.disabled--VQlPa {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .configRow--SBjgb {
    grid-template-columns: 1fr;
  }
}

.container--XmMN9 {
  width: 100%;
}

/* Metric Values Configuration */
.metricValuesConfig--YVFuC {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}

.sectionTitle--Snv_G {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 20px 0;
  font-family: 'Mulish', sans-serif;
  line-height: 24px;
}

.formRow--zZZ1C {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.formField--BtaT_ {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selectInput--nKKM9 {
  padding: 8px 12px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  font-family: 'Mulish', sans-serif;
  cursor: pointer;
  min-height: 42px;
}

.selectInput--nKKM9:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.configLayout--dIg2F {
  display: block;
  width: 100%;
  margin-top: 24px;
}

/* Left: Chart Configuration */
.chartConfig--x3GEu {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 24px;
}

.chartHeader--tp_Bq {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chartTitle--mYXF5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  font-family: 'Mulish', sans-serif;
  line-height: 24px;
}

.dropFieldsLink--bFCpw {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  font-family: 'Mulish', sans-serif;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
}

.dropFieldsLink--bFCpw:hover {
  text-decoration: underline;
}

.configDescription--fqyt7 {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 0 24px 0;
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
}

.configFields--KZvXy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.configField--RtT6P {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fieldLabel--L3OvZ {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
}

.fieldDescription--VQyA7 {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  font-family: 'Mulish', sans-serif;
  line-height: 18px;
  margin-bottom: 4px;
}

.warningText--r_R9Z {
  margin-top: 8px;
  color: var(--color-warning, #b8860b);
}

.bucketSizeInfo--kV5jK {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px 0;
  padding: 12px 14px;
  background-color: var(--color-info-bg, #d8eaff);
  border: 1px solid var(--color-info-border, #c5d7f0);
  border-radius: 6px;
}

.bucketSizeIcon--QxF0o {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 2px;
  color: var(--color-primary-800, #1e40af);
}

.bucketSizeText--GfhTU {
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  font-family: 'Mulish', sans-serif;
  line-height: 18px;
}

.dropZone--SmmNZ {
  min-height: 48px;
  border: 2px dashed var(--color-border-medium);
  border-radius: 4px;
  background-color: var(--color-background-secondary);
  display: flex;
  align-items: center;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.dropZone--SmmNZ:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.dropZone--SmmNZ.filled--FB_gj {
  border-style: solid;
  border-color: var(--color-primary);
  background-color: var(--color-background-primary);
}

.dropZonePlaceholder--lMuyB {
  font-size: 14px;
  color: var(--color-text-tertiary);
  font-family: 'Mulish', sans-serif;
  font-style: italic;
}

.selectedProperty--b24UB {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: var(--color-background-primary);
  padding: 4px 8px;
  border-radius: 4px;
}

.propertyName--QO3PM {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: 'Mulish', sans-serif;
}

.clearButton--ay_yp {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.2s ease;
}

.clearButton--ay_yp:hover {
  color: var(--color-error);
}

.dataRequirement--PeF7v {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  font-family: 'Mulish', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.requirementBadge--quQcB {
  background-color: var(--color-primary-100);
  color: var(--color-primary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Mulish', sans-serif;
}

.select--kYcil {
  padding: 8px 12px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  font-family: 'Mulish', sans-serif;
  cursor: pointer;
  min-height: 42px;
}

.select--kYcil:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.input--wZ3fQ {
  padding: 8px 12px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-background-primary);
  font-family: 'Mulish', sans-serif;
  line-height: normal;
  min-height: 42px;
  box-sizing: border-box;
}

.input--wZ3fQ:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

/* Right: Available Properties Panel */
.propertiesPanel--Ll_I8 {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: 600px;
}

.propertiesHeader--voANy {
  margin-bottom: 16px;
}

.propertiesTitle--_664v {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
}

.dragHint--_YTQm {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  font-family: 'Mulish', sans-serif;
  line-height: 16px;
}

.propertiesList--_94do {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.propertyItem--rwEWU {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s ease;
}

.propertyItem--rwEWU:hover {
  background-color: var(--color-primary-50);
  border-color: var(--color-primary);
}

.propertyItem--rwEWU:active {
  cursor: grabbing;
  opacity: 0.6;
}

.dragHandle--zuSoE {
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.propertyInfo--oFy01 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.propertyItemName--ffEFn {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: 'Mulish', sans-serif;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.propertyType--u1LoN {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  font-family: 'Mulish', sans-serif;
  line-height: 16px;
}

.emptyProperties--IOxVz {
  padding: 32px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/* Table Columns Chips */
.tableColumnHeader--RropX {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tableColumnActions--yr4A_ {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tableActionButton--BEx0g {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Mulish', sans-serif;
  cursor: pointer;
  padding: 4px 8px;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.tableActionButton--BEx0g:hover:not(:disabled) {
  background-color: var(--color-primary-50);
  text-decoration: underline;
}

.tableActionButton--BEx0g:disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

.actionSeparator--kg7Vo {
  color: var(--color-border-medium);
  font-size: 13px;
}

.selectedColumns--_BIpS {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.columnChip--L46uW {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: 16px;
  padding: 4px 8px 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  font-family: 'Mulish', sans-serif;
  transition: all 0.2s ease;
}

.columnChip--L46uW:hover {
  background-color: var(--color-primary-100);
}

.columnChipName--fIl4I {
  line-height: 20px;
}

.columnChipRemove--pjyVg {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.columnChipRemove--pjyVg:hover {
  background-color: var(--color-primary-200);
}

/* Per-Table Configuration */
.tableConfigSection--Fep6V {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  margin-bottom: 16px;
}

.tableConfigTitle--Q45Mm {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  font-family: 'Mulish', sans-serif;
  line-height: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-light);
}

/* Properties Panel - Per Table */
.propertiesListContainer--Obm7E {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.tablePropertiesSection--_K1ym {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tablePropertiesTitle--q_MLA {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  font-family: 'Mulish', sans-serif;
  line-height: 22px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-light);
}

.propertiesListGroup--zOxHF {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.propertiesListLabel--TXA5f {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: 'Mulish', sans-serif;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Column Type Badge for Table Widget */
.columnTypeBadge--paXx0 {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--color-primary-50);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 500;
  font-family: 'Mulish', sans-serif;
  text-transform: lowercase;
}

/* Responsive */
@media (max-width: 1200px) {
  .propertiesPanel--Ll_I8 {
    max-height: 400px;
  }
}


.container--m8GTE {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 24px);
  padding: var(--spacing-md, 16px);
}

.section--Kw8ob {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
  padding: var(--spacing-md, 16px);
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--color-border);
}

.sectionTitle--kGsHi {
  font-size: var(--font-size-md, 16px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
}

.required--uhejt {
  color: var(--color-error, #dc3545);
}

.sectionDescription--VVRPY {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Radio Group */
.radioGroup--Z4YlA {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 12px);
}

.radioLabel--Aeb6_ {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 12px);
  cursor: pointer;
  padding: var(--spacing-sm, 12px);
  border-radius: var(--border-radius-sm, 6px);
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

.radioLabel--Aeb6_:hover {
  background-color: var(--color-background-hover);
}

.radioLabel--Aeb6_:has(.radioInput--f3VF4:checked) {
  background-color: var(--color-primary-light, rgba(59, 130, 246, 0.1));
  border-color: var(--color-primary, #3b82f6);
}

.radioInput--f3VF4 {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary, #3b82f6);
  cursor: pointer;
}

.radioText--e0JlQ {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-primary);
}

/* Category Picker */
.categoryPicker--VD2oG {
  margin-top: var(--spacing-sm, 12px);
  padding: var(--spacing-md, 16px);
  background-color: var(--color-background-primary);
  border-radius: var(--border-radius-sm, 6px);
  border: 1px solid var(--color-border);
}

.pickerLabel--zdlet {
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm, 12px) 0;
}

.categoryList--qBuFF {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 12px);
}

.checkboxLabel--a89xu {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  cursor: pointer;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-sm, 6px);
  border: 1px solid var(--color-border);
  transition: background-color 0.2s, border-color 0.2s;
}

.checkboxLabel--a89xu:hover {
  background-color: var(--color-background-hover);
}

.checkboxLabel--a89xu:has(.checkboxInput--wJRfM:checked) {
  background-color: var(--color-primary-light, rgba(59, 130, 246, 0.1));
  border-color: var(--color-primary, #3b82f6);
}

.checkboxInput--wJRfM {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary, #3b82f6);
  cursor: pointer;
}

.checkboxText--LTU1d {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-primary);
}

/* Layout Options */
.layoutOptions--Dgdao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md, 16px);
}

.layoutCard--vE_AH {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm, 12px);
  padding: var(--spacing-md, 16px);
  background-color: var(--color-background-primary);
  border-radius: var(--border-radius-md, 8px);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
  position: relative;
}

.layoutCard--vE_AH:hover {
  border-color: var(--color-primary-light, #93c5fd);
  background-color: var(--color-background-hover);
}

.layoutCardSelected--VJOuQ {
  border-color: var(--color-primary, #3b82f6);
  background-color: var(--color-primary-light, rgba(59, 130, 246, 0.1));
}

.layoutIcon--NL72_ {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.layoutCardSelected--VJOuQ .layoutIcon--NL72_ {
  color: var(--color-primary, #3b82f6);
}

.layoutInfo--tUDqc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  text-align: center;
}

.layoutName--qIujU {
  font-size: var(--font-size-sm, 14px);
  font-weight: 600;
  color: var(--color-text-primary);
}

.layoutDescription--Jv3HW {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.selectedIndicator--ALBsz {
  position: absolute;
  top: var(--spacing-sm, 12px);
  right: var(--spacing-sm, 12px);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary, #3b82f6);
  border-radius: 50%;
  color: white;
}

/* Pivot Options */
.pivotOptions--ngi88 {
  margin-top: var(--spacing-md, 16px);
  padding: var(--spacing-md, 16px);
  background-color: var(--color-background-primary);
  border-radius: var(--border-radius-sm, 6px);
  border: 1px solid var(--color-border);
}

.inputLabel--S9gFB {
  display: block;
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs, 8px);
}

.numberInput--teRCo {
  width: 100px;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
  font-size: var(--font-size-sm, 14px);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm, 6px);
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}

.numberInput--teRCo:focus {
  outline: none;
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 2px var(--color-primary-light, rgba(59, 130, 246, 0.2));
}

.inputHelp--sHFQw {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-secondary);
  margin: var(--spacing-xs, 8px) 0 0 0;
}

/* Summary Section */
.summarySection--UmhBq {
  padding: var(--spacing-md, 16px);
  background-color: var(--color-background-tertiary, #f8fafc);
  border-radius: var(--border-radius-md, 8px);
  border: 1px dashed var(--color-border);
}

.summaryContent--Oeiqr {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 8px);
}

.summaryRow--BlxRw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs, 8px) 0;
  border-bottom: 1px solid var(--color-border-light, #e2e8f0);
}

.summaryRow--BlxRw:last-child {
  border-bottom: none;
}

.summaryLabel--F0WXl {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

.summaryValue--FmlJZ {
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Loading and Empty States */
.loadingState--KjaDX,
.emptyState--fPAla {
  padding: var(--spacing-md, 16px);
  text-align: center;
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

/* Dark mode support */
[data-theme='dark'] .section--Kw8ob {
  background-color: var(--color-background-secondary-dark, #1e293b);
}

[data-theme='dark'] .categoryPicker--VD2oG,
[data-theme='dark'] .pivotOptions--ngi88 {
  background-color: var(--color-background-primary-dark, #0f172a);
}

[data-theme='dark'] .layoutCard--vE_AH {
  background-color: var(--color-background-primary-dark, #0f172a);
}

[data-theme='dark'] .summarySection--UmhBq {
  background-color: var(--color-background-tertiary-dark, #1e293b);
}


.container--EMmp0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}

.description--ugqzW {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin: 0;
}

/* Toolbar */
.toolbar--ReLbj {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--color-background-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
}

.toolbarGroup--KnaPX {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbarButton--EF1Ne {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
}

.toolbarButton--EF1Ne:hover {
  background-color: var(--color-background-hover);
  border-color: var(--color-border-light);
}

.toolbarButton--EF1Ne.active--f0XZl {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.underlineText--K4QPy {
  text-decoration: underline;
}

.separator--jh7sS {
  width: 1px;
  height: 24px;
  background-color: var(--color-border-light);
  margin: 0 4px;
}

.toolbarLabel--W0qMx {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-right: 4px;
}

.fontSizeSelect--L7Tb3 {
  padding: 4px 8px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  font-size: 13px;
  cursor: pointer;
}

/* Editor */
.editorContainer--kOrc2 {
  flex: 1;
  min-height: 300px;
}

.textEditor--tdHBQ {
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 16px;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: 'Mulish', sans-serif;
  line-height: 1.5;
  resize: vertical;
}

.textEditor--tdHBQ:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-100);
}

.textEditor--tdHBQ::placeholder {
  color: var(--color-text-tertiary);
}

.container--CTmIk {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.availableFiltersSection--nHYSg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.label--CESZ_ {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0;
  letter-spacing: -0.15px;
}

.filtersRow--RblPl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filterButton--Ltz9j {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  padding: 8px 16px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: -0.31px;
  min-height: 40px;
}

.filterButton--Ltz9j:hover {
  border-color: var(--color-border-medium);
  background: var(--color-background-primary);
}

.filterButtonSelected--sy3pQ {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.filterButtonSelected--sy3pQ:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.selectedFiltersSection--upUru {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selectedFiltersContainer--IlzJo {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-medium);
  border-radius: 10px;
  padding: 17px;
  min-height: 66px;
}

.selectedFiltersRow--cXY3T {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selectedFilterChip--OqRJ5 {
  background: var(--color-primary-100);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.chipText--d3bDV {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-primary-600);
  letter-spacing: -0.15px;
}

.chipRemoveButton--O0KlZ {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.chipRemoveButton--O0KlZ:hover {
  background: rgba(0, 0, 0, 0.1);
}

.chipRemoveIcon--GaFOZ {
  width: 14px;
  height: 14px;
  color: var(--color-primary-600);
}

.emptyState--RQizG {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-tertiary);
  margin: 0;
  letter-spacing: -0.15px;
}


.modalContent--pOXpY {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
}

.field--jbeqp {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label--I0MzY {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin: 0;
}

.required--sJt25 {
  color: var(--color-error, #dc2626);
  margin-left: 2px;
}

.input--A3I3K {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  transition: border-color 0.2s ease;
}

.input--A3I3K:focus {
  outline: none;
  border-color: var(--color-primary);
}

.input--A3I3K:disabled {
  background-color: var(--background-disabled, #f3f4f6);
  cursor: not-allowed;
}

/* Input error state */
.inputError--WhPys {
  border-color: var(--color-error-500, #ef4444);
}

.inputError--WhPys:focus {
  outline: none;
  border-color: var(--color-error-600, #dc2626);
  box-shadow: 0 0 0 3px var(--color-error-100, #fee2e2);
}

/* Inline field error message */
.fieldError--b_bf4 {
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-error-600, #dc2626);
  margin-top: 4px;
  animation: slideDownFade--hHHsY 0.2s ease-out;
}

.textarea--_y1_t {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border-medium);
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
}

.textarea--_y1_t:focus {
  outline: none;
  border-color: var(--color-primary);
}

.textarea--_y1_t:disabled {
  background-color: var(--background-disabled, #f3f4f6);
  cursor: not-allowed;
}

.footer--n76Ek {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}





/* Warning Banner */
.warningBanner--humel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--color-warning-bg, #fff8e6);
  border: 1px solid var(--color-warning-border, #f5c518);
  border-radius: 8px;
  margin-bottom: 16px;
}

[data-theme='dark'] .warningBanner--humel {
  background-color: var(--color-warning-bg-dark, rgba(245, 197, 24, 0.15));
  border-color: var(--color-warning-border-dark, #f5c518);
}

.warningIcon--p5F9T {
  flex-shrink: 0;
  color: var(--color-warning, #d97706);
  display: flex;
  align-items: center;
  margin-top: 2px;
}

[data-theme='dark'] .warningIcon--p5F9T {
  color: var(--color-warning-dark, #fbbf24);
}

.warningContent--IifqL {
  flex: 1;
}

.warningMessage--SLb4q {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #1a1a1a);
}

[data-theme='dark'] .warningMessage--SLb4q {
  color: var(--text-primary-dark, #e5e5e5);
}

.dependencyCounts--eOPcn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.countLink--zPX3J {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary, #2563eb);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s;
}

.countLink--zPX3J:hover {
  color: var(--color-primary-hover, #1d4ed8);
}

[data-theme='dark'] .countLink--zPX3J {
  color: var(--color-primary-dark, #60a5fa);
}

[data-theme='dark'] .countLink--zPX3J:hover {
  color: var(--color-primary-hover-dark, #93c5fd);
}

.separator--WAbOo {
  color: var(--text-secondary, #6b7280);
}

.container--aIn0u {
  background-color: var(--color-background-primary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.errorBanner--jhQs1 {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--color-error);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 24px 20px;
  color: var(--color-error);
}

.errorIcon--H6TfH {
  font-size: 18px;
}

.errorMessage--NZeBx {
  font-weight: 500;
}

/* Scrollable Content */
.scrollableContent--nKvDK {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-background-secondary);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section Styles */
.section--Evo4b {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-medium);
  border-radius: 10px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sectionHeader--ZNeQg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-medium);
}

.sectionTitle--VHTBR {
  font-family: 'Mulish', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.44px;
}

.addWidgetButton--wrsOG {
  background: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
  color: var(--color-text-inverse) !important;
}

.addWidgetButton--wrsOG:hover:not(.disabled--KRAy2) {
  background: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
}

.sectionBody--ryXws {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Layout Section Specific */
.layoutContainer--gN2Qn {
  position: relative;
  min-height: 288px;
}

.loadingPreview--KLoVe {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
  font-style: italic;
  z-index: 10;
}

.layout--bEseR {
  position: relative;
  min-height: 1200px; /* Extended to show multiple rows (at least 20 rows × 60px) */
}

/* Grid overlay is now handled by GridOverlay component using react-grid-layout's calculations */

.widgetContainer--NCHXQ {
  border-radius: 4px;
  border: 2px dashed var(--color-border-medium);
  overflow: visible;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.1);
  transition: all 0.2s ease;
  height: 100%;
  width: 100%;
  background: var(--color-background-primary);
  position: relative;
  z-index: 1;
}

.widgetContainer--NCHXQ:hover {
  border-color: var(--color-primary);
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15);
}

.widgetContainer--NCHXQ > div {
  height: 100%;
  width: 100%;
}

/* Empty Layout State */
.emptyLayoutState--M7oK4 {
  background: var(--color-background-secondary);
  border: 2px dashed var(--color-border-medium);
  border-radius: 10px;
  padding: 2px;
  min-height: 288px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.emptyTitle--YM4KV {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin: 0;
  letter-spacing: -0.31px;
}

.emptyDescription--hLtzq {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin: 0;
  letter-spacing: -0.31px;
}

/* Footer */
.footer--XdXcy {
  background: var(--color-background-primary);
  border-top: 1px solid var(--color-border-light);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.footerLeft--WG9qT {
  /* Reserved for future content */
}

.footerRight--D63U_ {
  display: flex;
  gap: 9px;
  align-items: center;
}

.cancelButton--ls6cm {
  background: transparent !important;
  border: none !important;
  color: var(--color-primary-600) !important;
  padding: 8px 16px !important;
}

.cancelButton--ls6cm:hover:not(.disabled--KRAy2) {
  background: transparent !important;
  border: none !important;
  color: var(--color-primary-700) !important;
}

.cancelButton--ls6cm:active:not(.disabled--KRAy2) {
  background: transparent !important;
  border: none !important;
}

.saveButton--Zvwzu {
  border-color: var(--color-primary-500) !important;
  color: var(--color-primary-500) !important;
  background: transparent !important;
}

.saveButton--Zvwzu:hover:not(.disabled--KRAy2) {
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
  background: var(--color-primary-50) !important;
}

.saveButton--Zvwzu:active:not(.disabled--KRAy2) {
  border-color: var(--color-primary-600) !important;
  color: var(--color-primary-600) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .scrollableContent--nKvDK {
    padding: 16px;
  }

  .section--Evo4b {
    padding: 16px;
  }

  .footer--XdXcy {
    flex-direction: column;
    gap: 12px;
  }

  .footerRight--D63U_ {
    width: 100%;
    justify-content: flex-end;
  }
}

.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}

.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
/* Container for loading state */
.container--KUqw2 {
  width: 100%;
  background: var(--color-background-secondary, #f9fafb);
  padding: 20px;
  border-radius: 8px;
}

.loading--kP3Je {
  text-align: center;
  padding: 40px;
  color: var(--color-text-tertiary, #999999);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/* Container for loading state */
.container--Qxg7X {
  width: 100%;
  background: var(--color-background-secondary, #f9fafb);
  padding: 20px;
  border-radius: 8px;
}

.loading--rJVIv {
  text-align: center;
  padding: 40px;
  color: var(--color-text-tertiary, #999999);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/* Container for loading state */
.container--DcY35 {
  width: 100%;
  background: var(--color-background-secondary, #f9fafb);
  padding: 20px;
  border-radius: 8px;
}

.loading--H2Z8V {
  text-align: center;
  padding: 40px;
  color: var(--color-text-tertiary, #999999);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/* Container for loading state */
.container--oHc0N {
  width: 100%;
  background: var(--color-background-secondary, #f9fafb);
  padding: 20px;
  border-radius: 8px;
}

.loading--Y9ex5 {
  text-align: center;
  padding: 40px;
  color: var(--color-text-tertiary, #999999);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/* Container for loading state */
.container--zFI8e {
  width: 100%;
  background: var(--color-background-secondary, #f9fafb);
  padding: 20px;
  border-radius: 8px;
}

.loading--KDYj6 {
  text-align: center;
  padding: 40px;
  color: var(--color-text-tertiary, #999999);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/* Container for loading state */
.container--vArd8 {
  width: 100%;
  background: var(--color-background-secondary, #f9fafb);
  padding: 20px;
  border-radius: 8px;
}

.loading--WJst4 {
  text-align: center;
  padding: 40px;
  color: var(--color-text-tertiary, #999999);
  font-size: 14px;
  font-family: 'Mulish', sans-serif;
}

/**
 * Shared styles for checkbox list filter components
 * Used by: HostStatusFilter, MetricStatusFilter
 */

/* Filter Container */
.container--bm6A1 {
  display: flex;
  flex-direction: column;
}

/* Checkbox List */
.checkboxList--WC3uc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Checkbox Item */
.checkboxItem--I_to7 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* Checkbox Input */
.checkbox--kq0bY {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Checkbox Label */
.checkboxLabel--R5lKF {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  cursor: pointer;
}

/* No Status Message */
.noStatusMessage--GM_s3 {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
  font-style: italic;
}

/* Hover effect */
.checkboxItem--I_to7:hover .checkboxLabel--R5lKF {
  color: var(--color-primary);
}


/* Main page container - matches Figma layout */
.page--hUNca {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-background-secondary, #f9fafb);
  font-family: 'Mulish', sans-serif;
}

/* Content area - scrollable with padding */
.content--WhpYC {
  flex: 1;
  overflow-y: auto;
  padding: 24px 30px;
  padding-bottom: 100px; /* Space for fixed footer */
}

/* Filter Card - Each filter section is a card - Matches Figma */
.filterCard--nqloP {
  background: var(--color-background-primary, #ffffff);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border-light, #e5e7eb);
  overflow-x: auto; /* Allow horizontal scroll for wide content like 3-panel grids */
}

/* Filter Title - Matches Figma: 18px, bold */
.filterTitle--aY9dD {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Mulish', sans-serif;
  color: var(--color-text-primary, #1f2937);
}

/* Entity Type Selector */
.entityTypeSelector--oga8W {
  margin-bottom: 24px;
}

.entityTypeLabel--yUXd1 {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Mulish', sans-serif;
  color: var(--color-text-primary, #1f2937);
}

/* Metric Selection Row */
.metricSelectionRow--gXnTh {
  margin-top: 16px;
  margin-bottom: 24px;
}

/* Footer - Fixed at bottom right - Matches Figma */
.footer--lBfji {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  background: var(--color-background-primary, #ffffff);
  border-top: 1px solid var(--color-border-light, #e5e7eb);
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

/* Loading state */
.loadingContainer--P0Bom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 60px 20px;
  gap: 20px;
}

.loadingSpinner--G7LAD {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border-light, #e5e7eb);
  border-top-color: var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: spin--ea96G 1s linear infinite;
}

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

.loadingText--Y5WrG {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-secondary, #6b7280);
  font-family: 'Mulish', sans-serif;
}

/* Error state */
.errorContainer--MOkIS {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 60px 20px;
  gap: 20px;
}

.errorText--_eQnN {
  margin: 0;
  font-size: 16px;
  color: var(--color-error, #ef4444);
  font-family: 'Mulish', sans-serif;
  text-align: center;
}

/* Inline loading/error states */
.inlineLoading--BdJt8,
.inlineError--meXbC {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
}

.inlineError--meXbC {
  color: var(--color-error, #ef4444);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content--WhpYC {
    padding: 16px;
    padding-bottom: 100px;
  }
  
  .filterCard--nqloP {
    padding: 16px;
  }
  
  .footer--lBfji {
    padding: 12px 16px;
  }
}

.container--r87Rv {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.section--xMIhY {
  margin-bottom: 20px;
}

.section--xMIhY:last-child {
  margin-bottom: 0;
}

.sectionTitle--r7uzc {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

/* Time Range Buttons */
.timeButtons--zu_Kl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeButton--s5ip1 {
  padding: 8px 16px;
  border: 1px solid var(--color-border-light);
  background: var(--color-background-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: all 0.2s ease;
}

.timeButton--s5ip1:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-border-medium);
}

.timeButton--s5ip1.active--J0l0E {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* Custom Time Picker */
.customPicker--HmC7G {
  margin-top: 12px;
  padding: 16px;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}

.customPickerRow--jEP2y {
  margin-bottom: 12px;
}

.customPickerRow--jEP2y:last-child {
  margin-bottom: 16px;
}

.label--FvRsj {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.dateInput--qFws7 {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  font-size: 13px;
  margin-top: 4px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
}

.dateInput--qFws7:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Entity Buttons */
.entityButtons--Im3gQ {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.entityGroup--Dais8 {
  position: relative;
}

.entityButton--SsfOf {
  padding: 8px 16px;
  border: 1px solid var(--color-border-light);
  background: var(--color-background-primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.entityButton--SsfOf:hover {
  background: var(--color-background-tertiary);
  border-color: var(--color-border-medium);
}

.entityButton--SsfOf.active--J0l0E {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.badge--RPKBM {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* Entity Dropdown */
.entityDropdown--Ulj4B {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 250px;
  max-width: 350px;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.dropdownHeader--HScDe {
  padding: 12px;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.clearButton--e9Bx2 {
  padding: 4px 8px;
  border: none;
  background: var(--color-error);
  color: white;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
}

.clearButton--e9Bx2:hover {
  opacity: 0.9;
}

.entityList--RJ1RV {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.entityItem--z6KnK {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s ease;
  gap: 8px;
}

.entityItem--z6KnK:hover {
  background: var(--color-background-secondary);
}

.entityItem--z6KnK input[type="checkbox"] {
  cursor: pointer;
}

.entityItem--z6KnK span {
  font-size: 13px;
  color: var(--color-text-primary);
}

.noEntities--XsSn7 {
  padding: 20px;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 13px;
  font-style: italic;
}

/* Cascading Selector for Metrics */
.cascadingSelector--Hodvq {
  padding: 12px;
}

.hostSelector--ryo54 {
  margin-bottom: 16px;
}

.selectorLabel--cCPCI {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.hostSelect--t5UOU {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  font-size: 13px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  cursor: pointer;
}

.hostSelect--t5UOU:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.metricSelector--Xk7Ne {
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
}

/* Actions */
.actions--vBk5x {
  padding-top: 16px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: flex-end;
}


.container--tSIO4 {
  background: var(--color-background-secondary);
  min-height: 100vh;
  padding-bottom: 80px; /* Space for fixed footer */
}

/* Embed mode - minimal UI with only action bar and dashboard grid */
.embedMode--r1q0G {
  padding-bottom: 0;
  min-height: auto;
}

/* Action bar for embed mode */
.embedActionBar--J2URP {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--color-background-primary, #ffffff);
  border-bottom: 1px solid var(--color-border-light, #ededed);
}

/* Footer - fixed at bottom */
.footer--OcQoG {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--color-background-primary, #ffffff);
  border-top: 1px solid var(--color-border-light, #ededed);
  z-index: 10;
}


.loading--FmBAS {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.argumentsPanel--wvKkK,
.timeRangePanel--a9YGr {
  background: var(--color-background-primary);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 24px 20px;
  border: 1px solid var(--color-border-medium);
}

.argumentsPanel--wvKkK h3,
.timeRangePanel--a9YGr h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.argumentsGrid--TudFB {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.timeRangeGrid--In5kh {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.argumentField--lgDfA,
.timeField--YQGN6 {
  display: flex;
  flex-direction: column;
}

.dashboardGrid--okxwg {
  background: var(--color-background-primary);
  padding: 20px;
  margin: 0;
  flex: 1;
}

.layout--TSglZ {
  position: relative;
  min-height: 1200px; /* Match editor's min-height for consistent sizing */
}

.widgetContainer--Eq1ox {
  background: var(--color-background-secondary);
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
  height: 100%; /* Match editor - ensure widget fills grid cell */
  width: 100%; /* Match editor - ensure widget fills grid cell */
}

.widgetContainer--Eq1ox:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .timeRangeGrid--In5kh {
    grid-template-columns: 1fr;
  }

  .argumentsGrid--TudFB {
    grid-template-columns: 1fr;
  }
}


.errorMessage--c57nL {
  padding: 16px;
  color: var(--text-secondary, #666);
}

/* ScheduleReportPage Styles - Matches Figma Design */

.container--z3Shc {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--color-background-secondary, #f6f6f6);
}

/* Page Header */
.pageHeader--eh4dG {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  background-color: var(--color-background-primary, #ffffff);
  border-bottom: 1px solid var(--color-border-medium, #d9d9d9);
}

.pageTitle--BMhbp {
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--color-primary, #2c4f7f);
  margin: 0;
}

.pageSubtitle--X1zy7 {
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  color: var(--color-primary, #2c4f7f);
  margin: 0;
}

/* Form Content */
.formContent--DR38p {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  flex: 1;
}

/* Section Card */
.section--o5lvb {
  background-color: var(--color-background-primary, #ffffff);
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

/* Section Header */
.sectionHeader--nwdEi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.sectionHeader--nwdEi:hover {
  background-color: var(--color-background-tertiary, #f9fafb);
}

.sectionTitleWrapper--Xkzzh {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sectionIcon--__Gdu {
  color: var(--color-primary, #0071eb);
}

.inputIcon--fvLhE {
  color: var(--color-text-tertiary, #9ca3af);
}

.sectionTitleContent--XxPbd {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sectionTitle--GLxaq {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-primary, #101828);
}

.sectionSubtitle--fc9Lh {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text-secondary, #58697f);
}

.chevron--OIp_f {
  transition: transform 0.2s ease;
}

.chevronExpanded--sZwqb {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

/* Section Content */
.sectionContent--FKUNT {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 24px;
}

/* Field Group */
.fieldGroup--Dq6U6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0;
}

.fieldLabel--zrs2R {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-secondary, #364153);
}

.optional--xXl9U {
  color: var(--color-text-tertiary, #99a1af);
}

/* Field Row (for side-by-side fields) */
.fieldRow--VVidV {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Search Input */
.searchInputWrapper--IXbCA {
  position: relative;
  display: flex;
  align-items: center;
}

.searchInputWrapper--IXbCA svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
}

.searchInput--UTD1g {
  width: 100%;
  height: 42px;
  padding: 8px 12px 8px 40px;
  border: 1px solid var(--color-border-medium, #d1d5dc);
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary, #0a0a0a);
  background-color: var(--color-background-primary, #ffffff);
}

.searchInput--UTD1g::placeholder {
  color: var(--color-text-tertiary, rgba(10, 10, 10, 0.5));
}

.searchInput--UTD1g:focus {
  outline: none;
  border-color: var(--color-primary, #0071eb);
}

/* Selection List */
.selectionList--cqgRC {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.selectionItem--TIrpf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-light, #f3f4f6);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.selectionItem--TIrpf:last-child {
  border-bottom: none;
}

.selectionItem--TIrpf:hover {
  background-color: var(--color-background-tertiary, #f9fafb);
}

.selectionItem--TIrpf.selected--ALot8 {
  background-color: var(--color-primary-100, #eff6ff);
}

.checkbox--ZShdQ {
  width: 14px;
  height: 14px;
  border: 1.333px solid var(--color-text-secondary, #6a6e7c);
  border-radius: 2.667px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.selectionItem--TIrpf.selected--ALot8 .checkbox--ZShdQ {
  background-color: var(--color-primary, #0071eb);
  border-color: var(--color-primary, #0071eb);
}

.selectionItemContent--o09gY {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.selectionItemName--nxWqg {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-primary, #101828);
}

.selectionItemDescription--ZQfvF {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-text-tertiary, #6a7282);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recipient Badge */
/* Badges Container */
.badgesContainer--CA4Li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.recipientBadge--YexVK {
  padding: 5px 9px;
  border-radius: 48px;
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

/* Type badges */
.typeBadgeContact--TD6S7 {
  background-color: var(--color-background-secondary, #f1f5f9);
  border: 1px solid var(--color-border-light, #e2e8f0);
  color: var(--color-text-secondary, #253043);
}

.typeBadgeGroup--aBQIV {
  background-color: var(--color-background-secondary, #f1f5f9);
  border: 1px solid var(--color-border-light, #e2e8f0);
  color: var(--color-text-secondary, #253043);
}

/* Role badges */
.roleBadgeAdmin--SUMeV {
  background-color: var(--color-info-light, #dbeafe);
  border: 1px solid var(--color-info-border, #c5d7f0);
  color: var(--color-info, #1447e6);
}

.roleBadgeUser--caVCQ {
  background-color: var(--color-purple-light, #e3e9ff);
  border: 1px solid var(--color-purple-border, #c9d2f0);
  color: var(--color-purple, #3730a3);
}

/* Selected Chips */
.selectedChips--iFGS9 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chip--DSX4n {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background-color: var(--color-primary-100, #e6f2ff);
  border-radius: 9999px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-primary, #0071eb);
}

.chipRemove--YL7aT {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--color-primary, #0071eb);
}

.chipRemove--YL7aT:hover {
  background-color: rgba(0, 113, 235, 0.1);
}

/* Select Dropdown */
.select--bc30N {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-medium, #d1d5dc);
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary, #0a0a0a);
  background-color: var(--color-background-primary, #ffffff);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M4 6L8 10L12 6%27 stroke=%27%236B7280%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.select--bc30N:focus {
  outline: none;
  border-color: var(--color-primary, #0071eb);
}

/* Date Input */
.dateInputWrapper--GZpCd {
  position: relative;
  display: flex;
  align-items: center;
}

.dateInputWrapper--GZpCd svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
  z-index: 1;
}

.dateInput--Alai5 {
  width: 100%;
  height: 42px;
  padding: 8px 12px 8px 40px;
  border: 1px solid var(--color-border-medium, #d1d5dc);
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary, #0a0a0a);
  background-color: var(--color-background-primary, #ffffff);
  cursor: pointer;
}

/* Hide the native calendar icon */
.dateInput--Alai5::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dateInput--Alai5::placeholder {
  color: var(--color-text-tertiary, rgba(10, 10, 10, 0.5));
}

.dateInput--Alai5:focus {
  outline: none;
  border-color: var(--color-primary, #0071eb);
}

/* Time Input */
.timeInputWrapper--uoJM1 {
  position: relative;
  display: flex;
  align-items: center;
}

.timeInputWrapper--uoJM1 svg {
  position: absolute;
  left: 12px;
  pointer-events: none;
  z-index: 1;
}

.timeInput--mpN08 {
  width: 100%;
  height: 42px;
  padding: 8px 12px 8px 40px;
  border: 1px solid var(--color-border-medium, #d1d5dc);
  border-radius: 4px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-primary, #0a0a0a);
  background-color: var(--color-background-primary, #ffffff);
  cursor: pointer;
}

/* Hide the native time picker icon */
.timeInput--mpN08::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.timeInput--mpN08:focus {
  outline: none;
  border-color: var(--color-primary, #0071eb);
}

/* Days Selector */
.daysSelector--s6xod {
  display: flex;
  gap: 8px;
}

.dayButton--zrb5C {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--color-border-medium, #d1d5dc);
  background-color: var(--color-background-primary, #ffffff);
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-secondary, #364153);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dayButton--zrb5C:hover {
  background-color: var(--color-background-tertiary, #f9fafb);
}

.dayButton--zrb5C.selected--ALot8 {
  background-color: var(--color-primary, #0071eb);
  border-color: var(--color-primary, #0071eb);
  color: #ffffff;
}

/* Toggle Container */
.toggleContainer--uVwUr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--color-background-secondary, #f9fafb);
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: 4px;
}

.toggleContent--aU_JU {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggleTitle--Jr7va {
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text-primary, #101828);
}

.toggleDescription--YUlnc {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--color-text-tertiary, #6a7282);
}

.toggle--jhlbl {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.toggleTrack--zOEDS {
  position: relative;
  width: 44px;
  height: 22px;
  background-color: var(--color-text-tertiary, #9ca3af);
  border-radius: 11px;
  transition: background-color 0.2s ease;
}

.toggle--jhlbl.toggleOn--f7WNc .toggleTrack--zOEDS {
  background-color: var(--color-primary, #0071eb);
}

.toggleThumb--EnVAH {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle--jhlbl.toggleOn--f7WNc .toggleThumb--EnVAH {
  transform: translateX(22px);
}

.toggleLabel--iQUFc {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  position: absolute;
  left: 6px;
}

.toggle--jhlbl.toggleOn--f7WNc .toggleLabel--iQUFc {
  left: auto;
  right: 24px;
}

/* Checkbox Group */
.checkboxGroup--GZbUO {
  display: flex;
  gap: 24px;
}

.checkboxLabel--CmB32 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-primary, #101828);
}

.checkboxLabel--CmB32 input[type="checkbox"] {
  width: 14px;
  height: 14px;
  border: 1.333px solid var(--color-text-secondary, #6a6e7c);
  border-radius: 2.667px;
  cursor: pointer;
}

/* Footer */
.saveError--PI0EU {
  padding: 10px 24px;
  color: var(--color-error, #dc2626);
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.footer--yGBS_ {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  background-color: var(--color-background-primary, #ffffff);
  border-top: 1px solid var(--color-border-medium, #d9d9d9);
}

.cancelButton--lMwIj {
  padding: 10px 24px;
  border: 1px solid var(--color-border-medium, #d1d5dc);
  border-radius: 4px;
  background-color: var(--color-background-primary, #ffffff);
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #364153);
  cursor: pointer;
}

.cancelButton--lMwIj:hover:not(:disabled) {
  background-color: var(--color-background-tertiary, #f9fafb);
}

.cancelButton--lMwIj:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.saveButton--x0ihk {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  background-color: var(--color-primary, #0071eb);
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
}

.saveButton--x0ihk:hover:not(:disabled) {
  background-color: var(--color-primary-dark, #005bc4);
}

.saveButton--x0ihk:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading State */
.loading--JV3ab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  font-family: 'Mulish', sans-serif;
  font-size: 14px;
  color: var(--color-text-secondary, #6b7280);
}


* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Mulish', 'Bai Jamjuree', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/*# sourceMappingURL=reports.e332534af6ab84c0d795.css.map*/