@charset "UTF-8";
:root {
  /* Base Colors */
  --white: #FFFFFF;
  --black: #000000;
  --transparent: rgba(255, 255, 255, 0);
  /* Gray (Light Mode) */
  --gray-25: #FDFDFD;
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EDEDED;
  --gray-300: #D5D7DA;
  --gray-400: #A4A7AE;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252B37;
  --gray-900: #181D27;
  --gray-950: #0A0D12;
  /* Gray (Dark Mode) */
  --gray-dark-25: #FAFAFA;
  --gray-dark-50: #F7F7F7;
  --gray-dark-100: #F0F0F1;
  --gray-dark-200: #ECECEC;
  --gray-dark-300: #CECFD2;
  --gray-dark-400: #94979C;
  --gray-dark-500: #85888E;
  --gray-dark-600: #61656C;
  --gray-dark-700: #373A41;
  --gray-dark-800: #22262F;
  --gray-dark-900: #13161B;
  --gray-dark-950: #0D0E12;
  /* Primary (Gray Modern) Colors */
  --primary-25: #FCFDFD;
  --primary-50: #F8FAFC;
  --primary-100: #EEF2F6;
  --primary-200: #E3E8EF;
  --primary-300: #CDD5DF;
  --primary-400: #9AA4B2;
  --primary-500: #697586;
  --primary-600: #4B5565;
  --primary-700: #364152;
  --primary-800: #202939;
  --primary-900: #121926;
  --primary-950: #0D121C;
  /* Error Colors */
  --error-25: #FFF8FA;
  --error-50: #FEE3E2;
  --error-100: #FEE4E2;
  --error-200: #FEC6CA;
  --error-300: #FDA29B;
  --error-400: #F97066;
  --error-500: #F04438;
  --error-600: #D92D20;
  --error-700: #B42318;
  --error-800: #912018;
  --error-900: #7A271A;
  --error-950: #55160C;
  /* Warning Colors */
  --warning-25: #FFFCF5;
  --warning-50: #FFF4E5;
  --warning-100: #FEEFC7;
  --warning-200: #FDEFB9;
  --warning-300: #FEC84B;
  --warning-400: #FDB022;
  --warning-500: #F79009;
  --warning-600: #DC6803;
  --warning-700: #B54708;
  --warning-800: #93370D;
  --warning-900: #7A2E0E;
  --warning-950: #4E1D09;
  /* Success Colors */
  --success-25: #F6FEF9;
  --success-50: #EDFCF2;
  --success-100: #D3F8DF;
  --success-200: #AAF0C4;
  --success-300: #73E2A3;
  --success-400: #3CCB7F;
  --success-500: #16B364;
  --success-600: #099250;
  --success-700: #087443;
  --success-800: #095C37;
  --success-900: #084C2E;
  --success-950: #052E1C;
  /* Info (Cyan) Colors */
  --info-25: #F5FEFF;
  --info-50: #ECF9FF;
  --info-100: #CFF9FE;
  --info-200: #A5F0FC;
  --info-300: #67E3F9;
  --info-400: #22CCEE;
  --info-500: #0BAED4;
  --info-600: #088AB2;
  --info-700: #0E7080;
  --info-800: #155B75;
  --info-900: #165C83;
  --info-950: #0D2D3A;
}

:root {
  --primary-color: var(--primary-950);
  --primary-color-hover: var(--primary-800);
  --primary-color-active: var(--primary-700);
  --secondary-color: var(--primary-100);
  --secondary-color-hover: var(--primary-200);
  --secondary-color-active: var(--primary-300);
  --accent-color: var(--primary-900);
  --accent-color-hover: var(--primary-950);
  --contrast-color: #333333;
  --csd-color-primary-rgb: 18, 25, 38;
  --dark: #000000;
  --light: #ffffff;
  --csd-color-primary: var(--primary-color);
  --csd-color-primary-hover: var(--primary-color-hover);
  --csd-color-primary-active: var(--primary-color-active);
  --csd-color-secondary: var(--secondary-color);
  --csd-color-secondary-hover: var(--secondary-color-hover);
  --csd-color-secondary-active: var(--secondary-color-active);
  --csd-color-info: var(--info-500);
  --csd-color-info-hover: var(--info-600);
  --csd-color-info-active: var(--info-400);
  --csd-color-success: var(--success-500);
  --csd-color-success-hover: var(--success-600);
  --csd-color-success-active: var(--success-500);
  --csd-color-warning: var(--warning-400);
  --csd-color-warning-hover: var(--warning-500);
  --csd-color-warning-active: var(--warning-400);
  --csd-color-danger: var(--error-600);
  --csd-color-danger-hover: var(--error-700);
  --csd-color-danger-active: var(--error-600);
  --csd-color-help: var(--gray-500);
  --csd-color-help-hover: var(--gray-600);
  --csd-color-help-active: var(--gray-500);
  --csd-color-white: var(--white);
  --csd-color-text: var(--text-color);
  --text-color: var(--gray-900);
  --text-color-secondary: var(--gray-500);
  --text-color-disabled: var(--gray-500);
  --bg-light: var(--white);
  --bg-highlight: var(--gray-100);
  --bg-input-disabled: var(--gray-200);
  --bg-input: var(--white);
  /* Border radius per campi */
  --br-field: 4px;
  /* Altezza campi */
  --height-field: 20px;
  /* Spazio tra elementi nei campi */
  --gap-field: 8px;
  --transition: all 0.2s ease-in-out;
  --bg-card: var(--white);
  /* Padding interno */
  --p-card: 16px;
  /* Grigio chiaro per bordi */
  --bc-card: var(--gray-200);
  /* Angoli arrotondati */
  --br-card: 20px;
  --gap-card: 12px;
  /* Padding verticale */
  --py-input: 8px;
  /* Padding orizzontale */
  --px-input: 16px;
  --p-input: var(--py-input) var(--px-input);
  /* Sfondo per selezione */
  --bg-select: var(--white);
  /* Grigio chiaro per bordi */
  --bc-input: var(--gray-300);
  --br-input: 12px;
  --pr-searchbar: calc(var(--py-input) + var(--px-input) * 1.5);
  --position-icon: calc(var(--px-input) * 0.75);
  --pr-clearbutton: calc(var(--pr-searchbar) * 2);
  --p-select: var(--py-input) var(--px-input);
  --p-select-visible: var(--py-input) calc(var(--px-input) * 2);
  --p-select-group-label: calc(var(--py-input) / 2) calc(var(--px-input) / 2);
  --p-select-group-options: 4px 12px;
  --gap-form: 12px;
  --gap-field: 8px;
  --mb-field: 16px;
  /* Dimensione base font */
  --font-size: 14px;
  /* Font */
  --font-family: "Roboto", sans-serif;
  /* Altezza linea */
  --line-height: 1.6;
  /* Altezza linea */
  --line-height-sm: 1;
  --shadow: 0 4px 6px var(--gray-100);
  --shadow-invert: 0 -4px 4px var(--gray-100);
}

/* Reset di base per rimuovere gli stili di default */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--text-color);
  line-height: var(--line-height);
}

html {
  font-size: 14px;
}

/* Definizione dei tag HTML con stili neutri */
body {
  font-family: var(--font-family) !important;
  font-size: var(--font-size) !important;
  background-color: var(--bg) !important;
  color: var(--text-color) !important;
}

/* Stili di base per i tag principali */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

h1,
h2,
h3 {
  font-weight: bold;
}

a {
  color: var(--accent-color);
  text-decoration: none;
}

a:hover {
  color: inherit;
}

a:focus-visible {
  outline-offset: none;
  outline: none;
}

.csd-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.component-demo {
  margin-bottom: 48px;
}
.component-demo h2 {
  color: var(--text-color);
  margin-bottom: 8px;
}
.component-demo p {
  color: var(--text-color-secondary);
  margin-bottom: 0;
}
.component-demo .demo-container {
  background-color: var(--bg-light);
  border: 1px solid var(--bc-card);
  border-radius: var(--br-card);
  padding: 24px;
}
.component-demo .demo-container h3 {
  color: var(--text-color);
  font-size: 16px;
  margin-bottom: 16px;
  margin-top: 24px;
}
.component-demo .demo-container h3:first-child {
  margin-top: 0;
}
.component-demo .demo-container .demo-content {
  padding: 1rem 0.5rem;
  border-radius: var(--br-field);
}
.component-demo .demo-container .demo-box {
  padding: 1rem;
  background-color: var(--bg-light);
  border: 1px solid var(--bc-card);
  border-radius: 0.5rem;
  text-align: center;
  color: var(--text-color) !important;
}
@media (max-width: 768px) {
  .component-demo {
    margin-bottom: 24px;
  }
  .component-demo .demo-container {
    padding: 8px;
  }
}

ion-icon {
  --ionicon-stroke-width: 40px;
}

.csd-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: #64748b;
  background-color: var(--bg-light);
  border: 1px solid var(--bc-card);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.csd-menu-button:hover {
  background-color: #edf1f5;
  color: var(--text-color);
}
.csd-menu-button ion-icon {
  font-size: 1.25rem;
}

:root {
  /* Spacing */
  --csd-accordion-gap: 0.5rem;
  --csd-accordion-padding: 1rem;
  --csd-accordion-padding-sm: 0.75rem;
  /* Typography */
  --csd-accordion-font-weight: 600;
  --csd-accordion-icon-size: 1.25rem;
  /* Colors */
  --csd-accordion-color: var(--primary-600);
  --csd-accordion-color-hover: var(--primary-900);
  --csd-accordion-hover-bg: var(--gray-100);
  --csd-accordion-active-bg: var(--gray-100);
  /* Animation */
  --csd-accordion-transition: all 0.3s ease-in-out;
  --csd-accordion-icon-transition: transform 0.3s ease;
  /* Layout */
  --csd-accordion-border-radius: 10px;
  --csd-accordion-border: 1px solid var(--gray-200);
  --csd-accordion-max-height: 500px;
}

.csd-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--csd-accordion-gap);
  width: 100%;
}

.csd-accordion-item {
  background-color: var(--bg-light);
  border: var(--csd-accordion-border);
  border-radius: var(--csd-accordion-border-radius);
  overflow: hidden;
}
.csd-accordion-item .csd-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--csd-accordion-gap);
  width: 100%;
  padding: var(--csd-accordion-padding);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--csd-accordion-color);
  font-weight: var(--csd-accordion-font-weight);
  transition: var(--csd-accordion-transition);
}
.csd-accordion-item .csd-accordion-header:hover:not([disabled]) {
  color: var(--csd-accordion-color-hover);
  background-color: var(--csd-accordion-hover-bg);
}
.csd-accordion-item .csd-accordion-header[disabled] {
  cursor: not-allowed;
}
.csd-accordion-item .csd-accordion-header ion-icon {
  font-size: var(--csd-accordion-icon-size);
  color: inherit;
}
.csd-accordion-item .csd-accordion-header ion-icon.csd-accordion-icon {
  margin-left: auto;
  transition: var(--csd-accordion-icon-transition);
}
.csd-accordion-item .csd-accordion-header .csd-badge {
  margin-left: auto;
  margin-right: var(--csd-accordion-padding-sm);
}
.csd-accordion-item .csd-accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--csd-accordion-padding);
  transition: var(--csd-accordion-transition);
  opacity: 0;
}
.csd-accordion-item .csd-accordion-content p {
  margin: 0;
}
.csd-accordion-item.open .csd-accordion-header {
  color: var(--csd-accordion-color-hover);
  background-color: var(--csd-accordion-active-bg);
}
.csd-accordion-item.open .csd-accordion-header .csd-accordion-icon {
  transform: rotate(180deg);
}
.csd-accordion-item.open .csd-accordion-content {
  max-height: var(--csd-accordion-max-height);
  padding: var(--csd-accordion-padding);
  opacity: 1;
}
.csd-accordion-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.csd-accordion-item.disabled .csd-accordion-header {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--bg-disabled);
}

:root {
  /* Badge Spacing */
  --csd-badge-gap: 0.25rem;
  --csd-badge-padding: 0.5rem;
  --csd-badge-counter-padding: 0.25rem;
  /* Badge Typography */
  --csd-badge-font-size: 0.75rem;
  --csd-badge-font-weight: 500;
  --csd-badge-line-height: 1;
  --csd-badge-counter-font-size: 0.65rem;
  --csd-badge-icon-size: 1rem;
  /* Badge Layout */
  --csd-badge-border-radius: 50%;
  --csd-badge-pill-radius: 50rem;
  --csd-badge-counter-size: 1rem;
  --csd-badge-dot-size: 8px;
  /* Colors */
  --csd-badge-background: var(--primary-500);
}

.csd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--csd-badge-gap);
  padding: var(--csd-badge-padding);
  font-size: var(--csd-badge-font-size);
  font-weight: var(--csd-badge-font-weight);
  line-height: var(--csd-badge-line-height);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--csd-badge-border-radius);
  background-color: var(--csd-badge-background);
  color: var(--csd-color-white);
  width: calc(var(--csd-badge-font-size) + var(--csd-badge-padding));
  height: calc(var(--csd-badge-font-size) + var(--csd-badge-padding));
}
.csd-badge.primary {
  background-color: var(--csd-color-primary);
}
.csd-badge.secondary {
  background-color: var(--csd-color-secondary);
  color: var(--text-color);
}
.csd-badge.success {
  background-color: var(--csd-color-success);
}
.csd-badge.warning {
  background-color: var(--csd-color-warning);
  color: var(--text-color);
}
.csd-badge.danger {
  background-color: var(--csd-color-danger);
}
.csd-badge.info {
  background-color: var(--csd-color-info);
}
.csd-badge.pill {
  border-radius: var(--csd-badge-pill-radius);
}
.csd-badge.counter {
  position: absolute;
  top: calc(-1 * var(--csd-badge-gap) * 2);
  right: calc(-1 * var(--csd-badge-gap) * 2);
  padding: var(--csd-badge-counter-padding);
  border-radius: 50%;
}
.csd-badge.dot {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--csd-badge-dot-size);
  height: var(--csd-badge-dot-size);
  padding: 0;
  border-radius: 50%;
  transform: translate(25%, -25%);
}
.csd-badge ion-icon {
  color: inherit;
  font-size: var(--csd-badge-icon-size);
}

.csd-overlaybadge {
  display: flex;
  position: relative;
  font-size: 2rem;
  width: fit-content;
  height: fit-content;
}

:root {
  /* Spacing */
  --csd-breadcrumb-padding: 0.75rem;
  --csd-breadcrumb-padding-sm: 0.5rem;
  --csd-breadcrumb-item-gap: 0.5rem;
  --csd-breadcrumb-separator-margin: 0 0.5rem;
  --csd-breadcrumb-separator-margin-sm: 0 0.25rem;
  /* Typography */
  --csd-breadcrumb-font-size: 0.875rem;
  --csd-breadcrumb-icon-size: 1rem;
  /* Layout */
  --csd-breadcrumb-border-radius: 10px;
  /* Colors */
  --csd-breadcrumb-bg: var(--bg-light);
  --csd-breadcrumb-border-color: var(--gray-200);
  --csd-breadcrumb-color: var(--gray-500);
  --csd-breadcrumb-active-color: var(--csd-color-primary);
  --csd-breadcrumb-hover-color: var(--csd-color-primary);
  --csd-breadcrumb-separator-color: var(--gray-300);
}

.csd-breadcrumb {
  background-color: var(--csd-breadcrumb-bg);
  font-size: var(--csd-breadcrumb-font-size);
}
.csd-breadcrumb .csd-breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.csd-breadcrumb .csd-breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--csd-breadcrumb-color);
}
.csd-breadcrumb .csd-breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin: var(--csd-breadcrumb-separator-margin);
  color: var(--csd-breadcrumb-separator-color);
  font-weight: 300;
}
@media (max-width: 768px) {
  .csd-breadcrumb .csd-breadcrumb-item:not(:last-child)::after {
    margin: var(--csd-breadcrumb-separator-margin-sm);
  }
}
.csd-breadcrumb .csd-breadcrumb-item.active {
  color: var(--csd-breadcrumb-active-color);
  font-weight: 500;
}
.csd-breadcrumb .csd-breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: var(--csd-breadcrumb-item-gap);
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.csd-breadcrumb .csd-breadcrumb-item a:hover {
  color: var(--csd-breadcrumb-hover-color);
}
@media (max-width: 768px) {
  .csd-breadcrumb .csd-breadcrumb-item a {
    gap: calc(var(--csd-breadcrumb-item-gap) / 2);
  }
}
.csd-breadcrumb .csd-breadcrumb-item ion-icon {
  color: inherit;
  font-size: var(--csd-breadcrumb-icon-size);
  --ionicon-stroke-width: 48px;
  margin-bottom: 3px;
}

:root {
  /* Spacing */
  --csd-btn-padding-y: 0.5rem;
  --csd-btn-padding-x: 1rem;
  --csd-btn-padding: var(--csd-btn-padding-y) var(--csd-btn-padding-x);
  --csd-btn-padding-sm-y: 0.25rem;
  --csd-btn-padding-sm-x: 0.5rem;
  --csd-btn-padding-sm: var(--csd-btn-padding-sm-y) var(--csd-btn-padding-sm-x);
  --csd-btn-padding-lg-y: 0.75rem;
  --csd-btn-padding-lg-x: 1.5rem;
  --csd-btn-padding-lg: var(--csd-btn-padding-lg-y) var(--csd-btn-padding-lg-x);
  --csd-btn-padding-icon: 0.5rem;
  --csd-btn-gap: 0.5rem;
  /* Typography */
  --csd-btn-font-size: var(--font-size);
  --csd-btn-font-size-sm: 0.875rem;
  --csd-btn-font-size-lg: 1.125rem;
  --csd-btn-font-weight: 500;
  --csd-btn-line-height: var(--line-height);
  --csd-btn-line-height-sm: var(--line-height-sm);
  --csd-btn-icon-size: 16px;
  --csd-btn-icon-stroke: 50px;
  /* Colors */
  --csd-btn-color: var(--white);
  --csd-btn-bg: var(--csd-color-primary);
  --csd-btn-bg-hover: var(--csd-color-primary-hover);
  --csd-btn-bg-active: var(--csd-color-primary-active);
  --csd-btn-disabled-opacity: 0.6;
  /* Animation */
  --csd-btn-transition: all 0.2s ease-in-out;
  --csd-btn-loading-transition: transform 0.75s linear infinite;
  /* Layout */
  --csd-btn-border-radius: 12px;
  --csd-btn-border: none;
  --csd-btn-loading-size: 1rem;
  --csd-btn-loading-offset: calc(var(--csd-btn-padding-x) * 2 + 5px);
  --csd-btn-group-gap: 1px;
  --csd-btn-group-border-separator: var(--primary-600);
  --csd-btn-shadow: var(--shadow);
  --csd-btn-shadow-active: var(--shadow-sm);
}

.csd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--csd-btn-gap);
  padding: var(--csd-btn-padding);
  border-radius: var(--csd-btn-border-radius);
  font-size: var(--csd-btn-font-size);
  font-weight: var(--csd-btn-font-weight);
  line-height: var(--csd-btn-line-height);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: var(--csd-btn-transition);
  border: var(--csd-btn-border);
  outline: none;
  position: relative;
  width: fit-content;
  background-color: var(--csd-btn-bg);
  color: var(--csd-btn-color);
}
.csd-btn:hover {
  background-color: var(--csd-btn-bg-hover);
}
.csd-btn:active {
  background-color: var(--csd-btn-bg-active);
}
.csd-btn:disabled {
  opacity: var(--csd-btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
.csd-btn ion-icon,
.csd-btn i[class^=fa] {
  color: inherit;
  font-size: var(--csd-btn-icon-size);
}
.csd-btn ion-icon {
  --ionicon-stroke-width: var(--csd-btn-icon-stroke);
}
.csd-btn.btn-sm {
  padding: var(--csd-btn-padding-sm);
  font-size: var(--csd-btn-font-size-sm);
  line-height: var(--csd-btn-line-height-sm);
}
.csd-btn.btn-lg {
  padding: var(--csd-btn-padding-lg);
  font-size: var(--csd-btn-font-size-lg);
}
.csd-btn.btn-secondary, .csd-split-button.secondary .csd-btn.split-main, .csd-split-button.secondary .csd-btn.split-toggle {
  background-color: var(--csd-color-secondary);
  color: var(--csd-color-text) !important;
}
.csd-btn.btn-secondary:hover, .csd-split-button.secondary .csd-btn.split-main:hover, .csd-split-button.secondary .csd-btn.split-toggle:hover {
  background-color: var(--csd-color-secondary-hover);
}
.csd-btn.btn-secondary:active, .csd-split-button.secondary .csd-btn.split-main:active, .csd-split-button.secondary .csd-btn.split-toggle:active {
  background-color: var(--csd-color-secondary-active);
}
.csd-btn.btn-info, .csd-split-button.info .csd-btn.split-main, .csd-split-button.info .csd-btn.split-toggle {
  background-color: var(--csd-color-info);
  color: var(--csd-color-white) !important;
}
.csd-btn.btn-info:hover, .csd-split-button.info .csd-btn.split-main:hover, .csd-split-button.info .csd-btn.split-toggle:hover {
  background-color: var(--csd-color-info-hover);
}
.csd-btn.btn-info:active, .csd-split-button.info .csd-btn.split-main:active, .csd-split-button.info .csd-btn.split-toggle:active {
  background-color: var(--csd-color-info-active);
}
.csd-btn.btn-success, .csd-split-button.success .csd-btn.split-main, .csd-split-button.success .csd-btn.split-toggle {
  background-color: var(--csd-color-success);
  color: var(--csd-color-white) !important;
}
.csd-btn.btn-success:hover, .csd-split-button.success .csd-btn.split-main:hover, .csd-split-button.success .csd-btn.split-toggle:hover {
  background-color: var(--csd-color-success-hover);
}
.csd-btn.btn-success:active, .csd-split-button.success .csd-btn.split-main:active, .csd-split-button.success .csd-btn.split-toggle:active {
  background-color: var(--csd-color-success-active);
}
.csd-btn.btn-warning, .csd-split-button.warning .csd-btn.split-main, .csd-split-button.warning .csd-btn.split-toggle {
  background-color: var(--csd-color-warning);
  color: var(--csd-color-text) !important;
}
.csd-btn.btn-warning:hover, .csd-split-button.warning .csd-btn.split-main:hover, .csd-split-button.warning .csd-btn.split-toggle:hover {
  background-color: var(--csd-color-warning-hover);
}
.csd-btn.btn-warning:active, .csd-split-button.warning .csd-btn.split-main:active, .csd-split-button.warning .csd-btn.split-toggle:active {
  background-color: var(--csd-color-warning-active);
}
.csd-btn.btn-danger, .csd-split-button.danger .csd-btn.split-main, .csd-split-button.danger .csd-btn.split-toggle {
  background-color: var(--csd-color-danger);
  color: var(--csd-color-white) !important;
}
.csd-btn.btn-danger:hover, .csd-split-button.danger .csd-btn.split-main:hover, .csd-split-button.danger .csd-btn.split-toggle:hover {
  background-color: var(--csd-color-danger-hover);
}
.csd-btn.btn-danger:active, .csd-split-button.danger .csd-btn.split-main:active, .csd-split-button.danger .csd-btn.split-toggle:active {
  background-color: var(--csd-color-danger-active);
}
.csd-btn.btn-help {
  background-color: var(--csd-color-help);
  color: var(--csd-color-white) !important;
}
.csd-btn.btn-help:hover {
  background-color: var(--csd-color-help-hover);
}
.csd-btn.btn-help:active {
  background-color: var(--csd-color-help-active);
}
.csd-btn.text-only {
  background-color: transparent;
  color: var(--csd-btn-bg);
  padding: var(--csd-btn-padding-sm);
}
.csd-btn.text-only:hover {
  background-color: rgba(var(--csd-btn-bg), 0.1);
}
.csd-btn.text-only:active {
  background-color: rgba(var(--csd-btn-bg), 0.2);
}
.csd-btn.text-only.btn-secondary, .csd-split-button.secondary .csd-btn.text-only.split-main, .csd-split-button.secondary .csd-btn.text-only.split-toggle {
  color: var(--csd-color-secondary) !important;
}
.csd-btn.text-only.btn-secondary:hover, .csd-split-button.secondary .csd-btn.text-only.split-main:hover, .csd-split-button.secondary .csd-btn.text-only.split-toggle:hover {
  background-color: rgba(var(--csd-color-secondary), 0.1);
}
.csd-btn.text-only.btn-secondary:active, .csd-split-button.secondary .csd-btn.text-only.split-main:active, .csd-split-button.secondary .csd-btn.text-only.split-toggle:active {
  background-color: rgba(var(--csd-color-secondary), 0.2);
}
.csd-btn.outlined {
  background-color: transparent;
  border: 1px solid currentColor;
  color: var(--text-color) !important;
}
.csd-btn.outlined:hover {
  background-color: var(--primary-50) !important;
}
.csd-btn.outlined:active {
  background-color: var(--primary-50) !important;
}
.csd-btn.outlined.btn-secondary, .csd-split-button.secondary .csd-btn.outlined.split-main, .csd-split-button.secondary .csd-btn.outlined.split-toggle {
  border-color: var(--text-color-secondary);
  color: var(--text-color-secondary) !important;
}
.csd-btn.outlined.btn-secondary:hover, .csd-split-button.secondary .csd-btn.outlined.split-main:hover, .csd-split-button.secondary .csd-btn.outlined.split-toggle:hover {
  background-color: var(--primary-50) !important;
}
.csd-btn.outlined.btn-secondary:active, .csd-split-button.secondary .csd-btn.outlined.split-main:active, .csd-split-button.secondary .csd-btn.outlined.split-toggle:active {
  background-color: var(--primary-50) !important;
}
.csd-btn.outlined.btn-info, .csd-split-button.info .csd-btn.outlined.split-main, .csd-split-button.info .csd-btn.outlined.split-toggle {
  border-color: var(--csd-color-info);
  color: var(--csd-color-info) !important;
}
.csd-btn.outlined.btn-info:hover, .csd-split-button.info .csd-btn.outlined.split-main:hover, .csd-split-button.info .csd-btn.outlined.split-toggle:hover {
  background-color: var(--info-50) !important;
}
.csd-btn.outlined.btn-info:active, .csd-split-button.info .csd-btn.outlined.split-main:active, .csd-split-button.info .csd-btn.outlined.split-toggle:active {
  background-color: var(--info-50) !important;
}
.csd-btn.outlined.btn-success, .csd-split-button.success .csd-btn.outlined.split-main, .csd-split-button.success .csd-btn.outlined.split-toggle {
  border-color: var(--csd-color-success);
  color: var(--csd-color-success) !important;
}
.csd-btn.outlined.btn-success:hover, .csd-split-button.success .csd-btn.outlined.split-main:hover, .csd-split-button.success .csd-btn.outlined.split-toggle:hover {
  background-color: var(--success-50) !important;
}
.csd-btn.outlined.btn-success:active, .csd-split-button.success .csd-btn.outlined.split-main:active, .csd-split-button.success .csd-btn.outlined.split-toggle:active {
  background-color: var(--success-50) !important;
}
.csd-btn.outlined.btn-warning, .csd-split-button.warning .csd-btn.outlined.split-main, .csd-split-button.warning .csd-btn.outlined.split-toggle {
  border-color: var(--csd-color-warning);
  color: var(--csd-color-warning) !important;
}
.csd-btn.outlined.btn-warning:hover, .csd-split-button.warning .csd-btn.outlined.split-main:hover, .csd-split-button.warning .csd-btn.outlined.split-toggle:hover {
  background-color: var(--warning-50) !important;
}
.csd-btn.outlined.btn-warning:active, .csd-split-button.warning .csd-btn.outlined.split-main:active, .csd-split-button.warning .csd-btn.outlined.split-toggle:active {
  background-color: var(--warning-50) !important;
}
.csd-btn.outlined.btn-danger, .csd-split-button.danger .csd-btn.outlined.split-main, .csd-split-button.danger .csd-btn.outlined.split-toggle {
  border-color: var(--csd-color-danger);
  color: var(--csd-color-danger) !important;
}
.csd-btn.outlined.btn-danger:hover, .csd-split-button.danger .csd-btn.outlined.split-main:hover, .csd-split-button.danger .csd-btn.outlined.split-toggle:hover {
  background-color: var(--error-50) !important;
}
.csd-btn.outlined.btn-danger:active, .csd-split-button.danger .csd-btn.outlined.split-main:active, .csd-split-button.danger .csd-btn.outlined.split-toggle:active {
  background-color: var(--error-50) !important;
}
.csd-btn.outlined.btn-help {
  border-color: var(--csd-color-help);
  color: var(--csd-color-help) !important;
}
.csd-btn.outlined.btn-help:hover {
  background-color: var(--help-50) !important;
}
.csd-btn.outlined.btn-help:active {
  background-color: var(--help-50) !important;
}
.csd-btn.link {
  background-color: transparent !important;
  color: var(--csd-btn-bg) !important;
  padding: var(--csd-btn-padding-sm);
}
.csd-btn.link:hover {
  text-decoration: underline !important;
}
.csd-btn.link.btn-secondary:hover, .csd-split-button.secondary .csd-btn.link.split-main:hover, .csd-split-button.secondary .csd-btn.link.split-toggle:hover {
  color: var(--csd-color-text) !important;
  background-color: var(--csd-color-secondary);
}
.csd-btn.rounded {
  border-radius: 3rem !important;
}
.csd-btn.raised {
  box-shadow: var(--csd-btn-shadow) !important;
}
.csd-btn.raised:active {
  box-shadow: var(--csd-btn-shadow-active) !important;
}
.csd-btn.btn-icon {
  padding: var(--csd-btn-padding-icon);
  aspect-ratio: 1;
  justify-content: center;
}
.csd-btn.btn-icon ion-icon,
.csd-btn.btn-icon i[class^=fa] {
  margin: 0;
}
.csd-btn.btn-icon ion-icon {
  --ionicon-stroke-width: var(--csd-btn-icon-stroke);
}
.csd-btn.loading {
  position: relative;
  pointer-events: none;
  padding-left: var(--csd-btn-loading-offset);
  transition: none;
  opacity: 0.6;
}
.csd-btn.loading::after {
  content: "";
  position: absolute;
  left: calc(var(--csd-btn-padding-x) - 5px);
  width: var(--csd-btn-loading-size);
  height: var(--csd-btn-loading-size);
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  animation: spin 0.75s linear infinite;
}
.csd-btn.loading ion-icon,
.csd-btn.loading i[class^=fa] {
  display: none;
}

.csd-btn-group {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  vertical-align: middle;
}
.csd-btn-group .csd-btn {
  position: relative;
  flex: 0 1 auto;
}
@media (max-width: 768px) {
  .csd-btn-group .csd-btn {
    flex: 1;
    padding: calc(var(--csd-btn-padding-y) / 2) calc(var(--csd-btn-padding-x) / 2);
    font-size: calc(var(--csd-btn-font-size) / 1.2);
  }
}
.csd-btn-group .csd-btn:not(:first-child):not(:last-child) {
  border-radius: 0 !important;
}
.csd-btn-group .csd-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.csd-btn-group .csd-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.csd-btn-group .csd-btn:not(:first-child) {
  border-left: 1px solid var(--primary-600) !important;
}
.csd-btn-group .csd-btn.btn-secondary:not(:first-child), .csd-btn-group .csd-split-button.secondary .csd-btn.split-main:not(:first-child), .csd-split-button.secondary .csd-btn-group .csd-btn.split-main:not(:first-child), .csd-btn-group .csd-split-button.secondary .csd-btn.split-toggle:not(:first-child), .csd-split-button.secondary .csd-btn-group .csd-btn.split-toggle:not(:first-child) {
  border-left: 1px solid var(--primary-600) !important;
}
.csd-btn-group .csd-btn.btn-info:not(:first-child), .csd-btn-group .csd-split-button.info .csd-btn.split-main:not(:first-child), .csd-split-button.info .csd-btn-group .csd-btn.split-main:not(:first-child), .csd-btn-group .csd-split-button.info .csd-btn.split-toggle:not(:first-child), .csd-split-button.info .csd-btn-group .csd-btn.split-toggle:not(:first-child) {
  border-left: 1px solid var(--info-700) !important;
}
.csd-btn-group .csd-btn.btn-success:not(:first-child), .csd-btn-group .csd-split-button.success .csd-btn.split-main:not(:first-child), .csd-split-button.success .csd-btn-group .csd-btn.split-main:not(:first-child), .csd-btn-group .csd-split-button.success .csd-btn.split-toggle:not(:first-child), .csd-split-button.success .csd-btn-group .csd-btn.split-toggle:not(:first-child) {
  border-left: 1px solid var(--success-300) !important;
}
.csd-btn-group .csd-btn.btn-warning:not(:first-child), .csd-btn-group .csd-split-button.warning .csd-btn.split-main:not(:first-child), .csd-split-button.warning .csd-btn-group .csd-btn.split-main:not(:first-child), .csd-btn-group .csd-split-button.warning .csd-btn.split-toggle:not(:first-child), .csd-split-button.warning .csd-btn-group .csd-btn.split-toggle:not(:first-child) {
  border-left: 1px solid var(--warning-500) !important;
}
.csd-btn-group .csd-btn.btn-danger:not(:first-child), .csd-btn-group .csd-split-button.danger .csd-btn.split-main:not(:first-child), .csd-split-button.danger .csd-btn-group .csd-btn.split-main:not(:first-child), .csd-btn-group .csd-split-button.danger .csd-btn.split-toggle:not(:first-child), .csd-split-button.danger .csd-btn-group .csd-btn.split-toggle:not(:first-child) {
  border-left: 1px solid var(--error-700) !important;
}
.csd-btn-group .csd-btn.btn-help:not(:first-child) {
  border-left: 1px solid var(--gray-600) !important;
}
.csd-btn-group .csd-btn:hover {
  z-index: 2;
}
.csd-btn-group.equal-width {
  width: 100%;
}
.csd-btn-group.equal-width .csd-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
:root {
  --csd-card-margin: 1rem;
  --csd-card-padding: 1rem;
  --csd-card-border-radius: 1rem;
  --csd-card-border-color: var(--gray-200);
  --csd-card-bg: var(--white);
  --csd-card-shadow: var(--shadow);
  --csd-card-header-padding: 1rem;
  --csd-card-header-border: none;
  --csd-card-header-bg: transparent;
  --csd-card-body-padding: var(--csd-card-padding);
  --csd-card-body-gap: 0.5rem;
  --csd-card-footer-border: none;
  --csd-card-footer-bg: transparent;
  --csd-card-footer-margin-top: calc(var(--csd-card-margin) / 2);
  --csd-card-title-size: 1.1rem;
  --csd-card-title-weight: 600;
  --csd-card-subtitle-size: 1rem;
  --csd-card-subtitle-weight: 400;
  --csd-card-content-size: 1rem;
}

.csd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--csd-card-bg);
  border: 1px solid var(--csd-card-border-color);
  border-radius: var(--csd-card-border-radius);
  box-shadow: var(--csd-card-shadow);
  --p-card-header: var(--csd-card-header-padding);
}

.csd-card-header img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--csd-card-border-radius) - 2px) !important;
}

.csd-card-header {
  padding: var(--csd-card-header-padding) !important;
  background-color: var(--csd-card-header-bg);
  border-bottom: var(--csd-card-header-border);
}

.csd-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--csd-card-body-padding) !important;
  font-size: 1rem;
}

.csd-card-title {
  font-size: var(--csd-card-title-size);
  font-weight: var(--csd-card-title-weight);
  margin: 0;
}

.csd-card-subtitle {
  font-size: var(--csd-card-subtitle-size);
  font-weight: var(--csd-card-subtitle-weight);
  margin: 0;
  color: var(--text-color-secondary);
}

.csd-card-content {
  margin-top: var(--csd-card-body-gap);
  font-size: var(--csd-card-content-size);
}

.csd-card-footer {
  background-color: var(--csd-card-footer-bg);
  border-top: var(--csd-card-footer-border);
  margin-top: var(--csd-card-footer-margin-top);
}

:root {
  --csd-checkbox-size: 18px;
  --csd-checkbox-border-width: 1px;
  --csd-checkbox-border-radius: 4px;
  --csd-checkbox-gap: 0.5rem;
  --csd-checkbox-bg: var(--bg-input);
  --csd-checkbox-border-color: var(--bc-input);
  --csd-checkbox-checked-bg: var(--text-color);
  --csd-checkbox-checked-color: var(--white);
  --csd-checkbox-focus-color: var(--text-color);
  --csd-checkbox-disabled-bg: var(--bg-input-disabled);
  --csd-checkbox-disabled-border: var(--bc-input);
  --csd-checkbox-disabled-color: var(--text-color-disabled);
  --csd-checkbox-icon-size: 14px;
  --csd-checkbox-icon-color: var(--white);
}

.csd-checkbox {
  position: relative;
  display: inline-block;
  width: var(--csd-checkbox-size);
  height: var(--csd-checkbox-size);
  margin: 0;
  cursor: pointer;
}
.csd-checkbox-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--csd-checkbox-gap);
}
.csd-checkbox-wrapper:has(.csd-checkbox-input:disabled) .csd-checkbox-label {
  color: var(--csd-checkbox-disabled-color);
  cursor: default;
}
.csd-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.csd-checkbox-input:checked + .csd-checkbox-box {
  background-color: var(--csd-checkbox-checked-bg);
  border-color: var(--csd-checkbox-checked-bg);
}
.csd-checkbox-input:checked + .csd-checkbox-box ion-icon {
  opacity: 1;
  transform: scale(1);
  color: var(--csd-checkbox-checked-color) !important;
}
.csd-checkbox-input:focus + .csd-checkbox-box {
  border-color: var(--csd-checkbox-focus-color);
  box-shadow: var(--shadow);
}
.csd-checkbox-input:disabled {
  cursor: default;
}
.csd-checkbox-input:disabled + .csd-checkbox-box {
  background-color: var(--csd-checkbox-disabled-bg);
  border-color: var(--csd-checkbox-disabled-border);
  cursor: default;
}
.csd-checkbox-input:disabled + .csd-checkbox-box ion-icon {
  color: var(--csd-checkbox-disabled-color) !important;
}
.csd-checkbox-input:disabled ~ .csd-checkbox-label {
  color: var(--csd-checkbox-disabled-color);
  cursor: default;
}
.csd-checkbox-input:indeterminate + .csd-checkbox-box {
  background-color: var(--csd-checkbox-checked-bg);
  border-color: var(--csd-checkbox-checked-bg);
}
.csd-checkbox-input:indeterminate + .csd-checkbox-box::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background-color: var(--csd-checkbox-checked-color);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.csd-checkbox-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--csd-checkbox-bg);
  border: var(--csd-checkbox-border-width) solid var(--csd-checkbox-border-color);
  border-radius: var(--csd-checkbox-border-radius);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.csd-checkbox-box ion-icon {
  font-size: var(--csd-checkbox-icon-size);
  color: var(--csd-checkbox-icon-color) !important;
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}
.csd-checkbox-label {
  font-size: var(--font-size);
  cursor: pointer;
  user-select: none;
}

.csd-checkbox-group {
  display: flex;
  gap: var(--csd-checkbox-gap);
}
.csd-checkbox-group.vertical {
  flex-direction: column;
}

:root {
  /* Chip Spacing */
  --csd-chip-gap: 0.5rem;
  --csd-chip-padding-x: 0.75rem;
  --csd-chip-padding-y: 0.5rem;
  --csd-chip-padding: var(--csd-chip-padding-y) var(--csd-chip-padding-x);
  --csd-chip-padding-removable: 0.5rem;
  /* Chip Typography */
  --csd-chip-font-size: 1rem;
  --csd-chip-line-height: 1;
  --csd-chip-icon-size: 1rem;
  /* Chip Layout */
  --csd-chip-border-radius: 50rem;
  --csd-chip-avatar-size: 2rem;
  --csd-chip-remove-size: 1rem;
  /* Colors */
  --csd-chip-background: var(--primary-100);
  --csd-chip-color: var(--primary-600);
  /* Animation */
  --csd-chip-transition: all 0.2s ease-in-out;
}

.csd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--csd-chip-gap);
  padding: var(--csd-chip-padding);
  font-size: var(--csd-chip-font-size);
  line-height: var(--csd-chip-line-height);
  background-color: var(--csd-chip-background);
  border-radius: var(--csd-chip-border-radius);
  cursor: default;
  user-select: none;
  color: var(--csd-chip-color);
  transition: var(--csd-chip-transition);
}
.csd-chip.primary, .csd-chip.success, .csd-chip.danger, .csd-chip.warning, .csd-chip.info {
  color: var(--csd-color-white);
}
.csd-chip.primary .chip-remove, .csd-chip.success .chip-remove, .csd-chip.danger .chip-remove, .csd-chip.warning .chip-remove, .csd-chip.info .chip-remove {
  color: var(--csd-color-white);
}
.csd-chip.primary {
  background-color: var(--csd-color-primary);
}
.csd-chip.secondary {
  background-color: var(--csd-color-secondary);
}
.csd-chip.success {
  background-color: var(--csd-color-success);
}
.csd-chip.warning {
  background-color: var(--csd-color-warning);
}
.csd-chip.danger {
  background-color: var(--csd-color-danger);
}
.csd-chip.info {
  background-color: var(--csd-color-info);
}
.csd-chip.removable {
  padding-right: var(--csd-chip-padding-removable);
}
.csd-chip ion-icon {
  color: inherit;
  font-size: var(--csd-chip-icon-size);
  --ionicon-stroke-width: 50px;
}
.csd-chip:has(.chip-avatar) {
  padding-block: calc(var(--csd-chip-padding-y) / 2);
}
.csd-chip .chip-avatar {
  width: var(--csd-chip-avatar-size);
  height: var(--csd-chip-avatar-size);
  border-radius: 50%;
  object-fit: cover;
  margin-left: calc(-1 * var(--csd-chip-padding-y));
}
.csd-chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--csd-chip-remove-size);
  height: var(--csd-chip-remove-size);
  padding: 0;
  margin-left: var(--csd-badge-gap);
  font-size: var(--csd-chip-icon-size);
  color: var(--text-color-secondary);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--csd-chip-transition);
}
.csd-chip .chip-remove ion-icon {
  color: inherit;
  font-size: var(--csd-chip-icon-size);
}

/* Datepicker Component */
:root {
  --csd-datepicker-position: absolute;
  --csd-datepicker-z-index: 1000;
  --csd-datepicker-bg: var(--bg-input);
  --csd-datepicker-border: 1px solid var(--bc-card);
  --csd-datepicker-border-radius: 1rem;
  --csd-datepicker-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --csd-datepicker-padding: 16px;
  --csd-datepicker-user-select: none;
  --csd-datepicker-min-width: 280px;
  --csd-datepicker-position-margin: 4px;
  --csd-datepicker-header-display: flex;
  --csd-datepicker-header-align: center;
  --csd-datepicker-header-justify: space-between;
  --csd-datepicker-header-margin-bottom: 16px;
  --csd-datepicker-month-year-font-weight: 500;
  --csd-datepicker-month-year-font-size: 1.1em;
  --csd-datepicker-nav-display: flex;
  --csd-datepicker-nav-gap: 8px;
  --csd-datepicker-nav-btn-bg: none;
  --csd-datepicker-nav-btn-border: none;
  --csd-datepicker-nav-btn-cursor: pointer;
  --csd-datepicker-nav-btn-padding: 4px;
  --csd-datepicker-nav-btn-border-radius: var(--br-field, 0.25rem);
  --csd-datepicker-nav-btn-transition: var(--transition, all 0.2s);
  --csd-datepicker-nav-btn-hover-bg: var(--secondary-color, rgba(0, 0, 0, 0.04));
  --csd-datepicker-nav-btn-color: var(--gray-700, #64748b);
  --csd-datepicker-nav-btn-hover-color: var(--dark, #1e293b);
  --csd-datepicker-grid-display: grid;
  --csd-datepicker-grid-columns: repeat(7, 1fr);
  --csd-datepicker-grid-gap: 4px;
  --csd-datepicker-grid-border-top: 1px solid var(--bc-card);
  --csd-datepicker-grid-padding-top: var(--py-input, 8px);
  --csd-datepicker-grid-margin-bottom: var(--py-input, 8px);
  --csd-datepicker-weekday-text-align: center;
  --csd-datepicker-weekday-font-weight: 500;
  --csd-datepicker-weekday-color: var(--text-color-secondary, #64748b);
  --csd-datepicker-weekday-padding: 8px 0;
  --csd-datepicker-weekday-font-size: 0.9em;
  --csd-datepicker-day-text-align: center;
  --csd-datepicker-day-padding: 8px;
  --csd-datepicker-day-cursor: pointer;
  --csd-datepicker-day-border-radius: var(--br-field, 0.25rem);
  --csd-datepicker-day-transition: var(--transition, all 0.2s);
  --csd-datepicker-day-color: var(--dark, #1e293b);
  --csd-datepicker-day-font-size: 0.9em;
  --csd-datepicker-day-hover-bg: var(--secondary-color, rgba(0, 0, 0, 0.04));
  --csd-datepicker-day-selected-bg: var(--accent-color, #3b82f6);
  --csd-datepicker-day-selected-color: white;
  --csd-datepicker-day-selected-font-weight: bold;
  --csd-datepicker-day-today-font-weight: 500;
  --csd-datepicker-day-today-border: 1px solid var(--accent-color, #3b82f6);
  --csd-datepicker-day-today-color: var(--primary-color, #3b82f6);
  --csd-datepicker-day-disabled-color: var(--text-color-disabled, #94a3b8);
  --csd-datepicker-day-disabled-cursor: not-allowed;
  --csd-datepicker-day-disabled-opacity: 0.5;
  --csd-datepicker-day-other-month-color: var(--text-color-secondary, #64748b);
  --csd-datepicker-day-in-range-bg: var(--gray-100, #f1f5f9);
  --csd-datepicker-day-in-range-hover-bg: var(--gray-200, #e2e8f0);
  --csd-datepicker-day-range-start-radius: calc(var(--br-field, 0.25rem) / 2) 0 0 calc(var(--br-field, 0.25rem) / 2);
  --csd-datepicker-day-range-end-radius: 0 calc(var(--br-field, 0.25rem) / 2) calc(var(--br-field, 0.25rem) / 2) 0;
  --csd-datepicker-footer-display: flex;
  --csd-datepicker-footer-justify: space-between;
  --csd-datepicker-footer-padding-top: 16px;
  --csd-datepicker-footer-margin-top: 8px;
  --csd-datepicker-footer-border-top: 1px solid var(--bc-input);
  --csd-datepicker-btn-padding: 6px 12px;
  --csd-datepicker-btn-border-radius: var(--br-field, 0.25rem);
  --csd-datepicker-btn-border: none;
  --csd-datepicker-btn-cursor: pointer;
  --csd-datepicker-btn-transition: var(--transition, all 0.2s);
  --csd-datepicker-today-btn-color: var(--text-color);
  --csd-datepicker-today-btn-hover-bg: var(--accent-color, #3b82f6);
  --csd-datepicker-today-btn-hover-color: white;
  --csd-datepicker-clear-btn-color: var(--text-color-secondary, #64748b);
  --csd-datepicker-action-btn-bg: var(--text-color);
  --csd-datepicker-action-btn-color: var(--light, #ffffff);
  --csd-datepicker-action-btn-hover-bg: var(--gray-900, #0f172a);
  --csd-datepicker-responsive-padding: 12px;
  --csd-datepicker-responsive-padding-calc: calc(var(--py-input, 8px) / 2) calc(var(--px-input, 8px) / 2);
  --csd-datepicker-responsive-day-padding: 6px;
  --csd-datepicker-responsive-header-margin: 4px;
  --csd-datepicker-responsive-grid-padding: calc(var(--py-input, 8px) / 2);
  --csd-datepicker-responsive-grid-margin: calc(var(--py-input, 8px) / 2);
}

.csd-datepicker-wrapper {
  position: var(--csd-datepicker-position);
  z-index: var(--csd-datepicker-z-index);
  background: var(--csd-datepicker-bg);
  border: var(--csd-datepicker-border);
  border-radius: var(--csd-datepicker-border-radius);
  box-shadow: var(--csd-datepicker-box-shadow);
  padding: var(--csd-datepicker-padding);
  user-select: var(--csd-datepicker-user-select);
}
.csd-datepicker-wrapper .datepicker-header {
  display: var(--csd-datepicker-header-display);
  align-items: var(--csd-datepicker-header-align);
  justify-content: var(--csd-datepicker-header-justify);
  margin-bottom: var(--csd-datepicker-header-margin-bottom);
}
.csd-datepicker-wrapper .datepicker-header .month-year {
  font-weight: var(--csd-datepicker-month-year-font-weight);
  font-size: var(--csd-datepicker-month-year-font-size);
}
.csd-datepicker-wrapper .datepicker-header .nav-buttons {
  display: var(--csd-datepicker-nav-display);
  gap: var(--csd-datepicker-nav-gap);
}
.csd-datepicker-wrapper .datepicker-header .nav-buttons button {
  background: var(--csd-datepicker-nav-btn-bg);
  border: var(--csd-datepicker-nav-btn-border);
  cursor: var(--csd-datepicker-nav-btn-cursor);
  padding: var(--csd-datepicker-nav-btn-padding);
  border-radius: var(--csd-datepicker-nav-btn-border-radius);
  transition: var(--csd-datepicker-nav-btn-transition);
}
.csd-datepicker-wrapper .datepicker-header .nav-buttons button:hover {
  background-color: var(--csd-datepicker-nav-btn-hover-bg);
}
.csd-datepicker-wrapper .calendar-grid {
  display: var(--csd-datepicker-grid-display);
  grid-template-columns: var(--csd-datepicker-grid-columns);
  gap: var(--csd-datepicker-grid-gap);
}
.csd-datepicker-wrapper .calendar-grid .weekday {
  text-align: var(--csd-datepicker-weekday-text-align);
  font-weight: var(--csd-datepicker-weekday-font-weight);
  color: var(--csd-datepicker-weekday-color);
  padding: var(--csd-datepicker-weekday-padding);
  font-size: var(--csd-datepicker-weekday-font-size);
}
.csd-datepicker-wrapper .calendar-grid .day {
  text-align: var(--csd-datepicker-day-text-align);
  padding: var(--csd-datepicker-day-padding);
  cursor: var(--csd-datepicker-day-cursor);
  border-radius: var(--csd-datepicker-day-border-radius);
  transition: var(--csd-datepicker-day-transition);
}
.csd-datepicker-wrapper .calendar-grid .day:hover:not(.selected):not(.disabled) {
  background-color: var(--csd-datepicker-day-hover-bg);
}
.csd-datepicker-wrapper .calendar-grid .day.selected {
  background-color: var(--csd-datepicker-day-selected-bg);
  color: var(--csd-datepicker-day-selected-color);
}
.csd-datepicker-wrapper .calendar-grid .day.today {
  font-weight: var(--csd-datepicker-day-today-font-weight);
  border: var(--csd-datepicker-day-today-border);
}
.csd-datepicker-wrapper .calendar-grid .day.disabled {
  color: var(--csd-datepicker-day-disabled-color);
  cursor: var(--csd-datepicker-day-disabled-cursor);
}
.csd-datepicker-wrapper .calendar-grid .day.other-month {
  color: var(--csd-datepicker-day-other-month-color);
}
.csd-datepicker-wrapper .datepicker-footer {
  display: var(--csd-datepicker-footer-display);
  justify-content: var(--csd-datepicker-footer-justify);
  padding-top: var(--csd-datepicker-footer-padding-top);
  margin-top: var(--csd-datepicker-footer-margin-top);
  border-top: var(--csd-datepicker-footer-border-top);
}
.csd-datepicker-wrapper .datepicker-footer button {
  padding: var(--csd-datepicker-btn-padding);
  border-radius: var(--csd-datepicker-btn-border-radius);
  border: var(--csd-datepicker-btn-border);
  cursor: var(--csd-datepicker-btn-cursor);
  transition: var(--csd-datepicker-btn-transition);
}
.csd-datepicker-wrapper .datepicker-footer button.today-btn {
  color: var(--csd-datepicker-today-btn-color);
}
.csd-datepicker-wrapper .datepicker-footer button.today-btn:hover {
  background-color: var(--csd-datepicker-today-btn-hover-bg);
  color: var(--csd-datepicker-today-btn-hover-color);
}
.csd-datepicker-wrapper .datepicker-footer button.clear-btn {
  color: var(--csd-datepicker-clear-btn-color);
}
.csd-datepicker-wrapper .datepicker-footer button.clear-btn:hover {
  background-color: var(--csd-datepicker-today-btn-hover-bg);
}

.datepicker-multi-months {
  display: var(--csd-datepicker-multi-month-display, flex);
  gap: var(--csd-datepicker-multi-month-gap, 24px);
  padding: var(--csd-datepicker-multi-month-padding, 16px);
  background: var(--csd-datepicker-multi-month-bg, var(--surface-card));
  border-radius: var(--csd-datepicker-multi-month-border-radius, var(--border-radius));
  box-shadow: var(--csd-datepicker-multi-month-box-shadow, var(--card-shadow));
}
.datepicker-multi-months .datepicker-month {
  flex: var(--csd-datepicker-month-flex, 1);
  min-width: var(--csd-datepicker-month-min-width, calc(280px - var(--px-input, 8px) * 2));
}
.datepicker-multi-months .datepicker-month .datepicker-header {
  display: var(--csd-datepicker-header-display);
  align-items: var(--csd-datepicker-header-align);
  justify-content: var(--csd-datepicker-header-justify);
}
.datepicker-multi-months .datepicker-month .datepicker-header .nav-btn {
  background: var(--csd-datepicker-nav-btn-bg);
  border: var(--csd-datepicker-nav-btn-border);
  color: var(--csd-datepicker-nav-btn-color);
  cursor: var(--csd-datepicker-nav-btn-cursor);
  padding: var(--csd-datepicker-month-nav-btn-padding, 0.5rem);
  display: var(--csd-datepicker-month-nav-btn-display, flex);
  align-items: var(--csd-datepicker-month-nav-btn-align, center);
  justify-content: var(--csd-datepicker-month-nav-btn-justify, center);
  transition: var(--csd-datepicker-month-nav-btn-transition, color 0.2s);
}
.datepicker-multi-months .datepicker-month .datepicker-header .nav-btn:hover {
  color: var(--csd-datepicker-month-nav-btn-hover-color, var(--text-color));
}
.datepicker-multi-months .datepicker-month .datepicker-header .month-year-select {
  display: var(--csd-datepicker-month-year-select-display, flex);
  gap: var(--csd-datepicker-month-year-select-gap, 0.5rem);
  text-align: var(--csd-datepicker-month-year-select-align, center);
}
.datepicker-multi-months .datepicker-month .datepicker-header .month-year-select button {
  font-weight: var(--csd-datepicker-month-year-btn-font-weight, 600);
  color: var(--csd-datepicker-month-year-btn-color, var(--text-color));
  background: var(--csd-datepicker-month-year-btn-bg, none);
  border: var(--csd-datepicker-month-year-btn-border, none);
  padding: var(--csd-datepicker-month-year-btn-padding, 0.25rem 0.5rem);
  cursor: var(--csd-datepicker-btn-cursor);
}
.datepicker-multi-months .datepicker-month .datepicker-header .month-year-select button:hover {
  color: var(--csd-datepicker-month-year-btn-hover-color, var(--primary-color));
}

@media (max-width: 768px) {
  .csd-datepicker-wrapper {
    padding: var(--csd-datepicker-responsive-padding);
  }
  .csd-datepicker-wrapper .calendar-grid {
    gap: var(--csd-datepicker-responsive-grid-gap, 2px);
  }
  .csd-datepicker-wrapper .calendar-grid .day {
    padding: var(--csd-datepicker-responsive-day-padding);
  }
}
@media (max-width: 767px) {
  .datepicker-multi-months {
    padding: var(--csd-datepicker-responsive-multi-month-padding, 0);
    gap: var(--csd-datepicker-responsive-multi-month-gap, 0);
    flex-direction: var(--csd-datepicker-responsive-multi-month-direction, column);
  }
  .datepicker-multi-months .datepicker-month:first-child {
    border-bottom: var(--csd-datepicker-month-first-border-bottom, 1px solid var(--bc-card));
  }
  .datepicker-multi-months .datepicker-month:first-child .datepicker-header {
    justify-content: var(--csd-datepicker-month-first-header-justify, start);
  }
  .datepicker-multi-months .datepicker-month:not(:last-child) {
    border-bottom: var(--csd-datepicker-month-border-bottom, 1px solid var(--bc-input));
    padding-bottom: var(--csd-datepicker-month-padding-bottom, 16px);
    margin-bottom: var(--csd-datepicker-month-margin-bottom, 16px);
  }
  .datepicker-multi-months .datepicker-month:not(:last-child) .datepicker-grid {
    border-top: var(--csd-datepicker-month-grid-border-top, none);
    padding: var(--csd-datepicker-month-grid-padding, 0);
  }
  .datepicker-multi-months .datepicker-month:not(:last-child) .datepicker-header {
    justify-content: var(--csd-datepicker-month-header-justify, end);
  }
}
.csd-datepicker-wrapper {
  position: absolute;
  z-index: 1000;
  background: var(--bg-input);
  border: 1px solid var(--bc-card);
  border-radius: var(--br-input);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: var(--p-input);
  min-width: 280px;
}
.csd-datepicker-wrapper.position-below {
  top: 100%;
  margin-top: 4px;
}
.csd-datepicker-wrapper.position-above {
  bottom: 100%;
  margin-bottom: 4px;
}
.csd-datepicker-wrapper .datepicker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.csd-datepicker-wrapper .datepicker-header .month-year-select {
  display: flex;
  gap: 4px;
}
.csd-datepicker-wrapper .datepicker-header .month-year-select button {
  background: none;
  border: none;
  color: var(--dark) !important;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--br-input);
  transition: var(--transition);
}
.csd-datepicker-wrapper .datepicker-header .month-year-select button:hover {
  background-color: var(--gray-100);
}
.csd-datepicker-wrapper .datepicker-header .nav-btn {
  background: none;
  border: none;
  color: var(--gray-700) !important;
  cursor: pointer;
  padding: 4px 8px;
  transition: var(--transition);
}
.csd-datepicker-wrapper .datepicker-header .nav-btn:hover {
  color: var(--dark) !important;
}
.csd-datepicker-wrapper .month-select,
.csd-datepicker-wrapper .year-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  border-radius: var(--br-input);
  background: var(--bg-input);
  margin: 4px auto;
  width: 90%;
}
.csd-datepicker-wrapper .month-select button,
.csd-datepicker-wrapper .year-select button {
  background: none;
  border: none;
  padding: 6px 4px;
  color: var(--dark) !important;
  border-radius: calc(var(--br-input) / 2);
  transition: var(--transition);
  font-size: 0.9em;
}
.csd-datepicker-wrapper .month-select button:hover,
.csd-datepicker-wrapper .year-select button:hover {
  background-color: var(--gray-100);
}
.csd-datepicker-wrapper .year-select {
  grid-template-columns: repeat(4, 1fr);
  max-height: 180px;
  overflow-y: auto;
}
.csd-datepicker-wrapper .datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--bc-card);
  padding-top: var(--py-input);
  margin-bottom: var(--py-input);
  gap: 4px 0px;
}
.csd-datepicker-wrapper .datepicker-grid .weekday {
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--gray-500) !important;
  padding: 4px 2px;
}
.csd-datepicker-wrapper .datepicker-grid .day {
  text-align: center;
  padding: 6px 2px;
  font-size: 0.9em;
  color: var(--dark) !important;
  cursor: pointer;
  border-radius: calc(var(--br-input) / 2);
  transition: var(--transition);
  position: relative;
}
.csd-datepicker-wrapper .datepicker-grid .day:hover:not(.disabled) {
  background-color: var(--gray-100);
}
.csd-datepicker-wrapper .datepicker-grid .day.today {
  font-weight: bold;
  color: var(--primary-color) !important;
}
.csd-datepicker-wrapper .datepicker-grid .day.selected {
  background-color: var(--dark);
  color: var(--light) !important;
  font-weight: bold;
}
.csd-datepicker-wrapper .datepicker-grid .day.selected:hover {
  background-color: var(--gray-900);
}
.csd-datepicker-wrapper .datepicker-grid .day.selected.start {
  border-radius: calc(var(--br-input) / 2) 0 0 calc(var(--br-input) / 2);
}
.csd-datepicker-wrapper .datepicker-grid .day.selected.end {
  border-radius: 0 calc(var(--br-input) / 2) calc(var(--br-input) / 2) 0;
}
.csd-datepicker-wrapper .datepicker-grid .day.in-range {
  background-color: var(--gray-100);
  color: var(--dark) !important;
  border-radius: 0;
}
.csd-datepicker-wrapper .datepicker-grid .day.in-range:hover {
  background-color: var(--gray-200);
}
.csd-datepicker-wrapper .datepicker-grid .day.other-month {
  color: var(--gray-200) !important;
}
.csd-datepicker-wrapper .datepicker-grid .day.other-month.in-range {
  background-color: var(--gray-100);
  color: var(--gray-300) !important;
}
.csd-datepicker-wrapper .datepicker-grid .day.disabled {
  color: var(--gray-300) !important;
  cursor: not-allowed;
  opacity: 0.5;
}
.csd-datepicker-wrapper .datepicker-grid .day.disabled:hover {
  background-color: none;
}
.csd-datepicker-wrapper.csd-datepicker-wrapper-multiple .datepicker-grid {
  gap: 4px;
}
.csd-datepicker-wrapper .datepicker-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--bc-card);
}
.csd-datepicker-wrapper .datepicker-footer .action-btn {
  background: var(--text-color);
  border: none;
  color: var(--light) !important;
  font-size: 0.85em;
  padding: 4px 8px;
  border-radius: calc(var(--br-input) / 2);
  transition: var(--transition);
}
.csd-datepicker-wrapper .datepicker-footer .action-btn:hover {
  background-color: var(--gray-900);
}

@media (max-width: 768px) {
  .csd-datepicker-wrapper {
    padding: calc(var(--py-input) / 2) calc(var(--px-input) / 2);
  }
  .csd-datepicker-wrapper .datepicker-header {
    margin-bottom: 4px;
  }
  .csd-datepicker-wrapper .datepicker-grid {
    padding-top: calc(var(--py-input) / 2);
    margin-bottom: calc(var(--py-input) / 2);
  }
}
.csd-datepicker {
  cursor: pointer;
}
.csd-datepicker:read-only {
  background: var(--bg-input);
  cursor: pointer;
  background: var(--bg-input);
  cursor: pointer;
}

.datepicker-multi-months {
  display: flex;
  gap: 2rem;
  padding: 1rem;
  background: var(--surface-card);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
}
.datepicker-multi-months .datepicker-month {
  flex: 1;
  min-width: calc(280px - var(--px-input) * 2);
}
.datepicker-multi-months .datepicker-month .datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.datepicker-multi-months .datepicker-month .datepicker-header .nav-btn {
  background: none;
  border: none;
  color: var(--text-color-secondary);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.datepicker-multi-months .datepicker-month .datepicker-header .nav-btn:hover {
  color: var(--text-color);
}
.datepicker-multi-months .datepicker-month .datepicker-header .month-year-select {
  display: flex;
  gap: 0.5rem;
  text-align: center;
}
.datepicker-multi-months .datepicker-month .datepicker-header .month-year-select button {
  font-weight: 600;
  color: var(--text-color);
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.datepicker-multi-months .datepicker-month .datepicker-header .month-year-select button:hover {
  color: var(--primary-color);
}
.datepicker-multi-months .datepicker-month .datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--bc-card);
  padding-top: var(--py-input);
  margin-bottom: var(--py-input);
  gap: 4px 0px;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .weekday {
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--gray-500) !important;
  padding: 4px 2px;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day {
  text-align: center;
  padding: 6px 2px;
  font-size: 0.9em;
  color: var(--dark) !important;
  cursor: pointer;
  border-radius: calc(var(--br-input) / 2);
  transition: var(--transition);
  position: relative;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day:hover:not(.disabled) {
  background-color: var(--gray-100);
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.today {
  font-weight: bold;
  color: var(--primary-color) !important;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.selected {
  background-color: var(--dark);
  color: var(--light) !important;
  font-weight: bold;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.selected:hover {
  background-color: var(--gray-900);
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.selected.start {
  border-radius: calc(var(--br-input) / 2) 0 0 calc(var(--br-input) / 2);
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.selected.end {
  border-radius: 0 calc(var(--br-input) / 2) calc(var(--br-input) / 2) 0;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.in-range {
  background-color: var(--gray-100);
  color: var(--dark) !important;
  border-radius: 0;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.in-range:hover {
  background-color: var(--gray-200);
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.other-month {
  color: var(--gray-200) !important;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.other-month.in-range {
  background-color: var(--gray-100);
  color: var(--gray-300) !important;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.disabled {
  color: var(--gray-300) !important;
  cursor: not-allowed;
  opacity: 0.5;
}
.datepicker-multi-months .datepicker-month .datepicker-grid .day.disabled:hover {
  background-color: none;
}

@media (max-width: 767px) {
  .datepicker-multi-months {
    padding: 0;
    gap: 0;
    flex-direction: column;
  }
  .datepicker-multi-months .datepicker-month .datepicker-grid {
    border-top: none;
    padding: 0;
  }
  .datepicker-multi-months .datepicker-month .datepicker-header {
    justify-content: end;
  }
  .datepicker-multi-months .datepicker-month:first-child {
    border-bottom: 1px solid var(--bc-card);
  }
  .datepicker-multi-months .datepicker-month:first-child .datepicker-header {
    justify-content: start;
  }
}
.time-select {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--py-input);
  border-top: 1px solid var(--bc-input);
  margin-bottom: var(--py-input);
}
.time-select .time-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time-select .time-field label {
  font-size: 0.8em;
  color: var(--text-color-secondary) !important;
  text-transform: uppercase;
}
.time-select .time-field .time-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--br-field);
  padding: 4px;
}
.time-select .time-field .time-spinner .time-btn {
  background: none;
  border: none;
  color: var(--text-color) !important;
  font-size: 0.8em;
  padding: 2px 8px;
  cursor: pointer;
  transition: var(--transition);
}
.time-select .time-field .time-spinner .time-btn:hover {
  color: var(--primary-color) !important;
}
.time-select .time-field .time-spinner .time-input {
  color: var(--text-color) !important;
  border-radius: calc(var(--br-input) / 2);
  font-size: 1.1em;
  width: 2.5em;
  text-align: center;
  font-weight: 500;
  padding: 2px;
  cursor: default;
}
.time-select .time-field .time-spinner .time-input:focus {
  outline: none;
}
.time-select .time-separator {
  margin: 0 8px;
  color: var(--text-color-secondary) !important;
  font-weight: 500;
}

.csd-datepicker-range-preset + .csd-select-options.visible {
  margin-top: 4px;
}

/* Dropdown Component */
:root {
  --csd-dropdown-position: relative;
  --csd-dropdown-display: inline-block;
  --csd-dropdown-toggle-display: inline-flex;
  --csd-dropdown-toggle-align: center;
  --csd-dropdown-toggle-gap: 0.5rem;
  --csd-dropdown-toggle-padding: 0.5rem 0.75rem;
  --csd-dropdown-toggle-color: var(--text-color);
  --csd-dropdown-toggle-bg: transparent;
  --csd-dropdown-toggle-border: none;
  --csd-dropdown-toggle-border-radius: 0.5rem;
  --csd-dropdown-toggle-cursor: pointer;
  --csd-dropdown-toggle-transition: all 0.2s;
  --csd-dropdown-toggle-hover-bg: rgba(0, 0, 0, 0.04);
  --csd-dropdown-toggle-active-bg: rgba(0, 0, 0, 0.08);
  --csd-dropdown-arrow-transition: transform 0.2s;
  --csd-dropdown-arrow-transform: rotate(180deg);
  --csd-dropdown-icon-size: 1.25rem;
  --csd-dropdown-icon-stroke-width: 40px;
  --csd-dropdown-icon-small-size: 1rem;
  --csd-dropdown-icon-small-margin: 0.25rem;
  --csd-dropdown-menu-position: absolute;
  --csd-dropdown-menu-top: 100%;
  --csd-dropdown-menu-left: 0;
  --csd-dropdown-menu-z-index: 1000;
  --csd-dropdown-menu-min-width: 220px;
  --csd-dropdown-menu-padding: 0.5rem;
  --csd-dropdown-menu-margin-top: 4px;
  --csd-dropdown-menu-bg: var(--bg-light);
  --csd-dropdown-menu-border: 1px solid var(--bc-input);
  --csd-dropdown-menu-border-radius: 0.5rem;
  --csd-dropdown-menu-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --csd-dropdown-menu-transform: translateY(-10px);
  --csd-dropdown-menu-transition: all 0.2s;
  --csd-dropdown-menu-opacity: 0;
  --csd-dropdown-menu-visibility: hidden;
  --csd-dropdown-menu-show-opacity: 1;
  --csd-dropdown-menu-show-visibility: visible;
  --csd-dropdown-menu-show-transform: translateY(0);
  --csd-dropdown-item-display: flex;
  --csd-dropdown-item-align: center;
  --csd-dropdown-item-gap: 0.5rem;
  --csd-dropdown-item-padding: 0.5rem 0.75rem;
  --csd-dropdown-item-color: var(--text-color);
  --csd-dropdown-item-icon-color: #64748b;
  --csd-dropdown-item-text-decoration: none;
  --csd-dropdown-item-border-radius: 0.5rem;
  --csd-dropdown-item-transition: all 0.2s;
  --csd-dropdown-item-cursor: pointer;
  --csd-dropdown-item-font-size: 0.875rem;
  --csd-dropdown-item-hover-bg: #edf1f5;
  --csd-dropdown-item-hover-color: var(--text-color);
  --csd-dropdown-item-active-bg: var(--accent-color);
  --csd-dropdown-item-active-color: white;
  --csd-dropdown-item-disabled-color: var(--text-color-disabled);
  --csd-dropdown-divider-height: 1px;
  --csd-dropdown-divider-margin: 0.5rem 0;
  --csd-dropdown-divider-bg: var(--bc-card);
  --csd-dropdown-header-padding: 0.5rem 0.75rem;
  --csd-dropdown-header-color: var(--text-color-secondary);
  --csd-dropdown-header-font-size: 0.875em;
  --csd-dropdown-header-font-weight: 500;
  --csd-dropdown-dropup-margin-bottom: 4px;
  --csd-dropdown-dropend-margin-left: 4px;
  --csd-dropdown-dropstart-margin-right: 4px;
}

.csd-dropdown {
  position: var(--csd-dropdown-position);
  display: var(--csd-dropdown-display);
}
.csd-dropdown .csd-dropdown-toggle {
  display: var(--csd-dropdown-toggle-display);
  align-items: var(--csd-dropdown-toggle-align);
  gap: var(--csd-dropdown-toggle-gap);
  padding: var(--csd-dropdown-toggle-padding);
  color: var(--csd-dropdown-toggle-color);
  background: var(--csd-dropdown-toggle-bg);
  border: var(--csd-dropdown-toggle-border);
  border-radius: var(--csd-dropdown-toggle-border-radius);
  cursor: var(--csd-dropdown-toggle-cursor);
  transition: var(--csd-dropdown-toggle-transition);
}
.csd-dropdown .csd-dropdown-toggle:hover {
  background-color: var(--csd-dropdown-toggle-hover-bg);
}
.csd-dropdown .csd-dropdown-toggle.active {
  background-color: var(--csd-dropdown-toggle-active-bg);
}
.csd-dropdown .csd-dropdown-toggle .csd-dropdown-arrow {
  transition: var(--csd-dropdown-arrow-transition);
}
.csd-dropdown .csd-dropdown-toggle.active .csd-dropdown-arrow {
  transform: var(--csd-dropdown-arrow-transform);
}
.csd-dropdown .csd-dropdown-toggle ion-icon {
  font-size: var(--csd-dropdown-icon-size);
  --ionicon-stroke-width: var(--csd-dropdown-icon-stroke-width);
}
.csd-dropdown .csd-dropdown-toggle ion-icon:last-child {
  font-size: var(--csd-dropdown-icon-small-size);
  margin-left: var(--csd-dropdown-icon-small-margin);
}
.csd-dropdown .csd-dropdown-menu {
  position: var(--csd-dropdown-menu-position);
  top: var(--csd-dropdown-menu-top);
  left: var(--csd-dropdown-menu-left);
  z-index: var(--csd-dropdown-menu-z-index);
  min-width: var(--csd-dropdown-menu-min-width);
  padding: var(--csd-dropdown-menu-padding);
  margin-top: var(--csd-dropdown-menu-margin-top);
  background-color: var(--csd-dropdown-menu-bg);
  border: var(--csd-dropdown-menu-border);
  border-radius: var(--csd-dropdown-menu-border-radius);
  box-shadow: var(--csd-dropdown-menu-box-shadow);
  opacity: var(--csd-dropdown-menu-opacity);
  visibility: var(--csd-dropdown-menu-visibility);
  transform: var(--csd-dropdown-menu-transform);
  transition: var(--csd-dropdown-menu-transition);
}
.csd-dropdown .csd-dropdown-menu.show {
  opacity: var(--csd-dropdown-menu-show-opacity);
  visibility: var(--csd-dropdown-menu-show-visibility);
  transform: var(--csd-dropdown-menu-show-transform);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item {
  display: var(--csd-dropdown-item-display);
  align-items: var(--csd-dropdown-item-align);
  gap: var(--csd-dropdown-item-gap);
  padding: var(--csd-dropdown-item-padding);
  color: var(--csd-dropdown-item-color);
  text-decoration: var(--csd-dropdown-item-text-decoration);
  border-radius: var(--csd-dropdown-item-border-radius);
  transition: var(--csd-dropdown-item-transition);
  cursor: var(--csd-dropdown-item-cursor);
  font-size: var(--csd-dropdown-item-font-size);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item ion-icon {
  color: var(--csd-dropdown-item-icon-color);
  font-size: var(--csd-dropdown-icon-size);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item:hover {
  background-color: var(--csd-dropdown-item-hover-bg);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item:hover ion-icon {
  color: var(--csd-dropdown-item-hover-color);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item.active {
  background-color: var(--csd-dropdown-item-active-bg);
  color: var(--csd-dropdown-item-active-color);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item.disabled {
  color: var(--csd-dropdown-item-disabled-color);
  cursor: not-allowed;
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-item.disabled:hover {
  background-color: transparent;
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-divider {
  height: var(--csd-dropdown-divider-height);
  margin: var(--csd-dropdown-divider-margin);
  background-color: var(--csd-dropdown-divider-bg);
}
.csd-dropdown .csd-dropdown-menu .csd-dropdown-header {
  padding: var(--csd-dropdown-header-padding);
  color: var(--csd-dropdown-header-color);
  font-size: var(--csd-dropdown-header-font-size);
  font-weight: var(--csd-dropdown-header-font-weight);
}
.csd-dropdown.dropup .csd-dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--csd-dropdown-dropup-margin-bottom);
}
.csd-dropdown.dropend .csd-dropdown-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--csd-dropdown-dropend-margin-left);
}
.csd-dropdown.dropstart .csd-dropdown-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--csd-dropdown-dropstart-margin-right);
}
.csd-menubar-end .csd-dropdown .csd-dropdown-menu {
  left: auto;
  right: 0;
}

:root {
  --csd-editor-border: 1px solid var(--bc-card);
  --csd-editor-border-radius: var(--br-card);
  --csd-editor-bg: var(--bg-light);
  --csd-editor-toolbar-gap: 0.5rem;
  --csd-editor-toolbar-padding: 0.5rem;
  --csd-editor-toolbar-border: 1px solid var(--bc-card);
  --csd-editor-toolbar-bg: var(--bg-input);
  --csd-editor-toolbar-group-gap: 0.25rem;
  --csd-editor-button-padding: 0.5rem;
  --csd-editor-button-color: var(--text-color-secondary);
  --csd-editor-button-border-radius: var(--br-field);
  --csd-editor-button-hover-color: var(--text-color);
  --csd-editor-button-hover-bg: var(--bg-highlight);
  --csd-editor-button-active-color: var(--accent-color);
  --csd-editor-button-active-bg: var(--secondary-color);
  --csd-editor-button-icon-size: 1.25rem;
  --csd-editor-select-padding: 0.25rem 0.5rem;
  --csd-editor-select-border: 1px solid var(--bc-card);
  --csd-editor-select-border-radius: var(--br-field);
  --csd-editor-select-bg: var(--bg-light);
  --csd-editor-select-color: var(--text-color);
  --csd-editor-select-font-size: 0.875rem;
  --csd-editor-color-picker-size: 24px;
  --csd-editor-color-picker-border: 1px solid var(--bc-card);
  --csd-editor-color-picker-border-radius: var(--br-field);
  --csd-editor-content-min-height: 200px;
  --csd-editor-content-padding: 1rem;
  --csd-editor-content-bg: var(--bg-input);
  --csd-editor-statusbar-padding: 0.5rem;
  --csd-editor-statusbar-border: 1px solid var(--bc-card);
  --csd-editor-statusbar-bg: var(--bg-input);
  --csd-editor-statusbar-font-size: 0.875rem;
  --csd-editor-statusbar-color: var(--text-color-secondary);
  --csd-editor-headings-margin: 1rem 0 0.5rem;
  --csd-editor-headings-color: var(--text-color);
  --csd-editor-paragraph-margin: 0 0 1rem;
  --csd-editor-paragraph-line-height: 1.5;
  --csd-editor-list-margin: 0 0 1rem 1.5rem;
  --csd-editor-list-item-margin: 0 0 0.5rem;
  --csd-editor-link-color: var(--accent-color);
  --csd-editor-table-margin: 1rem 0;
  --csd-editor-table-cell-padding: 0.5rem;
  --csd-editor-table-border: 1px solid var(--bc-card);
  --csd-editor-table-header-bg: var(--bg-highlight);
  --csd-editor-code-bg: var(--bg-highlight);
  --csd-editor-code-padding: 1rem;
  --csd-editor-code-border-radius: var(--br-field);
  --csd-editor-code-margin: 1rem 0;
  --csd-editor-code-color: var(--text-color);
  --csd-editor-blockquote-margin: 1rem 0;
  --csd-editor-blockquote-padding: 0.5rem 1rem;
  --csd-editor-blockquote-border: 4px solid var(--accent-color);
  --csd-editor-blockquote-bg: var(--bg-highlight);
  --csd-editor-blockquote-color: var(--text-color-secondary);
  --csd-editor-image-max-width: 100%;
  --csd-editor-image-margin: 1rem 0;
  --csd-editor-mobile-breakpoint: 768px;
  --csd-editor-container-border: 1px solid var(--bc-input);
  --csd-editor-container-radius: var(--br-input);
  --csd-editor-container-bg: var(--bg-light);
  --csd-editor-container-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --csd-editor-menubar-gap: 0.5rem;
  --csd-editor-menubar-padding: 0.5rem;
  --csd-editor-menubar-bg: var(--bg-light);
  --csd-editor-menubar-border: 1px solid var(--bc-input);
  --csd-editor-menubar-item-padding: 0.25rem 0.5rem;
  --csd-editor-menubar-item-radius: var(--br-btn);
  --csd-editor-menubar-item-hover-bg: #edf1f5;
  --csd-editor-menu-dropdown-bg: var(--bg-light);
  --csd-editor-menu-dropdown-border: 1px solid var(--bc-input);
  --csd-editor-menu-dropdown-radius: var(--br-input);
  --csd-editor-menu-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --csd-editor-menu-dropdown-item-gap: 0.5rem;
  --csd-editor-menu-dropdown-item-padding: 0.5rem;
  --csd-editor-menu-dropdown-item-color: var(--text-color);
  --csd-editor-menu-dropdown-item-font-size: 0.875rem;
  --csd-editor-menu-dropdown-item-hover-bg: #edf1f5;
  --csd-editor-menu-dropdown-item-icon-size: 1.25rem;
  --csd-editor-toolbar-group-border: 1px solid var(--bc-input);
  --csd-editor-toolbar-group-padding: 0.5rem;
  --csd-editor-toolbar-group-margin: 0.5rem;
  --csd-editor-toolbar-dropdown-padding: 0.5rem;
  --csd-editor-toolbar-dropdown-bg: var(--bg-light);
  --csd-editor-toolbar-dropdown-border: 1px solid var(--bc-input);
  --csd-editor-toolbar-dropdown-radius: var(--br-input);
  --csd-editor-toolbar-dropdown-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --csd-editor-toolbar-dropdown-item-gap: 0.5rem;
  --csd-editor-toolbar-dropdown-item-padding: 0.5rem;
  --csd-editor-toolbar-dropdown-item-hover-bg: #edf1f5;
  --csd-editor-mobile-toolbar-padding: 0.25rem;
  --csd-editor-mobile-toolbar-height: 3.5rem;
  --csd-editor-mobile-toolbar-bg: #fff;
  --csd-editor-mobile-toolbar-border: 1px solid var(--bc-input);
  --csd-editor-mobile-tool-min-size: 3rem;
  --csd-editor-mobile-tool-icon-size: 1.35rem;
  --csd-editor-mobile-tool-radius: 0.25rem;
  --csd-editor-mobile-tool-hover-bg: var(--bg-highlight);
  --csd-editor-mobile-tool-active-color: var(--csd-color-primary);
  --csd-editor-mobile-tool-active-bg-alpha: 0.1;
  --csd-editor-mobile-dropdown-min-width: 160px;
  --csd-editor-mobile-dropdown-bg: var(--bg-light);
  --csd-editor-mobile-dropdown-margin: 0.5rem;
  --csd-editor-mobile-dropdown-padding: 0.25rem;
  --csd-editor-mobile-dropdown-border: 1px solid var(--bc-input);
  --csd-editor-mobile-dropdown-radius: var(--br-input);
  --csd-editor-mobile-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --csd-editor-mobile-dropdown-item-padding: 0.5rem;
  --csd-editor-mobile-dropdown-item-hover-bg: var(--bg-highlight);
  --csd-editor-mobile-dropdown-item-font-size: 0.875rem;
  --csd-editor-mobile-dropdown-item-icon-width: 1.5rem;
  --csd-editor-mobile-dropdown-item-icon-size: 1rem;
  --csd-editor-mobile-dropdown-item-icon-margin: 0.5rem;
  --csd-editor-tooltip-padding: 0.25rem 0.5rem;
  --csd-editor-tooltip-bg: var(--text-color);
  --csd-editor-tooltip-color: var(--bg-light);
  --csd-editor-tooltip-font-size: 0.75rem;
  --csd-editor-tooltip-radius: 0.5rem;
  --csd-editor-tooltip-margin: 0.5rem;
  --csd-editor-tooltip-arrow-size: 4px;
  --csd-editor-tooltip-transition: opacity 0.2s ease, visibility 0.2s ease;
  --csd-editor-dropdown-bg: var(--bg-light);
  --csd-editor-dropdown-border: 1px solid var(--border-color);
  --csd-editor-dropdown-radius: 0.5rem;
  --csd-editor-dropdown-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --csd-editor-dropdown-min-width: 160px;
  --csd-editor-dropdown-padding-y: 0.5rem;
  --csd-editor-dropdown-margin-top: 0.25rem;
  --csd-editor-dropdown-item-padding: 0.5rem 1rem;
  --csd-editor-dropdown-item-gap: 0.5rem;
  --csd-editor-dropdown-item-font-size: 0.875rem;
  --csd-editor-dropdown-item-hover-bg: var(--hover-color);
  --csd-editor-dropdown-item-icon-width: 1rem;
  --csd-editor-dropdown-item-transition: background-color 0.2s ease;
  --csd-editor-color-picker-component-bg: var(--bg-light);
  --csd-editor-color-picker-component-border: 1px solid var(--border-color);
  --csd-editor-color-picker-component-radius: 0.5rem;
  --csd-editor-color-picker-component-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --csd-editor-color-picker-component-padding: 0.5rem;
  --csd-editor-color-picker-component-margin: 0.25rem;
  --csd-editor-color-grid-gap: 0.25rem;
  --csd-editor-color-item-size: 1.5rem;
  --csd-editor-color-item-border: 1px solid var(--border-color);
  --csd-editor-color-item-radius: 0.25rem;
  --csd-editor-color-item-transition: transform 0.2s ease;
  --csd-editor-color-item-hover-scale: 1.1;
  --csd-editor-special-chars-bg: var(--bg-light);
  --csd-editor-special-chars-border: 1px solid var(--border-color);
  --csd-editor-special-chars-radius: 0.5rem;
  --csd-editor-special-chars-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --csd-editor-special-chars-padding: 0.5rem;
  --csd-editor-special-chars-margin: 0.25rem;
  --csd-editor-special-chars-gap: 0.25rem;
  --csd-editor-special-char-item-size: 2rem;
  --csd-editor-special-char-item-border: 1px solid var(--border-color);
  --csd-editor-special-char-item-radius: 0.25rem;
  --csd-editor-special-char-item-color: var(--text-color);
  --csd-editor-special-char-item-font-size: 1rem;
  --csd-editor-special-char-item-transition: all 0.2s ease;
  --csd-editor-special-char-item-hover-bg: var(--hover-color);
  --csd-editor-special-char-item-hover-scale: 1.1;
  --csd-editor-source-mode-font-family: monospace;
}

.csd-editor {
  position: relative;
  border: var(--csd-editor-border);
  border-radius: var(--csd-editor-border-radius);
  background-color: var(--csd-editor-bg);
}
.csd-editor .editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--csd-editor-toolbar-gap);
  padding: var(--csd-editor-toolbar-padding);
  border-bottom: var(--csd-editor-toolbar-border);
  background-color: var(--csd-editor-toolbar-bg);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.csd-editor .editor-toolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--csd-editor-toolbar-group-gap);
}
.csd-editor .editor-toolbar .toolbar-group:not(:last-child) {
  border-right: var(--csd-editor-toolbar-border);
  padding-right: var(--csd-editor-toolbar-padding);
}
.csd-editor .editor-toolbar .editor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--csd-editor-button-padding);
  color: var(--csd-editor-button-color);
  background: none;
  border: none;
  border-radius: var(--csd-editor-button-border-radius);
  cursor: pointer;
  transition: var(--transition);
}
.csd-editor .editor-toolbar .editor-button:hover {
  color: var(--csd-editor-button-hover-color);
  background-color: var(--csd-editor-button-hover-bg);
}
.csd-editor .editor-toolbar .editor-button.active {
  color: var(--csd-editor-button-active-color);
  background-color: var(--csd-editor-button-active-bg);
}
.csd-editor .editor-toolbar .editor-button ion-icon {
  font-size: var(--csd-editor-button-icon-size);
  color: inherit;
}
.csd-editor .editor-toolbar .editor-select {
  padding: var(--csd-editor-select-padding);
  border: var(--csd-editor-select-border);
  border-radius: var(--csd-editor-select-border-radius);
  background-color: var(--csd-editor-select-bg);
  color: var(--csd-editor-select-color);
  font-size: var(--csd-editor-select-font-size);
}
.csd-editor .editor-toolbar .color-picker {
  width: var(--csd-editor-color-picker-size);
  height: var(--csd-editor-color-picker-size);
  padding: 0;
  border: var(--csd-editor-color-picker-border);
  border-radius: var(--csd-editor-color-picker-border-radius);
  cursor: pointer;
}
.csd-editor .editor-content {
  min-height: var(--csd-editor-content-min-height);
  padding: var(--csd-editor-content-padding);
  outline: none;
  overflow-y: auto;
}
.csd-editor .editor-content[contenteditable=true] {
  background-color: var(--csd-editor-content-bg);
}
.csd-editor .editor-content h1, .csd-editor .editor-content h2, .csd-editor .editor-content h3, .csd-editor .editor-content h4, .csd-editor .editor-content h5, .csd-editor .editor-content h6 {
  margin: var(--csd-editor-headings-margin);
  color: var(--csd-editor-headings-color);
}
.csd-editor .editor-content p {
  margin: var(--csd-editor-paragraph-margin);
  line-height: var(--csd-editor-paragraph-line-height);
}
.csd-editor .editor-content ul, .csd-editor .editor-content ol {
  margin: var(--csd-editor-list-margin);
}
.csd-editor .editor-content ul li, .csd-editor .editor-content ol li {
  margin-bottom: var(--csd-editor-list-item-margin);
}
.csd-editor .editor-content a {
  color: var(--csd-editor-link-color);
  text-decoration: none;
}
.csd-editor .editor-content a:hover {
  text-decoration: underline;
}
.csd-editor .editor-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--csd-editor-table-margin);
}
.csd-editor .editor-content table th, .csd-editor .editor-content table td {
  padding: var(--csd-editor-table-cell-padding);
  border: var(--csd-editor-table-border);
  text-align: left;
}
.csd-editor .editor-content table th {
  background-color: var(--csd-editor-table-header-bg);
  font-weight: 600;
}
.csd-editor .editor-content pre {
  background-color: var(--csd-editor-code-bg);
  padding: var(--csd-editor-code-padding);
  border-radius: var(--csd-editor-code-border-radius);
  margin: var(--csd-editor-code-margin);
  overflow-x: auto;
}
.csd-editor .editor-content pre code {
  font-family: monospace;
  color: var(--csd-editor-code-color);
}
.csd-editor .editor-content blockquote {
  margin: var(--csd-editor-blockquote-margin);
  padding: var(--csd-editor-blockquote-padding);
  border-left: var(--csd-editor-blockquote-border);
  background-color: var(--csd-editor-blockquote-bg);
  color: var(--csd-editor-blockquote-color);
}
.csd-editor .editor-content img {
  max-width: var(--csd-editor-image-max-width);
  height: auto;
  margin: var(--csd-editor-image-margin);
}
.csd-editor .editor-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--csd-editor-statusbar-padding);
  border-top: var(--csd-editor-statusbar-border);
  background-color: var(--csd-editor-statusbar-bg);
  font-size: var(--csd-editor-statusbar-font-size);
  color: var(--csd-editor-statusbar-color);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.csd-editor .editor-statusbar .word-count {
  margin-right: 1rem;
}
.csd-editor.readonly .editor-toolbar,
.csd-editor.readonly .editor-statusbar {
  display: none;
}
.csd-editor.readonly .editor-content {
  background-color: var(--csd-editor-bg);
}
@media (max-width: var(--csd-editor-mobile-breakpoint)) {
  .csd-editor .editor-toolbar .toolbar-group {
    flex-wrap: wrap;
  }
  .csd-editor .editor-statusbar {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
}

.csd-editor-container {
  position: relative;
  overflow: visible;
  border: var(--csd-editor-container-border);
  border-radius: var(--csd-editor-container-radius);
  background-color: var(--csd-editor-container-bg);
  box-shadow: var(--csd-editor-container-shadow);
}
.csd-editor-container .csd-editor-menubar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  gap: var(--csd-editor-menubar-gap);
  padding: var(--csd-editor-menubar-padding);
  background-color: var(--csd-editor-menubar-bg);
  border-bottom: var(--csd-editor-menubar-border);
  border-radius: var(--csd-editor-container-radius) var(--csd-editor-container-radius) 0 0;
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item {
  position: relative;
  border-radius: 0.5rem;
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item > span {
  padding: var(--csd-editor-menubar-item-padding);
  cursor: pointer;
  border-radius: var(--csd-editor-menubar-item-radius);
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item > span:hover {
  background-color: var(--csd-editor-menubar-item-hover-bg);
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item .csd-editor-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--csd-editor-menu-dropdown-bg);
  border: var(--csd-editor-menu-dropdown-border);
  border-radius: var(--csd-editor-menu-dropdown-radius);
  box-shadow: var(--csd-editor-menu-dropdown-shadow);
  z-index: 1000;
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item .csd-editor-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: var(--csd-editor-menu-dropdown-item-gap);
  width: max-content;
  padding: var(--csd-editor-menu-dropdown-item-padding);
  border: none;
  background: none;
  color: var(--csd-editor-menu-dropdown-item-color);
  font-size: var(--csd-editor-menu-dropdown-item-font-size);
  text-align: left;
  cursor: pointer;
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item .csd-editor-menu-dropdown button:hover {
  background-color: var(--csd-editor-menu-dropdown-item-hover-bg);
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item .csd-editor-menu-dropdown button ion-icon {
  font-size: var(--csd-editor-menu-dropdown-item-icon-size);
}
.csd-editor-container .csd-editor-menubar .csd-editor-menu-item:hover .csd-editor-menu-dropdown {
  display: block;
}
.csd-editor-container .csd-editor-toolbars {
  position: -webkit-sticky;
  position: sticky;
  top: 38px;
  z-index: 1000;
}
.csd-editor-container .csd-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--bc-input);
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-group {
  display: flex;
  gap: 0.25rem;
  padding-right: var(--csd-editor-toolbar-group-padding);
  margin-right: var(--csd-editor-toolbar-group-margin);
  border-right: var(--csd-editor-toolbar-group-border);
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-group:last-child {
  border-right: none;
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown {
  position: relative;
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown .csd-editor-tool {
  padding: var(--csd-editor-toolbar-dropdown-padding);
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown .csd-editor-tool:hover {
  background-color: var(--csd-editor-toolbar-dropdown-item-hover-bg);
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--csd-editor-toolbar-dropdown-bg);
  border: var(--csd-editor-toolbar-dropdown-border);
  border-radius: var(--csd-editor-toolbar-dropdown-radius);
  box-shadow: var(--csd-editor-toolbar-dropdown-shadow);
  padding: var(--csd-editor-toolbar-dropdown-padding);
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: var(--csd-editor-toolbar-dropdown-item-gap);
  padding: var(--csd-editor-toolbar-dropdown-item-padding);
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button:hover {
  background-color: var(--csd-editor-toolbar-dropdown-item-hover-bg);
}
.csd-editor-container .csd-editor-toolbar .csd-editor-toolbar-dropdown.active .csd-editor-toolbar-dropdown-menu {
  display: block;
}
.csd-editor-container .csd-editor-content {
  min-height: 300px;
  padding: 1.5rem;
  outline: none;
  overflow-y: auto;
}
.csd-editor-container .csd-editor-content[placeholder]:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
  pointer-events: none;
}
.csd-editor-container .csd-editor-content h1, .csd-editor-container .csd-editor-content h2, .csd-editor-container .csd-editor-content h3 {
  margin: 1rem 0;
  font-weight: 600;
  line-height: 1.2;
}
.csd-editor-container .csd-editor-content h1 {
  font-size: 2rem;
}
.csd-editor-container .csd-editor-content h2 {
  font-size: 1.5rem;
}
.csd-editor-container .csd-editor-content h3 {
  font-size: 1.25rem;
}
.csd-editor-container .csd-editor-content p {
  margin: 0.5rem 0;
  line-height: 1.5;
}
.csd-editor-container .csd-editor-content ul, .csd-editor-container .csd-editor-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  line-height: 1.5;
}
.csd-editor-container .csd-editor-content blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--csd-color-primary);
  background-color: var(--bg-light);
  font-style: italic;
}
.csd-editor-container .csd-editor-content code {
  padding: 0.2em 0.4em;
  background-color: var(--bg-light);
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}
.csd-editor-container .csd-editor-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.csd-editor-container .csd-editor-content table td, .csd-editor-container .csd-editor-content table th {
  padding: 0.5rem;
  border: 1px solid var(--bc-input);
}
.csd-editor-container .csd-editor-content table th {
  background-color: var(--bg-light);
  font-weight: 600;
}
.csd-editor-container .csd-editor-content table tr:nth-child(even) {
  background-color: var(--bg-light);
}
.csd-editor-container .csd-editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--br-input);
}
.csd-editor-container .csd-editor-content a {
  color: var(--csd-color-primary);
  text-decoration: none;
}
.csd-editor-container .csd-editor-content a:hover {
  text-decoration: underline;
}
.csd-editor-container .csd-editor-content ::selection {
  background: #ACCEF7;
  color: inherit !important;
  text-shadow: none !important;
}
.csd-editor-container .csd-editor-content ::-moz-selection {
  background: #ACCEF7;
  color: inherit !important;
  text-shadow: none !important;
}
.csd-editor-container .csd-editor-statusbar {
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  background-color: var(--bg-light);
  border-top: 1px solid var(--bc-input);
  font-size: 0.875rem;
  color: var(--text-muted);
  border-radius: 0 0 var(--br-input) var(--br-input);
}

@media (max-width: 768px) {
  .csd-editor-container .csd-editor-toolbar {
    display: none;
  }
  .csd-editor-container .csd-editor-content {
    padding: 1rem;
  }
}
.csd-editor-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--csd-editor-tooltip-padding);
  background-color: var(--csd-editor-tooltip-bg);
  color: var(--csd-editor-tooltip-color);
  font-size: var(--csd-editor-tooltip-font-size);
  border-radius: var(--csd-editor-tooltip-radius);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--csd-editor-tooltip-transition);
  z-index: 1000;
  margin-bottom: var(--csd-editor-tooltip-margin);
  user-select: none;
  pointer-events: none;
}
.csd-editor-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: var(--csd-editor-tooltip-arrow-size);
  border-style: solid;
  border-color: var(--csd-editor-tooltip-bg) transparent transparent transparent;
}

.csd-editor-tool {
  position: relative;
}
.csd-editor-tool:hover .csd-editor-tooltip {
  opacity: 1;
  visibility: visible;
}

.csd-editor-dropdown {
  position: absolute;
  background: var(--csd-editor-dropdown-bg);
  border: var(--csd-editor-dropdown-border);
  border-radius: var(--csd-editor-dropdown-radius);
  box-shadow: var(--csd-editor-dropdown-shadow);
  z-index: 1000;
  min-width: var(--csd-editor-dropdown-min-width);
  padding: var(--csd-editor-dropdown-padding-y) 0;
  margin-top: var(--csd-editor-dropdown-margin-top);
}
.csd-editor-dropdown .csd-editor-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--csd-editor-dropdown-item-gap);
  width: 100%;
  padding: var(--csd-editor-dropdown-item-padding);
  border: none;
  background: none;
  color: var(--text-color);
  font-size: var(--csd-editor-dropdown-item-font-size);
  text-align: left;
  cursor: pointer;
  transition: var(--csd-editor-dropdown-item-transition);
}
.csd-editor-dropdown .csd-editor-dropdown-item:hover {
  background-color: var(--csd-editor-dropdown-item-hover-bg);
}
.csd-editor-dropdown .csd-editor-dropdown-item i {
  width: var(--csd-editor-dropdown-item-icon-width);
  text-align: center;
}

.csd-editor-color-picker {
  position: absolute;
  background: var(--csd-editor-color-picker-component-bg);
  border: var(--csd-editor-color-picker-component-border);
  border-radius: var(--csd-editor-color-picker-component-radius);
  box-shadow: var(--csd-editor-color-picker-component-shadow);
  z-index: 1000;
  padding: var(--csd-editor-color-picker-component-padding);
  margin-top: var(--csd-editor-color-picker-component-margin);
}
.csd-editor-color-picker .color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--csd-editor-color-grid-gap);
}
.csd-editor-color-picker .color-item {
  width: var(--csd-editor-color-item-size);
  height: var(--csd-editor-color-item-size);
  border: var(--csd-editor-color-item-border);
  border-radius: var(--csd-editor-color-item-radius);
  cursor: pointer;
  transition: var(--csd-editor-color-item-transition);
}
.csd-editor-color-picker .color-item:hover {
  transform: scale(var(--csd-editor-color-item-hover-scale));
}

.csd-editor-special-chars {
  position: absolute;
  background: var(--csd-editor-special-chars-bg);
  border: var(--csd-editor-special-chars-border);
  border-radius: var(--csd-editor-special-chars-radius);
  box-shadow: var(--csd-editor-special-chars-shadow);
  z-index: 1000;
  padding: var(--csd-editor-special-chars-padding);
  margin-top: var(--csd-editor-special-chars-margin);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--csd-editor-special-chars-gap);
}
.csd-editor-special-chars .special-char-item {
  width: var(--csd-editor-special-char-item-size);
  height: var(--csd-editor-special-char-item-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--csd-editor-special-char-item-border);
  border-radius: var(--csd-editor-special-char-item-radius);
  background: none;
  color: var(--csd-editor-special-char-item-color);
  font-size: var(--csd-editor-special-char-item-font-size);
  cursor: pointer;
  transition: var(--csd-editor-special-char-item-transition);
}
.csd-editor-special-chars .special-char-item:hover {
  background-color: var(--csd-editor-special-char-item-hover-bg);
  transform: scale(var(--csd-editor-special-char-item-hover-scale));
}

.csd-editor-container.source-mode .csd-editor {
  font-family: var(--csd-editor-source-mode-font-family);
  white-space: pre-wrap;
}

.csd-editor-toolbar-mobile {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1100;
  background-color: var(--bg-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid var(--bc-input);
  background-color: var(--bg-light);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-top: 1px solid var(--bc-input);
  background-color: var(--bg-light);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-group {
  display: flex;
  gap: 0.5rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown {
  position: relative;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown .csd-editor-tool {
  padding: 0.5rem;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown .csd-editor-tool:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: var(--br-btn);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--bg-light);
  border: 1px solid var(--bc-input);
  border-radius: var(--br-input);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: var(--br-btn);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-dropdown.active .csd-editor-toolbar-dropdown-menu {
  display: block;
}

@media (max-width: 768px) {
  .csd-editor-container:focus-within .csd-editor-toolbar-mobile {
    display: block;
  }
}
hr.page-break {
  border: none;
  border-top: 1px dashed var(--border-color);
  margin: 1rem 0;
  page-break-after: always;
}

.csd-editor-link-popover {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 12px;
  z-index: 1000;
  border-radius: var(--br-input);
}

.csd-editor-link-popover .form-buttons {
  margin-top: 12px;
  text-align: right;
}

.csd-editor-link-popover .btn-insert {
  background: #007bff;
  color: white;
}

.csd-editor-link-popover .btn-cancel {
  background: #6c757d;
  color: white;
}

.csd-editor-table-picker {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 8px;
  z-index: 1000;
}

.csd-editor-table-picker .table-grid {
  display: inline-block;
}

.csd-editor-table-picker .table-row {
  display: flex;
}

.csd-editor-table-picker .table-cell {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  margin: 1px;
  cursor: pointer;
}

.csd-editor-table-picker .table-cell.selected {
  background: #007bff;
}

.csd-editor-table-picker .table-size {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.csd-editor a {
  cursor: pointer;
  text-decoration: underline;
}

.csd-editor a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

.csd-table-context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 160px;
}
.csd-table-context-menu .menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}
.csd-table-context-menu .menu-item:hover {
  background-color: #f5f5f5;
}
.csd-table-context-menu .menu-item:active {
  background-color: #e8e8e8;
}

.csd-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
}
.csd-editor table td, .csd-editor table th {
  border: 1px solid #ddd;
  padding: 8px;
  position: relative;
  min-width: 30px;
}
.csd-editor table td:focus, .csd-editor table th:focus {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}
.csd-editor table th {
  background-color: #f5f5f5;
  font-weight: bold;
}
.csd-editor table [colspan], .csd-editor table [rowspan] {
  background-color: #fafafa;
}

.csd-editor-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  border-radius: var(--br-btn);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
}
.csd-editor-tool i {
  font-size: 0.875rem;
}
.csd-editor-tool:hover {
  background-color: #f8f8f8;
  border-color: #d0d0d0;
}
.csd-editor-tool:active {
  background-color: #f0f0f0;
  border-color: #ccc;
}
.csd-editor-tool.active {
  color: var(--csd-color-primary);
  background-color: rgba(var(--csd-color-primary-rgb), 0.08);
  border-color: var(--csd-color-primary);
}

.csd-editor-toolbar-mobile {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top {
  top: 0;
  border-bottom: 1px solid var(--bc-input);
  position: fixed;
  width: 100%;
  background: #fff;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom {
  bottom: 0;
  border-top: 1px solid var(--bc-input);
  position: fixed;
  width: 100%;
  background: #fff;
  transition: bottom 0.3s ease;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom.keyboard-open {
  bottom: var(--keyboard-height, 0px);
}

.csd-editor-toolbar-mobile {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1050;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top {
  top: 0;
  border-bottom: 1px solid var(--bc-input);
  position: fixed;
  width: 100%;
  background: #fff;
  padding: 0.25rem;
  height: 3.5rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom {
  bottom: 0;
  border-top: 1px solid var(--bc-input);
  position: fixed;
  width: 100%;
  background: #fff;
  padding: 0.25rem;
  height: 3.5rem;
  transform: translateY(0);
  transition: transform 0.2s ease;
  will-change: transform;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom.keyboard-open {
  transform: translateY(calc(-1 * var(--keyboard-height, 0px)));
}

@media (max-width: 768px) {
  .csd-editor-toolbar {
    display: none;
  }
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-tool,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3rem;
  width: 100%;
  height: 100%;
  padding: 0rem;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  border-radius: 0.25rem;
  font-size: 1rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-tool i,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-tool i {
  font-size: 1.35rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-tool:hover,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-tool:hover {
  background-color: var(--bg-highlight);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-tool.active,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-tool.active {
  color: var(--csd-color-primary);
  background-color: rgba(var(--csd-color-primary-rgb), 0.1);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown {
  position: relative;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown > button.csd-editor-tool,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown > button.csd-editor-tool {
  padding: 0 0.5rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: 160px;
  background: var(--bg-light);
  border: 1px solid var(--bc-input);
  border-radius: var(--br-input);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
  padding: 0.25rem;
  display: none;
  height: fit-content;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  border: none;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  text-align: left;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button i,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button i {
  width: 1.5rem;
  font-size: 1rem;
  margin-right: 0.5rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button:hover,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown .csd-editor-toolbar-dropdown-menu button:hover {
  background-color: var(--bg-highlight);
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown.active .csd-editor-toolbar-dropdown-menu,
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-dropdown.active .csd-editor-toolbar-dropdown-menu {
  display: block;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top {
  padding: 0.5rem;
  gap: 0.25rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-top .csd-editor-toolbar-dropdown-menu {
  top: 0 !important;
  bottom: auto !important;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom {
  padding: 0.5rem;
  gap: 0.25rem;
}
.csd-editor-toolbar-mobile .csd-editor-toolbar-mobile-bottom .csd-editor-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Floating Action Button Component */
:root {
  --csd-fab-position: relative;
  --csd-fab-display: inline-block;
  --csd-fab-z-index: 1000;
  --csd-fab-button-width: 56px;
  --csd-fab-button-height: 56px;
  --csd-fab-button-border-radius: 50%;
  --csd-fab-button-bg: var(--accent-color);
  --csd-fab-button-color: white;
  --csd-fab-button-border: none;
  --csd-fab-button-cursor: pointer;
  --csd-fab-button-display: flex;
  --csd-fab-button-align: center;
  --csd-fab-button-justify: center;
  --csd-fab-button-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  --csd-fab-button-transition: var(--transition, all 0.3s);
  --csd-fab-button-user-select: none;
  --csd-fab-button-tap-highlight: transparent;
  --csd-fab-button-hover-bg: var(--accent-color-hover);
  --csd-fab-button-hover-transform: translateY(-2px);
  --csd-fab-button-hover-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  --csd-fab-icon-size: 24px;
  --csd-fab-icon-transition: transform 0.3s ease;
  --csd-fab-icon-active-transform: rotate(45deg);
  --csd-fab-icon-color: inherit;
  --csd-fab-icon-pointer-events: none;
  --csd-fab-icon-stroke-width: 36px;
  --csd-fab-menu-position: absolute;
  --csd-fab-menu-display: flex;
  --csd-fab-menu-direction: column;
  --csd-fab-menu-gap: 16px;
  --csd-fab-menu-bottom: 100%;
  --csd-fab-menu-right: 0;
  --csd-fab-menu-margin-bottom: 16px;
  --csd-fab-menu-visibility: hidden;
  --csd-fab-menu-opacity: 0;
  --csd-fab-menu-transform: translateY(10px);
  --csd-fab-menu-transition: all 0.3s ease;
  --csd-fab-menu-visible-visibility: visible;
  --csd-fab-menu-visible-opacity: 1;
  --csd-fab-menu-visible-transform: translateY(0);
  --csd-fab-item-display: flex;
  --csd-fab-item-align: center;
  --csd-fab-item-gap: 12px;
  --csd-fab-item-padding: 8px 16px;
  --csd-fab-item-bg: var(--bg-light);
  --csd-fab-item-border: 1px solid var(--bc-card);
  --csd-fab-item-border-radius: var(--br-card);
  --csd-fab-item-color: var(--text-color);
  --csd-fab-item-text-decoration: none;
  --csd-fab-item-font-size: 0.9375rem;
  --csd-fab-item-white-space: nowrap;
  --csd-fab-item-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --csd-fab-item-transition: var(--transition);
  --csd-fab-item-hover-bg: var(--secondary-color);
  --csd-fab-item-hover-transform-right: translateX(-4px);
  --csd-fab-item-hover-transform-left: translateX(4px);
  --csd-fab-item-icon-width: 20px;
  --csd-fab-item-icon-height: 20px;
  --csd-fab-item-icon-flex-shrink: 0;
  --csd-fab-sm-button-width: 40px;
  --csd-fab-sm-button-height: 40px;
  --csd-fab-sm-icon-size: 20px;
  --csd-fab-sm-menu-margin-bottom: 12px;
  --csd-fab-sm-menu-gap: 12px;
  --csd-fab-sm-item-padding: 6px 12px;
  --csd-fab-sm-item-font-size: 0.875rem;
  --csd-fab-sm-item-icon-width: 16px;
  --csd-fab-sm-item-icon-height: 16px;
  --csd-fab-lg-button-width: 64px;
  --csd-fab-lg-button-height: 64px;
  --csd-fab-lg-icon-size: 28px;
  --csd-fab-fixed-position: fixed;
  --csd-fab-position-edge: 24px;
  --csd-fab-alt-button-width: 2.5rem;
  --csd-fab-alt-button-height: 2.5rem;
  --csd-fab-alt-button-bg: var(--text-color);
  --csd-fab-alt-icon-size: 1.5rem;
  --csd-fab-list-position: absolute;
  --csd-fab-list-left: -1.25rem;
  --csd-fab-list-top: -1.25rem;
  --csd-fab-list-width: 100%;
  --csd-fab-list-height: 100%;
  --csd-fab-list-pointer-events: none;
  --csd-fab-list-color: #475569;
  --csd-fab-alt-item-width: 2.5rem;
  --csd-fab-alt-item-height: 2.5rem;
  --csd-fab-alt-item-left: 50%;
  --csd-fab-alt-item-top: 50%;
  --csd-fab-alt-item-transform: translate(-50%, -50%);
  --csd-fab-alt-item-opacity: 0;
  --csd-fab-alt-item-visibility: hidden;
  --csd-fab-alt-item-transition: all 0.3s;
  --csd-fab-alt-item-pointer-events: auto;
  --csd-fab-alt-item-bg: #edf1f9;
  --csd-fab-alt-item-hover-bg: #e2e8f0;
  --csd-fab-alt-item-icon-size: 1rem;
}

.csd-fab {
  position: var(--csd-fab-position);
  display: var(--csd-fab-display);
  z-index: var(--csd-fab-z-index);
  /* Original Implementation */
  /* Size Variants */
  /* Position Variants */
  /* Second Implementation */
}
.csd-fab .fab-button {
  width: var(--csd-fab-button-width);
  height: var(--csd-fab-button-height);
  border-radius: var(--csd-fab-button-border-radius);
  background-color: var(--csd-fab-button-bg);
  color: var(--csd-fab-button-color);
  border: var(--csd-fab-button-border);
  cursor: var(--csd-fab-button-cursor);
  display: var(--csd-fab-button-display);
  align-items: var(--csd-fab-button-align);
  justify-content: var(--csd-fab-button-justify);
  box-shadow: var(--csd-fab-button-box-shadow);
  transition: var(--csd-fab-button-transition);
}
.csd-fab .fab-button:hover {
  background-color: var(--csd-fab-button-hover-bg);
  transform: var(--csd-fab-button-hover-transform);
  box-shadow: var(--csd-fab-button-hover-box-shadow);
}
.csd-fab .fab-button .fab-icon {
  font-size: var(--csd-fab-icon-size);
  transition: var(--csd-fab-icon-transition);
}
.csd-fab .fab-button.active .fab-icon {
  transform: var(--csd-fab-icon-active-transform);
}
.csd-fab .fab-menu {
  position: var(--csd-fab-menu-position);
  display: var(--csd-fab-menu-display);
  flex-direction: var(--csd-fab-menu-direction);
  gap: var(--csd-fab-menu-gap);
  bottom: var(--csd-fab-menu-bottom);
  right: var(--csd-fab-menu-right);
  margin-bottom: var(--csd-fab-menu-margin-bottom);
  visibility: var(--csd-fab-menu-visibility);
  opacity: var(--csd-fab-menu-opacity);
  transform: var(--csd-fab-menu-transform);
  transition: var(--csd-fab-menu-transition);
}
.csd-fab .fab-menu.show {
  visibility: var(--csd-fab-menu-visible-visibility);
  opacity: var(--csd-fab-menu-visible-opacity);
  transform: var(--csd-fab-menu-visible-transform);
}
.csd-fab .fab-menu .fab-item {
  display: var(--csd-fab-item-display);
  align-items: var(--csd-fab-item-align);
  gap: var(--csd-fab-item-gap);
  padding: var(--csd-fab-item-padding);
  background-color: var(--csd-fab-item-bg);
  border: var(--csd-fab-item-border);
  border-radius: var(--csd-fab-item-border-radius);
  color: var(--csd-fab-item-color);
  text-decoration: var(--csd-fab-item-text-decoration);
  font-size: var(--csd-fab-item-font-size);
  white-space: var(--csd-fab-item-white-space);
  box-shadow: var(--csd-fab-item-box-shadow);
  transition: var(--csd-fab-item-transition);
}
.csd-fab .fab-menu .fab-item:hover {
  background-color: var(--csd-fab-item-hover-bg);
  transform: var(--csd-fab-item-hover-transform-right);
}
.csd-fab .fab-menu .fab-item .item-icon {
  width: var(--csd-fab-item-icon-width);
  height: var(--csd-fab-item-icon-height);
  flex-shrink: var(--csd-fab-item-icon-flex-shrink);
}
.csd-fab.fab-sm .fab-button {
  width: var(--csd-fab-sm-button-width);
  height: var(--csd-fab-sm-button-height);
}
.csd-fab.fab-sm .fab-button .fab-icon {
  font-size: var(--csd-fab-sm-icon-size);
}
.csd-fab.fab-sm .fab-menu {
  margin-bottom: var(--csd-fab-sm-menu-margin-bottom);
  gap: var(--csd-fab-sm-menu-gap);
}
.csd-fab.fab-sm .fab-menu .fab-item {
  padding: var(--csd-fab-sm-item-padding);
  font-size: var(--csd-fab-sm-item-font-size);
}
.csd-fab.fab-sm .fab-menu .fab-item .item-icon {
  width: var(--csd-fab-sm-item-icon-width);
  height: var(--csd-fab-sm-item-icon-height);
}
.csd-fab.fab-lg .fab-button {
  width: var(--csd-fab-lg-button-width);
  height: var(--csd-fab-lg-button-height);
}
.csd-fab.fab-lg .fab-button .fab-icon {
  font-size: var(--csd-fab-lg-icon-size);
}
.csd-fab.fab-top-right {
  position: var(--csd-fab-fixed-position);
  top: var(--csd-fab-position-edge);
  right: var(--csd-fab-position-edge);
}
.csd-fab.fab-top-right .fab-menu {
  bottom: auto;
  top: 100%;
  margin-top: var(--csd-fab-menu-margin-bottom);
  margin-bottom: 0;
}
.csd-fab.fab-bottom-right {
  position: var(--csd-fab-fixed-position);
  bottom: var(--csd-fab-position-edge);
  right: var(--csd-fab-position-edge);
}
.csd-fab.fab-bottom-left {
  position: var(--csd-fab-fixed-position);
  bottom: var(--csd-fab-position-edge);
  left: var(--csd-fab-position-edge);
}
.csd-fab.fab-bottom-left .fab-menu {
  right: auto;
  left: 0;
}
.csd-fab.fab-bottom-left .fab-menu .fab-item:hover {
  transform: var(--csd-fab-item-hover-transform-left);
}
.csd-fab.fab-top-left {
  position: var(--csd-fab-fixed-position);
  top: var(--csd-fab-position-edge);
  left: var(--csd-fab-position-edge);
}
.csd-fab.fab-top-left .fab-menu {
  bottom: auto;
  top: 100%;
  right: auto;
  left: 0;
  margin-top: var(--csd-fab-menu-margin-bottom);
  margin-bottom: 0;
}
.csd-fab.fab-top-left .fab-menu .fab-item:hover {
  transform: var(--csd-fab-item-hover-transform-left);
}
.csd-fab .csd-fab-button {
  position: relative;
  width: var(--csd-fab-alt-button-width);
  height: var(--csd-fab-alt-button-height);
  border-radius: var(--csd-fab-button-border-radius);
  background-color: var(--csd-fab-alt-button-bg);
  color: var(--csd-fab-button-color);
  border: var(--csd-fab-button-border);
  cursor: var(--csd-fab-button-cursor);
  transition: var(--csd-fab-button-transition);
  user-select: var(--csd-fab-button-user-select);
  -webkit-tap-highlight-color: var(--csd-fab-button-tap-highlight);
  display: var(--csd-fab-button-display);
  align-items: var(--csd-fab-button-align);
  justify-content: var(--csd-fab-button-justify);
}
.csd-fab .csd-fab-button ion-icon {
  font-size: var(--csd-fab-alt-icon-size);
  color: var(--csd-fab-icon-color);
  pointer-events: var(--csd-fab-icon-pointer-events);
  transition: var(--csd-fab-button-transition);
  --ionicon-stroke-width: var(--csd-fab-icon-stroke-width);
}
.csd-fab .csd-fab-list {
  position: var(--csd-fab-list-position);
  left: var(--csd-fab-list-left);
  top: var(--csd-fab-list-top);
  width: var(--csd-fab-list-width);
  height: var(--csd-fab-list-height);
  pointer-events: var(--csd-fab-list-pointer-events);
  color: var(--csd-fab-list-color);
}
.csd-fab .csd-fab-list .csd-fab-button {
  position: absolute;
  width: var(--csd-fab-alt-item-width);
  height: var(--csd-fab-alt-item-height);
  left: var(--csd-fab-alt-item-left);
  top: var(--csd-fab-alt-item-top);
  transform: var(--csd-fab-alt-item-transform);
  opacity: var(--csd-fab-alt-item-opacity);
  visibility: var(--csd-fab-alt-item-visibility);
  transition: var(--csd-fab-alt-item-transition);
  pointer-events: var(--csd-fab-alt-item-pointer-events);
  background-color: var(--csd-fab-alt-item-bg);
  color: inherit;
  display: var(--csd-fab-button-display);
  align-items: var(--csd-fab-button-align);
  justify-content: var(--csd-fab-button-justify);
}
.csd-fab .csd-fab-list .csd-fab-button ion-icon {
  color: inherit;
  font-size: var(--csd-fab-alt-item-icon-size);
  --ionicon-stroke-width: var(--csd-fab-icon-stroke-width);
}
.csd-fab .csd-fab-list .csd-fab-button:hover {
  background-color: var(--csd-fab-alt-item-hover-bg);
}
.csd-fab.open > .csd-fab-button ion-icon {
  transform: var(--csd-fab-icon-active-transform);
}
.csd-fab.open .csd-fab-list {
  pointer-events: auto;
}
.csd-fab.open .csd-fab-list .csd-fab-button {
  opacity: 1;
  visibility: visible;
}
.csd-fab.open .csd-fab-list .csd-fab-button:hover {
  transform: translate(var(--x, -50%), var(--y, -50%)) scale(1);
}

:root {
  --csd-input-group-position: relative;
  --csd-input-group-display: flex;
  --csd-input-group-align: stretch;
  --csd-input-group-width: 100%;
  --csd-input-group-input-flex: 1 1 auto;
  --csd-input-group-input-width: 1%;
  --csd-input-group-input-min-width: 0;
  --csd-input-group-input-number-padding-right: 2rem;
  --csd-input-group-text-padding: 0.375rem 0.75rem;
  --csd-input-group-text-font-size: 1rem;
  --csd-input-group-text-font-weight: 400;
  --csd-input-group-text-line-height: 1.5;
  --csd-input-group-text-color: var(--text-color);
  --csd-input-group-text-bg: var(--bg-input-disabled);
  --csd-input-group-text-border: 1px solid var(--bc-input);
  --csd-input-group-icon-min-width: 40px;
  --csd-input-group-icon-padding: 0 0.5rem;
  --csd-input-group-icon-bg: var(--bg-input);
  --csd-input-group-icon-border: 1px solid var(--bc-input);
  --csd-input-group-icon-color: var(--text-color);
  --csd-input-group-icon-transition: var(--transition);
  --csd-input-group-icon-font-size: 18px;
  --csd-input-group-icon-focus-border: var(--text-color);
  --csd-input-group-icon-disabled-bg: var(--bg-input-disabled);
  --csd-input-group-icon-disabled-border: var(--bc-input);
  --csd-input-group-icon-disabled-color: var(--text-color-disabled);
  --csd-input-group-feedback-position: absolute;
  --csd-input-group-feedback-bottom: -20px;
  --csd-input-group-feedback-left: 0;
  --csd-input-group-feedback-font-size: 0.875em;
  --csd-input-group-invalid-color: var(--csd-color-danger);
  --csd-input-group-valid-color: var(--csd-color-success);
  --csd-input-arrows-width: 2.5rem;
  --csd-input-arrows-border-left: 1px solid var(--bc-card);
  --csd-input-arrows-margin-block: 1px;
  --csd-arrow-btn-color: var(--csd-text-color);
  --csd-arrow-btn-hover-color: var(--dark);
  --csd-arrow-btn-active-color: var(--dark);
  --csd-arrow-btn-transition: all 0.2s ease;
  --csd-arrow-btn-font-size: 1rem;
  --csd-arrow-btn-stroke-width: 48px;
  --csd-arrow-btn-border-color: var(--bc-card);
  --csd-arrow-btn-up-radius: 0 1rem 0 0;
  --csd-arrow-btn-down-radius: 0 0 1rem 0;
}

.csd-input-group {
  position: var(--csd-input-group-position);
  display: var(--csd-input-group-display);
  align-items: var(--csd-input-group-align);
  width: var(--csd-input-group-width);
}
.csd-input-group .csd-input {
  flex: 1;
}
.csd-input-group .csd-input:not(.csd-number) {
  position: relative;
  flex: var(--csd-input-group-input-flex);
  width: var(--csd-input-group-input-width);
  min-width: var(--csd-input-group-input-min-width);
}
.csd-input-group .csd-input:not(.csd-number):not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-shadow: none;
}
.csd-input-group .csd-input:not(.csd-number):not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none;
  box-shadow: none;
}
.csd-input-group .csd-input.csd-number {
  padding-right: var(--csd-input-group-input-number-padding-right) !important;
}
.csd-input-group .csd-input-group-text {
  display: flex;
  align-items: center;
  padding: var(--csd-input-group-text-padding);
  font-size: var(--csd-input-group-text-font-size);
  font-weight: var(--csd-input-group-text-font-weight);
  line-height: var(--csd-input-group-text-line-height);
  color: var(--csd-input-group-text-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--csd-input-group-text-bg);
  border: var(--csd-input-group-text-border);
}
.csd-input-group .csd-input-group-text:first-child {
  border-top-left-radius: var(--br-field);
  border-bottom-left-radius: var(--br-field);
}
.csd-input-group .csd-input-group-text:last-child {
  border-top-right-radius: var(--br-field);
  border-bottom-right-radius: var(--br-field);
}
.csd-input-group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--csd-input-group-icon-min-width);
  height: 100%;
  padding: var(--csd-input-group-icon-padding);
  background: var(--csd-input-group-icon-bg);
  border: var(--csd-input-group-icon-border);
  color: var(--csd-input-group-icon-color);
  transition: var(--csd-input-group-icon-transition);
}
.csd-input-group-icon:first-child {
  border-right: 0;
  border-top-left-radius: var(--br-input);
  border-bottom-left-radius: var(--br-input);
}
.csd-input-group-icon:last-child {
  border-left: 0;
  border-top-right-radius: var(--br-input);
  border-bottom-right-radius: var(--br-input);
}
.csd-input-group-icon ion-icon {
  font-size: var(--csd-input-group-icon-font-size);
}
.csd-input-group .csd-btn {
  position: relative;
  z-index: 2;
}
.csd-input-group .csd-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.csd-input-group .csd-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.csd-input-group .csd-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.csd-input-group:focus-within .csd-input-group-icon {
  border-color: var(--csd-input-group-icon-focus-border);
}
.csd-input-group.disabled .csd-input-group-icon {
  background-color: var(--csd-input-group-icon-disabled-bg);
  border-color: var(--csd-input-group-icon-disabled-border);
  color: var(--csd-input-group-icon-disabled-color);
  cursor: default;
}
.csd-input-group.has-validation > :nth-last-child(n+3):not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.csd-input-group .invalid-feedback,
.csd-input-group .valid-feedback {
  position: var(--csd-input-group-feedback-position);
  bottom: var(--csd-input-group-feedback-bottom);
  left: var(--csd-input-group-feedback-left);
  font-size: var(--csd-input-group-feedback-font-size);
}
.csd-input-group .invalid-feedback {
  color: var(--csd-input-group-invalid-color);
}
.csd-input-group .valid-feedback {
  color: var(--csd-input-group-valid-color);
}
.csd-input-group .csd-input-arrows {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  width: var(--csd-input-arrows-width);
  border-left: var(--csd-input-arrows-border-left);
  margin-block: var(--csd-input-arrows-margin-block);
}
.csd-input-group .csd-input-arrows .csd-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--csd-arrow-btn-color);
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: var(--csd-arrow-btn-transition);
}
.csd-input-group .csd-input-arrows .csd-arrow-btn:hover {
  color: var(--csd-arrow-btn-hover-color);
}
.csd-input-group .csd-input-arrows .csd-arrow-btn:active {
  color: var(--csd-arrow-btn-active-color);
}
.csd-input-group .csd-input-arrows .csd-arrow-btn ion-icon {
  font-size: var(--csd-arrow-btn-font-size);
  --ionicon-stroke-width: var(--csd-arrow-btn-stroke-width);
}
.csd-input-group .csd-input-arrows .csd-arrow-btn.up {
  border-bottom: 1px solid var(--csd-arrow-btn-border-color);
  border-radius: var(--csd-arrow-btn-up-radius);
}
.csd-input-group .csd-input-arrows .csd-arrow-btn.down {
  border-top: 1px solid var(--csd-arrow-btn-border-color);
  border-radius: var(--csd-arrow-btn-down-radius);
}
.csd-input-group .csd-input-arrows:hover, .csd-input-group .csd-number:focus + .csd-input-arrows {
  display: flex;
}

:root {
  --csd-input-bg: var(--bg-input);
  --csd-input-border: 1px solid var(--bc-input);
  --csd-input-padding: var(--p-input);
  --csd-input-border-radius: var(--br-input);
  --csd-input-box-shadow: var(--shadow);
  --csd-input-color: var(--text-color-csd);
  --csd-input-disabled-bg: var(--bg-input-disabled);
  --csd-input-disabled-border: var(--bc-input);
  --csd-input-focus-border: var(--text-color);
  --csd-form-gap: var(--gap-form);
  --csd-form-padding: 16px;
  --csd-field-gap: var(--gap-field);
  --csd-field-margin-bottom: var(--mb-field);
  --csd-label-font-weight: bold;
  --csd-label-line-height: calc(var(--line-height) * 0.8);
  --csd-label-float-font-weight: 400;
  --csd-float-label-top: 50%;
  --csd-float-label-left: var(--px-input);
  --csd-float-label-transition: all 0.3s ease;
  --csd-float-label-active-top: -16px;
  --csd-float-label-active-left: 0px;
  --csd-float-label-active-font-weight: bold;
  --csd-field-inline-gap: var(--gap-field);
  --csd-field-inline-label-width: 30%;
  --csd-field-inline-input-width: 70%;
  --csd-field-inline-margin-top: 16px;
  --csd-field-inline-padding-left: 16px;
}

input,
textarea,
select {
  background-color: var(--csd-input-bg);
  border: var(--csd-input-border);
  padding: var(--csd-input-padding);
  border-radius: var(--csd-input-border-radius);
  width: 100%;
  box-sizing: border-box;
  color: var(--csd-input-color);
  box-shadow: var(--csd-input-box-shadow);
}

input[disabled],
textarea[disabled] {
  background-color: var(--csd-input-disabled-bg);
  border-radius: none !important;
  box-shadow: none;
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield; /* Standard */
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--csd-input-focus-border) !important;
}

.csd-form {
  display: flex;
  flex-direction: column;
  gap: var(--csd-form-gap);
  padding: var(--csd-form-padding);
}

.csd-field {
  display: flex;
  flex-direction: column;
  gap: var(--csd-field-gap);
  position: relative;
  margin-bottom: var(--csd-field-margin-bottom);
}

.csd-label {
  font-weight: var(--csd-label-font-weight);
  line-height: var(--csd-label-line-height);
}

/* Float Label */
.csd-float-label:not(.csd-field-inline) {
  margin-top: calc(var(--font-size) * var(--line-height) + var(--csd-field-gap));
}

.csd-float-label:not(.csd-field-inline) .csd-label {
  position: absolute;
  top: var(--csd-float-label-top);
  left: var(--csd-float-label-left);
  transform: translateY(-50%);
  transition: var(--csd-float-label-transition);
  font-weight: var(--csd-label-float-font-weight);
}

.csd-float-label:not(.csd-field-inline) .csd-input:focus + .csd-label,
.csd-float-label:not(.csd-field-inline) .csd-input:not(:placeholder-shown) + .csd-label,
.csd-float-label:not(.csd-field-inline) .csd-input:disabled + .csd-label {
  top: var(--csd-float-label-active-top);
  left: var(--csd-float-label-active-left);
  font-weight: var(--csd-float-label-active-font-weight);
}

.csd-float-label .csd-input:placeholder-shown::placeholder {
  color: transparent;
}

/* Inline Form Field - Fit Content Label */
.csd-field-inline {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--csd-field-inline-gap);
  align-items: center;
  margin-bottom: var(--csd-field-margin-bottom);
}
.csd-field-inline .csd-label {
  max-width: var(--csd-field-inline-label-width);
  width: 100%;
}
.csd-field-inline .csd-input {
  min-width: var(--csd-field-inline-input-width);
}

/* Float Label Inline */
.csd-field-inline.csd-float-label {
  margin-top: var(--csd-field-inline-margin-top);
}

.csd-field-inline.csd-float-label .csd-label {
  padding-left: var(--csd-field-inline-padding-left);
  position: relative;
  font-weight: var(--csd-label-float-font-weight);
  transition: var(--csd-float-label-transition);
}

.csd-field-inline.csd-float-label .csd-input:focus,
.csd-field-inline.csd-float-label .csd-input:not(:placeholder-shown) {
  width: var(--csd-field-inline-input-width);
}

.csd-field-inline.csd-float-label .csd-input:focus + .csd-label,
.csd-field-inline.csd-float-label .csd-input:not(:placeholder-shown) + .csd-label,
.csd-field-inline.csd-float-label .csd-input:disabled + .csd-label {
  padding-left: 0;
  transition: var(--csd-float-label-transition);
  font-weight: var(--csd-float-label-active-font-weight);
}

.csd-field-inline.csd-float-label .csd-input {
  position: absolute;
  right: 0;
  transition: var(--csd-float-label-transition);
  width: 100%;
}

.csd-input {
  padding: var(--csd-input-padding);
  border: var(--csd-input-border);
  border-radius: var(--csd-input-border-radius);
  transition: var(--transition);
}

.csd-input::placeholder {
  color: var(--csd-input-color);
  font-weight: normal;
}

/* List Component */
:root {
  /* Base List Variables */
  --csd-list-list-style: none;
  --csd-list-padding: 0;
  --csd-list-margin: 0;
  --csd-list-width: 100%;
  --csd-list-bg: var(--bg-light);
  --csd-list-border: 1px solid var(--bc-card);
  --csd-list-border-radius: var(--br-card);
  --csd-list-overflow: hidden;
  --csd-list-display: flex;
  --csd-list-flex-direction: column;
  --csd-list-gap: 0.5rem;
  /* List Item Variables */
  --csd-list-item-display: flex;
  --csd-list-item-align-items: center;
  --csd-list-item-padding: 1rem;
  --csd-list-item-bg: var(--bg-light);
  --csd-list-item-border: 1px solid var(--bc-card);
  --csd-list-item-transition: var(--transition);
  --csd-list-item-border-radius: var(--br-field);
  /* List Item States */
  --csd-list-item-hover-bg: var(--bg-highlight);
  --csd-list-item-selected-bg: var(--secondary-color);
  --csd-list-item-selected-border: var(--accent-color);
  --csd-list-item-disabled-opacity: 0.5;
  /* Item Content Variables */
  --csd-list-item-content-flex: 1;
  --csd-list-item-content-gap: 1rem;
  --csd-list-item-icon-color: var(--text-color-secondary);
  --csd-list-item-icon-size: 1.25rem;
  /* Item Text Variables */
  --csd-list-item-title-color: var(--text-color);
  --csd-list-item-title-font-weight: 500;
  --csd-list-item-title-margin: 0;
  --csd-list-item-description-color: var(--text-color-secondary);
  --csd-list-item-description-font-size: 0.875rem;
  --csd-list-item-description-margin: 0.25rem 0 0 0;
  /* Item Actions Variables */
  --csd-list-item-actions-gap: 0.5rem;
  /* Size Variants */
  --csd-list-item-sm-padding: 0.5rem;
  --csd-list-item-sm-gap: 0.5rem;
  --csd-list-item-sm-icon-size: 1rem;
  --csd-list-item-sm-description-font-size: 0.75rem;
  --csd-list-item-lg-padding: 1.5rem;
  --csd-list-item-lg-gap: 1.5rem;
  --csd-list-item-lg-icon-size: 1.5rem;
  --csd-list-item-lg-title-font-size: 1.125rem;
  --csd-list-item-lg-description-font-size: 1rem;
  /* Grid Layout Variables */
  --csd-list-grid-columns: repeat(auto-fill, minmax(250px, 1fr));
  --csd-list-grid-gap: 1rem;
  --csd-list-grid-item-padding-top: 1rem;
  --csd-list-grid-item-icon-size: 2rem;
  /* Group Variables */
  --csd-list-group-header-padding: 0.75rem 1rem;
  --csd-list-group-header-font-size: 0.875rem;
  --csd-list-group-header-font-weight: 600;
  --csd-list-group-header-color: var(--text-muted);
  --csd-list-group-header-bg: var(--bg-highlight);
  --csd-list-group-header-text-transform: uppercase;
  --csd-list-group-header-letter-spacing: 0.5px;
  --csd-list-group-header-border-radius: 1rem;
  --csd-list-group-item-padding-left: 2rem;
}

.csd-list {
  list-style: var(--csd-list-list-style);
  padding: var(--csd-list-padding);
  margin: var(--csd-list-margin);
  width: var(--csd-list-width);
}
.csd-list .list-item {
  display: var(--csd-list-item-display);
  align-items: var(--csd-list-item-align-items);
  padding: var(--csd-list-item-padding);
  background-color: var(--csd-list-item-bg);
  border: var(--csd-list-item-border);
  transition: var(--csd-list-item-transition);
}
.csd-list .list-item:not(:last-child) {
  border-bottom: none;
}
.csd-list .list-item:first-child {
  border-top-left-radius: var(--csd-list-item-border-radius);
  border-top-right-radius: var(--csd-list-item-border-radius);
}
.csd-list .list-item:last-child {
  border-bottom-left-radius: var(--csd-list-item-border-radius);
  border-bottom-right-radius: var(--csd-list-item-border-radius);
}
.csd-list .list-item .item-content {
  flex: var(--csd-list-item-content-flex);
  display: var(--csd-list-item-display);
  align-items: var(--csd-list-item-align-items);
  gap: var(--csd-list-item-content-gap);
}
.csd-list .list-item .item-content .item-icon {
  color: var(--csd-list-item-icon-color);
  font-size: var(--csd-list-item-icon-size);
}
.csd-list .list-item .item-content .item-text {
  flex: var(--csd-list-item-content-flex);
}
.csd-list .list-item .item-content .item-text .item-title {
  color: var(--csd-list-item-title-color);
  margin: var(--csd-list-item-title-margin);
  font-weight: var(--csd-list-item-title-font-weight);
}
.csd-list .list-item .item-content .item-text .item-description {
  color: var(--csd-list-item-description-color);
  font-size: var(--csd-list-item-description-font-size);
  margin: var(--csd-list-item-description-margin);
}
.csd-list .list-item .item-actions {
  display: var(--csd-list-item-display);
  align-items: var(--csd-list-item-align-items);
  gap: var(--csd-list-item-actions-gap);
}
.csd-list .list-item:hover {
  background-color: var(--csd-list-item-hover-bg);
}
.csd-list .list-item.selected {
  background-color: var(--csd-list-item-selected-bg);
  border-color: var(--csd-list-item-selected-border);
}
.csd-list .list-item.disabled {
  opacity: var(--csd-list-item-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
.csd-list.divided .list-item {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.csd-list.divided .list-item:first-child {
  border-top: none;
}
.csd-list.divided .list-item:last-child {
  border-bottom: none;
}
.csd-list.hoverable .list-item {
  cursor: pointer;
}
.csd-list.sm .list-item {
  padding: var(--csd-list-item-sm-padding);
}
.csd-list.sm .list-item .item-content {
  gap: var(--csd-list-item-sm-gap);
}
.csd-list.sm .list-item .item-content .item-icon {
  font-size: var(--csd-list-item-sm-icon-size);
}
.csd-list.sm .list-item .item-content .item-text .item-description {
  font-size: var(--csd-list-item-sm-description-font-size);
}
.csd-list.lg .list-item {
  padding: var(--csd-list-item-lg-padding);
}
.csd-list.lg .list-item .item-content {
  gap: var(--csd-list-item-lg-gap);
}
.csd-list.lg .list-item .item-content .item-icon {
  font-size: var(--csd-list-item-lg-icon-size);
}
.csd-list.lg .list-item .item-content .item-text .item-title {
  font-size: var(--csd-list-item-lg-title-font-size);
}
.csd-list.lg .list-item .item-content .item-text .item-description {
  font-size: var(--csd-list-item-lg-description-font-size);
}
.csd-list.grid {
  display: grid;
  grid-template-columns: var(--csd-list-grid-columns);
  gap: var(--csd-list-grid-gap);
}
.csd-list.grid .list-item {
  flex-direction: column;
  text-align: center;
  border-radius: var(--csd-list-item-border-radius);
}
.csd-list.grid .list-item:not(:last-child) {
  border-bottom: var(--csd-list-item-border);
}
.csd-list.grid .list-item .item-content {
  flex-direction: column;
  padding: var(--csd-list-grid-item-padding-top) 0;
}
.csd-list.grid .list-item .item-content .item-icon {
  font-size: var(--csd-list-grid-item-icon-size);
}
.csd-list.grid .list-item .item-actions {
  width: var(--csd-list-width);
  justify-content: center;
  padding-top: var(--csd-list-grid-item-padding-top);
  border-top: var(--csd-list-item-border);
}

/* Second List Implementation */
.csd-list {
  background-color: var(--csd-list-bg);
  border: var(--csd-list-border);
  border-radius: var(--csd-list-border-radius);
  overflow: var(--csd-list-overflow);
  padding: var(--csd-list-item-padding);
  display: var(--csd-list-display);
  flex-direction: var(--csd-list-flex-direction);
  gap: var(--csd-list-gap);
}
.csd-list .csd-item {
  display: var(--csd-list-item-display);
  align-items: var(--csd-list-item-align-items);
  padding: var(--csd-list-item-padding);
  gap: var(--csd-list-item-content-gap);
  color: var(--csd-list-item-title-color);
  transition: var(--csd-list-item-transition);
  border-bottom: var(--csd-list-item-border);
}
.csd-list .csd-item:last-child {
  border-bottom: none;
}
.csd-list .csd-item ion-icon {
  font-size: var(--csd-list-item-icon-size);
  color: var(--csd-list-item-icon-color);
  flex-shrink: 0;
}
.csd-list .csd-item span {
  flex: var(--csd-list-item-content-flex);
}
.csd-list .csd-group-item {
  display: var(--csd-list-display);
  flex-direction: var(--csd-list-flex-direction);
  gap: var(--csd-list-gap);
}
.csd-list .csd-group-item:last-child {
  border-bottom: none;
}
.csd-list .csd-group-item .csd-group-header {
  padding: var(--csd-list-group-header-padding);
  font-size: var(--csd-list-group-header-font-size);
  font-weight: var(--csd-list-group-header-font-weight);
  color: var(--csd-list-group-header-color);
  background-color: var(--csd-list-group-header-bg);
  text-transform: var(--csd-list-group-header-text-transform);
  letter-spacing: var(--csd-list-group-header-letter-spacing);
  border-radius: var(--csd-list-group-header-border-radius);
}
.csd-list .csd-group-item .csd-item {
  padding-left: var(--csd-list-group-item-padding-left);
  background-color: var(--csd-list-item-bg);
}

:root {
  --csd-loading-display: inline-flex;
  --csd-loading-align: center;
  --csd-loading-justify: center;
  --csd-spinner-size: 40px;
  --csd-spinner-border-width: 3px;
  --csd-spinner-border-color: rgba(0, 0, 0, 0.1);
  --csd-spinner-border-radius: 50%;
  --csd-spinner-active-color: var(--primary-color);
  --csd-spinner-animation-name: spin;
  --csd-spinner-animation-duration: 1s;
  --csd-spinner-animation-timing: ease-in-out;
  --csd-spinner-animation-iteration: infinite;
  --csd-spinner-primary-color: var(--csd-color-primary);
  --csd-spinner-secondary-color: var(--csd-color-secondary);
  --csd-spinner-warning-color: var(--csd-color-warning);
  --csd-spinner-danger-color: var(--csd-color-danger);
}

.csd-loading {
  display: var(--csd-loading-display);
  align-items: var(--csd-loading-align);
  justify-content: var(--csd-loading-justify);
}
.csd-loading .spinner {
  width: var(--csd-spinner-size);
  height: var(--csd-spinner-size);
  border: var(--csd-spinner-border-width) solid var(--csd-spinner-border-color);
  border-radius: var(--csd-spinner-border-radius);
  border-top-color: var(--csd-spinner-active-color);
  animation: var(--csd-spinner-animation-name) var(--csd-spinner-animation-duration) var(--csd-spinner-animation-timing) var(--csd-spinner-animation-iteration);
}
@media (max-width: 768px) {
  .csd-loading .spinner {
    width: calc(var(--csd-spinner-size) / 1.5);
    height: calc(var(--csd-spinner-size) / 1.5);
  }
}
.csd-loading.primary .spinner {
  border-top-color: var(--csd-spinner-primary-color);
}
.csd-loading.secondary .spinner {
  border-top-color: var(--csd-spinner-secondary-color);
}
.csd-loading.warning .spinner {
  border-top-color: var(--csd-spinner-warning-color);
}
.csd-loading.danger .spinner {
  border-top-color: var(--csd-spinner-danger-color);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
:root {
  --csd-mask-width: 100%;
  --csd-mask-position: relative;
  --csd-mask-input-width: 100%;
  --csd-mask-input-padding-right: 2rem;
  --csd-mask-placeholder-position: absolute;
  --csd-mask-placeholder-left: var(--px-input);
  --csd-mask-placeholder-top: 50%;
  --csd-mask-placeholder-transform: translateY(-50%);
  --csd-mask-placeholder-color: var(--text-color-secondary);
  --csd-mask-placeholder-opacity: 0.6;
  --csd-mask-placeholder-transition: var(--transition);
  --csd-mask-placeholder-disabled-color: var(--text-color-disabled);
  --csd-mask-clear-position: absolute;
  --csd-mask-clear-right: var(--px-input);
  --csd-mask-clear-top: 50%;
  --csd-mask-clear-transform: translateY(-50%);
  --csd-mask-clear-opacity: 0.6;
  --csd-mask-clear-hover-opacity: 1;
  --csd-mask-clear-transition: var(--transition);
  --csd-mask-error-border-color: var(--csd-color-danger);
  --csd-mask-error-focus-shadow: 0 0 0 2px rgba(var(--csd-color-danger-rgb), 0.2);
}

.csd-mask {
  position: var(--csd-mask-position);
  width: var(--csd-mask-width);
}
.csd-mask input {
  width: var(--csd-mask-input-width);
  padding-right: var(--csd-mask-input-padding-right);
}
.csd-mask .mask-placeholder {
  position: var(--csd-mask-placeholder-position);
  top: var(--csd-mask-placeholder-top);
  left: var(--csd-mask-placeholder-left);
  transform: var(--csd-mask-placeholder-transform);
  color: var(--csd-mask-placeholder-color);
  pointer-events: none;
  transition: var(--csd-mask-placeholder-transition);
  opacity: var(--csd-mask-placeholder-opacity);
}
.csd-mask input:focus + .mask-placeholder,
.csd-mask input:not(:placeholder-shown) + .mask-placeholder {
  display: none;
}
.csd-mask.disabled .mask-placeholder {
  color: var(--csd-mask-placeholder-disabled-color);
}
.csd-mask .mask-clear {
  position: var(--csd-mask-clear-position);
  right: var(--csd-mask-clear-right);
  top: var(--csd-mask-clear-top);
  transform: var(--csd-mask-clear-transform);
  cursor: pointer;
  display: none;
  opacity: var(--csd-mask-clear-opacity);
  transition: var(--csd-mask-clear-transition);
}
.csd-mask .mask-clear:hover {
  opacity: var(--csd-mask-clear-hover-opacity);
}
.csd-mask input:not(:placeholder-shown) ~ .mask-clear {
  display: block;
}
.csd-mask.has-error input {
  border-color: var(--csd-mask-error-border-color);
}
.csd-mask.has-error input:focus {
  box-shadow: var(--csd-mask-error-focus-shadow);
}

:root {
  --mega-menu-min-width: 800px;
  --mega-menu-padding: 1rem;
  --mega-menu-border-radius: 0.5rem;
  --mega-menu-z-index: 1000;
  --mega-menu-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --mega-menu-section-gap: 1.5rem;
  --mega-menu-column-width: 200px;
  --mega-menu-item-padding: 0.5rem 0.75rem;
  --mega-menu-section-title-size: 1rem;
  --mega-menu-item-gap: 0.5rem;
  --mega-menu-text-color: #64748b;
  --mega-menu-hover-bg: #edf1f5;
  --mega-menu-icon-size: 1.25rem;
  --mega-menu-small-text-size: 0.75rem;
  --mega-menu-transition-duration: 0.2s;
}

.csd-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--mega-menu-z-index);
  display: none;
  min-width: var(--mega-menu-min-width);
  padding: var(--mega-menu-padding);
  background-color: var(--bg-light);
  border: 1px solid var(--bc-card);
  border-radius: var(--mega-menu-border-radius);
  box-shadow: var(--mega-menu-shadow);
}
.csd-mega-menu.show {
  display: block;
}
.csd-mega-menu .csd-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--mega-menu-column-width), 1fr));
  gap: var(--mega-menu-section-gap);
  width: 100%;
}
.csd-mega-menu .csd-mega-menu-section h6 {
  margin: 0 0 0.25rem;
  padding: 0 0.75rem;
  font-size: var(--mega-menu-section-title-size);
  font-weight: 600;
  color: var(--mega-menu-text-color);
  text-transform: uppercase;
}
.csd-mega-menu .csd-mega-menu-section .csd-mega-menu-items {
  display: flex;
  flex-direction: column;
}
.csd-mega-menu .csd-mega-menu-section .csd-mega-menu-item {
  display: flex;
  align-items: center;
  gap: var(--mega-menu-item-gap);
  padding: var(--mega-menu-item-padding);
  color: var(--mega-menu-text-color);
  text-decoration: none;
  border-radius: var(--mega-menu-border-radius);
  transition: all var(--mega-menu-transition-duration);
}
.csd-mega-menu .csd-mega-menu-section .csd-mega-menu-item:hover {
  background-color: var(--mega-menu-hover-bg);
}
.csd-mega-menu .csd-mega-menu-section .csd-mega-menu-item ion-icon {
  color: inherit;
  font-size: var(--mega-menu-icon-size);
  --ionicon-stroke-width: 40px;
}
.csd-mega-menu .csd-mega-menu-section .csd-mega-menu-item .csd-mega-menu-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: inherit;
}
.csd-mega-menu .csd-mega-menu-section .csd-mega-menu-item .csd-mega-menu-item-content small {
  font-size: var(--mega-menu-small-text-size);
  color: inherit;
}
.csd-mega-menu .csd-mega-menu-footer {
  margin-top: var(--mega-menu-padding);
  padding-top: var(--mega-menu-padding);
  border-top: 1px solid var(--bc-card);
}
.csd-mega-menu .csd-mega-menu-footer .csd-mega-menu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mega-menu-item-gap);
  padding: 0 0.75rem;
}

/* Menu Bar Component */
:root {
  --csd-menubar-display: flex;
  --csd-menubar-align: center;
  --csd-menubar-justify: space-between;
  --csd-menubar-padding: 0.5rem;
  --csd-menubar-bg: var(--bg-light);
  --csd-menubar-border: 1px solid var(--bc-card);
  --csd-menubar-border-radius: 0.5rem;
  --csd-menubar-section-display: flex;
  --csd-menubar-section-align: center;
  --csd-menubar-section-gap: 0.5rem;
  --csd-menubar-btn-display: inline-flex;
  --csd-menubar-btn-align: center;
  --csd-menubar-btn-gap: 0.5rem;
  --csd-menubar-btn-padding: 0.5rem 0.75rem;
  --csd-menubar-btn-color: #64748b;
  --csd-menubar-btn-bg: transparent;
  --csd-menubar-btn-border: none;
  --csd-menubar-btn-border-radius: 0.5rem;
  --csd-menubar-btn-cursor: pointer;
  --csd-menubar-btn-transition: all 0.2s;
  --csd-menubar-btn-hover-bg: rgba(0, 0, 0, 0.04);
  --csd-menubar-btn-active-color: var(--text-color);
  --csd-menubar-btn-active-bg: rgba(var(--csd-color-primary-rgb), 0.08);
  --csd-menubar-icon-size: 1rem;
  --csd-menubar-icon-margin: 0;
  --csd-menubar-mobile-flex-wrap: wrap;
  --csd-menubar-mobile-section-width: 100%;
  --csd-menubar-mobile-section-justify: center;
  --csd-menubar-mobile-end-margin-top: 0.5rem;
}

.csd-menubar {
  display: var(--csd-menubar-display);
  align-items: var(--csd-menubar-align);
  justify-content: var(--csd-menubar-justify);
  padding: var(--csd-menubar-padding);
  background-color: var(--csd-menubar-bg);
  border: var(--csd-menubar-border);
  border-radius: var(--csd-menubar-border-radius);
}
.csd-menubar .csd-menubar-start,
.csd-menubar .csd-menubar-end {
  display: var(--csd-menubar-section-display);
  align-items: var(--csd-menubar-section-align);
  gap: var(--csd-menubar-section-gap);
}
.csd-menubar .csd-btn:not(.btn-primary) {
  display: var(--csd-menubar-btn-display);
  align-items: var(--csd-menubar-btn-align);
  gap: var(--csd-menubar-btn-gap);
  padding: var(--csd-menubar-btn-padding);
  color: var(--csd-menubar-btn-color);
  background-color: var(--csd-menubar-btn-bg);
  border: var(--csd-menubar-btn-border);
  border-radius: var(--csd-menubar-btn-border-radius);
  cursor: var(--csd-menubar-btn-cursor);
  transition: var(--csd-menubar-btn-transition);
}
.csd-menubar .csd-btn:not(.btn-primary):hover {
  background-color: var(--csd-menubar-btn-hover-bg);
}
.csd-menubar .csd-btn:not(.btn-primary).active {
  color: var(--csd-menubar-btn-active-color);
  background-color: var(--csd-menubar-btn-active-bg);
}
.csd-menubar .csd-btn:not(.btn-primary) ion-icon {
  font-size: var(--csd-menubar-icon-size);
  margin: var(--csd-menubar-icon-margin);
}
@media (max-width: 767px) {
  .csd-menubar {
    flex-wrap: var(--csd-menubar-mobile-flex-wrap);
  }
  .csd-menubar .csd-menubar-start,
  .csd-menubar .csd-menubar-end {
    width: var(--csd-menubar-mobile-section-width);
    justify-content: var(--csd-menubar-mobile-section-justify);
  }
  .csd-menubar .csd-menubar-end {
    margin-top: var(--csd-menubar-mobile-end-margin-top);
  }
}

.csd-menubar .csd-btn.text-only {
  font-size: 0.875rem;
  font-weight: 500;
}
.csd-menubar .csd-btn.text-only.active, .csd-menubar .csd-btn.text-only:hover {
  background-color: #edf1f5;
}
.csd-menubar .csd-btn.text-only ion-icon {
  color: #64748b;
}
.csd-menubar .csd-btn.text-only:hover ion-icon {
  color: var(--text-color);
}

/* Menu Component */
:root {
  --csd-menu-position: relative;
  --csd-menu-display: inline-block;
  --csd-menu-bg: var(--bg-light);
  --csd-menu-border: 1px solid var(--bc-input);
  --csd-menu-border-radius: 0.25rem;
  --csd-menu-overflow: hidden;
  --csd-menu-width: 250px;
  --csd-menu-trigger-cursor: pointer;
  --csd-menu-content-position: absolute;
  --csd-menu-content-min-width: 200px;
  --csd-menu-content-z-index: 1000;
  --csd-menu-content-padding: 8px 0;
  --csd-menu-content-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --csd-menu-content-opacity: 0;
  --csd-menu-content-visibility: hidden;
  --csd-menu-content-transform-origin: top;
  --csd-menu-content-transform: scale(0.95);
  --csd-menu-content-transition: all 0.2s ease-in-out;
  --csd-menu-content-show-opacity: 1;
  --csd-menu-content-show-visibility: visible;
  --csd-menu-content-show-transform: scale(1);
  --csd-menu-position-margin: 8px;
  --csd-menu-list-style: none;
  --csd-menu-list-padding: 0.5rem 0;
  --csd-menu-list-margin: 0;
  --csd-menu-compact-list-padding: 0.25rem 0;
  --csd-menu-item-padding: 0.5rem 1rem;
  --csd-menu-item-display: flex;
  --csd-menu-item-align: center;
  --csd-menu-item-gap: 0.5rem;
  --csd-menu-item-color: var(--text-color);
  --csd-menu-item-cursor: pointer;
  --csd-menu-item-transition: var(--transition, all 0.2s);
  --csd-menu-item-text-decoration: none;
  --csd-menu-compact-item-padding: 0.25rem 0.75rem;
  --csd-menu-compact-item-font-size: 0.875rem;
  --csd-menu-item-hover-bg: var(--bg-highlight, rgba(0, 0, 0, 0.04));
  --csd-menu-item-hover-color: var(--primary-color);
  --csd-menu-item-active-bg: var(--secondary-color, rgba(0, 0, 0, 0.08));
  --csd-menu-item-active-color: var(--accent-color);
  --csd-menu-item-active-bg-sidebar: var(--primary-color);
  --csd-menu-item-active-color-sidebar: var(--light, #fff);
  --csd-menu-item-disabled-opacity: 0.5;
  --csd-menu-icon-size: 1rem;
  --csd-menu-icon-width: 16px;
  --csd-menu-icon-text-align: center;
  --csd-menu-shortcut-color: var(--text-color-secondary);
  --csd-menu-shortcut-font-size: 0.875rem;
  --csd-menu-badge-padding: 0.25rem 0.5rem;
  --csd-menu-badge-bg: var(--accent-color);
  --csd-menu-badge-color: white;
  --csd-menu-badge-border-radius: 1rem;
  --csd-menu-badge-font-size: 0.75rem;
  --csd-menu-divider-height: 1px;
  --csd-menu-divider-margin: 0.5rem 0;
  --csd-menu-divider-bg: var(--bc-card);
  --csd-menu-header-padding: 16px;
  --csd-menu-header-border-bottom: 1px solid var(--bc-input);
  --csd-menu-header-font-size: 16px;
  --csd-menu-header-color: var(--text-color);
  --csd-menu-header-font-weight: 600;
  --csd-menu-section-header-padding: 0.5rem 1rem;
  --csd-menu-section-header-color: var(--text-color-secondary);
  --csd-menu-section-header-font-size: 0.875rem;
  --csd-menu-submenu-position: relative;
  --csd-menu-submenu-item-padding-right: 2rem;
  --csd-menu-submenu-indicator-content: "›";
  --csd-menu-submenu-indicator-position: absolute;
  --csd-menu-submenu-indicator-right: 1rem;
  --csd-menu-submenu-indicator-color: var(--text-color-secondary);
  --csd-menu-submenu-content-display: none;
  --csd-menu-submenu-content-position: absolute;
  --csd-menu-submenu-content-left: 100%;
  --csd-menu-submenu-content-top: -0.5rem;
  --csd-menu-submenu-hover-display: block;
  --csd-menu-sidebar-submenu-bg: var(--bg-highlight);
  --csd-menu-sidebar-submenu-item-padding-left: 40px;
  --csd-menu-submenu-toggle-content: "";
  --csd-menu-submenu-toggle-margin-left: auto;
  --csd-menu-submenu-toggle-transform: rotate(180deg);
}

.csd-menu {
  position: var(--csd-menu-position);
  display: var(--csd-menu-display);
}
.csd-menu.csd-menu-popup .menu-trigger {
  cursor: var(--csd-menu-trigger-cursor);
}
.csd-menu.csd-menu-popup .menu-content {
  position: var(--csd-menu-content-position);
  min-width: var(--csd-menu-content-min-width);
  background: var(--csd-menu-bg);
  border: var(--csd-menu-border);
  border-radius: var(--csd-menu-border-radius);
  box-shadow: var(--csd-menu-content-box-shadow);
  z-index: var(--csd-menu-content-z-index);
  opacity: var(--csd-menu-content-opacity);
  visibility: var(--csd-menu-content-visibility);
  transform-origin: var(--csd-menu-content-transform-origin);
  transform: var(--csd-menu-content-transform);
  transition: var(--csd-menu-content-transition);
}
.csd-menu.csd-menu-popup .menu-content.show {
  opacity: var(--csd-menu-content-show-opacity);
  visibility: var(--csd-menu-content-show-visibility);
  transform: var(--csd-menu-content-show-transform);
}
.csd-menu.csd-menu-popup .menu-content.top {
  bottom: 100%;
  margin-bottom: var(--csd-menu-position-margin);
}
.csd-menu.csd-menu-popup .menu-content.bottom {
  top: 100%;
  margin-top: var(--csd-menu-position-margin);
}
.csd-menu.csd-menu-popup .menu-content.left {
  right: 100%;
  margin-right: var(--csd-menu-position-margin);
}
.csd-menu.csd-menu-popup .menu-content.right {
  left: 100%;
  margin-left: var(--csd-menu-position-margin);
}
.csd-menu.csd-menu-sidebar {
  width: var(--csd-menu-width);
  background-color: var(--csd-menu-bg);
  border: var(--csd-menu-border);
  border-radius: var(--csd-menu-border-radius);
  overflow: var(--csd-menu-overflow);
}
.csd-menu.csd-menu-sidebar .csd-menu-header {
  padding: var(--csd-menu-header-padding);
  border-bottom: var(--csd-menu-header-border-bottom);
}
.csd-menu.csd-menu-sidebar .csd-menu-header h3 {
  margin: 0;
  font-size: var(--csd-menu-header-font-size);
  color: var(--csd-menu-header-color);
}
.csd-menu.csd-menu-sidebar .csd-menu-content {
  padding: var(--csd-menu-content-padding);
}
.csd-menu .menu-list, .csd-menu .csd-menu-list {
  list-style: var(--csd-menu-list-style);
  padding: var(--csd-menu-list-padding);
  margin: var(--csd-menu-list-margin);
}
.csd-menu .menu-list .menu-item, .csd-menu .menu-list .csd-menu-item, .csd-menu .csd-menu-list .menu-item, .csd-menu .csd-menu-list .csd-menu-item {
  padding: var(--csd-menu-item-padding);
  display: var(--csd-menu-item-display);
  align-items: var(--csd-menu-item-align);
  gap: var(--csd-menu-item-gap);
  color: var(--csd-menu-item-color);
  cursor: var(--csd-menu-item-cursor);
  transition: var(--csd-menu-item-transition);
  text-decoration: var(--csd-menu-item-text-decoration);
}
.csd-menu .menu-list .menu-item:hover, .csd-menu .menu-list .csd-menu-item:hover, .csd-menu .csd-menu-list .menu-item:hover, .csd-menu .csd-menu-list .csd-menu-item:hover {
  background-color: var(--csd-menu-item-hover-bg);
}
.csd-menu .menu-list .menu-item.active, .csd-menu .menu-list .csd-menu-item.active, .csd-menu .csd-menu-list .menu-item.active, .csd-menu .csd-menu-list .csd-menu-item.active {
  background-color: var(--csd-menu-item-active-bg);
  color: var(--csd-menu-item-active-color);
}
.csd-menu .menu-list .menu-item.disabled, .csd-menu .menu-list .csd-menu-item.disabled, .csd-menu .csd-menu-list .menu-item.disabled, .csd-menu .csd-menu-list .csd-menu-item.disabled {
  opacity: var(--csd-menu-item-disabled-opacity);
  cursor: not-allowed;
}
.csd-menu .menu-list .menu-item.disabled:hover, .csd-menu .menu-list .csd-menu-item.disabled:hover, .csd-menu .csd-menu-list .menu-item.disabled:hover, .csd-menu .csd-menu-list .csd-menu-item.disabled:hover {
  background: none;
}
.csd-menu .menu-list .menu-item .item-icon, .csd-menu .menu-list .menu-item i, .csd-menu .menu-list .csd-menu-item .item-icon, .csd-menu .menu-list .csd-menu-item i, .csd-menu .csd-menu-list .menu-item .item-icon, .csd-menu .csd-menu-list .menu-item i, .csd-menu .csd-menu-list .csd-menu-item .item-icon, .csd-menu .csd-menu-list .csd-menu-item i {
  font-size: var(--csd-menu-icon-size);
  color: inherit;
  width: var(--csd-menu-icon-width);
  text-align: var(--csd-menu-icon-text-align);
}
.csd-menu .menu-list .menu-item .item-text, .csd-menu .menu-list .csd-menu-item .item-text, .csd-menu .csd-menu-list .menu-item .item-text, .csd-menu .csd-menu-list .csd-menu-item .item-text {
  flex: 1;
}
.csd-menu .menu-list .menu-item .item-shortcut, .csd-menu .menu-list .csd-menu-item .item-shortcut, .csd-menu .csd-menu-list .menu-item .item-shortcut, .csd-menu .csd-menu-list .csd-menu-item .item-shortcut {
  color: var(--csd-menu-shortcut-color);
  font-size: var(--csd-menu-shortcut-font-size);
}
.csd-menu .menu-list .menu-item .item-badge, .csd-menu .menu-list .csd-menu-item .item-badge, .csd-menu .csd-menu-list .menu-item .item-badge, .csd-menu .csd-menu-list .csd-menu-item .item-badge {
  padding: var(--csd-menu-badge-padding);
  background-color: var(--csd-menu-badge-bg);
  color: var(--csd-menu-badge-color);
  border-radius: var(--csd-menu-badge-border-radius);
  font-size: var(--csd-menu-badge-font-size);
}
.csd-menu .menu-list .menu-divider, .csd-menu .menu-list .csd-menu-divider, .csd-menu .csd-menu-list .menu-divider, .csd-menu .csd-menu-list .csd-menu-divider {
  height: var(--csd-menu-divider-height);
  background-color: var(--csd-menu-divider-bg);
  margin: var(--csd-menu-divider-margin);
}
.csd-menu .menu-list .menu-header, .csd-menu .csd-menu-list .menu-header {
  padding: var(--csd-menu-section-header-padding);
  color: var(--csd-menu-section-header-color);
  font-size: var(--csd-menu-section-header-font-size);
  font-weight: var(--csd-menu-header-font-weight);
}
.csd-menu .menu-submenu {
  position: var(--csd-menu-submenu-position);
}
.csd-menu .menu-submenu > .menu-item {
  padding-right: var(--csd-menu-submenu-item-padding-right);
}
.csd-menu .menu-submenu > .menu-item::after {
  content: var(--csd-menu-submenu-indicator-content);
  position: var(--csd-menu-submenu-indicator-position);
  right: var(--csd-menu-submenu-indicator-right);
  color: var(--csd-menu-submenu-indicator-color);
}
.csd-menu .menu-submenu .menu-content {
  display: var(--csd-menu-submenu-content-display);
  position: var(--csd-menu-submenu-content-position);
  left: var(--csd-menu-submenu-content-left);
  top: var(--csd-menu-submenu-content-top);
}
.csd-menu .menu-submenu:hover > .menu-content {
  display: var(--csd-menu-submenu-hover-display);
}
.csd-menu .csd-menu-item:hover > a {
  background-color: var(--csd-menu-item-hover-bg);
  color: var(--csd-menu-item-hover-color);
}
.csd-menu .csd-menu-item.active > a {
  background-color: var(--csd-menu-item-active-bg-sidebar);
  color: var(--csd-menu-item-active-color-sidebar);
}
.csd-menu .csd-menu-item.has-submenu > a:after {
  content: var(--csd-menu-submenu-toggle-content);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-left: var(--csd-menu-submenu-toggle-margin-left);
  transition: var(--csd-menu-item-transition);
}
.csd-menu .csd-menu-item.has-submenu.expanded > a:after {
  transform: var(--csd-menu-submenu-toggle-transform);
}
.csd-menu .csd-menu-item.has-submenu.expanded > .csd-submenu {
  display: var(--csd-menu-submenu-hover-display);
}
.csd-menu .csd-submenu {
  display: var(--csd-menu-submenu-content-display);
  list-style: var(--csd-menu-list-style);
  margin: var(--csd-menu-list-margin);
  padding: var(--csd-menu-list-margin);
  background-color: var(--csd-menu-sidebar-submenu-bg);
}
.csd-menu .csd-submenu .csd-menu-item a {
  padding-left: var(--csd-menu-sidebar-submenu-item-padding-left);
}
.csd-menu.context .menu-content {
  position: fixed;
}
.csd-menu.compact .menu-list {
  padding: var(--csd-menu-compact-list-padding);
}
.csd-menu.compact .menu-list .menu-item {
  padding: var(--csd-menu-compact-item-padding);
  font-size: var(--csd-menu-compact-item-font-size);
}

:root {
  --modal-z-index: 1050;
  --modal-overlay-bg: rgba(0, 0, 0, 0.5);
  --modal-transition: 0.3s ease;
  --modal-content-max-width: 500px;
  --modal-content-border-radius: var(--br-card);
  --modal-content-bg: var(--bg-light);
  --modal-content-shadow: var(--shadow-lg);
  --modal-padding: 1.25rem;
  --modal-header-font-size: 1.25rem;
  --modal-header-font-weight: 600;
  --modal-border-color: var(--bc-card);
  --modal-close-size: 1.5rem;
  --modal-close-opacity: 0.7;
  --modal-close-hover-opacity: 1;
  --modal-size-sm: 300px;
  --modal-size-md: 500px;
  --modal-size-lg: 800px;
  --modal-size-xl: 1140px;
  --modal-gap: 0.5rem;
}

.csd-modal, .csd-modal-confirm {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--modal-z-index);
  opacity: 0;
  transition: opacity var(--modal-transition);
}
.csd-modal.show, .show.csd-modal-confirm {
  display: block;
  opacity: 1;
}
.csd-modal .csd-modal-overlay, .csd-modal-confirm .csd-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-overlay-bg);
}
.csd-modal .csd-modal-content, .csd-modal-confirm .csd-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: var(--modal-content-max-width);
  background: var(--modal-content-bg);
  border-radius: var(--modal-content-border-radius);
  box-shadow: var(--modal-content-shadow);
  transition: transform var(--modal-transition), opacity var(--modal-transition);
  z-index: calc(var(--modal-z-index) + 1);
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}
.csd-modal .csd-modal-header, .csd-modal-confirm .csd-modal-header {
  padding: var(--modal-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--modal-border-color);
}
.csd-modal .csd-modal-header .csd-modal-title, .csd-modal-confirm .csd-modal-header .csd-modal-title {
  margin: 0;
  font-size: var(--modal-header-font-size);
  font-weight: var(--modal-header-font-weight);
  color: var(--text-color);
}
.csd-modal .csd-modal-header .csd-modal-close, .csd-modal-confirm .csd-modal-header .csd-modal-close {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-color);
  opacity: var(--modal-close-opacity);
  transition: opacity var(--modal-transition);
  font-size: var(--modal-close-size);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--br-field);
}
.csd-modal .csd-modal-header .csd-modal-close:hover, .csd-modal-confirm .csd-modal-header .csd-modal-close:hover {
  opacity: var(--modal-close-hover-opacity);
  background-color: var(--bg-highlight);
}
.csd-modal .csd-modal-body, .csd-modal-confirm .csd-modal-body {
  padding: var(--modal-padding);
  overflow-y: auto;
  flex: 1;
}
.csd-modal .csd-modal-footer, .csd-modal-confirm .csd-modal-footer {
  padding: var(--modal-padding);
  display: flex;
  justify-content: flex-end;
  gap: var(--modal-gap);
  border-top: 1px solid var(--modal-border-color);
}
.csd-modal.sm .csd-modal-content, .sm.csd-modal-confirm .csd-modal-content {
  max-width: var(--modal-size-sm);
}
.csd-modal.md .csd-modal-content, .md.csd-modal-confirm .csd-modal-content {
  max-width: var(--modal-size-md);
}
.csd-modal.lg .csd-modal-content, .lg.csd-modal-confirm .csd-modal-content {
  max-width: var(--modal-size-lg);
}
.csd-modal.xl .csd-modal-content, .xl.csd-modal-confirm .csd-modal-content {
  max-width: var(--modal-size-xl);
}
.csd-modal.fullscreen .csd-modal-content, .fullscreen.csd-modal-confirm .csd-modal-content {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
.csd-modal.top .csd-modal-content, .top.csd-modal-confirm .csd-modal-content {
  top: 1rem;
  transform: translate(-50%, 0);
}
.csd-modal.bottom .csd-modal-content, .bottom.csd-modal-confirm .csd-modal-content {
  top: auto;
  bottom: 1rem;
  transform: translate(-50%, 0);
}
.csd-modal.slide-up .csd-modal-content, .slide-up.csd-modal-confirm .csd-modal-content {
  transform: translate(-50%, 100%);
}
.csd-modal.slide-down .csd-modal-content, .slide-down.csd-modal-confirm .csd-modal-content {
  transform: translate(-50%, -100%);
}
.csd-modal.slide-left .csd-modal-content, .slide-left.csd-modal-confirm .csd-modal-content {
  transform: translate(100%, -50%);
}
.csd-modal.slide-right .csd-modal-content, .slide-right.csd-modal-confirm .csd-modal-content {
  transform: translate(-100%, -50%);
}
.csd-modal.show.slide-up .csd-modal-content, .show.slide-up.csd-modal-confirm .csd-modal-content, .csd-modal.show.slide-down .csd-modal-content, .show.slide-down.csd-modal-confirm .csd-modal-content {
  transform: translate(-50%, -50%);
}
.csd-modal.show.slide-left .csd-modal-content, .show.slide-left.csd-modal-confirm .csd-modal-content, .csd-modal.show.slide-right .csd-modal-content, .show.slide-right.csd-modal-confirm .csd-modal-content {
  transform: translate(-50%, -50%);
}

.csd-modal-confirm .csd-modal-content {
  max-width: 400px;
}
.csd-modal-confirm .csd-modal-body {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.csd-modal-confirm .csd-modal-body ion-icon {
  font-size: 1.5rem;
  color: var(--csd-color-warning);
}

@media (max-width: 576px) {
  .csd-modal .csd-modal-content, .csd-modal-confirm .csd-modal-content {
    width: 95%;
    max-height: calc(100vh - 1rem);
  }
  .csd-modal .csd-modal-header, .csd-modal-confirm .csd-modal-header,
  .csd-modal .csd-modal-body,
  .csd-modal-confirm .csd-modal-body,
  .csd-modal .csd-modal-footer,
  .csd-modal-confirm .csd-modal-footer {
    padding: calc(var(--modal-padding) * 0.75);
  }
}
:root {
  --csd-number-width: 100%;
  --csd-number-padding-right: 2.5rem;
  --csd-number-buttons-width: 2.5rem;
  --csd-number-buttons-border: 1px solid var(--bc-input);
  --csd-number-buttons-margin: 1px;
  --csd-number-btn-bg: transparent;
  --csd-number-btn-color: var(--text-color);
  --csd-number-btn-hover-bg: var(--secondary-color);
  --csd-number-btn-border-radius: var(--br-field);
}

.csd-number {
  position: relative;
  width: var(--csd-number-width);
}
.csd-number input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield; /* Standard */
  padding-right: var(--csd-number-padding-right);
}
.csd-number input[type=number]::-webkit-inner-spin-button, .csd-number input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.csd-number .csd-number-buttons {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  width: var(--csd-number-buttons-width);
  border-left: var(--csd-number-buttons-border);
  margin-block: var(--csd-number-buttons-margin);
}
.csd-number .csd-number-buttons .number-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
  border: none;
  background: var(--csd-number-btn-bg);
  color: var(--csd-number-btn-color);
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: var(--transition);
}
.csd-number .csd-number-buttons .number-btn:hover {
  background-color: var(--csd-number-btn-hover-bg);
}
.csd-number .csd-number-buttons .number-btn:first-child {
  border-bottom: var(--csd-number-buttons-border);
  border-top-right-radius: var(--csd-number-btn-border-radius);
}
.csd-number .csd-number-buttons .number-btn:last-child {
  border-bottom-right-radius: var(--csd-number-btn-border-radius);
}
.csd-number:hover .csd-number-buttons,
.csd-number input:focus + .csd-number-buttons {
  display: flex;
}
.csd-number.disabled .csd-number-buttons {
  display: none;
}

:root {
  --csd-otp-container-gap: 8px;
  --csd-otp-container-margin: 10px 0;
  --csd-otp-container-justify: center;
  --csd-otp-input-width: 40px;
  --csd-otp-input-height: 40px;
  --csd-otp-input-padding: 0;
  --csd-otp-input-font-size: 24px;
  --csd-otp-input-text-align: center;
  --csd-otp-input-border: 1px solid var(--bc-input);
  --csd-otp-input-radius: var(--br-field);
  --csd-otp-input-bg: var(--bg-input);
  --csd-otp-input-transition: var(--transition);
  --csd-otp-input-focus-border: var(--accent-color);
  --csd-otp-input-focus-shadow: 0 0 0 2px var(--secondary-color);
  --csd-otp-input-disabled-bg: var(--bg-input-disabled);
  --csd-otp-input-error-border: var(--csd-color-danger);
  --csd-otp-input-error-shadow: 0 0 0 2px rgba(var(--csd-color-danger-rgb), 0.2);
  --csd-otp-digit-border: 1px solid #ddd;
  --csd-otp-digit-radius: calc(var(--br-input)/2);
  --csd-otp-digit-font-size: 18px;
  --csd-otp-digit-font-weight: bold;
  --csd-otp-digit-color: var(--text-color);
  --csd-otp-digit-padding: calc(var(--px-input) / 2);
  --csd-otp-digit-focus-border: var(--text-color);
  --csd-otp-digit-focus-shadow: var(--shadow);
  --csd-otp-group-gap: var(--gap-field);
  --csd-otp-message-font-size: 0.875rem;
  --csd-otp-message-color: var(--text-color-secondary);
  --csd-otp-message-error-color: var(--csd-color-danger);
  --csd-otp-actions-gap: var(--gap-field);
  --csd-otp-actions-margin-top: 8px;
}

.csd-otp-container {
  display: flex;
  gap: var(--csd-otp-container-gap);
  justify-content: var(--csd-otp-container-justify);
  margin: var(--csd-otp-container-margin);
}
@media (max-width: 768px) {
  .csd-otp-container {
    gap: calc(var(--csd-otp-container-gap) / 2);
  }
}
.csd-otp-container .csd-otp-input {
  width: var(--csd-otp-input-width);
  height: var(--csd-otp-input-height);
  padding: var(--csd-otp-input-padding);
  font-size: var(--csd-otp-input-font-size);
  text-align: var(--csd-otp-input-text-align);
  border: var(--csd-otp-input-border);
  border-radius: var(--csd-otp-input-radius);
  background-color: var(--csd-otp-input-bg);
  transition: var(--csd-otp-input-transition);
}
@media (max-width: 768px) {
  .csd-otp-container .csd-otp-input {
    width: calc(var(--csd-otp-input-width) / 1.4);
    height: calc(var(--csd-otp-input-height) / 1.4);
    font-size: calc(var(--csd-otp-input-font-size) / 1.4);
  }
}
.csd-otp-container .csd-otp-input:focus {
  outline: none;
  border-color: var(--csd-otp-input-focus-border);
  box-shadow: var(--csd-otp-input-focus-shadow);
}
.csd-otp-container .csd-otp-input:disabled {
  background-color: var(--csd-otp-input-disabled-bg);
  cursor: not-allowed;
}
.csd-otp-container .csd-otp-input.error {
  border-color: var(--csd-otp-input-error-border);
}
.csd-otp-container .csd-otp-input.error:focus {
  box-shadow: var(--csd-otp-input-error-shadow);
}
.csd-otp-container .csd-otp-digit {
  width: var(--csd-otp-input-width);
  height: var(--csd-otp-input-height);
  border: var(--csd-otp-digit-border);
  border-radius: var(--csd-otp-digit-radius);
  text-align: var(--csd-otp-input-text-align);
  font-size: var(--csd-otp-digit-font-size);
  font-weight: var(--csd-otp-digit-font-weight);
  color: var(--csd-otp-digit-color);
  background: var(--csd-otp-input-bg);
  transition: var(--csd-otp-input-transition);
  padding: var(--csd-otp-digit-padding);
}
.csd-otp-container .csd-otp-digit:focus {
  border-color: var(--csd-otp-digit-focus-border);
  box-shadow: var(--csd-otp-digit-focus-shadow);
}
.csd-otp-container .csd-otp-digit::-webkit-inner-spin-button, .csd-otp-container .csd-otp-digit::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.csd-otp-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--csd-otp-group-gap);
}
.csd-otp-group .csd-otp-message {
  font-size: var(--csd-otp-message-font-size);
  color: var(--csd-otp-message-color);
}
.csd-otp-group .csd-otp-message.error {
  color: var(--csd-otp-message-error-color);
}
.csd-otp-group .csd-otp-actions {
  display: flex;
  gap: var(--csd-otp-actions-gap);
  margin-top: var(--csd-otp-actions-margin-top);
}

:root {
  --csd-password-width: 100%;
  --csd-password-padding-right: calc(var(--px-input) * 2 + 20px);
  --csd-password-toggle-right: var(--px-input);
  --csd-password-toggle-color: var(--text-color-secondary);
  --csd-password-toggle-hover-color: var(--text-color);
  --csd-password-toggle-disabled-color: var(--text-color-disabled);
  --csd-password-toggle-font-size: 1.25rem;
  --csd-password-toggle-transition: var(--transition);
  --csd-password-strength-margin: 8px;
  --csd-password-strength-bar-height: 4px;
  --csd-password-strength-bar-bg: var(--bc-input);
  --csd-password-strength-bar-radius: 2px;
  --csd-password-strength-transition: width 0.3s ease;
  --csd-password-strength-weak-width: 25%;
  --csd-password-strength-weak-color: var(--csd-color-danger);
  --csd-password-strength-fair-width: 50%;
  --csd-password-strength-fair-color: var(--csd-color-warning);
  --csd-password-strength-good-width: 75%;
  --csd-password-strength-good-color: var(--csd-color-info);
  --csd-password-strength-strong-width: 100%;
  --csd-password-strength-strong-color: var(--csd-color-success);
  --csd-password-strength-text-margin: 4px;
  --csd-password-strength-text-size: 0.875rem;
  --csd-password-strength-text-color: var(--text-color-secondary);
  --csd-password-requirements-margin: 8px;
  --csd-password-requirements-font-size: 0.875rem;
  --csd-password-requirement-gap: 8px;
  --csd-password-requirement-color: var(--text-color-secondary);
  --csd-password-requirement-margin-bottom: 4px;
  --csd-password-requirement-met-color: var(--csd-color-success);
}

.csd-password {
  position: relative;
  width: var(--csd-password-width);
}
.csd-password input {
  width: 100%;
  padding-right: var(--csd-password-padding-right);
}
.csd-password .password-toggle,
.csd-password .csd-password-toggle {
  position: absolute;
  right: var(--csd-password-toggle-right);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--csd-password-toggle-color);
  font-size: var(--csd-password-toggle-font-size);
  transition: var(--csd-password-toggle-transition);
}
.csd-password .password-toggle:hover,
.csd-password .csd-password-toggle:hover {
  color: var(--csd-password-toggle-hover-color);
}
.csd-password.disabled .password-toggle,
.csd-password.disabled .csd-password-toggle {
  color: var(--csd-password-toggle-disabled-color);
  cursor: not-allowed;
}
.csd-password .password-strength {
  margin-top: var(--csd-password-strength-margin);
}
.csd-password .password-strength .strength-bar {
  height: var(--csd-password-strength-bar-height);
  background-color: var(--csd-password-strength-bar-bg);
  border-radius: var(--csd-password-strength-bar-radius);
  overflow: hidden;
}
.csd-password .password-strength .strength-bar .strength-fill {
  height: 100%;
  width: 0;
  transition: var(--csd-password-strength-transition);
}
.csd-password .password-strength .strength-bar .strength-fill.weak {
  width: var(--csd-password-strength-weak-width);
  background-color: var(--csd-password-strength-weak-color);
}
.csd-password .password-strength .strength-bar .strength-fill.fair {
  width: var(--csd-password-strength-fair-width);
  background-color: var(--csd-password-strength-fair-color);
}
.csd-password .password-strength .strength-bar .strength-fill.good {
  width: var(--csd-password-strength-good-width);
  background-color: var(--csd-password-strength-good-color);
}
.csd-password .password-strength .strength-bar .strength-fill.strong {
  width: var(--csd-password-strength-strong-width);
  background-color: var(--csd-password-strength-strong-color);
}
.csd-password .password-strength .strength-text {
  margin-top: var(--csd-password-strength-text-margin);
  font-size: var(--csd-password-strength-text-size);
  color: var(--csd-password-strength-text-color);
}
.csd-password .password-strength .strength-text.weak {
  color: var(--csd-password-strength-weak-color);
}
.csd-password .password-strength .strength-text.fair {
  color: var(--csd-password-strength-fair-color);
}
.csd-password .password-strength .strength-text.good {
  color: var(--csd-password-strength-good-color);
}
.csd-password .password-strength .strength-text.strong {
  color: var(--csd-password-strength-strong-color);
}
.csd-password .password-requirements {
  margin-top: var(--csd-password-requirements-margin);
  font-size: var(--csd-password-requirements-font-size);
}
.csd-password .password-requirements .requirement {
  display: flex;
  align-items: center;
  gap: var(--csd-password-requirement-gap);
  color: var(--csd-password-requirement-color);
  margin-bottom: var(--csd-password-requirement-margin-bottom);
}
.csd-password .password-requirements .requirement.met {
  color: var(--csd-password-requirement-met-color);
}
.csd-password .password-requirements .requirement:last-child {
  margin-bottom: 0;
}

:root {
  --popover-z-index: 1000;
  --popover-min-width: 200px;
  --popover-max-width: 300px;
  --popover-padding: 0.75rem 1rem;
  --popover-scale: 0.95;
  --popover-transition: all 0.2s ease-in-out;
  --popover-arrow-outer-width: 8px;
  --popover-arrow-inner-width: 7px;
  --popover-arrow-offset: 8px;
  --popover-square-arrow-size: 12px;
  --popover-square-margin: 12px;
  --popover-square-border-radius: 0.5rem;
  --popover-square-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --popover-square-shadow: 2px 2px 3px rgba(0,0,0,0.05);
  --popover-confirm-min-width: 240px;
}

.csd-popover {
  position: absolute;
  background: var(--bg-light);
  border: 1px solid var(--bc-card);
  border-radius: var(--br-card);
  box-shadow: var(--shadow-lg);
  z-index: var(--popover-z-index);
  min-width: var(--popover-min-width);
  max-width: var(--popover-max-width);
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: scale(var(--popover-scale));
  transition: var(--popover-transition);
}
.csd-popover.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.csd-popover .popover-header {
  padding: var(--popover-padding);
  border-bottom: 1px solid var(--bc-card);
  font-weight: 600;
  color: var(--text-color);
}
.csd-popover .popover-body {
  padding: var(--popover-padding);
  color: var(--text-color-secondary);
}
.csd-popover .popover-footer {
  padding: var(--popover-padding);
  border-top: 1px solid var(--bc-card);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.csd-popover::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.csd-popover::before {
  border-width: var(--popover-arrow-outer-width);
}
.csd-popover::after {
  border-width: var(--popover-arrow-inner-width);
}
.csd-popover[data-position=top] {
  margin-bottom: var(--popover-arrow-offset);
}
.csd-popover[data-position=top]::before {
  bottom: calc(-1 * var(--popover-arrow-outer-width));
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--bc-card) transparent transparent;
}
.csd-popover[data-position=top]::after {
  bottom: calc(-1 * var(--popover-arrow-inner-width));
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--bg-light) transparent transparent;
}
.csd-popover[data-position=bottom] {
  margin-top: var(--popover-arrow-offset);
}
.csd-popover[data-position=bottom]::before {
  top: calc(-1 * var(--popover-arrow-outer-width));
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--bc-card);
}
.csd-popover[data-position=bottom]::after {
  top: calc(-1 * var(--popover-arrow-inner-width));
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--bg-light);
}
.csd-popover[data-position=left] {
  margin-right: var(--popover-arrow-offset);
}
.csd-popover[data-position=left]::before {
  right: calc(-1 * var(--popover-arrow-outer-width));
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--bc-card);
}
.csd-popover[data-position=left]::after {
  right: calc(-1 * var(--popover-arrow-inner-width));
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--bg-light);
}
.csd-popover[data-position=right] {
  margin-left: var(--popover-arrow-offset);
}
.csd-popover[data-position=right]::before {
  left: calc(-1 * var(--popover-arrow-outer-width));
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent var(--bc-card) transparent transparent;
}
.csd-popover[data-position=right]::after {
  left: calc(-1 * var(--popover-arrow-inner-width));
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent var(--bg-light) transparent transparent;
}

.csd-popover {
  position: absolute;
  z-index: var(--popover-z-index);
  background: var(--bg-light);
  border: 1px solid var(--bc-card);
  border-radius: var(--popover-square-border-radius);
  box-shadow: var(--popover-square-box-shadow);
  padding: 0.75rem;
  max-width: var(--popover-max-width);
  opacity: 0;
  transform: scale(var(--popover-scale));
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.csd-popover.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.csd-popover:after {
  content: "";
  position: absolute;
  width: var(--popover-square-arrow-size);
  height: var(--popover-square-arrow-size);
  background-color: var(--bg-light);
  transform: rotate(45deg);
  z-index: -1;
  border: 1px solid var(--bc-card);
}
.csd-popover[data-placement=top] {
  transform-origin: bottom center;
  margin-bottom: var(--popover-square-margin);
}
.csd-popover[data-placement=top]:after {
  bottom: -7px;
  left: 50%;
  border-top: 0;
  border-left: 0;
  box-shadow: var(--popover-square-shadow);
}
.csd-popover[data-placement=bottom] {
  transform-origin: top center;
  margin-top: var(--popover-square-margin);
}
.csd-popover[data-placement=bottom]:after {
  top: -7px;
  left: 50%;
  border-bottom: 0;
  border-right: 0;
  box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.05);
}
.csd-popover[data-placement=left] {
  transform-origin: center right;
  margin-right: var(--popover-square-margin);
}
.csd-popover[data-placement=left]:after {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-left: 0;
  border-bottom: 0;
  box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.05);
}
.csd-popover[data-placement=right] {
  transform-origin: center left;
}
.csd-popover[data-placement=right]:after {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-right: 0;
  border-top: 0;
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.05);
}
.csd-popover .csd-popover-content {
  position: relative;
  z-index: 1;
}
.csd-popover .csd-popover-content p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.csd-popover-confirm .csd-popover-content {
  min-width: var(--popover-confirm-min-width);
}
.csd-popover-confirm p {
  color: var(--text-color);
}
.csd-popover-confirm ion-icon {
  color: var(--csd-color-warning);
}

:root {
  --csd-progress-bar-width: 100%;
  --csd-progress-track-height: 8px;
  --csd-progress-track-bg: var(--bg-light);
  --csd-progress-track-border-radius: 4px;
  --csd-progress-fill-base-color: var(--primary-color);
  --csd-progress-fill-border-radius: 4px;
  --csd-progress-fill-transition: width 0.3s ease;
  --csd-progress-animation-name: progress;
  --csd-progress-animation-duration: 5s;
  --csd-progress-animation-timing: ease-in-out;
  --csd-progress-animation-iteration: infinite;
  --csd-progress-primary-color: var(--csd-color-primary);
  --csd-progress-secondary-color: var(--csd-color-secondary);
  --csd-progress-warning-color: var(--csd-color-warning);
  --csd-progress-danger-color: var(--csd-color-danger);
}

.csd-progress-bar {
  width: var(--csd-progress-bar-width);
}
.csd-progress-bar .progress-track {
  width: var(--csd-progress-bar-width);
  height: var(--csd-progress-track-height);
  background-color: var(--csd-progress-track-bg);
  border-radius: var(--csd-progress-track-border-radius);
  overflow: hidden;
}
.csd-progress-bar .progress-fill {
  height: 100%;
  width: 100%;
  background-color: var(--csd-progress-fill-base-color);
  border-radius: var(--csd-progress-fill-border-radius);
  transform: translateX(-100%);
  transition: var(--csd-progress-fill-transition);
  animation: var(--csd-progress-animation-name) var(--csd-progress-animation-duration) var(--csd-progress-animation-timing) var(--csd-progress-animation-iteration);
}
.csd-progress-bar.primary .progress-fill {
  background-color: var(--csd-progress-primary-color);
}
.csd-progress-bar.secondary .progress-fill {
  background-color: var(--csd-progress-secondary-color);
}
.csd-progress-bar.warning .progress-fill {
  background-color: var(--csd-progress-warning-color);
}
.csd-progress-bar.danger .progress-fill {
  background-color: var(--csd-progress-danger-color);
}

@keyframes progress {
  to {
    transform: translateX(0%);
  }
}
:root {
  --csd-radio-size: 18px;
  --csd-radio-border-width: 2px;
  --csd-radio-gap: 0.5rem;
  --csd-radio-bg: var(--bg-input);
  --csd-radio-border-color: var(--bc-input);
  --csd-radio-checked-color: var(--text-color);
  --csd-radio-focus-color: var(--text-color);
  --csd-radio-disabled-bg: var(--bg-input-disabled);
  --csd-radio-disabled-border: var(--bc-input);
  --csd-radio-disabled-color: var(--text-color-disabled);
  --csd-radio-dot-size: 10px;
  --csd-radio-dot-color: var(--text-color);
}

.csd-radio {
  position: relative;
  display: inline-block;
  width: var(--csd-radio-size);
  height: var(--csd-radio-size);
  margin: 0;
  cursor: pointer;
}
.csd-radio-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--csd-radio-gap);
}
.csd-radio-wrapper:has(.csd-radio-input:disabled) .csd-radio-label {
  color: var(--csd-radio-disabled-color);
  cursor: default;
}
.csd-radio-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.csd-radio-input:checked + .csd-radio-box {
  border-color: var(--csd-radio-checked-color);
}
.csd-radio-input:checked + .csd-radio-box .csd-radio-dot {
  opacity: 1;
  transform: scale(1);
}
.csd-radio-input:focus + .csd-radio-box {
  border-color: var(--csd-radio-focus-color);
  box-shadow: var(--shadow);
}
.csd-radio-input:disabled {
  cursor: default;
}
.csd-radio-input:disabled + .csd-radio-box {
  background-color: var(--csd-radio-disabled-bg);
  border-color: var(--csd-radio-disabled-border);
  cursor: default;
}
.csd-radio-input:disabled + .csd-radio-box .csd-radio-dot {
  background-color: var(--csd-radio-disabled-color);
}
.csd-radio-input:disabled ~ .csd-radio-label {
  color: var(--csd-radio-disabled-color);
  cursor: default;
}
.csd-radio-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--csd-radio-bg);
  border: var(--csd-radio-border-width) solid var(--csd-radio-border-color);
  border-radius: 50%;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.csd-radio-dot {
  width: var(--csd-radio-dot-size);
  height: var(--csd-radio-dot-size);
  background-color: var(--csd-radio-dot-color);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}
.csd-radio-label {
  font-size: var(--font-size);
  cursor: pointer;
  user-select: none;
}

.csd-radio-group {
  display: flex;
  gap: var(--csd-radio-gap);
}
.csd-radio-group.vertical {
  flex-direction: column;
}

:root {
  --csd-range-width: 100%;
  --csd-range-padding: 10px 0;
  --csd-range-container-height: 20px;
  --csd-range-container-vertical-height: 200px;
  --csd-range-container-vertical-width: 20px;
  --csd-range-container-margin: 10px 0;
  --csd-range-track-height: 4px;
  --csd-range-track-bg: var(--bc-input);
  --csd-range-track-border-radius: 2px;
  --csd-range-progress-height: 4px;
  --csd-range-progress-bg: var(--accent-color);
  --csd-range-progress-border-radius: 2px;
  --csd-range-thumb-size: 20px;
  --csd-range-thumb-bg: var(--accent-color);
  --csd-range-thumb-border: 2px solid white;
  --csd-range-thumb-border-radius: 50%;
  --csd-range-thumb-hover-shadow: 0 0 0 8px var(--secondary-color);
  --csd-range-thumb-active-shadow: 0 0 0 12px var(--secondary-color);
  --csd-range-thumb-disabled-bg: var(--text-color-disabled);
  --csd-range-labels-margin-top: 8px;
  --csd-range-labels-font-size: 0.875rem;
  --csd-range-labels-color: var(--text-color-secondary);
  --csd-range-labels-vertical-right: -30px;
  --csd-range-value-top: -30px;
  --csd-range-value-padding: 4px 8px;
  --csd-range-value-bg: var(--accent-color);
  --csd-range-value-color: white;
  --csd-range-value-border-radius: var(--br-field);
  --csd-range-value-font-size: 0.875rem;
  --csd-range-value-arrow-size: 5px;
  --csd-range-value-vertical-right: -45px;
  --csd-range-track-alt-height: 3px;
  --csd-range-track-alt-bg: #e2e8f0;
  --csd-range-track-alt-border-radius: 3px;
  --csd-range-fill-alt-bg: #020617;
  --csd-range-handle-alt-bg: #ffffff;
  --csd-range-handle-alt-border: 2px solid #e2e8f0;
  --csd-range-input-group-gap: 10px;
  --csd-range-input-group-margin-top: 10px;
  --csd-range-input-separator-color: #808080;
  --csd-range-icon-color: #475569;
  --csd-range-icon-font-size: 1.5rem;
  --csd-range-icon-margin: 5px 0;
  --csd-range-icon-margin-sides: 1rem;
}

.csd-range-wrapper {
  width: var(--csd-range-width);
  padding: var(--csd-range-padding);
}
.csd-range-wrapper .csd-range-container {
  position: relative;
  height: var(--csd-range-track-alt-height);
  margin: var(--csd-range-container-margin);
  cursor: pointer;
  user-select: none;
}
.csd-range-wrapper .csd-range-track {
  position: absolute;
  width: 100%;
  height: var(--csd-range-track-alt-height);
  background-color: var(--csd-range-track-alt-bg);
  border-radius: var(--csd-range-track-alt-border-radius);
}
.csd-range-wrapper .csd-range-fill {
  position: absolute;
  height: var(--csd-range-track-alt-height);
  background-color: var(--csd-range-fill-alt-bg);
  border-radius: var(--csd-range-track-alt-border-radius);
}
.csd-range-wrapper .csd-range-handle {
  position: absolute;
  top: 50%;
  width: var(--csd-range-thumb-size);
  height: var(--csd-range-thumb-size);
  background: var(--csd-range-handle-alt-bg);
  border: var(--csd-range-handle-alt-border);
  border-radius: var(--csd-range-thumb-border-radius);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 1;
}
.csd-range-wrapper .csd-range-input-group {
  display: flex;
  align-items: center;
  gap: var(--csd-range-input-group-gap);
  margin-top: var(--csd-range-input-group-margin-top);
}
.csd-range-wrapper .csd-range-input-group .csd-range-input-separator {
  color: var(--csd-range-input-separator-color);
  font-weight: 500;
}
.csd-range-wrapper .csd-range-input {
  text-align: center;
  box-shadow: none;
}
.csd-range-wrapper .csd-range-input::-webkit-inner-spin-button, .csd-range-wrapper .csd-range-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.csd-range-wrapper:has(.range-icon) {
  display: inline-flex;
  align-items: center;
}
.csd-range-wrapper:has(.range-icon) .csd-range-container {
  flex: 1;
}
.csd-range-wrapper:has(.range-icon) .range-icon {
  color: var(--csd-range-icon-color);
  font-size: var(--csd-range-icon-font-size);
  margin: var(--csd-range-icon-margin);
}
.csd-range-wrapper:has(.range-icon) .range-icon.down {
  margin-right: var(--csd-range-icon-margin-sides);
}
@media (max-width: 768px) {
  .csd-range-wrapper:has(.range-icon) .range-icon.down {
    margin-right: calc(var(--csd-range-icon-margin-sides) / 2);
  }
}
.csd-range-wrapper:has(.range-icon) .range-icon.up {
  margin-left: var(--csd-range-icon-margin-sides);
}
@media (max-width: 768px) {
  .csd-range-wrapper:has(.range-icon) .range-icon.up {
    margin-left: calc(var(--csd-range-icon-margin-sides) / 2);
  }
}

/* Reorder Component */
:root {
  /* Base Variables */
  --csd-reorder-width: 100%;
  /* List Variables */
  --csd-reorder-list-style: none;
  --csd-reorder-list-padding: 0;
  --csd-reorder-list-margin: 0;
  /* Item Variables */
  --csd-reorder-item-display: flex;
  --csd-reorder-item-align: center;
  --csd-reorder-item-padding: 1rem;
  --csd-reorder-item-bg: var(--bg-light);
  --csd-reorder-item-border: 1px solid var(--bc-card);
  --csd-reorder-item-margin-bottom: 0.5rem;
  --csd-reorder-item-border-radius: var(--br-field);
  --csd-reorder-item-cursor: move;
  --csd-reorder-item-user-select: none;
  --csd-reorder-item-transition: var(--transition);
  /* Item States */
  --csd-reorder-item-dragging-opacity: 0.5;
  --csd-reorder-item-dragging-bg: var(--bg-highlight);
  --csd-reorder-item-drag-over-border: var(--accent-color);
  /* Handle Variables */
  --csd-reorder-handle-color: var(--text-color-secondary);
  --csd-reorder-handle-margin: 0 1rem 0 0;
  --csd-reorder-handle-cursor: grab;
  --csd-reorder-handle-active-cursor: grabbing;
  /* Content Variables */
  --csd-reorder-content-flex: 1;
  --csd-reorder-content-gap: 1rem;
  /* Actions Variables */
  --csd-reorder-actions-gap: 0.5rem;
  /* Grid Layout Variables */
  --csd-reorder-grid-columns: repeat(auto-fill, minmax(200px, 1fr));
  --csd-reorder-grid-gap: 1rem;
  /* Compact Variables */
  --csd-reorder-compact-padding: 0.5rem;
  --csd-reorder-compact-margin: 0.25rem;
  --csd-reorder-compact-handle-margin: 0 0.5rem 0 0;
  /* Nested List Variables */
  --csd-reorder-nested-padding-left: 2rem;
  --csd-reorder-nested-margin-top: 0.5rem;
  --csd-reorder-nested-bg: var(--bg-input);
  /* Placeholder Variables */
  --csd-reorder-placeholder-border: 2px dashed var(--bc-input);
  --csd-reorder-placeholder-bg: var(--bg-highlight);
  --csd-reorder-placeholder-height: 60px;
  --csd-reorder-placeholder-margin: 0 0 0.5rem 0;
  /* Group Variables */
  --csd-reorder-group-bg: var(--bg-light);
  --csd-reorder-group-border: 1px solid var(--bc-card);
  --csd-reorder-group-border-radius: var(--br-card);
  --csd-reorder-group-padding: 1rem;
  --csd-reorder-group-gap: 0.5rem;
  /* Group Header Variables */
  --csd-reorder-group-header-padding: 0.75rem 1rem;
  --csd-reorder-group-header-font-size: 0.875rem;
  --csd-reorder-group-header-font-weight: 600;
  --csd-reorder-group-header-color: var(--text-muted);
  --csd-reorder-group-header-bg: var(--bg-highlight);
  --csd-reorder-group-header-text-transform: uppercase;
  --csd-reorder-group-header-letter-spacing: 0.5px;
  --csd-reorder-group-header-border-radius: 1rem;
  --csd-reorder-group-header-margin: 0 0 0.5rem 0;
}

.csd-reorder {
  width: var(--csd-reorder-width);
}
.csd-reorder .reorder-list {
  list-style: var(--csd-reorder-list-style);
  padding: var(--csd-reorder-list-padding);
  margin: var(--csd-reorder-list-margin);
}
.csd-reorder .reorder-list .reorder-item {
  display: var(--csd-reorder-item-display);
  align-items: var(--csd-reorder-item-align);
  padding: var(--csd-reorder-item-padding);
  background-color: var(--csd-reorder-item-bg);
  border: var(--csd-reorder-item-border);
  margin-bottom: var(--csd-reorder-item-margin-bottom);
  border-radius: var(--csd-reorder-item-border-radius);
  cursor: var(--csd-reorder-item-cursor);
  user-select: var(--csd-reorder-item-user-select);
  transition: var(--csd-reorder-item-transition);
}
.csd-reorder .reorder-list .reorder-item:last-child {
  margin-bottom: 0;
}
.csd-reorder .reorder-list .reorder-item.dragging {
  opacity: var(--csd-reorder-item-dragging-opacity);
  background-color: var(--csd-reorder-item-dragging-bg);
}
.csd-reorder .reorder-list .reorder-item.drag-over {
  border-color: var(--csd-reorder-item-drag-over-border);
}
.csd-reorder .reorder-list .reorder-item .handle {
  color: var(--csd-reorder-handle-color);
  margin: var(--csd-reorder-handle-margin);
  cursor: var(--csd-reorder-handle-cursor);
}
.csd-reorder .reorder-list .reorder-item .handle:active {
  cursor: var(--csd-reorder-handle-active-cursor);
}
.csd-reorder .reorder-list .reorder-item .content {
  flex: var(--csd-reorder-content-flex);
  display: var(--csd-reorder-item-display);
  align-items: var(--csd-reorder-item-align);
  gap: var(--csd-reorder-content-gap);
}
.csd-reorder .reorder-list .reorder-item .actions {
  display: var(--csd-reorder-item-display);
  align-items: var(--csd-reorder-item-align);
  gap: var(--csd-reorder-actions-gap);
}
.csd-reorder.grid .reorder-list {
  display: grid;
  grid-template-columns: var(--csd-reorder-grid-columns);
  gap: var(--csd-reorder-grid-gap);
}
.csd-reorder.grid .reorder-list .reorder-item {
  margin: 0;
  flex-direction: column;
  text-align: center;
}
.csd-reorder.grid .reorder-list .reorder-item .handle {
  margin: 0 0 0.5rem 0;
}
.csd-reorder.grid .reorder-list .reorder-item .content {
  flex-direction: column;
}
.csd-reorder.compact .reorder-item {
  padding: var(--csd-reorder-compact-padding);
  margin-bottom: var(--csd-reorder-compact-margin);
}
.csd-reorder.compact .reorder-item .handle {
  margin: var(--csd-reorder-compact-handle-margin);
}
.csd-reorder .nested-list {
  width: var(--csd-reorder-width);
  padding-left: var(--csd-reorder-nested-padding-left);
  margin-top: var(--csd-reorder-nested-margin-top);
}
.csd-reorder .nested-list .reorder-item {
  background-color: var(--csd-reorder-nested-bg);
}
.csd-reorder .placeholder {
  border: var(--csd-reorder-placeholder-border);
  background-color: var(--csd-reorder-placeholder-bg);
  height: var(--csd-reorder-placeholder-height);
  margin: var(--csd-reorder-placeholder-margin);
  border-radius: var(--csd-reorder-item-border-radius);
}

/* Reorder Group Component */
.csd-reorder-group {
  background-color: var(--csd-reorder-group-bg);
  border: var(--csd-reorder-group-border);
  border-radius: var(--csd-reorder-group-border-radius);
  overflow: hidden;
  padding: var(--csd-reorder-group-padding);
  display: var(--csd-reorder-item-display);
  flex-direction: column;
  gap: var(--csd-reorder-group-gap);
}
.csd-reorder-group.reordering .csd-item:not(.csd-reorder-chosen) {
  transition: transform 0.2s ease;
}
.csd-reorder-group .csd-reorder {
  margin: 0;
  padding: 0;
}
.csd-reorder-group .csd-reorder .csd-item {
  display: var(--csd-reorder-item-display);
  align-items: var(--csd-reorder-item-align);
  padding: var(--csd-reorder-item-padding);
  gap: var(--csd-reorder-content-gap);
  margin: 0;
  color: var(--text-color);
  background-color: var(--csd-reorder-item-bg);
  border-radius: var(--csd-reorder-item-border-radius);
  border: var(--csd-reorder-item-border);
  transition: var(--csd-reorder-item-transition);
}
.csd-reorder-group .csd-reorder .csd-item .handle {
  cursor: var(--csd-reorder-item-cursor);
  font-size: var(--csd-list-item-icon-size);
  color: var(--csd-list-item-icon-color);
  flex-shrink: 0;
}
.csd-reorder-group .csd-reorder .csd-item span {
  flex: var(--csd-reorder-content-flex);
}
.csd-reorder-group .csd-reorder .csd-item:hover {
  background-color: var(--csd-reorder-item-dragging-bg);
}
.csd-reorder-group .csd-group-item {
  display: var(--csd-reorder-item-display);
  flex-direction: column;
  gap: var(--csd-reorder-group-gap);
}
.csd-reorder-group .csd-group-item:last-child {
  border-bottom: none;
}
.csd-reorder-group .csd-group-item .csd-group-header {
  padding: var(--csd-reorder-group-header-padding);
  font-size: var(--csd-reorder-group-header-font-size);
  font-weight: var(--csd-reorder-group-header-font-weight);
  color: var(--csd-reorder-group-header-color);
  background-color: var(--csd-reorder-group-header-bg);
  text-transform: var(--csd-reorder-group-header-text-transform);
  letter-spacing: var(--csd-reorder-group-header-letter-spacing);
  border-radius: var(--csd-reorder-group-header-border-radius);
}
.csd-reorder-group .csd-group-item .csd-reorder .csd-item {
  padding-left: var(--csd-reorder-nested-padding-left);
}
.csd-reorder-group.reordering .csd-reorder:not(.csd-reorder-drag) .csd-item,
.csd-reorder-group .csd-group-item.reordering .csd-reorder:not(.csd-reorder-drag) .csd-item {
  transform: scale(1);
  transition: transform 0.2s ease;
}

/* Second Reorder Group Implementation */
.csd-reorder-group {
  background-color: var(--csd-reorder-group-bg);
  border: var(--csd-reorder-group-border);
  border-radius: var(--csd-reorder-group-border-radius);
  overflow: hidden;
  padding: var(--csd-reorder-group-padding);
  display: var(--csd-reorder-item-display);
  flex-direction: column;
  gap: var(--csd-reorder-group-gap);
}
.csd-reorder-group .csd-group-item {
  margin: 0;
  padding: 0;
}
.csd-reorder-group .csd-group-item .csd-group-header {
  padding: var(--csd-reorder-group-header-padding);
  font-size: var(--csd-reorder-group-header-font-size);
  font-weight: var(--csd-reorder-group-header-font-weight);
  color: var(--csd-reorder-group-header-color);
  background-color: var(--csd-reorder-group-header-bg);
  text-transform: var(--csd-reorder-group-header-text-transform);
  letter-spacing: var(--csd-reorder-group-header-letter-spacing);
  border-radius: var(--csd-reorder-item-border-radius);
  margin: var(--csd-reorder-group-header-margin);
}
.csd-reorder-group .csd-reorder {
  margin: 0;
  padding: 0;
  cursor: default;
}
.csd-reorder-group .csd-reorder .csd-item {
  display: var(--csd-reorder-item-display);
  align-items: var(--csd-reorder-item-align);
  padding: var(--csd-reorder-compact-padding);
  gap: var(--csd-reorder-content-gap);
  margin: 0;
  color: var(--text-color);
  background-color: var(--csd-reorder-item-bg);
  border-radius: var(--csd-reorder-item-border-radius);
  border: var(--csd-reorder-item-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.csd-reorder-group .csd-reorder .csd-item .handle {
  cursor: var(--csd-reorder-item-cursor);
  font-size: var(--csd-list-item-icon-size);
  color: var(--csd-list-item-icon-color);
  flex-shrink: 0;
  display: var(--csd-reorder-item-display);
  align-items: var(--csd-reorder-item-align);
}
.csd-reorder-group .csd-reorder .csd-item span {
  flex: var(--csd-reorder-content-flex);
}
.csd-reorder-group .csd-reorder .csd-item:hover {
  background-color: var(--csd-reorder-item-dragging-bg);
}
.csd-reorder-group .csd-reorder.csd-reorder-drag .csd-item {
  box-shadow: var(--shadow-lg);
  background-color: var(--csd-reorder-item-dragging-bg);
  border-color: var(--text-color);
  opacity: var(--csd-reorder-item-dragging-opacity);
}
.csd-reorder-group.reordering .csd-reorder:not(.csd-reorder-drag) .csd-item,
.csd-reorder-group .csd-group-item.reordering .csd-reorder:not(.csd-reorder-drag) .csd-item {
  transform: scale(1);
  transition: transform 0.2s ease;
}

:root {
  --csd-searchbar-width: 100%;
  --csd-searchbar-padding-right: calc(var(--px-input) * 2 + 20px);
  --csd-searchbar-padding-right-clear: calc(var(--px-input) * 3 + 40px);
  --csd-searchbar-icon-size: 16px;
  --csd-searchbar-icon-color: var(--text-color-secondary);
  --csd-searchbar-icon-position: var(--px-input);
  --csd-searchbar-icon-hover-color: var(--text-color);
  --csd-clearbutton-padding: calc(var(--py-input) * 0.75);
  --csd-clearbutton-position: calc(var(--px-input) * 2 + 20px);
  --csd-clearbutton-icon-size: 16px;
  --csd-clearbutton-icon-color: var(--text-color-secondary);
  --csd-clearbutton-icon-hover-color: var(--text-color);
  --csd-filter-button-padding: 4px 8px;
  --csd-filter-button-position: calc(var(--px-input) * 2 + 20px);
  --csd-filter-button-color: var(--text-color-secondary);
  --csd-filter-button-hover-color: var(--text-color);
  --csd-filter-button-active-color: var(--accent-color);
  --csd-searchbar-padding-right-filter: calc(var(--px-input) * 4 + 60px);
  --csd-searchbar-disabled-color: var(--text-color-disabled);
  --csd-searchbar-disabled-cursor: not-allowed;
  --csd-searchbar-pr: var(--pr-searchbar, calc(var(--px-input) * 2 + 20px));
  --csd-searchbar-pr-clearbutton: var(--pr-clearbutton, calc(var(--px-input) * 3 + 40px));
  --csd-searchbar-position-icon: var(--position-icon, var(--px-input));
  --csd-searchbar-contrast-color: var(--contrast-color, var(--text-color));
}

.csd-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--csd-searchbar-width);
}
.csd-searchbar .csd-searchbar-input {
  width: var(--csd-searchbar-width);
  padding-right: var(--csd-searchbar-pr, var(--csd-searchbar-padding-right));
}
.csd-searchbar .csd-searchbar-input:not(.csd-select-editable) {
  box-shadow: none !important;
}
.csd-searchbar .csd-searchbar-input:focus:not(:placeholder-shown) + .csd-clearbutton {
  display: flex;
}
.csd-searchbar .csd-searchbar-input.clearbutton {
  width: var(--csd-searchbar-width);
  padding-right: var(--csd-searchbar-pr-clearbutton, var(--csd-searchbar-padding-right-clear));
}
@media (max-width: 768px) {
  .csd-searchbar .csd-searchbar-input.clearbutton {
    padding-right: calc(var(--csd-searchbar-padding-right-clear) / 2);
  }
}
.csd-searchbar .csd-clearbutton {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--csd-clearbutton-padding);
  position: absolute;
  right: var(--csd-clearbutton-position);
  cursor: pointer;
  transition: var(--transition);
}
@media (max-width: 768px) {
  .csd-searchbar .csd-clearbutton {
    padding-right: calc(var(--csd-clearbutton-padding) / 2);
    right: calc(var(--csd-clearbutton-position) / 2);
  }
}
.csd-searchbar .csd-clearbutton:hover {
  display: flex;
}
.csd-searchbar .csd-clearbutton:hover ion-icon {
  color: var(--csd-searchbar-contrast-color, var(--csd-clearbutton-icon-hover-color)) !important;
}
.csd-searchbar .csd-clearbutton ion-icon {
  font-size: var(--csd-clearbutton-icon-size);
  color: var(--csd-searchbar-icon-color) !important;
  transition: var(--transition);
}
.csd-searchbar .csd-searchbar-icon {
  position: absolute;
  right: var(--csd-searchbar-position-icon, var(--csd-searchbar-icon-position)) !important;
  font-size: var(--csd-searchbar-icon-size);
  color: var(--csd-searchbar-icon-color) !important;
}
@media (max-width: 768px) {
  .csd-searchbar .csd-searchbar-icon {
    right: calc(var(--csd-searchbar-position-icon) / 2);
    font-size: calc(var(--csd-searchbar-icon-size) / 1.2);
  }
}
.csd-searchbar.with-filter .csd-searchbar-input {
  padding-right: var(--csd-searchbar-padding-right-filter);
}
.csd-searchbar.with-filter .csd-filter-button {
  position: absolute;
  right: var(--csd-filter-button-position);
  padding: var(--csd-filter-button-padding);
  background: none;
  border: none;
  color: var(--csd-filter-button-color);
  cursor: pointer;
  transition: var(--transition);
}
.csd-searchbar.with-filter .csd-filter-button:hover {
  color: var(--csd-filter-button-hover-color);
}
.csd-searchbar.with-filter .csd-filter-button.active {
  color: var(--csd-filter-button-active-color);
}
.csd-searchbar.disabled .csd-searchbar-input,
.csd-searchbar.disabled .csd-clearbutton,
.csd-searchbar.disabled .csd-filter-button {
  cursor: var(--csd-searchbar-disabled-cursor);
}
.csd-searchbar.disabled .csd-searchbar-icon,
.csd-searchbar.disabled .csd-clearbutton ion-icon {
  color: var(--csd-searchbar-disabled-color) !important;
}

:root {
  --csd-segment-display: flex;
  --csd-segment-width: 100%;
  --csd-segment-header-bg: var(--bg-light);
  --csd-segment-header-border: 1px solid var(--bc-card);
  --csd-segment-header-border-radius: var(--br-field);
  --csd-segment-header-padding: 4px;
  --csd-segment-header-gap: 4px;
  --csd-segment-button-padding: 8px 16px;
  --csd-segment-button-color: var(--text-color-secondary);
  --csd-segment-button-font-size: 0.875rem;
  --csd-segment-button-border-radius: calc(var(--br-field) - 2px);
  --csd-segment-button-gap: 8px;
  --csd-segment-button-hover-color: var(--text-color);
  --csd-segment-button-hover-bg: var(--bg-highlight);
  --csd-segment-button-active-color: var(--text-color);
  --csd-segment-button-active-bg: var(--bg-input);
  --csd-segment-button-active-shadow: var(--shadow-sm);
}

.csd-segment {
  display: var(--csd-segment-display);
  width: var(--csd-segment-width);
}
.csd-segment .segment-header {
  display: var(--csd-segment-display);
  background-color: var(--csd-segment-header-bg);
  border: var(--csd-segment-header-border);
  border-radius: var(--csd-segment-header-border-radius);
  padding: var(--csd-segment-header-padding);
  gap: var(--csd-segment-header-gap);
}
.csd-segment .segment-header .segment-button {
  flex: 1;
  padding: var(--csd-segment-button-padding);
  background: none;
  border: none;
  color: var(--csd-segment-button-color);
  font-size: var(--csd-segment-button-font-size);
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--csd-segment-button-border-radius);
  display: var(--csd-segment-display);
  align-items: center;
  justify-content: center;
  gap: var(--csd-segment-button-gap);
}
.csd-segment .segment-header .segment-button:hover {
  color: var(--csd-segment-button-hover-color);
  background-color: var(--csd-segment-button-hover-bg);
}
.csd-segment .segment-header .segment-button.active {
  color: var(--csd-segment-button-active-color);
  background-color: var(--csd-segment-button-active-bg);
  box-shadow: var(--csd-segment-button-active-shadow);
}
.csd-segment .segment-header .segment-button ion-icon {
  font-size: 16px;
  color: inherit;
}
.csd-segment .segment-content {
  margin-top: 1rem;
}
.csd-segment .segment-content .segment-panel {
  display: none;
}
.csd-segment .segment-content .segment-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}
.csd-segment.primary .segment-button.active {
  background-color: var(--accent-color);
  color: white;
}
.csd-segment.outline .segment-header {
  background: none;
  border: none;
  padding: 0;
  gap: 8px;
}
.csd-segment.outline .segment-header .segment-button {
  border: 1px solid var(--bc-card);
}
.csd-segment.outline .segment-header .segment-button.active {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: none;
}
.csd-segment.sm .segment-header {
  padding: 2px;
}
.csd-segment.sm .segment-header .segment-button {
  padding: 4px 12px;
  font-size: 0.75rem;
}
.csd-segment.sm .segment-header .segment-button ion-icon {
  font-size: 14px;
}
.csd-segment.lg .segment-header {
  padding: 6px;
}
.csd-segment.lg .segment-header .segment-button {
  padding: 12px 24px;
  font-size: 1rem;
}
.csd-segment.lg .segment-header .segment-button ion-icon {
  font-size: 18px;
}
.csd-segment.vertical .segment-header {
  flex-direction: column;
}
.csd-segment.scrollable .segment-header {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.csd-segment.scrollable .segment-header::-webkit-scrollbar {
  display: none;
}
.csd-segment.scrollable .segment-header .segment-button {
  flex: 0 0 auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.csd-segment {
  position: relative;
  display: flex;
  background-color: var(--bg-highlight);
  border-radius: 0.5rem;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: fit-content;
  overflow-x: auto;
}
.csd-segment .csd-segment-button {
  position: relative;
  padding: 0.5rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  z-index: 2;
  transition: color 0.3s ease;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.csd-segment .csd-segment-button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background-color: #64748b;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.csd-segment .csd-segment-button.before-checked::after, .csd-segment .csd-segment-button.active::after {
  opacity: 0;
}
.csd-segment .csd-segment-button:last-of-type::after {
  background-color: transparent;
}
.csd-segment .csd-segment-button ion-icon {
  margin-right: 0.25rem;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  --ionicon-stroke-width: 48px;
}
.csd-segment .csd-segment-button.active {
  color: var(--text-color);
}
.csd-segment .csd-segment-button.active ion-icon {
  --ionicon-stroke-width: 32px;
}
.csd-segment .csd-segment-button.active::after {
  opacity: 0;
}
.csd-segment .csd-segment-button:disabled {
  cursor: not-allowed;
}
.csd-segment .csd-segment-indicator {
  position: absolute;
  height: calc(100% - 4px);
  background-color: var(--bg-light);
  border-radius: 0.5rem;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  top: 2px;
}
.csd-segment.disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.csd-segment.disabled .csd-segment-button {
  cursor: not-allowed;
  color: var(--text-color-disabled);
}

.csd-segment-contents {
  margin-top: 1rem;
  position: relative;
}
.csd-segment-contents .csd-segment-content {
  display: none;
}
.csd-segment-contents .csd-segment-content.active {
  display: block;
}

/* Custom Select Component */
:root {
  --csd-select-position: relative;
  --csd-select-width: 100%;
  --csd-select-disabled-opacity: 0.6;
  --csd-select-wrapper-position: relative;
  --csd-select-wrapper-width: 100%;
  --csd-select-padding: 4px 8px;
  --csd-select-margin-bottom-option: 4px;
  --csd-select-padding-y: 4px;
  --csd-select-gap-float: 4px;
  --csd-select-display-padding: var(--p-select, var(--csd-select-padding));
  --csd-select-display-justify: space-between;
  --csd-select-display-align: center;
  --csd-select-display-box-shadow: var(--shadow);
  --csd-select-display-border-radius: var(--br-input);
  --csd-select-label-max-width: 90%;
  --csd-select-label-with-clear-max-width: 80%;
  --csd-select-trigger-width: 100%;
  --csd-select-trigger-min-height: var(--height-field);
  --csd-select-trigger-padding: var(--py-input) var(--px-input);
  --csd-select-trigger-bg: var(--bg-input);
  --csd-select-trigger-border: 1px solid var(--bc-input);
  --csd-select-trigger-border-radius: var(--br-field);
  --csd-select-trigger-transition: var(--transition);
  --csd-select-trigger-gap: var(--gap-field);
  --csd-select-trigger-hover-border: var(--accent-color);
  --csd-select-trigger-focus-border: var(--accent-color);
  --csd-select-trigger-focus-shadow: 0 0 0 2px var(--secondary-color);
  --csd-select-trigger-disabled-bg: var(--bg-input-disabled);
  --csd-custom-select-bg: var(--bg-select, var(--bg-input));
  --csd-custom-select-color: var(--text-color);
  --csd-custom-select-border: 1px solid var(--bc-input);
  --csd-custom-select-border-radius: var(--br-input);
  --csd-custom-select-focus-border: var(--text-color);
  --csd-select-clear-position: absolute;
  --csd-select-clear-display: none;
  --csd-select-clear-top: calc(50% + var(--py-input) / 2);
  --csd-select-clear-transform: translateY(-50%);
  --csd-select-clear-right: calc(var(--px-input) * 1.5);
  --csd-select-clear-with-arrow-right: calc(var(--px-input) * 2 + 16px);
  --csd-select-clear-opacity: 0.6;
  --csd-select-clear-hover-opacity: 1;
  --csd-select-clear-transition: var(--transition);
  --csd-select-arrow-position: absolute;
  --csd-select-arrow-top: 50%;
  --csd-select-arrow-right: var(--px-input);
  --csd-select-arrow-transform: translateY(-50%);
  --csd-select-arrow-transition: var(--transition);
  --csd-select-arrow-open-transform: translateY(-50%) rotate(180deg);
  --csd-select-dropdown-position: absolute;
  --csd-select-dropdown-top: calc(100% + 4px);
  --csd-select-dropdown-left: 0;
  --csd-select-dropdown-width: 100%;
  --csd-select-dropdown-bg: var(--bg-input);
  --csd-select-dropdown-border: 1px solid var(--bc-input);
  --csd-select-dropdown-border-radius: var(--br-field);
  --csd-select-dropdown-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --csd-select-dropdown-z-index: 1000;
  --csd-select-dropdown-max-height: 200px;
  --csd-select-dropdown-padding: var(--py-input);
  --csd-select-options-position: absolute;
  --csd-select-options-top: calc(100% + var(--csd-select-gap-float));
  --csd-select-options-left: 0;
  --csd-select-options-width: 100%;
  --csd-select-options-bg: var(--bg-select, var(--bg-input));
  --csd-select-options-border: 1px solid var(--bc-input);
  --csd-select-options-border-radius: var(--br-input);
  --csd-select-options-padding: var(--py-input);
  --csd-select-options-max-height: 200px;
  --csd-select-options-shadow: var(--shadow);
  --csd-select-options-shadow-above: var(--shadow-invert, var(--shadow));
  --csd-select-compact-top-radius: var(--br-input) var(--br-input) 0 0;
  --csd-select-compact-bottom-radius: 0 0 var(--br-input) var(--br-input);
  --csd-select-compact-above-bottom: calc(100% + var(--csd-select-gap-float));
  --csd-select-option-padding: var(--p-input, 8px var(--px-input));
  --csd-select-option-transition: all .3s ease;
  --csd-select-option-border-radius: 8px;
  --csd-select-option-font-weight: 300;
  --csd-select-option-selected-bg: rgba(59, 130, 246, 0.12);
  --csd-select-option-selected-color: var(--accent-color-hover);
  --csd-select-option-selected-font-weight: 400;
  --csd-select-option-hover-bg: rgba(59, 130, 246, 0.12);
  --csd-select-option-hover-color: var(--accent-color-hover);
  --csd-select-option-hover-font-weight: 400;
  --csd-select-option-focus-bg: #f1f5f9;
  --csd-select-option-disabled-opacity: 0.6;
  --csd-select-option-disabled-bg: var(--bg-input-disabled);
  --csd-select-dropdown-option-padding: 8px var(--px-input);
  --csd-select-dropdown-option-hover-bg: var(--secondary-color);
  --csd-select-dropdown-option-selected-bg: var(--accent-color);
  --csd-select-dropdown-option-selected-color: white;
  --csd-select-checkmark-padding-left: 1rem;
  --csd-select-checkmark-icon-color: var(--accent-color);
  --csd-select-checkmark-icon-size: 16px;
  --csd-select-checkmark-icon-margin: 4px;
  --csd-select-checkmark-icon-top: 2px;
  --csd-select-editable-padding: var(--p-select, var(--csd-select-padding));
  --csd-select-editable-border: none;
  --csd-select-editable-font-weight: normal;
  --csd-select-editable-placeholder-max-width: 90%;
  --csd-select-no-results-padding: var(--p-input);
  --csd-select-searchbar-padding: var(--py-input);
  --csd-select-searchbar-position: relative;
  --csd-select-searchbar-icon-size: 16px;
  --csd-select-searchbar-icon-right: 16px;
  --csd-select-searchbar-checkbox-gap: 5px;
  --csd-select-searchbar-checkbox-size: 18px;
  --csd-select-searchbar-checkbox-border: 1px solid var(--bc-input);
  --csd-select-searchbar-checkbox-radius: var(--br-checkbox);
  --csd-select-searchbar-checkbox-check-bg: var(--text-color);
  --csd-select-searchbar-checkbox-check-color: var(--csd-color-white);
  --csd-select-chips-max-width: 90%;
  --csd-select-chip-gap: 2px;
  --csd-select-chip-padding: 2px 4px;
  --csd-select-chip-bg: #f1f5f9;
  --csd-select-chip-radius: 8px;
  --csd-select-chip-margin: 0 4px 0 0;
  --csd-select-group-gap: 4px;
  --csd-select-group-options-padding: var(--p-select-group-options);
  --csd-select-group-label-padding: var(--p-select-group-label);
  --csd-select-group-label-font-weight: bold;
}

.csd-select {
  position: var(--csd-select-position);
}
.csd-select.disabled {
  opacity: var(--csd-select-disabled-opacity);
  pointer-events: none;
}

.csd-select-wrapper {
  position: var(--csd-select-wrapper-position);
  --p-input: var(--csd-select-padding);
  --mb-option: var(--csd-select-margin-bottom-option);
  --py-input: var(--csd-select-padding-y);
  --gap-float: var(--csd-select-gap-float);
  width: var(--csd-select-wrapper-width);
}

.csd-select-trigger {
  width: var(--csd-select-trigger-width);
  min-height: var(--csd-select-trigger-min-height);
  padding: var(--csd-select-trigger-padding);
  background-color: var(--csd-select-trigger-bg);
  border: var(--csd-select-trigger-border);
  border-radius: var(--csd-select-trigger-border-radius);
  cursor: pointer;
  transition: var(--csd-select-trigger-transition);
  display: flex;
  align-items: center;
  gap: var(--csd-select-trigger-gap);
}
.csd-select-trigger:hover {
  border-color: var(--csd-select-trigger-hover-border);
}
.csd-select-trigger:focus {
  outline: none;
  border-color: var(--csd-select-trigger-focus-border);
  box-shadow: var(--csd-select-trigger-focus-shadow);
}
.csd-select-trigger.disabled {
  background-color: var(--csd-select-trigger-disabled-bg);
  cursor: not-allowed;
}

.csd-custom-select {
  background-color: var(--csd-custom-select-bg) !important;
  color: var(--csd-custom-select-color) !important;
  border: var(--csd-custom-select-border) !important;
  border-radius: var(--csd-custom-select-border-radius) !important;
  cursor: pointer;
  position: relative;
}
.csd-custom-select:has(+ .csd-select-options.visible).csd-select-compact {
  border-radius: var(--csd-select-compact-top-radius) !important;
  border-bottom: none !important;
}
.csd-custom-select:has(+ .csd-select-options.visible.position-above).csd-select-compact {
  border-radius: var(--csd-select-compact-bottom-radius) !important;
  border-bottom: 1px solid var(--bc-input) !important;
  border-top: none !important;
}
.csd-custom-select:has(.csd-select-clearbutton.visible) .csd-label-select {
  max-width: var(--csd-select-label-with-clear-max-width);
}
.csd-custom-select:has(.csd-select-editable:focus), .csd-custom-select:has(.csd-select-editable:focus) + .csd-select-options.csd-select-compact {
  border-color: var(--csd-custom-select-focus-border) !important;
}

.csd-select-wrapper:has(.csd-select-options.visible.csd-select-compact:not(.position-above)) .csd-select-display,
.csd-select-wrapper:has(.csd-select-options.visible.csd-select-compact:not(.position-above)) .csd-select-editable {
  box-shadow: none;
}

.csd-select-display {
  padding: var(--csd-select-display-padding) !important;
  display: flex;
  justify-content: var(--csd-select-display-justify);
  align-items: var(--csd-select-display-align);
  border-radius: var(--csd-select-display-border-radius) !important;
}
.csd-select-display .csd-label-select {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: var(--csd-select-label-max-width);
}
.csd-select-display .csd-select-chips {
  display: block;
  max-width: var(--csd-select-chips-max-width);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csd-select-clearbutton {
  position: var(--csd-select-clear-position);
  display: var(--csd-select-clear-display);
  top: var(--csd-select-clear-top);
  transform: var(--csd-select-clear-transform);
  right: var(--csd-select-clear-right);
  cursor: pointer;
  opacity: var(--csd-select-clear-opacity);
  transition: var(--csd-select-clear-transition);
}
.csd-select-clearbutton:hover {
  opacity: var(--csd-select-clear-hover-opacity);
}
.csd-select-clearbutton.visible {
  display: block;
}

.csd-select-arrow {
  position: var(--csd-select-arrow-position);
  top: var(--csd-select-arrow-top);
  transform: var(--csd-select-arrow-transform);
  right: var(--csd-select-arrow-right);
  transition: var(--csd-select-arrow-transition);
}

.csd-select.open .csd-select-arrow {
  transform: var(--csd-select-arrow-open-transform);
}

.csd-select-dropdown {
  position: var(--csd-select-dropdown-position);
  top: var(--csd-select-dropdown-top);
  left: var(--csd-select-dropdown-left);
  width: var(--csd-select-dropdown-width);
  background-color: var(--csd-select-dropdown-bg);
  border: var(--csd-select-dropdown-border);
  border-radius: var(--csd-select-dropdown-border-radius);
  box-shadow: var(--csd-select-dropdown-box-shadow);
  z-index: var(--csd-select-dropdown-z-index);
  display: none;
  max-height: var(--csd-select-dropdown-max-height);
  overflow-y: auto;
}
.csd-select-dropdown.show {
  display: block;
}
.csd-select-dropdown .csd-select-option {
  padding: var(--csd-select-dropdown-option-padding);
  cursor: pointer;
  transition: var(--csd-select-trigger-transition);
}
.csd-select-dropdown .csd-select-option:hover {
  background-color: var(--csd-select-dropdown-option-hover-bg);
}
.csd-select-dropdown .csd-select-option.selected {
  background-color: var(--csd-select-dropdown-option-selected-bg);
  color: var(--csd-select-dropdown-option-selected-color);
}
.csd-select-dropdown .csd-select-option.disabled {
  opacity: var(--csd-select-option-disabled-opacity);
  cursor: not-allowed;
  background-color: var(--csd-select-option-disabled-bg);
}

.csd-select-options {
  display: none;
  position: var(--csd-select-options-position);
  top: var(--csd-select-options-top);
  left: var(--csd-select-options-left);
  width: var(--csd-select-options-width);
  background-color: var(--csd-select-options-bg) !important;
  border: var(--csd-select-options-border) !important;
  border-radius: var(--csd-select-options-border-radius) !important;
  padding: var(--csd-select-options-padding) !important;
  z-index: var(--csd-select-dropdown-z-index);
  max-height: var(--csd-select-options-max-height);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-color-secondary) var(--bg-select);
  --br-option: var(--csd-select-option-border-radius);
}
.csd-select-options::-webkit-scrollbar {
  width: 8px;
}
.csd-select-options::-webkit-scrollbar-thumb {
  background-color: var(--text-color-secondary);
  border-radius: 4px;
  border: 2px solid var(--bg-select);
}
.csd-select-options::-webkit-scrollbar-track {
  background-color: var(--bg-select);
}
.csd-select-options.csd-select-compact:not(.position-above) {
  padding-top: 0 !important;
}
.csd-select-options.visible {
  display: flex;
  flex-direction: column;
  gap: var(--mb-option) !important;
}
.csd-select-options.visible.csd-select-compact {
  border-top: none !important;
  top: 100%;
  border-radius: 0 0 var(--br-input) var(--br-input) !important;
}
.csd-select-options.visible.csd-select-compact.position-above {
  top: auto;
  bottom: 100%;
  border-radius: var(--br-input) var(--br-input) 0 0 !important;
  border-top: 1px solid var(--bc-input) !important;
  border-bottom: none !important;
  box-shadow: var(--csd-select-options-shadow-above) !important;
}
.csd-select-options.visible.position-above {
  top: auto;
  bottom: var(--csd-select-compact-above-bottom);
}
.csd-select-options .csd-no-results {
  width: fit-content;
  margin: auto;
  padding: var(--csd-select-no-results-padding);
  text-align: center;
}

.csd-select-option {
  padding: var(--csd-select-option-padding) !important;
  cursor: pointer;
  transition: var(--csd-select-option-transition);
  border-radius: var(--csd-select-option-border-radius) !important;
  font-weight: var(--csd-select-option-font-weight) !important;
}
.csd-select-option.selected {
  background-color: var(--csd-select-option-selected-bg) !important;
  color: var(--csd-select-option-selected-color) !important;
  transition: var(--csd-select-option-transition);
  font-weight: var(--csd-select-option-selected-font-weight) !important;
}
.csd-select-option:hover {
  background-color: var(--csd-select-option-hover-bg) !important;
  color: var(--csd-select-option-hover-color) !important;
  transition: var(--csd-select-option-transition);
  font-weight: var(--csd-select-option-hover-font-weight) !important;
}
.csd-select-option.option-focus:not(.selected) {
  transition: var(--csd-select-option-transition);
  font-weight: var(--csd-select-option-selected-font-weight) !important;
  background-color: var(--csd-select-option-focus-bg) !important;
}
.csd-select-option:not(.selected) ion-icon {
  content-visibility: hidden;
}

.csd-select-checkmark .csd-select-option {
  padding-left: var(--csd-select-checkmark-padding-left);
}
.csd-select-checkmark .csd-select-option ion-icon {
  color: var(--csd-select-checkmark-icon-color) !important;
  font-size: var(--csd-select-checkmark-icon-size) !important;
  margin-right: var(--csd-select-checkmark-icon-margin);
  position: relative;
  top: var(--csd-select-checkmark-icon-top);
}

.csd-select-editable {
  border: var(--csd-select-editable-border) !important;
  font-weight: var(--csd-select-editable-font-weight);
  padding: var(--csd-select-editable-padding) !important;
  box-shadow: none;
}
.csd-select-editable:focus::placeholder {
  display: none;
}
.csd-select-editable::placeholder {
  max-width: var(--csd-select-editable-placeholder-max-width);
  font-weight: var(--csd-select-editable-font-weight);
}

/* Reset for the disabled state */
.csd-select-input:disabled {
  background-color: transparent !important;
  border: none !important;
  color: var(--text-color-secondary) !important;
}

.csd-select-searchbar {
  position: var(--csd-select-searchbar-position);
  padding: var(--csd-select-searchbar-padding);
}
.csd-select-searchbar input {
  box-shadow: none;
}
.csd-select-searchbar .csd-searchbar-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--csd-select-searchbar-icon-right);
  font-size: var(--csd-select-searchbar-icon-size);
}
.csd-select-searchbar:has(> .csd-select-searchbar-checkbox) {
  display: flex;
  align-items: center;
  gap: var(--csd-select-searchbar-checkbox-gap);
}
.csd-select-searchbar:has(> .csd-select-searchbar-checkbox) .csd-select-searchbar-checkbox {
  min-width: var(--csd-select-searchbar-checkbox-size);
  min-height: var(--csd-select-searchbar-checkbox-size);
  display: grid;
  place-content: center;
  border: var(--csd-select-searchbar-checkbox-border) !important;
  border-radius: var(--csd-select-searchbar-checkbox-radius);
}
.csd-select-searchbar:has(> .csd-select-searchbar-checkbox) .csd-select-searchbar-checkbox:has(> ion-icon[name=checkmark-outline]) {
  background-color: var(--csd-select-searchbar-checkbox-check-bg) !important;
}
.csd-select-searchbar:has(> .csd-select-searchbar-checkbox) .csd-select-searchbar-checkbox:has(> ion-icon[name=checkmark-outline]) ion-icon {
  color: var(--csd-select-searchbar-checkbox-check-color) !important;
}
.csd-select-searchbar:has(> .csd-select-searchbar-checkbox) ion-icon {
  font-size: var(--csd-select-searchbar-icon-size);
}

.csd-select-chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--csd-select-chip-gap);
  justify-content: space-between;
  padding: var(--csd-select-chip-padding);
  background: var(--csd-select-chip-bg);
  border-radius: var(--csd-select-chip-radius);
  margin-right: 4px;
}

.csd-select-group-options {
  display: flex;
  flex-direction: column;
  gap: var(--csd-select-group-gap);
}
.csd-select-group-options .csd-select-option {
  padding: var(--csd-select-group-options-padding) !important;
}

.csd-select-group-label {
  font-weight: var(--csd-select-group-label-font-weight);
  padding: var(--csd-select-group-label-padding) !important;
}

/* Sidebar Component */
:root {
  --csd-sidebar-width: 280px;
  --csd-sidebar-bg: var(--bg-light);
  --csd-sidebar-border: 1px solid var(--bc-input);
  --csd-sidebar-border-radius: var(--br-field, 0.25rem);
  --csd-sidebar-padding: 16px;
  --csd-sidebar-height: 100%;
  --csd-sidebar-overflow: auto;
  --csd-sidebar-transition: var(--transition, all 0.2s);
  --csd-sidebar-collapsed-width: 60px;
  --csd-sidebar-collapsed-padding: 16px 8px;
  --csd-sidebar-header-display: flex;
  --csd-sidebar-header-align: center;
  --csd-sidebar-header-gap: 12px;
  --csd-sidebar-header-padding: 1rem;
  --csd-sidebar-header-padding-bottom: 16px;
  --csd-sidebar-header-margin-bottom: 16px;
  --csd-sidebar-header-border-bottom: 1px solid var(--bc-input);
  --csd-sidebar-logo-width: 32px;
  --csd-sidebar-logo-height: 32px;
  --csd-sidebar-logo-flex-shrink: 0;
  --csd-sidebar-logo-object-fit: contain;
  --csd-sidebar-title-font-size: 1.25rem;
  --csd-sidebar-title-font-weight: 500;
  --csd-sidebar-title-color: var(--text-color);
  --csd-sidebar-title-white-space: nowrap;
  --csd-sidebar-title-overflow: hidden;
  --csd-sidebar-title-text-overflow: ellipsis;
}

.csd-sidebar {
  width: var(--csd-sidebar-width);
  background-color: var(--csd-sidebar-bg);
  border: var(--csd-sidebar-border);
  border-radius: var(--csd-sidebar-border-radius);
  padding: var(--csd-sidebar-padding);
  height: var(--csd-sidebar-height);
  overflow-y: var(--csd-sidebar-overflow);
  transition: var(--csd-sidebar-transition);
}
.csd-sidebar.collapsed {
  width: var(--csd-sidebar-collapsed-width);
  padding: var(--csd-sidebar-collapsed-padding);
}
.csd-sidebar.collapsed .csd-sidebar-header .sidebar-title {
  display: none;
}
.csd-sidebar.collapsed .csd-sidebar-content .sidebar-nav-item {
  padding: 8px;
  justify-content: center;
}
.csd-sidebar.collapsed .csd-sidebar-content .sidebar-nav-item .item-text,
.csd-sidebar.collapsed .csd-sidebar-content .sidebar-nav-item .item-arrow {
  display: none;
}
.csd-sidebar .csd-sidebar-header {
  display: var(--csd-sidebar-header-display);
  align-items: var(--csd-sidebar-header-align);
  gap: var(--csd-sidebar-header-gap);
  padding-bottom: var(--csd-sidebar-header-padding-bottom);
  margin-bottom: var(--csd-sidebar-header-margin-bottom);
  border-bottom: var(--csd-sidebar-header-border-bottom);
}
.csd-sidebar .csd-sidebar-header .sidebar-logo {
  width: var(--csd-sidebar-logo-width);
  height: var(--csd-sidebar-logo-height);
  flex-shrink: var(--csd-sidebar-logo-flex-shrink);
}
.csd-sidebar .csd-sidebar-header .sidebar-title {
  font-size: var(--csd-sidebar-title-font-size);
  font-weight: var(--csd-sidebar-title-font-weight);
  color: var(--csd-sidebar-title-color);
  white-space: var(--csd-sidebar-title-white-space);
  overflow: var(--csd-sidebar-title-overflow);
  text-overflow: var(--csd-sidebar-title-text-overflow);
}
.csd-sidebar .csd-sidebar-content {
  --csd-sidebar-content-padding: 0.75rem 0;
  --csd-sidebar-nav-group-margin-bottom: 16px;
  --csd-sidebar-group-title-font-size: 0.875rem;
  --csd-sidebar-group-title-font-weight: 500;
  --csd-sidebar-group-title-color: var(--text-color-secondary);
  --csd-sidebar-group-title-padding: 8px;
  --csd-sidebar-group-title-text-transform: uppercase;
  --csd-sidebar-nav-item-display: flex;
  --csd-sidebar-nav-item-align: center;
  --csd-sidebar-nav-item-gap: 12px;
  --csd-sidebar-nav-item-padding: 8px 12px;
  --csd-sidebar-nav-item-color: var(--text-color);
  --csd-sidebar-nav-item-text-decoration: none;
  --csd-sidebar-nav-item-border-radius: var(--br-field, 0.25rem);
  --csd-sidebar-nav-item-transition: var(--transition, all 0.2s);
  --csd-sidebar-nav-item-cursor: pointer;
  --csd-sidebar-nav-item-font-size: 0.875rem;
  --csd-sidebar-item-icon-width: 20px;
  --csd-sidebar-item-icon-height: 20px;
  --csd-sidebar-item-icon-flex-shrink: 0;
  --csd-sidebar-item-icon-font-size: 1.25rem;
  --csd-sidebar-item-icon-min-width: 1.25rem;
  --csd-sidebar-item-text-flex: 1;
  --csd-sidebar-item-text-white-space: nowrap;
  --csd-sidebar-item-text-overflow: hidden;
  --csd-sidebar-item-text-text-overflow: ellipsis;
  --csd-sidebar-item-arrow-width: 16px;
  --csd-sidebar-item-arrow-height: 16px;
  --csd-sidebar-item-arrow-transition: transform 0.2s;
  --csd-sidebar-item-arrow-expanded-transform: rotate(180deg);
  --csd-sidebar-item-arrow-margin-left: auto;
  --csd-sidebar-nav-item-hover-bg: var(--secondary-color, rgba(0, 0, 0, 0.04));
  --csd-sidebar-nav-item-hover-color: var(--text-color);
  --csd-sidebar-nav-item-active-bg: var(--accent-color);
  --csd-sidebar-nav-item-active-color: white;
  --csd-sidebar-subnav-padding-left: 44px;
  --csd-sidebar-subnav-margin-top: 4px;
  --csd-sidebar-subnav-display: none;
  --csd-sidebar-subnav-show-display: block;
  --csd-sidebar-subnav-item-padding: 6px 12px;
  --csd-sidebar-subnav-item-font-size: 0.9375rem;
  padding: var(--csd-sidebar-content-padding);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-group {
  margin-bottom: var(--csd-sidebar-nav-group-margin-bottom);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-group .group-title {
  font-size: var(--csd-sidebar-group-title-font-size);
  font-weight: var(--csd-sidebar-group-title-font-weight);
  color: var(--csd-sidebar-group-title-color);
  padding: var(--csd-sidebar-group-title-padding);
  text-transform: var(--csd-sidebar-group-title-text-transform);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item {
  display: var(--csd-sidebar-nav-item-display);
  align-items: var(--csd-sidebar-nav-item-align);
  gap: var(--csd-sidebar-nav-item-gap);
  padding: var(--csd-sidebar-nav-item-padding);
  color: var(--csd-sidebar-nav-item-color);
  text-decoration: var(--csd-sidebar-nav-item-text-decoration);
  border-radius: var(--csd-sidebar-nav-item-border-radius);
  transition: var(--csd-sidebar-nav-item-transition);
  cursor: var(--csd-sidebar-nav-item-cursor);
  font-size: var(--csd-sidebar-nav-item-font-size);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item .item-icon {
  width: var(--csd-sidebar-item-icon-width);
  height: var(--csd-sidebar-item-icon-height);
  flex-shrink: var(--csd-sidebar-item-icon-flex-shrink);
  font-size: var(--csd-sidebar-item-icon-font-size);
  min-width: var(--csd-sidebar-item-icon-min-width);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item .item-text {
  flex: var(--csd-sidebar-item-text-flex);
  white-space: var(--csd-sidebar-item-text-white-space);
  overflow: var(--csd-sidebar-item-text-overflow);
  text-overflow: var(--csd-sidebar-item-text-text-overflow);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item .item-arrow, .csd-sidebar .csd-sidebar-content .sidebar-nav-item .submenu-arrow {
  width: var(--csd-sidebar-item-arrow-width);
  height: var(--csd-sidebar-item-arrow-height);
  transition: var(--csd-sidebar-item-arrow-transition);
  margin-left: var(--csd-sidebar-item-arrow-margin-left);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item:hover {
  background-color: var(--csd-sidebar-nav-item-hover-bg);
  color: var(--csd-sidebar-nav-item-hover-color);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item.active {
  background-color: var(--csd-sidebar-nav-item-active-bg);
  color: var(--csd-sidebar-nav-item-active-color);
}
.csd-sidebar .csd-sidebar-content .sidebar-nav-item.expanded .item-arrow {
  transform: var(--csd-sidebar-item-arrow-expanded-transform);
}
.csd-sidebar .csd-sidebar-content .sidebar-subnav {
  padding-left: var(--csd-sidebar-subnav-padding-left);
  margin-top: var(--csd-sidebar-subnav-margin-top);
  display: var(--csd-sidebar-subnav-display);
}
.csd-sidebar .csd-sidebar-content .sidebar-subnav.show {
  display: var(--csd-sidebar-subnav-show-display);
}
.csd-sidebar .csd-sidebar-content .sidebar-subnav .sidebar-nav-item {
  padding: var(--csd-sidebar-subnav-item-padding);
  font-size: var(--csd-sidebar-subnav-item-font-size);
}
.csd-sidebar .csd-sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--bc-input);
}
.csd-sidebar .csd-sidebar-footer .user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
}
.csd-sidebar .csd-sidebar-footer .user-profile .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
.csd-sidebar .csd-sidebar-footer .user-profile .user-info {
  flex: 1;
  min-width: 0;
}
.csd-sidebar .csd-sidebar-footer .user-profile .user-info .user-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csd-sidebar .csd-sidebar-footer .user-profile .user-info .user-role {
  font-size: 0.875rem;
  color: var(--text-color-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csd-sidebar {
  width: 280px;
  background-color: var(--bg-light);
  border: 1px solid var(--bc-input);
  border-radius: var(--br-field);
  overflow: hidden;
}
.csd-sidebar.active {
  display: block;
}
.csd-sidebar.csd-sidebar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  z-index: 1040;
  display: block;
  border-radius: 0;
  border-right: 1px solid var(--bc-card);
  border-left: none;
  border-top: none;
  border-bottom: none;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}
.csd-sidebar.csd-sidebar-fixed.show {
  transform: translateX(0);
}
.csd-sidebar .csd-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--bc-card);
}
.csd-sidebar .csd-sidebar-header .csd-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
}
.csd-sidebar .csd-sidebar-header .csd-sidebar-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.csd-sidebar .csd-sidebar-content {
  padding: 0.75rem 0;
}
.csd-sidebar .csd-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.csd-sidebar .csd-sidebar-item {
  margin: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}
.csd-sidebar .csd-sidebar-item a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #64748b;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.csd-sidebar .csd-sidebar-item a ion-icon {
  color: inherit;
  font-size: 1.25rem;
  min-width: 1.25rem;
  color: inherit;
}
.csd-sidebar .csd-sidebar-item a .submenu-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
}
.csd-sidebar .csd-sidebar-item a span {
  color: inherit;
}
.csd-sidebar .csd-sidebar-item.active > a {
  color: var(--text-color);
}
.csd-sidebar .csd-sidebar-item:not(.active) > a:hover {
  background-color: #f1f5f9;
  color: var(--text-color);
}
.csd-sidebar .csd-sidebar-item.has-submenu.open > a .submenu-arrow {
  transform: rotate(-180deg);
}
.csd-sidebar .csd-sidebar-item.has-submenu .csd-sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  background-color: transparent;
  margin-top: 0.25rem;
}
.csd-sidebar .csd-sidebar-item.has-submenu.open .csd-sidebar-submenu {
  max-height: 500px;
}
.csd-sidebar .csd-sidebar-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.csd-sidebar .csd-sidebar-submenu .csd-sidebar-item {
  margin: 0;
  color: #64748b;
}
.csd-sidebar .csd-sidebar-submenu .csd-sidebar-item a {
  padding-left: 3rem;
  font-size: 0.875rem;
}

:root {
  --csd-sidebar-fixed-position: fixed;
  --csd-sidebar-fixed-top: 0;
  --csd-sidebar-fixed-left: 0;
  --csd-sidebar-fixed-bottom: 0;
  --csd-sidebar-fixed-z-index: 1040;
  --csd-sidebar-fixed-width: 280px;
  --csd-sidebar-fixed-border-right: 1px solid var(--bc-card);
  --csd-sidebar-fixed-transform-hidden: translateX(-100%);
  --csd-sidebar-fixed-transform-visible: translateX(0);
  --csd-sidebar-fixed-transition: transform 0.3s ease-in-out;
  --csd-sidebar-fixed-height: 100vh;
  --csd-sidebar-fixed-border-radius: 0;
  --csd-sidebar-overlay-position: fixed;
  --csd-sidebar-overlay-inset: 0;
  --csd-sidebar-overlay-bg: rgba(0, 0, 0, 0.5);
  --csd-sidebar-overlay-z-index: 1030;
  --csd-sidebar-overlay-display: none;
  --csd-sidebar-overlay-active-display: block;
}

.csd-sidebar.csd-sidebar-fixed {
  position: var(--csd-sidebar-fixed-position);
  top: var(--csd-sidebar-fixed-top);
  left: var(--csd-sidebar-fixed-left);
  bottom: var(--csd-sidebar-fixed-bottom);
  z-index: var(--csd-sidebar-fixed-z-index);
  width: var(--csd-sidebar-fixed-width);
  height: var(--csd-sidebar-fixed-height);
  background-color: var(--csd-sidebar-bg);
  border-right: var(--csd-sidebar-fixed-border-right);
  border-radius: var(--csd-sidebar-fixed-border-radius);
  transform: var(--csd-sidebar-fixed-transform-hidden);
  transition: var(--csd-sidebar-fixed-transition);
  border-left: none;
  border-top: none;
  border-bottom: none;
}
.csd-sidebar.csd-sidebar-fixed.show {
  transform: var(--csd-sidebar-fixed-transform-visible);
}

.csd-sidebar-overlay {
  position: var(--csd-sidebar-overlay-position);
  top: var(--csd-sidebar-overlay-inset);
  left: var(--csd-sidebar-overlay-inset);
  right: var(--csd-sidebar-overlay-inset);
  bottom: var(--csd-sidebar-overlay-inset);
  background-color: var(--csd-sidebar-overlay-bg);
  z-index: var(--csd-sidebar-overlay-z-index);
  display: var(--csd-sidebar-overlay-display);
}
.csd-sidebar-overlay.active {
  display: var(--csd-sidebar-overlay-active-display);
}

:root {
  --csd-skeleton-bg: var(--bg-light);
  --csd-skeleton-border-radius: 8px;
  --csd-skeleton-container-gap: 2rem;
  --csd-skeleton-animation-name: shine;
  --csd-skeleton-animation-duration: 1.5s;
  --csd-skeleton-animation-timing: linear;
  --csd-skeleton-animation-iteration: infinite;
  --csd-skeleton-gradient: linear-gradient(110deg, var(--bg-highlight) 8%, var(--bg-light) 18%, var(--bg-highlight) 33%);
  --csd-skeleton-bg-size: 200% 100%;
  --csd-skeleton-card-max-width: 400px;
  --csd-skeleton-card-header-height: 200px;
  --csd-skeleton-card-content-padding: 1rem;
  --csd-skeleton-list-max-width: 600px;
  --csd-skeleton-list-item-gap: 1rem;
  --csd-skeleton-list-item-padding: 1rem;
  --csd-skeleton-list-item-border: 1px solid var(--bc-input);
  --csd-skeleton-avatar-size: 48px;
  --csd-skeleton-avatar-border-radius: 50%;
  --csd-skeleton-line-height: 12px;
  --csd-skeleton-line-margin: 0.5rem 0;
  --csd-skeleton-line-border-radius: 4px;
}

.csd-skeleton-container {
  display: flex;
  flex-direction: column;
  gap: var(--csd-skeleton-container-gap);
}

.csd-skeleton {
  background: var(--csd-skeleton-bg);
  border-radius: var(--csd-skeleton-border-radius);
  overflow: hidden;
}
.csd-skeleton.card {
  width: 100%;
  max-width: var(--csd-skeleton-card-max-width);
}
.csd-skeleton.card .skeleton-header {
  height: var(--csd-skeleton-card-header-height);
  background: var(--csd-skeleton-gradient);
  background-size: var(--csd-skeleton-bg-size);
  animation: var(--csd-skeleton-animation-name) var(--csd-skeleton-animation-duration) var(--csd-skeleton-animation-timing) var(--csd-skeleton-animation-iteration);
}
.csd-skeleton.card .skeleton-content {
  padding: var(--csd-skeleton-card-content-padding);
}
.csd-skeleton.list {
  width: 100%;
  max-width: var(--csd-skeleton-list-max-width);
}
.csd-skeleton.list .skeleton-item {
  display: flex;
  align-items: center;
  gap: var(--csd-skeleton-list-item-gap);
  padding: var(--csd-skeleton-list-item-padding);
  border-bottom: var(--csd-skeleton-list-item-border);
}
.csd-skeleton.list .skeleton-item:last-child {
  border-bottom: none;
}
.csd-skeleton.list .skeleton-item .skeleton-avatar {
  width: var(--csd-skeleton-avatar-size);
  height: var(--csd-skeleton-avatar-size);
  border-radius: var(--csd-skeleton-avatar-border-radius);
  background: var(--csd-skeleton-gradient);
  background-size: var(--csd-skeleton-bg-size);
  animation: var(--csd-skeleton-animation-name) var(--csd-skeleton-animation-duration) var(--csd-skeleton-animation-timing) var(--csd-skeleton-animation-iteration);
  flex-shrink: 0;
}
.csd-skeleton .skeleton-line {
  height: var(--csd-skeleton-line-height);
  width: 100%;
  margin: var(--csd-skeleton-line-margin);
  background: var(--csd-skeleton-gradient);
  background-size: var(--csd-skeleton-bg-size);
  animation: var(--csd-skeleton-animation-name) var(--csd-skeleton-animation-duration) var(--csd-skeleton-animation-timing) var(--csd-skeleton-animation-iteration);
  border-radius: var(--csd-skeleton-line-border-radius);
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
/* Split Button Component */
:root {
  --csd-split-button-position: relative;
  --csd-split-button-display: inline-flex;
  --csd-split-button-align: stretch;
  --csd-split-button-vertical-align: middle;
  --csd-split-button-disabled-opacity: 0.6;
  --csd-split-main-border-right: 1px solid rgba(255, 255, 255, 0.2);
  --csd-split-main-border-top-right-radius: 0;
  --csd-split-main-border-bottom-right-radius: 0;
  --csd-split-toggle-padding: 0 8px;
  --csd-split-toggle-border-top-left-radius: 0;
  --csd-split-toggle-border-bottom-left-radius: 0;
  --csd-split-toggle-display: flex;
  --csd-split-toggle-align: center;
  --csd-split-toggle-justify: center;
  --csd-split-toggle-icon-transition: transform 0.2s;
  --csd-split-toggle-icon-active-transform: rotate(180deg);
  --csd-split-toggle-icon-size: 12px;
  --csd-split-menu-position: absolute;
  --csd-split-menu-top: 100%;
  --csd-split-menu-right: 0;
  --csd-split-menu-margin-top: 4px;
  --csd-split-menu-min-width: 160px;
  --csd-split-menu-bg: var(--bg-light, #fff);
  --csd-split-menu-border: 1px solid var(--bc-card, rgba(0, 0, 0, 0.15));
  --csd-split-menu-border-radius: var(--br-card, 0.5rem);
  --csd-split-menu-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --csd-split-menu-z-index: 1000;
  --csd-split-menu-padding: 0.125rem;
  --csd-split-item-display: flex;
  --csd-split-item-align: center;
  --csd-split-item-gap: 8px;
  --csd-split-item-padding: 6px 12px;
  --csd-split-item-color: var(--text-color, #212529);
  --csd-split-item-text-decoration: none;
  --csd-split-item-transition: var(--transition, all 0.2s ease);
  --csd-split-item-cursor: pointer;
  --csd-split-item-width: 100%;
  --csd-split-item-font-weight: 400;
  --csd-split-item-white-space: nowrap;
  --csd-split-item-border-radius: 0.5rem;
  --csd-split-item-hover-bg: var(--secondary-color, #f8f9fa);
  --csd-split-item-hover-color: var(--text-color, #16181b);
  --csd-split-item-active-bg: var(--accent-color);
  --csd-split-item-active-color: white;
  --csd-split-item-disabled-color: var(--text-color-disabled);
  --csd-split-divider-height: 1px;
  --csd-split-divider-margin: 8px 0;
  --csd-split-divider-bg: var(--bc-input);
  --csd-split-button-sm-padding: 0.25rem 0.5rem;
  --csd-split-button-sm-font-size: 0.875rem;
  --csd-split-button-lg-padding: 0.75rem 1.5rem;
  --csd-split-button-lg-font-size: 1.125rem;
}

.csd-split-button {
  position: var(--csd-split-button-position);
  display: var(--csd-split-button-display);
  align-items: var(--csd-split-button-align);
  vertical-align: var(--csd-split-button-vertical-align);
}
.csd-split-button .split-main {
  border-top-right-radius: var(--csd-split-main-border-top-right-radius);
  border-bottom-right-radius: var(--csd-split-main-border-bottom-right-radius);
  border-right: var(--csd-split-main-border-right);
}
.csd-split-button .split-toggle {
  padding: var(--csd-split-toggle-padding);
  border-top-left-radius: var(--csd-split-toggle-border-top-left-radius);
  border-bottom-left-radius: var(--csd-split-toggle-border-bottom-left-radius);
  display: var(--csd-split-toggle-display);
  align-items: var(--csd-split-toggle-align);
  justify-content: var(--csd-split-toggle-justify);
}
.csd-split-button .split-toggle .toggle-icon, .csd-split-button .split-toggle i, .csd-split-button .split-toggle ion-icon {
  transition: var(--csd-split-toggle-icon-transition);
  font-size: var(--csd-split-toggle-icon-size);
}
.csd-split-button .split-toggle.active .toggle-icon {
  transform: var(--csd-split-toggle-icon-active-transform);
}
.csd-split-button .split-menu, .csd-split-button .split-dropdown {
  position: var(--csd-split-menu-position);
  top: var(--csd-split-menu-top);
  right: var(--csd-split-menu-right);
  margin-top: var(--csd-split-menu-margin-top);
  min-width: var(--csd-split-menu-min-width);
  background-color: var(--csd-split-menu-bg);
  border: var(--csd-split-menu-border);
  border-radius: var(--csd-split-menu-border-radius);
  box-shadow: var(--csd-split-menu-box-shadow);
  z-index: var(--csd-split-menu-z-index);
  display: none;
}
.csd-split-button .split-menu.show, .csd-split-button .split-dropdown.show {
  display: block;
}
.csd-split-button .split-menu .split-item, .csd-split-button .split-dropdown .split-item {
  display: var(--csd-split-item-display);
  align-items: var(--csd-split-item-align);
  gap: var(--csd-split-item-gap);
  padding: var(--csd-split-item-padding);
  color: var(--csd-split-item-color);
  text-decoration: var(--csd-split-item-text-decoration);
  transition: var(--csd-split-item-transition);
  cursor: var(--csd-split-item-cursor);
}
.csd-split-button .split-menu .split-item:hover, .csd-split-button .split-dropdown .split-item:hover {
  background-color: var(--csd-split-item-hover-bg);
}
.csd-split-button .split-menu .split-item.active, .csd-split-button .split-dropdown .split-item.active {
  background-color: var(--csd-split-item-active-bg);
  color: var(--csd-split-item-active-color);
}
.csd-split-button .split-menu .split-item.disabled, .csd-split-button .split-dropdown .split-item.disabled {
  color: var(--csd-split-item-disabled-color);
  cursor: not-allowed;
}
.csd-split-button .split-menu .split-item.disabled:hover, .csd-split-button .split-dropdown .split-item.disabled:hover {
  background-color: transparent;
}
.csd-split-button .split-menu .split-divider, .csd-split-button .split-dropdown .split-divider {
  height: var(--csd-split-divider-height);
  margin: var(--csd-split-divider-margin);
  background-color: var(--csd-split-divider-bg);
}
.csd-split-button .split-dropdown {
  left: 0;
}
.csd-split-button.sm .split-main, .csd-split-button.sm .split-toggle {
  padding: var(--csd-split-button-sm-padding);
  font-size: var(--csd-split-button-sm-font-size);
}
.csd-split-button.lg .split-main, .csd-split-button.lg .split-toggle {
  padding: var(--csd-split-button-lg-padding);
  font-size: var(--csd-split-button-lg-font-size);
}
.csd-split-button.disabled {
  opacity: var(--csd-split-button-disabled-opacity);
  pointer-events: none;
}

/* Splitter Component */
:root {
  /* Base Splitter Variables */
  --csd-splitter-display: flex;
  --csd-splitter-width: 100%;
  --csd-splitter-height: 100%;
  --csd-splitter-min-height: 150px;
  --csd-splitter-bg: var(--bg-light);
  --csd-splitter-border: 1px solid var(--bc-card);
  --csd-splitter-border-radius: 0.5rem;
  --csd-splitter-overflow: hidden;
  /* Pane Variables */
  --csd-split-pane-flex: 1;
  --csd-split-pane-min-width: 0;
  --csd-split-pane-overflow: auto;
  /* Handle/Gutter Variables */
  --csd-split-handle-width: 4px;
  --csd-split-handle-height: 100%;
  --csd-split-handle-bg: var(--bc-card);
  --csd-split-handle-cursor: col-resize;
  --csd-split-handle-transition: background-color 0.2s;
  --csd-split-handle-hover-bg: var(--accent-color);
  --csd-split-handle-indicator-size: 24px;
  --csd-split-handle-indicator-opacity: 0;
  --csd-split-handle-indicator-hover-opacity: 0.1;
  /* Vertical Handle Variables */
  --csd-split-handle-vertical-width: 100%;
  --csd-split-handle-vertical-height: 4px;
  --csd-split-handle-vertical-cursor: row-resize;
  /* Small Gutter Variables */
  --csd-split-handle-sm-width: 2px;
  --csd-split-handle-sm-height: 2px;
  /* Large Gutter Variables */
  --csd-split-handle-lg-width: 8px;
  --csd-split-handle-lg-height: 8px;
  /* Collapse Button Variables */
  --csd-split-collapse-button-position: absolute;
  --csd-split-collapse-button-top: 50%;
  --csd-split-collapse-button-size: 24px;
  --csd-split-collapse-button-bg: var(--bg-light);
  --csd-split-collapse-button-border: 1px solid var(--bc-card);
  --csd-split-collapse-button-border-radius: 50%;
  --csd-split-collapse-button-hover-bg: var(--bg-highlight);
  --csd-split-collapse-button-z-index: 1;
}

.csd-splitter {
  display: var(--csd-splitter-display);
  width: var(--csd-splitter-width);
  height: var(--csd-splitter-height);
  overflow: var(--csd-splitter-overflow);
}
.csd-splitter .split-pane {
  flex: var(--csd-split-pane-flex);
  min-width: var(--csd-split-pane-min-width);
  overflow: var(--csd-split-pane-overflow);
  position: relative;
}
.csd-splitter .split-handle {
  width: var(--csd-split-handle-width);
  background-color: var(--csd-split-handle-bg);
  cursor: var(--csd-split-handle-cursor);
  transition: var(--csd-split-handle-transition);
  flex-shrink: 0;
  position: relative;
}
.csd-splitter .split-handle:hover, .csd-splitter .split-handle.dragging {
  background-color: var(--csd-split-handle-hover-bg);
}
.csd-splitter .split-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--csd-split-handle-indicator-size);
  height: var(--csd-split-handle-indicator-size);
  background-color: inherit;
  border-radius: 50%;
  opacity: var(--csd-split-handle-indicator-opacity);
  transition: var(--csd-split-handle-transition);
}
.csd-splitter .split-handle:hover::after {
  opacity: var(--csd-split-handle-indicator-hover-opacity);
}
.csd-splitter.vertical {
  flex-direction: column;
}
.csd-splitter.vertical .split-handle {
  width: var(--csd-split-handle-vertical-width);
  height: var(--csd-split-handle-vertical-height);
  cursor: var(--csd-split-handle-vertical-cursor);
}
.csd-splitter .split-pane .csd-splitter {
  height: 100%;
}
.csd-splitter.gutter-sm .split-handle {
  width: var(--csd-split-handle-sm-width);
}
.csd-splitter.gutter-sm .split-handle.vertical {
  height: var(--csd-split-handle-sm-height);
}
.csd-splitter.gutter-lg .split-handle {
  width: var(--csd-split-handle-lg-width);
}
.csd-splitter.gutter-lg .split-handle.vertical {
  height: var(--csd-split-handle-lg-height);
}
.csd-splitter .split-collapse-button {
  position: var(--csd-split-collapse-button-position);
  top: var(--csd-split-collapse-button-top);
  transform: translateY(-50%);
  background: var(--csd-split-collapse-button-bg);
  border: var(--csd-split-collapse-button-border);
  border-radius: var(--csd-split-collapse-button-border-radius);
  width: var(--csd-split-collapse-button-size);
  height: var(--csd-split-collapse-button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--csd-split-collapse-button-z-index);
  transition: var(--transition);
}
.csd-splitter .split-collapse-button:hover {
  background-color: var(--csd-split-collapse-button-hover-bg);
}
.csd-splitter .split-collapse-button.left {
  right: calc(-1 * var(--csd-split-collapse-button-size) / 2);
}
.csd-splitter .split-collapse-button.right {
  left: calc(-1 * var(--csd-split-collapse-button-size) / 2);
}
.csd-splitter .split-pane.collapsed {
  flex: 0;
  overflow: hidden;
  padding: 0;
}
@media (max-width: 768px) {
  .csd-splitter.responsive {
    flex-direction: column;
  }
  .csd-splitter.responsive .split-handle {
    width: 100%;
    height: 4px;
    cursor: row-resize;
  }
  .csd-splitter.responsive .split-collapse-button {
    display: none;
  }
}

/* Second Splitter Implementation */
.csd-splitter {
  display: var(--csd-splitter-display);
  width: var(--csd-splitter-width);
  height: var(--csd-splitter-height);
  min-height: var(--csd-splitter-min-height);
  background: var(--csd-splitter-bg);
  border: var(--csd-splitter-border);
  border-radius: var(--csd-splitter-border-radius);
  overflow: var(--csd-splitter-overflow);
}
.csd-splitter.horizontal {
  flex-direction: row;
}
.csd-splitter.horizontal .csd-split-gutter {
  width: var(--csd-split-handle-width);
  height: 100%;
  margin: 0 -3px;
  background-color: var(--csd-split-handle-bg);
  cursor: var(--csd-split-handle-cursor);
}
.csd-splitter.vertical {
  flex-direction: column;
}
.csd-splitter.vertical .csd-split-gutter {
  width: 100%;
  height: var(--csd-split-handle-vertical-height);
  margin: -3px 0;
  background-color: var(--csd-split-handle-bg);
  cursor: var(--csd-split-handle-vertical-cursor);
}
.csd-splitter .csd-split-panel {
  flex: var(--csd-split-pane-flex);
  min-width: var(--csd-split-pane-min-width);
  min-height: 0;
  overflow: var(--csd-split-pane-overflow);
  position: relative;
  display: flex;
  justify-content: center;
}
.csd-splitter .csd-split-panel .csd-panel-content {
  height: 100%;
  overflow: var(--csd-split-pane-overflow);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color-secondary);
}
.csd-splitter .csd-split-gutter {
  background: var(--csd-splitter-bg);
  z-index: var(--csd-split-collapse-button-z-index);
  position: relative;
}
.csd-splitter .csd-split-gutter.dragging::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--csd-split-collapse-button-z-index);
  cursor: inherit;
}
.csd-splitter .csd-split-panel .csd-splitter {
  border: none;
  border-radius: 0;
}

:root {
  --stepper-icon-size: 48px;
  --stepper-indicator-size: 2.5rem;
  --stepper-gap: 2rem;
  --stepper-padding: 1rem;
  --stepper-max-width: 800px;
  --stepper-panel-margin: 1.5rem;
  --stepper-panel-padding: 1.5rem;
  --stepper-transition-duration: 0.3s;
  --stepper-title-font-size: 0.875rem;
  --stepper-desc-font-size: 0.75rem;
  --stepper-indicator-font-size: 0.875rem;
  --stepper-progress-stroke: 2px;
}

.d-flex {
  display: flex;
}

.gap-4 {
  gap: 1rem;
}

.flex {
  display: flex;
}

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

.csd-stepper {
  display: flex;
  width: 100%;
}
.csd-stepper .stepper-list {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.csd-stepper .stepper-list .stepper-item {
  flex: 1;
  position: relative;
  padding: 0 1rem;
}
.csd-stepper .stepper-list .stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px; /* Half of the icon height */
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background-color: #ccc; /* More visible color */
  transition: background-color var(--stepper-transition-duration) ease;
  z-index: 0;
  display: block;
}
.csd-stepper .stepper-list .stepper-item.completed::after {
  background-color: var(--accent-color);
}
.csd-stepper .stepper-list .stepper-item .stepper-content {
  text-align: center;
}
.csd-stepper .stepper-list .stepper-item .stepper-icon {
  width: var(--stepper-icon-size);
  height: var(--stepper-icon-size);
  margin: 0 auto 0.5rem;
  background-color: var(--bg-light);
  border: 2px solid var(--bc-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-secondary);
  font-size: 1.25rem;
  transition: all 0.3s ease;
}
.csd-stepper .stepper-list .stepper-item .stepper-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-color);
  font-weight: 500;
}
.csd-stepper .stepper-list .stepper-item .stepper-description {
  color: var(--text-color-secondary);
  font-size: var(--stepper-desc-font-size);
}
.csd-stepper .stepper-list .stepper-item.active .stepper-icon {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}
.csd-stepper .stepper-list .stepper-item.active .stepper-label {
  color: var(--accent-color);
}
.csd-stepper .stepper-list .stepper-item.completed .stepper-icon {
  background-color: var(--csd-color-success);
  border-color: var(--csd-color-success);
  color: white;
}
.csd-stepper .stepper-list .stepper-item.error .stepper-icon {
  background-color: var(--csd-color-danger);
  border-color: var(--csd-color-danger);
  color: white;
}
.csd-stepper .stepper-list .stepper-item.error .stepper-label {
  color: var(--csd-color-danger);
}
.csd-stepper .stepper-list .stepper-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.csd-stepper.vertical {
  flex-direction: column;
  width: 100%;
  position: relative;
}
.csd-stepper.vertical .stepper-list {
  flex-direction: column;
}
.csd-stepper.vertical .stepper-list .stepper-item {
  padding: 1rem 0;
  position: relative;
}
.csd-stepper.vertical .stepper-list .stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: var(--stepper-icon-size);
  left: calc(var(--stepper-icon-size) / 2 - 1px);
  width: 2px;
  height: calc(100% - var(--stepper-icon-size) + 1rem);
  background-color: #ccc; /* Visible color for the vertical line */
  display: block;
}
.csd-stepper.vertical .stepper-list .stepper-item .stepper-content {
  text-align: left;
  padding-left: calc(var(--stepper-icon-size) + 16px);
  margin-top: calc(-1 * var(--stepper-icon-size) + 0.5rem);
}
.csd-stepper.numbered .stepper-icon {
  font-family: var(--font-family);
}
@media (max-width: 768px) {
  .csd-stepper .stepper-list {
    flex-direction: column;
  }
  .csd-stepper .stepper-list .stepper-item {
    padding: 1rem 0;
    position: relative;
  }
  .csd-stepper .stepper-list .stepper-item:not(:last-child)::after {
    top: var(--stepper-icon-size);
    left: calc(var(--stepper-icon-size) / 2 - 1px);
    width: 2px;
    height: calc(100% - var(--stepper-icon-size) + 1rem);
  }
  .csd-stepper .stepper-list .stepper-item .stepper-content {
    text-align: left;
    padding-left: calc(var(--stepper-icon-size) + 16px);
    margin-top: calc(-1 * var(--stepper-icon-size) + 0.5rem);
  }
}

.csd-stepper-container {
  width: 100%;
  margin-bottom: 2rem;
}

.csd-stepper {
  display: flex;
  gap: var(--stepper-gap);
  padding: var(--stepper-padding) 0;
  margin: 0 auto;
  position: relative;
}
.csd-stepper:not(.vertical) {
  max-width: var(--stepper-max-width);
  justify-content: center;
}
.csd-stepper.vertical {
  flex-direction: column;
  width: 100%;
  position: relative;
}
.csd-stepper.vertical.flex {
  display: flex;
}
.csd-stepper.vertical .csd-step {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1rem;
  width: 100%;
}
.csd-stepper.vertical .csd-step .csd-step-content {
  text-align: left;
  padding-left: 0.5rem;
}

.csd-step-progress {
  position: absolute;
  background-color: var(--bc-card);
  transition: background-color var(--stepper-transition-duration) ease;
  z-index: 0;
  width: var(--stepper-progress-stroke);
  height: var(--stepper-progress-stroke);
}
.csd-step-progress.completed {
  background-color: var(--text-color);
}

.csd-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.csd-step.completed .csd-step-indicator {
  color: var(--text-color);
  border-color: var(--text-color);
  font-weight: bold;
}
.csd-step.active .csd-step-indicator {
  color: var(--text-color);
  border-color: var(--text-color);
}
.csd-step.active .csd-step-title {
  color: var(--text-color);
}

.csd-step-indicator {
  width: var(--stepper-indicator-size);
  height: var(--stepper-indicator-size);
  border-radius: 50%;
  background-color: white;
  border: 1px solid var(--bc-card);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  transition: all calc(var(--stepper-transition-duration) - 0.1s) ease;
  cursor: pointer;
  user-select: none;
  z-index: 1;
}
.csd-step-indicator:hover {
  border-color: var(--text-color);
  color: var(--text-color);
}

.csd-step-content {
  padding: 0 0.5rem;
  text-align: center;
}

.csd-step-title {
  font-size: var(--stepper-title-font-size);
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

.csd-step-description {
  font-size: var(--stepper-desc-font-size);
  color: var(--text-light);
}

.csd-step-panels {
  position: relative;
  margin-top: var(--stepper-panel-margin);
  padding: var(--stepper-panel-padding);
  background: white;
  border: 1px solid var(--bc-card);
  border-radius: 0.5rem;
  width: 100%;
}
.csd-step-panels.vertical {
  margin-top: 0;
}
.csd-step-panels.flex-grow-1 {
  flex-grow: 1;
}
.csd-step-panels.vertical.flex-grow-1 {
  margin-left: 1rem;
}

.csd-step-panel {
  display: none;
  opacity: 0;
  transition: opacity calc(var(--stepper-transition-duration) - 0.1s) ease;
}
.csd-step-panel.active {
  display: block;
  opacity: 1;
}

.prev-step,
.next-step {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--stepper-gap) / 4);
  padding: calc(var(--stepper-padding) / 2) var(--stepper-padding);
  font-size: var(--stepper-title-font-size);
  border-radius: 0.375rem;
  transition: all calc(var(--stepper-transition-duration) - 0.1s);
  user-select: none;
}
.prev-step:disabled,
.next-step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prev-step {
  background-color: var(--bg-light);
  color: var(--text-muted);
  border: 1px solid var(--bc-card);
}
.prev-step:not(:disabled):hover {
  background-color: #edf1f5;
  border-color: var(--bc-hover);
}

.next-step {
  background-color: var(--text-color);
  color: white;
  border: 1px solid var(--text-color);
}
.next-step:not(:disabled):hover {
  background-color: var(--text-color);
}

:root {
  --csd-tabs-border: 1px solid #e2e8f0;
  --csd-tabs-item-padding: 0.5rem 1rem;
  --csd-tabs-item-font-size: 1rem;
  --csd-tabs-item-color: var(--text-color-secondary);
  --csd-tabs-item-active-color: var(--text-color);
  --csd-tabs-item-gap: 0.5rem;
  --csd-tabs-icon-size: 16px;
  --csd-tabs-icon-stroke-width: 48px;
  --csd-tabs-transition: all 0.3s ease;
}

.csd-tabs .csd-tab-list {
  position: relative;
  display: flex;
  border-bottom: var(--csd-tabs-border);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}
.csd-tabs .csd-tab-list::-webkit-scrollbar {
  display: none; /* WebKit */
}
.csd-tabs .csd-tab {
  position: relative;
  padding: var(--csd-tabs-item-padding);
  color: var(--csd-tabs-item-color);
  background: none;
  border: none;
  font-size: var(--csd-tabs-item-font-size);
  font-weight: var(--csd-tab-item-font-weight);
  cursor: pointer;
  transition: var(--csd-tabs-transition);
  display: flex;
  align-items: center;
  gap: var(--csd-tabs-item-gap);
  flex-shrink: 0;
  white-space: nowrap;
}
.csd-tabs .csd-tab ion-icon {
  font-size: var(--csd-tabs-icon-size);
  --ionicon-stroke-width: var(--csd-tabs-icon-stroke-width);
}
.csd-tabs .csd-tab:hover {
  color: var(--csd-tabs-item-active-color) !important;
}
.csd-tabs .csd-tab.active {
  color: var(--csd-tabs-item-active-color) !important;
}
.csd-tabs .csd-tab.active ion-icon {
  --ionicon-stroke-width: 32px;
}
.csd-tabs .csd-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #020617;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.csd-tabs .csd-tab-panel {
  display: none;
  padding: 1rem;
}
.csd-tabs .csd-tab-panel.active {
  display: block;
}
.csd-tabs .csd-tab-panel p {
  margin: 0;
  color: var(--text-color);
}

:root {
  /* Spacing */
  --csd-tag-gap: 0.5rem;
  --csd-tag-padding: 0.25rem 0.5rem;
  /* Typography */
  --csd-tag-font-size: 0.875rem;
  --csd-tag-font-weight: 700;
  --csd-tag-line-height: 1.5;
  --csd-tag-icon-size: 1rem;
  /* Layout */
  --csd-tag-border-radius: 6px;
  --csd-tag-pill-radius: 50rem;
  --csd-tag-height: 1.75rem;
  /* Colors */
  --csd-tag-bg: var(--gray-100);
  --csd-tag-color: var(--gray-700);
  --csd-tag-hover-bg: var(--gray-200);
}

.csd-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--csd-tag-gap);
  height: var(--csd-tag-height);
  padding: var(--csd-tag-padding);
  font-size: var(--csd-tag-font-size);
  font-weight: var(--csd-tag-font-weight);
  line-height: var(--csd-tag-line-height);
  color: var(--csd-tag-color);
  background-color: var(--csd-tag-bg);
  border-radius: var(--csd-tag-border-radius);
  transition: all 0.2s ease-in-out;
  user-select: none;
  /* Variants */
  /* Shape Variants */
  /* Sizes */
  /* States */
  /* Elements */
}
.csd-tag.primary {
  color: var(--primary-700);
  background-color: var(--primary-100);
}
.csd-tag.primary:hover {
  background-color: var(--primary-200);
}
.csd-tag.success {
  color: var(--success-700);
  background-color: var(--success-100);
}
.csd-tag.success:hover {
  background-color: var(--success-200);
}
.csd-tag.warning {
  color: var(--warning-700);
  background-color: var(--warning-100);
}
.csd-tag.warning:hover {
  background-color: var(--warning-200);
}
.csd-tag.danger {
  color: var(--error-700);
  background-color: var(--error-100);
}
.csd-tag.danger:hover {
  background-color: var(--error-200);
}
.csd-tag.info {
  color: var(--info-700);
  background-color: var(--info-100);
}
.csd-tag.info:hover {
  background-color: var(--info-200);
}
.csd-tag.pill {
  border-radius: var(--csd-tag-pill-radius);
}
.csd-tag.sm {
  height: 1.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
}
.csd-tag.lg {
  height: 2rem;
  padding: 0.375rem 1rem;
  font-size: 1rem;
}
.csd-tag:hover {
  background-color: var(--csd-tag-hover-bg);
}
.csd-tag.clickable {
  cursor: pointer;
}
.csd-tag.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.csd-tag ion-icon {
  font-size: var(--csd-tag-icon-size);
  color: inherit;
  --ionicon-stroke-width: 50px;
}
.csd-tag .csd-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(var(--csd-tag-gap) * -0.5);
  margin-right: calc(var(--csd-tag-gap) * -0.5);
  padding: 0.25rem;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.csd-tag .csd-tag-remove:hover {
  opacity: 1;
}
.csd-tag .csd-tag-remove ion-icon {
  font-size: calc(var(--csd-tag-icon-size) * 0.85);
}

:root {
  --csd-textarea-width: 100%;
  --csd-textarea-min-height: 100px;
  --csd-textarea-resize: vertical; /* Only vertical resize */
  --csd-textarea-font-family: inherit;
  --csd-textarea-line-height: 1.5;
  --csd-textarea-padding: var(--p-input);
  --csd-textarea-border: 1px solid var(--bc-input);
  --csd-textarea-border-radius: var(--br-input);
  --csd-textarea-disabled-bg: var(--bg-input-disabled);
  --csd-textarea-disabled-cursor: not-allowed;
  --csd-textarea-counter-position-bottom: 8px;
  --csd-textarea-counter-position-right: 8px;
  --csd-textarea-counter-font-size: 0.875rem;
  --csd-textarea-counter-color: var(--text-color-secondary);
  --csd-textarea-counter-bg: var(--bg-input);
  --csd-textarea-counter-padding: 0 4px;
  --csd-textarea-counter-error-color: var(--csd-color-danger);
  --csd-textarea-counter-simple-font-size: 0.85em;
  --csd-textarea-counter-simple-color: var(--text-color-light);
  --csd-textarea-counter-simple-margin-top: 4px;
  --csd-textarea-error-border-color: var(--csd-color-danger);
  --csd-textarea-error-shadow-color: rgba(var(--csd-color-danger-rgb), 0.2);
  --csd-textarea-error-message-color: var(--csd-color-danger);
  --csd-textarea-error-message-font-size: 0.875rem;
  --csd-textarea-error-message-margin-top: 4px;
  --csd-textarea-filled-border: none;
  --csd-textarea-filled-border-bottom: 2px solid var(--bc-input);
  --csd-textarea-filled-border-radius: var(--br-field) var(--br-field) 0 0;
  --csd-textarea-filled-padding: 16px;
  --csd-textarea-filled-bg: var(--secondary-color);
  --csd-textarea-filled-focus-border: var(--accent-color);
  --csd-textarea-filled-focus-bg: var(--bg-input);
  --csd-textarea-outlined-border: 2px solid var(--bc-input);
  --csd-textarea-outlined-focus-border: var(--accent-color);
  --csd-textarea-sm-padding: 8px;
  --csd-textarea-sm-font-size: 0.875rem;
  --csd-textarea-lg-padding: 16px;
  --csd-textarea-lg-font-size: 1.125rem;
  --csd-textarea-simple-min-height: 60px;
}

.csd-textarea {
  position: relative;
  width: var(--csd-textarea-width);
  min-height: var(--csd-textarea-min-height);
  resize: var(--csd-textarea-resize) !important; /* Force vertical resize only */
  font-family: var(--csd-textarea-font-family);
  line-height: var(--csd-textarea-line-height);
  padding: var(--csd-textarea-padding);
  border: var(--csd-textarea-border);
  border-radius: var(--csd-textarea-border-radius);
  box-sizing: border-box;
}
.csd-textarea:disabled {
  background-color: var(--csd-textarea-disabled-bg);
  cursor: var(--csd-textarea-disabled-cursor);
  resize: none !important;
}
.csd-textarea::placeholder {
  color: var(--csd-input-color);
  font-weight: normal;
}
.csd-textarea:focus {
  outline: none;
  border-color: var(--csd-input-focus-color);
}
.csd-field-inline .csd-textarea {
  min-width: calc(100% - var(--csd-field-inline-label-width));
}

.csd-textarea-container {
  position: relative;
  width: var(--csd-textarea-width);
}
.csd-textarea-container textarea {
  width: var(--csd-textarea-width);
  min-height: var(--csd-textarea-min-height);
  resize: var(--csd-textarea-resize) !important; /* Force vertical resize only */
  font-family: var(--csd-textarea-font-family);
  line-height: var(--csd-textarea-line-height);
  padding: var(--csd-textarea-padding);
  border: var(--csd-textarea-border);
  border-radius: var(--csd-textarea-border-radius);
  box-sizing: border-box;
}
.csd-textarea-container textarea.auto-resize {
  resize: none !important;
  overflow-y: hidden;
}
.csd-textarea-container textarea.no-resize {
  resize: none !important;
}
.csd-textarea-container textarea:disabled {
  background-color: var(--csd-textarea-disabled-bg);
  cursor: var(--csd-textarea-disabled-cursor);
  resize: none !important;
}
.csd-textarea-container .char-counter {
  position: absolute;
  bottom: var(--csd-textarea-counter-position-bottom);
  right: var(--csd-textarea-counter-position-right);
  font-size: var(--csd-textarea-counter-font-size);
  color: var(--csd-textarea-counter-color);
  pointer-events: none;
  background-color: var(--csd-textarea-counter-bg);
  padding: var(--csd-textarea-counter-padding);
}
.csd-textarea-container .char-counter.limit-reached {
  color: var(--csd-textarea-counter-error-color);
}
.csd-textarea-container.has-error textarea {
  border-color: var(--csd-textarea-error-border-color);
}
.csd-textarea-container.has-error textarea:focus {
  box-shadow: 0 0 0 2px var(--csd-textarea-error-shadow-color);
}
.csd-textarea-container.has-error .error-message {
  color: var(--csd-textarea-error-message-color);
  font-size: var(--csd-textarea-error-message-font-size);
  margin-top: var(--csd-textarea-error-message-margin-top);
}
.csd-textarea-container.filled textarea {
  border: var(--csd-textarea-filled-border);
  border-bottom: var(--csd-textarea-filled-border-bottom);
  border-radius: var(--csd-textarea-filled-border-radius);
  padding: var(--csd-textarea-filled-padding);
  background-color: var(--csd-textarea-filled-bg);
}
.csd-textarea-container.filled textarea:focus {
  border-color: var(--csd-textarea-filled-focus-border);
  background-color: var(--csd-textarea-filled-focus-bg);
}
.csd-textarea-container.outlined textarea {
  border: var(--csd-textarea-outlined-border);
}
.csd-textarea-container.outlined textarea:focus {
  border-color: var(--csd-textarea-outlined-focus-border);
}
.csd-textarea-container.sm textarea {
  padding: var(--csd-textarea-sm-padding);
  font-size: var(--csd-textarea-sm-font-size);
}
.csd-textarea-container.lg textarea {
  padding: var(--csd-textarea-lg-padding);
  font-size: var(--csd-textarea-lg-font-size);
}

.csd-textarea-counter {
  font-size: var(--csd-textarea-counter-simple-font-size);
  color: var(--csd-textarea-counter-simple-color) !important;
  text-align: right;
  margin-top: var(--csd-textarea-counter-simple-margin-top);
}

/* Timeline Component */
:root {
  /* Base Timeline Variables */
  --csd-timeline-position: relative;
  --csd-timeline-padding: 2rem 0;
  /* Timeline Line Variables */
  --csd-timeline-line-width: 2px;
  --csd-timeline-line-color: var(--bc-card);
  /* Timeline Item Variables */
  --csd-timeline-item-width: 50%;
  --csd-timeline-item-margin-bottom: 2rem;
  --csd-timeline-item-padding-right: 2rem;
  --csd-timeline-item-padding-left: 0;
  /* Timeline Point Variables */
  --csd-timeline-point-size: 1rem;
  --csd-timeline-point-position: -0.5rem;
  --csd-timeline-point-top: 1rem;
  --csd-timeline-point-bg: var(--primary-color);
  --csd-timeline-point-border: 2px solid var(--bg-light);
  --csd-timeline-point-border-radius: 50%;
  /* Timeline Date Variables */
  --csd-timeline-date-position: 3rem;
  --csd-timeline-date-top: 1rem;
  --csd-timeline-date-color: var(--text-muted);
  --csd-timeline-date-font-size: 0.875rem;
  /* Timeline Content Variables */
  --csd-timeline-content-bg: var(--bg-light);
  --csd-timeline-content-border: 1px solid var(--bc-card);
  --csd-timeline-content-border-radius: var(--br-card);
  --csd-timeline-content-padding: 1rem;
  /* Timeline Content Typography */
  --csd-timeline-title-margin: 0 0 0.5rem;
  --csd-timeline-title-font-size: 1rem;
  --csd-timeline-title-font-weight: 600;
  --csd-timeline-text-margin: 0;
  --csd-timeline-text-color: var(--text-muted);
  --csd-timeline-text-font-size: 0.875rem;
  /* Horizontal Timeline Variables */
  --csd-timeline-horizontal-padding: 4rem 0 2rem;
  --csd-timeline-horizontal-gap: 3rem;
  --csd-timeline-horizontal-line-top: 3.5rem;
  --csd-timeline-horizontal-item-min-width: 200px;
  --csd-timeline-horizontal-item-max-width: 300px;
  /* Bottom/Top Timeline Variables */
  --csd-timeline-bottom-padding: 2rem 0 4rem;
  --csd-timeline-bottom-line-bottom: 3.5rem;
}

.csd-timeline {
  position: var(--csd-timeline-position);
  padding: var(--csd-timeline-padding);
}
.csd-timeline:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: var(--csd-timeline-line-width);
  background-color: var(--csd-timeline-line-color);
  transform: translateX(-50%);
}
.csd-timeline .csd-timeline-item {
  position: relative;
  margin-bottom: var(--csd-timeline-item-margin-bottom);
  width: var(--csd-timeline-item-width);
  padding-right: var(--csd-timeline-item-padding-right);
  padding-left: var(--csd-timeline-item-padding-left);
}
.csd-timeline .csd-timeline-item:last-child {
  margin-bottom: 0;
}
.csd-timeline .csd-timeline-item:before {
  content: "";
  position: absolute;
  right: var(--csd-timeline-point-position);
  top: var(--csd-timeline-point-top);
  width: var(--csd-timeline-point-size);
  height: var(--csd-timeline-point-size);
  border-radius: var(--csd-timeline-point-border-radius);
  background-color: var(--csd-timeline-point-bg);
  border: var(--csd-timeline-point-border);
  z-index: 1;
}
.csd-timeline .csd-timeline-item .csd-timeline-date {
  position: absolute;
  left: calc(100% + var(--csd-timeline-date-position));
  top: var(--csd-timeline-date-top);
  white-space: nowrap;
  color: var(--csd-timeline-date-color);
  font-size: var(--csd-timeline-date-font-size);
}
.csd-timeline .csd-timeline-item .csd-timeline-content {
  background-color: var(--csd-timeline-content-bg);
  border: var(--csd-timeline-content-border);
  border-radius: var(--csd-timeline-content-border-radius);
  padding: var(--csd-timeline-content-padding);
}
.csd-timeline .csd-timeline-item .csd-timeline-content h4 {
  margin: var(--csd-timeline-title-margin);
  font-size: var(--csd-timeline-title-font-size);
  font-weight: var(--csd-timeline-title-font-weight);
}
.csd-timeline .csd-timeline-item .csd-timeline-content p {
  margin: var(--csd-timeline-text-margin);
  color: var(--csd-timeline-text-color);
  font-size: var(--csd-timeline-text-font-size);
}
.csd-timeline.alternate .csd-timeline-item:nth-child(even) {
  margin-left: var(--csd-timeline-item-width);
  padding-right: 0;
  padding-left: var(--csd-timeline-item-padding-right);
}
.csd-timeline.alternate .csd-timeline-item:nth-child(even):before {
  right: auto;
  left: var(--csd-timeline-point-position);
}
.csd-timeline.alternate .csd-timeline-item:nth-child(even) .csd-timeline-date {
  left: auto;
  right: calc(100% + var(--csd-timeline-date-position));
  text-align: right;
}
.csd-timeline.horizontal {
  display: flex;
  padding: var(--csd-timeline-horizontal-padding);
  overflow-x: auto;
  align-items: flex-start;
  gap: var(--csd-timeline-horizontal-gap);
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.csd-timeline.horizontal:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--csd-timeline-horizontal-line-top);
  width: 100%;
  height: var(--csd-timeline-line-width);
  background-color: var(--csd-timeline-line-color);
  transform: none;
}
.csd-timeline.horizontal .csd-timeline-item {
  flex: 1;
  min-width: var(--csd-timeline-horizontal-item-min-width);
  max-width: var(--csd-timeline-horizontal-item-max-width);
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.csd-timeline.horizontal .csd-timeline-item:before {
  top: -1rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.csd-timeline.horizontal .csd-timeline-item .csd-timeline-date {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  text-align: center;
  margin: 0;
  padding: 0;
}
.csd-timeline.horizontal .csd-timeline-item .csd-timeline-content {
  text-align: center;
  margin-top: 2rem;
  width: 100%;
}
.csd-timeline.horizontal .csd-timeline-item .csd-timeline-content h4 {
  margin-bottom: 0.5rem;
}

/* Additional Timeline Variants */
.csd-timeline.horizontal.top .csd-timeline-item .csd-timeline-date {
  top: -2.5rem;
}
.csd-timeline.horizontal.top .csd-timeline-item .csd-timeline-content {
  margin-top: 2rem;
}
.csd-timeline.horizontal.bottom {
  padding: var(--csd-timeline-bottom-padding);
}
.csd-timeline.horizontal.bottom:before {
  top: auto;
  bottom: var(--csd-timeline-bottom-line-bottom);
}
.csd-timeline.horizontal.bottom .csd-timeline-item:before {
  top: auto;
  bottom: -1rem;
}
.csd-timeline.horizontal.bottom .csd-timeline-item .csd-timeline-date {
  top: auto;
  bottom: -2.5rem;
}
.csd-timeline.horizontal.bottom .csd-timeline-item .csd-timeline-content {
  margin-top: 0;
  margin-bottom: 2rem;
}
.csd-timeline.horizontal.alternate {
  padding: 2rem 0 4rem;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(even) {
  margin-left: 0;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(even):before {
  top: auto;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(even) .csd-timeline-date {
  top: 9rem;
  right: 50%;
  transform: translateX(50%);
  bottom: auto;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(even) .csd-timeline-content {
  margin-top: 0;
  margin-bottom: 0;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(even):before {
  top: auto;
  bottom: -3rem;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(odd) .csd-timeline-date {
  top: 5rem;
  bottom: auto;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(odd) .csd-timeline-content {
  margin-top: 10rem;
  margin-bottom: 0;
}
.csd-timeline.horizontal.alternate .csd-timeline-item:nth-child(odd):before {
  top: auto;
  bottom: 7rem;
}
.csd-timeline.horizontal.alternate:before {
  top: auto;
  bottom: 11.5rem;
}

:root {
  --csd-toast-display: flex;
  --csd-toast-align: center;
  --csd-toast-justify: space-between;
  --csd-toast-gap: 1rem;
  --csd-toast-padding: 1rem;
  --csd-toast-margin-bottom: 1rem;
  --csd-toast-bg: var(--bg-light);
  --csd-toast-border: 1px solid var(--bc-card);
  --csd-toast-border-radius: var(--br-card);
  --csd-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --csd-toast-content-gap: 0.75rem;
  --csd-toast-message-font-size: 0.9375rem;
  --csd-toast-icon-size: 24px;
  --csd-toast-accent-width: 4px;
  --csd-toast-close-size: 24px;
  --csd-toast-container-z-index: 1050;
  --csd-toast-container-padding: 1rem;
  --csd-toast-alt-padding: 0.75rem 1rem;
  --csd-toast-alt-border-radius: 0.5rem;
  --csd-toast-alt-min-width: 200px;
  --csd-toast-alt-max-width: 400px;
  --csd-toast-alt-content-gap: 0.5rem;
  --csd-toast-alt-icon-size: 1.25rem;
  --csd-toast-alt-close-padding: 4px;
  --csd-toast-alt-close-opacity: 0.7;
  --csd-toast-alt-close-border-radius: 4px;
  --csd-toast-alt-hover-bg: rgba(0, 0, 0, 0.1);
}

.csd-toast {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  justify-content: var(--csd-toast-justify);
  gap: var(--csd-toast-gap);
  padding: var(--csd-toast-padding);
  background-color: var(--csd-toast-bg);
  border: var(--csd-toast-border);
  border-radius: var(--csd-toast-border-radius);
  box-shadow: var(--csd-toast-box-shadow);
  margin-bottom: var(--csd-toast-margin-bottom);
  animation: slideIn 0.3s ease-out;
}
.csd-toast:last-child {
  margin-bottom: 0;
}
.csd-toast .toast-content {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  gap: var(--csd-toast-content-gap);
  flex: 1;
}
.csd-toast .toast-content .toast-icon {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  justify-content: center;
  width: var(--csd-toast-icon-size);
  height: var(--csd-toast-icon-size);
  flex-shrink: 0;
}
.csd-toast .toast-content .toast-icon.success {
  color: var(--csd-color-success);
}
.csd-toast .toast-content .toast-icon.error {
  color: var(--csd-color-danger);
}
.csd-toast .toast-content .toast-icon.warning {
  color: var(--csd-color-warning);
}
.csd-toast .toast-content .toast-icon.info {
  color: var(--csd-color-info);
}
.csd-toast .toast-content .toast-message {
  flex: 1;
  font-size: var(--csd-toast-message-font-size);
  color: var(--text-color);
  margin: 0;
}
.csd-toast .toast-close {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  justify-content: center;
  width: var(--csd-toast-close-size);
  height: var(--csd-toast-close-size);
  border: none;
  background: none;
  color: var(--text-color-secondary);
  cursor: pointer;
  padding: 0;
  transition: var(--transition);
}
.csd-toast .toast-close:hover {
  color: var(--text-color);
}
.csd-toast.success {
  border-left: var(--csd-toast-accent-width) solid var(--csd-color-success);
}
.csd-toast.error {
  border-left: var(--csd-toast-accent-width) solid var(--csd-color-danger);
}
.csd-toast.warning {
  border-left: var(--csd-toast-accent-width) solid var(--csd-color-warning);
}
.csd-toast.info {
  border-left: var(--csd-toast-accent-width) solid var(--csd-color-info);
}
.csd-toast-container {
  position: fixed;
  z-index: var(--csd-toast-container-z-index);
  padding: var(--csd-toast-container-padding);
  pointer-events: none;
}
.csd-toast-container .csd-toast {
  pointer-events: auto;
}
.csd-toast-container.top-right {
  top: 0;
  right: 0;
}
.csd-toast-container.top-left {
  top: 0;
  left: 0;
}
.csd-toast-container.bottom-right {
  bottom: 0;
  right: 0;
}
.csd-toast-container.bottom-left {
  bottom: 0;
  left: 0;
}
.csd-toast-container.top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.csd-toast-container.bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.csd-toast-container {
  position: fixed;
  bottom: var(--csd-toast-container-padding);
  right: var(--csd-toast-container-padding);
  z-index: var(--csd-toast-container-z-index);
  display: var(--csd-toast-display);
  flex-direction: column;
  gap: var(--csd-toast-alt-content-gap);
  pointer-events: none;
}

.csd-toast {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  justify-content: var(--csd-toast-justify);
  gap: var(--csd-toast-gap);
  background: var(--csd-toast-bg);
  color: var(--text-color);
  padding: var(--csd-toast-alt-padding);
  border-radius: var(--csd-toast-alt-border-radius);
  box-shadow: var(--csd-toast-box-shadow);
  min-width: var(--csd-toast-alt-min-width);
  max-width: var(--csd-toast-alt-max-width);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
}
.csd-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.csd-toast .csd-toast-content {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  gap: var(--csd-toast-alt-content-gap);
  flex: 1;
}
.csd-toast .csd-toast-content ion-icon {
  font-size: var(--csd-toast-alt-icon-size);
  flex-shrink: 0;
}
.csd-toast .csd-toast-content span {
  line-height: 1.2;
}
.csd-toast .csd-toast-close {
  display: var(--csd-toast-display);
  align-items: var(--csd-toast-align);
  justify-content: center;
  background: none;
  border: none;
  padding: var(--csd-toast-alt-close-padding);
  cursor: pointer;
  opacity: var(--csd-toast-alt-close-opacity);
  transition: opacity 0.2s;
  flex-shrink: 0;
  border-radius: var(--csd-toast-alt-close-border-radius);
}
.csd-toast .csd-toast-close:hover {
  opacity: 1;
  background-color: var(--csd-toast-alt-hover-bg);
}
.csd-toast .csd-toast-close ion-icon {
  font-size: var(--csd-toast-alt-icon-size);
}
.csd-toast.csd-toast-success {
  background-color: var(--csd-color-success);
}
.csd-toast.csd-toast-error {
  background-color: var(--csd-color-danger);
}
.csd-toast.csd-toast-info {
  background-color: var(--csd-color-info);
}
.csd-toast.csd-toast-warning {
  background-color: var(--csd-color-warning);
}
.csd-toast.csd-toast-success, .csd-toast.csd-toast-error, .csd-toast.csd-toast-info, .csd-toast.csd-toast-warning {
  color: white;
}
.csd-toast.csd-toast-success .csd-toast-close, .csd-toast.csd-toast-error .csd-toast-close, .csd-toast.csd-toast-info .csd-toast-close, .csd-toast.csd-toast-warning .csd-toast-close {
  color: inherit;
}
.csd-toast.csd-toast-success .csd-toast-close ion-icon, .csd-toast.csd-toast-error .csd-toast-close ion-icon, .csd-toast.csd-toast-info .csd-toast-close ion-icon, .csd-toast.csd-toast-warning .csd-toast-close ion-icon {
  color: inherit;
}
.csd-toast.csd-toast-success .csd-toast-content, .csd-toast.csd-toast-error .csd-toast-content, .csd-toast.csd-toast-info .csd-toast-content, .csd-toast.csd-toast-warning .csd-toast-content {
  color: inherit;
}
.csd-toast.csd-toast-success .csd-toast-content span, .csd-toast.csd-toast-error .csd-toast-content span, .csd-toast.csd-toast-info .csd-toast-content span, .csd-toast.csd-toast-warning .csd-toast-content span {
  color: inherit;
}
.csd-toast.csd-toast-success .csd-toast-content ion-icon, .csd-toast.csd-toast-error .csd-toast-content ion-icon, .csd-toast.csd-toast-info .csd-toast-content ion-icon, .csd-toast.csd-toast-warning .csd-toast-content ion-icon {
  color: inherit;
}

:root {
  --csd-toggle-btn-group-bg: var(--bg-light);
  --csd-toggle-btn-group-border: 1px solid var(--bc-input);
  --csd-toggle-btn-group-radius: var(--br-field);
  --csd-toggle-btn-group-padding: 4px;
  --csd-toggle-btn-group-gap: 4px;
  --csd-toggle-btn-bg: none;
  --csd-toggle-btn-border: none;
  --csd-toggle-btn-padding: 8px 16px;
  --csd-toggle-btn-color: var(--text-color-secondary);
  --csd-toggle-btn-font-size: 0.875rem;
  --csd-toggle-btn-radius: calc(var(--br-field) - 2px);
  --csd-toggle-btn-gap: 8px;
  --csd-toggle-btn-hover-color: var(--text-color);
  --csd-toggle-btn-hover-bg: var(--bg-highlight);
  --csd-toggle-btn-active-color: var(--text-color);
  --csd-toggle-btn-active-bg: var(--bg-input);
  --csd-toggle-btn-active-shadow: var(--shadow-sm);
  --csd-toggle-btn-disabled-opacity: 0.5;
  --csd-toggle-btn-icon-size: 16px;
  --csd-toggle-btn-group-sm-padding: 2px;
  --csd-toggle-btn-sm-padding: 4px 12px;
  --csd-toggle-btn-sm-font-size: 0.75rem;
  --csd-toggle-btn-sm-icon-size: 14px;
  --csd-toggle-btn-group-lg-padding: 6px;
  --csd-toggle-btn-lg-padding: 12px 24px;
  --csd-toggle-btn-lg-font-size: 1rem;
  --csd-toggle-btn-lg-icon-size: 18px;
  --csd-toggle-btn-primary-active-bg: var(--accent-color);
  --csd-toggle-btn-primary-active-color: white;
  --csd-toggle-btn-outline-border: 1px solid var(--bc-input);
  --csd-toggle-btn-outline-active-border: 1px solid var(--accent-color);
  --csd-toggle-btn-outline-active-color: var(--accent-color);
  --csd-toggle-button-gap: 0.5rem;
  --csd-toggle-button-padding: 0.5rem 1rem;
  --csd-toggle-button-bg: #e2e8f0;
  --csd-toggle-button-radius: 0.5rem;
  --csd-toggle-button-font-size: 14px;
  --csd-toggle-button-font-weight: 500;
  --csd-toggle-button-indicator-offset: 0.25rem;
  --csd-toggle-button-indicator-bg: #ffffff;
  --csd-toggle-button-indicator-radius: 6px;
  --csd-toggle-button-icon-size: 1.125rem;
  --csd-toggle-button-icon-color: #64748b;
  --csd-toggle-button-text-color: #64748b;
  --csd-toggle-button-checked-text-color: #0f172a;
  --csd-toggle-button-disabled-opacity: 0.5;
  --csd-toggle-button-disabled-hover-bg: #f1f5f9;
  --csd-toggle-button-disabled-hover-border: #e2e8f0;
}

.csd-toggle-button-group {
  display: inline-flex;
  background-color: var(--csd-toggle-btn-group-bg);
  border: var(--csd-toggle-btn-group-border);
  border-radius: var(--csd-toggle-btn-group-radius);
  padding: var(--csd-toggle-btn-group-padding);
  gap: var(--csd-toggle-btn-group-gap);
}
.csd-toggle-button-group .csd-toggle-button {
  position: relative;
  background: var(--csd-toggle-btn-bg);
  border: var(--csd-toggle-btn-border);
  padding: var(--csd-toggle-btn-padding);
  color: var(--csd-toggle-btn-color);
  font-size: var(--csd-toggle-btn-font-size);
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--csd-toggle-btn-radius);
  display: flex;
  align-items: center;
  gap: var(--csd-toggle-btn-gap);
}
.csd-toggle-button-group .csd-toggle-button:hover {
  color: var(--csd-toggle-btn-hover-color);
  background-color: var(--csd-toggle-btn-hover-bg);
}
.csd-toggle-button-group .csd-toggle-button.active {
  color: var(--csd-toggle-btn-active-color);
  background-color: var(--csd-toggle-btn-active-bg);
  box-shadow: var(--csd-toggle-btn-active-shadow);
}
.csd-toggle-button-group .csd-toggle-button:disabled {
  opacity: var(--csd-toggle-btn-disabled-opacity);
  cursor: not-allowed;
}
.csd-toggle-button-group .csd-toggle-button:disabled:hover {
  background: none;
  color: var(--csd-toggle-btn-color);
}
.csd-toggle-button-group .csd-toggle-button ion-icon {
  font-size: var(--csd-toggle-btn-icon-size);
  color: inherit;
}
.csd-toggle-button-group.sm {
  padding: var(--csd-toggle-btn-group-sm-padding);
}
.csd-toggle-button-group.sm .csd-toggle-button {
  padding: var(--csd-toggle-btn-sm-padding);
  font-size: var(--csd-toggle-btn-sm-font-size);
}
.csd-toggle-button-group.sm .csd-toggle-button ion-icon {
  font-size: var(--csd-toggle-btn-sm-icon-size);
}
.csd-toggle-button-group.lg {
  padding: var(--csd-toggle-btn-group-lg-padding);
}
.csd-toggle-button-group.lg .csd-toggle-button {
  padding: var(--csd-toggle-btn-lg-padding);
  font-size: var(--csd-toggle-btn-lg-font-size);
}
.csd-toggle-button-group.lg .csd-toggle-button ion-icon {
  font-size: var(--csd-toggle-btn-lg-icon-size);
}
.csd-toggle-button-group.primary .csd-toggle-button.active {
  background-color: var(--csd-toggle-btn-primary-active-bg);
  color: var(--csd-toggle-btn-primary-active-color);
}
.csd-toggle-button-group.outline {
  background: none;
  border: none;
  padding: 0;
  gap: var(--csd-toggle-btn-gap);
}
.csd-toggle-button-group.outline .csd-toggle-button {
  border: var(--csd-toggle-btn-outline-border);
}
.csd-toggle-button-group.outline .csd-toggle-button.active {
  border-color: var(--accent-color);
  color: var(--csd-toggle-btn-outline-active-color);
  background: none;
}
.csd-toggle-button-group.vertical {
  flex-direction: column;
  width: fit-content;
}

.csd-toggle-button-wrapper {
  display: inline-block;
  user-select: none;
}
.csd-toggle-button-wrapper .csd-toggle-button {
  display: none;
}
.csd-toggle-button-wrapper .csd-toggle-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--csd-toggle-button-gap);
  padding: var(--csd-toggle-button-padding);
  background: var(--csd-toggle-button-bg);
  border: none;
  border-radius: var(--csd-toggle-button-radius);
  font-size: var(--csd-toggle-button-font-size);
  font-weight: var(--csd-toggle-button-font-weight);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  user-select: none;
  text-align: center;
  min-width: min-content;
}
.csd-toggle-button-wrapper .csd-toggle-button-label::before {
  content: "";
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--csd-toggle-button-indicator-offset) * 2);
  height: calc(100% - var(--csd-toggle-button-indicator-offset) * 2);
  background-color: var(--csd-toggle-button-indicator-bg);
  border-radius: var(--csd-toggle-button-indicator-radius);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 0;
}
.csd-toggle-button-wrapper .csd-toggle-button-label ion-icon {
  user-select: none;
  font-size: var(--csd-toggle-button-icon-size);
  color: var(--csd-toggle-button-icon-color) !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.csd-toggle-button-wrapper .csd-toggle-button-label .csd-toggle-button-text {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: var(--csd-toggle-button-text-color) !important;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.csd-toggle-button-wrapper .csd-toggle-button:checked + .csd-toggle-button-label::before {
  opacity: 1;
}
.csd-toggle-button-wrapper .csd-toggle-button:checked + .csd-toggle-button-label ion-icon,
.csd-toggle-button-wrapper .csd-toggle-button:checked + .csd-toggle-button-label .csd-toggle-button-text {
  color: var(--csd-toggle-button-checked-text-color) !important;
}
.csd-toggle-button-wrapper .csd-toggle-button:disabled + .csd-toggle-button-label {
  opacity: var(--csd-toggle-button-disabled-opacity);
  cursor: not-allowed;
}
.csd-toggle-button-wrapper .csd-toggle-button:disabled + .csd-toggle-button-label:hover {
  background-color: var(--csd-toggle-button-disabled-hover-bg);
  border-color: var(--csd-toggle-button-disabled-hover-border);
  color: var(--csd-toggle-button-text-color) !important;
}

:root {
  --csd-toggle-width: 44px;
  --csd-toggle-height: 24px;
  --csd-toggle-margin: 0;
  --csd-toggle-label-margin: 8px;
  --csd-toggle-control-radius: 12px;
  --csd-toggle-control-bg: var(--bc-input);
  --csd-toggle-control-checked-bg: var(--accent-color);
  --csd-toggle-control-disabled-bg: var(--bg-input-disabled);
  --csd-toggle-knob-size: 20px;
  --csd-toggle-knob-offset: 2px;
  --csd-toggle-knob-bg: white;
  --csd-toggle-knob-disabled-bg: var(--text-color-disabled);
  --csd-toggle-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --csd-toggle-knob-translate: 20px;
  --csd-toggle-focus-shadow: 0 0 0 2px var(--secondary-color);
  --csd-toggle-group-gap: var(--gap-field);
  --csd-toggle-switch-width: 2.5rem;
  --csd-toggle-switch-height: 1.5rem;
  --csd-toggle-switch-radius: 12px;
  --csd-toggle-switch-bg: #cbd5e1;
  --csd-toggle-switch-checked-bg: #020617;
  --csd-toggle-switch-knob-size: 1rem;
  --csd-toggle-switch-knob-offset: 0.25rem;
  --csd-toggle-switch-knob-bg: white;
  --csd-toggle-switch-knob-translate: 1rem;
  --csd-toggle-icon-font-size: 0.75rem;
  --csd-toggle-icon-left: 0.45rem;
  --csd-toggle-icon-checked-left: 1.5rem;
  --csd-toggle-icon-color: #000000;
  --csd-toggle-text-width: 3.5rem;
  --csd-toggle-text-font-size: 0.625rem;
  --csd-toggle-text-font-weight: 500;
  --csd-toggle-text-color: white;
  --csd-toggle-text-right: 0.5rem;
  --csd-toggle-text-left: 0.5rem;
  --csd-toggle-text-knob-left: 2.25rem;
  --csd-toggle-switch-focus-shadow: 0 0 0 2px rgba(2, 6, 23, 0.1);
  --csd-toggle-switch-disabled-opacity: 0.5;
  --csd-toggle-group-alt-gap: 0.75rem;
  --csd-toggle-label-font-size: 0.875rem;
  --csd-toggle-label-color: #475569;
}

.csd-toggle-wrapper, .csd-toggle-group {
  display: inline-block;
  user-select: none;
}
.csd-toggle-wrapper .csd-toggle, .csd-toggle-group .csd-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.csd-toggle-wrapper .csd-toggle-switch, .csd-toggle-group .csd-toggle-switch {
  position: relative;
  display: flex;
  align-items: center;
  width: var(--csd-toggle-switch-width);
  height: var(--csd-toggle-switch-height);
  background-color: var(--csd-toggle-switch-bg);
  border-radius: var(--csd-toggle-switch-radius);
  cursor: pointer;
  transition: background-color 0.2s;
}
@media (max-width: 768px) {
  .csd-toggle-wrapper .csd-toggle-switch, .csd-toggle-group .csd-toggle-switch {
    width: calc(var(--csd-toggle-switch-width) / 1.25);
    height: calc(var(--csd-toggle-switch-height) / 1.25);
  }
}
.csd-toggle-wrapper .csd-toggle-switch::after, .csd-toggle-group .csd-toggle-switch::after {
  content: "";
  position: absolute;
  left: var(--csd-toggle-switch-knob-offset);
  width: var(--csd-toggle-switch-knob-size);
  height: var(--csd-toggle-switch-knob-size);
  background-color: var(--csd-toggle-switch-knob-bg);
  border-radius: 50%;
  transition: all 0.2s;
  z-index: 0;
}
@media (max-width: 768px) {
  .csd-toggle-wrapper .csd-toggle-switch::after, .csd-toggle-group .csd-toggle-switch::after {
    width: calc(var(--csd-toggle-switch-knob-size) / 1.25);
    height: calc(var(--csd-toggle-switch-knob-size) / 1.25);
    left: calc(var(--csd-toggle-switch-knob-offset) / 1.25);
  }
}
.csd-toggle-wrapper .csd-toggle-switch.checked, .csd-toggle-group .csd-toggle-switch.checked {
  background-color: var(--csd-toggle-switch-checked-bg);
}
.csd-toggle-wrapper .csd-toggle-switch.checked::after, .csd-toggle-group .csd-toggle-switch.checked::after {
  left: calc(var(--csd-toggle-switch-knob-offset) + var(--csd-toggle-switch-knob-translate));
}
@media (max-width: 768px) {
  .csd-toggle-wrapper .csd-toggle-switch.checked::after, .csd-toggle-group .csd-toggle-switch.checked::after {
    left: calc(var(--csd-toggle-switch-knob-offset) + var(--csd-toggle-switch-knob-translate) / 1.25);
  }
}
.csd-toggle-wrapper .csd-toggle-switch.with-icons::before, .csd-toggle-group .csd-toggle-switch.with-icons::before {
  content: attr(data-icon-unchecked);
  position: absolute;
  left: var(--csd-toggle-icon-left);
  color: var(--csd-toggle-icon-color);
  z-index: 2;
  font-size: var(--csd-toggle-icon-font-size);
  line-height: 1;
  transition: all 0.2s;
}
.csd-toggle-wrapper .csd-toggle-switch.with-icons.checked::before, .csd-toggle-group .csd-toggle-switch.with-icons.checked::before {
  content: attr(data-icon-checked);
  left: var(--csd-toggle-icon-checked-left);
}
.csd-toggle-wrapper .csd-toggle-switch.with-text, .csd-toggle-group .csd-toggle-switch.with-text {
  width: var(--csd-toggle-text-width);
}
.csd-toggle-wrapper .csd-toggle-switch.with-text::before, .csd-toggle-group .csd-toggle-switch.with-text::before {
  content: attr(data-text-unchecked);
  position: absolute;
  right: var(--csd-toggle-text-right);
  color: var(--csd-toggle-text-color);
  font-size: var(--csd-toggle-text-font-size);
  font-weight: var(--csd-toggle-text-font-weight);
  text-transform: uppercase;
}
.csd-toggle-wrapper .csd-toggle-switch.with-text.checked::before, .csd-toggle-group .csd-toggle-switch.with-text.checked::before {
  content: attr(data-text-checked);
  left: var(--csd-toggle-text-left);
}
.csd-toggle-wrapper .csd-toggle-switch.with-text.checked::after, .csd-toggle-group .csd-toggle-switch.with-text.checked::after {
  left: var(--csd-toggle-text-knob-left);
}
.csd-toggle-wrapper .csd-toggle:focus + .csd-toggle-switch, .csd-toggle-group .csd-toggle:focus + .csd-toggle-switch {
  box-shadow: var(--csd-toggle-switch-focus-shadow);
}
.csd-toggle-wrapper .csd-toggle:disabled + .csd-toggle-switch, .csd-toggle-group .csd-toggle:disabled + .csd-toggle-switch {
  opacity: var(--csd-toggle-switch-disabled-opacity);
  cursor: not-allowed;
}

.csd-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: var(--csd-toggle-group-alt-gap);
}
@media (max-width: 768px) {
  .csd-toggle-group {
    gap: calc(var(--csd-toggle-group-alt-gap) / 1.25);
  }
}
.csd-toggle-group .csd-toggle-label {
  font-size: var(--csd-toggle-label-font-size);
  color: var(--csd-toggle-label-color);
  user-select: none;
}

/* Toolbar Component */
:root {
  --csd-toolbar-display: flex;
  --csd-toolbar-align: center;
  --csd-toolbar-justify: space-between;
  --csd-toolbar-padding: 0.75rem;
  --csd-toolbar-bg: var(--bg-light);
  --csd-toolbar-border: 1px solid var(--bc-card);
  --csd-toolbar-border-radius: 0.25rem;
  --csd-toolbar-min-height: 48px;
  --csd-toolbar-gap: 0.5rem;
  --csd-toolbar-section-display: flex;
  --csd-toolbar-section-align: center;
  --csd-toolbar-section-gap: 0.5rem;
  --csd-toolbar-section-flex: 0 1 auto;
  --csd-toolbar-center-flex: 1 1 auto;
  --csd-toolbar-center-justify: center;
  --csd-toolbar-center-padding: 0 1rem;
  --csd-toolbar-iconfield-width: 100%;
  --csd-toolbar-iconfield-max-width: 240px;
  --csd-toolbar-iconfield-position: relative;
  --csd-toolbar-iconfield-icon-position: absolute;
  --csd-toolbar-iconfield-icon-left: 8px;
  --csd-toolbar-iconfield-icon-top: 50%;
  --csd-toolbar-iconfield-icon-transform: translateY(-50%);
  --csd-toolbar-iconfield-icon-color: var(--text-color-secondary);
  --csd-toolbar-iconfield-icon-size: 1.2rem;
  --csd-toolbar-iconfield-input-width: 100%;
  --csd-toolbar-iconfield-input-padding-left: 2rem;
  --csd-toolbar-iconfield-input-box-shadow: none;
  --csd-toolbar-group-display: flex;
  --csd-toolbar-group-align: center;
  --csd-toolbar-group-gap: 0.25rem;
  --csd-toolbar-group-border-right: 1px solid var(--bc-card);
  --csd-toolbar-group-padding-right: 0.5rem;
  --csd-toolbar-group-margin-right: 0.5rem;
  --csd-toolbar-btn-display: inline-flex;
  --csd-toolbar-btn-align: center;
  --csd-toolbar-btn-justify: center;
  --csd-toolbar-btn-padding: 0.5rem;
  --csd-toolbar-btn-height: 36px;
  --csd-toolbar-btn-min-width: 36px;
  --csd-toolbar-btn-color: #64748b;
  --csd-toolbar-btn-bg: transparent;
  --csd-toolbar-btn-border: none;
  --csd-toolbar-btn-border-radius: var(--br-field, 0.25rem);
  --csd-toolbar-btn-cursor: pointer;
  --csd-toolbar-btn-transition: var(--transition, all 0.2s);
  --csd-toolbar-btn-hover-color: var(--text-color);
  --csd-toolbar-btn-hover-bg: var(--bg-highlight, #edf1f5);
  --csd-toolbar-btn-active-color: var(--accent-color);
  --csd-toolbar-btn-active-bg: rgba(var(--csd-color-primary-rgb), 0.08);
  --csd-toolbar-btn-disabled-opacity: 0.5;
  --csd-toolbar-icon-size: 1.25rem;
  --csd-toolbar-icon-small-size: 1rem;
  --csd-toolbar-icon-stroke-width: 40px;
  --csd-toolbar-separator-width: 1px;
  --csd-toolbar-separator-height: 24px;
  --csd-toolbar-separator-bg: var(--bc-card);
  --csd-toolbar-separator-margin: 0 0.25rem;
  --csd-toolbar-separator-vertical-width: 100%;
  --csd-toolbar-separator-vertical-height: 1px;
  --csd-toolbar-separator-vertical-margin: 0.25rem 0;
  --csd-toolbar-spacer-flex: 1;
  --csd-toolbar-compact-padding: 0.25rem;
  --csd-toolbar-btn-compact-padding: 0.25rem;
  --csd-toolbar-icon-compact-size: 1rem;
  --csd-toolbar-vertical-direction: column;
  --csd-toolbar-vertical-align: stretch;
  --csd-toolbar-vertical-width: fit-content;
  --csd-toolbar-group-vertical-direction: column;
  --csd-toolbar-group-vertical-border-bottom: 1px solid var(--bc-card);
  --csd-toolbar-group-vertical-padding-bottom: 0.5rem;
  --csd-toolbar-group-vertical-margin-bottom: 0.5rem;
  --csd-toolbar-responsive-wrap: wrap;
}

.csd-toolbar {
  display: var(--csd-toolbar-display);
  align-items: var(--csd-toolbar-align);
  justify-content: var(--csd-toolbar-justify);
  padding: var(--csd-toolbar-padding);
  background-color: var(--csd-toolbar-bg);
  border: var(--csd-toolbar-border);
  border-radius: var(--csd-toolbar-border-radius);
  min-height: var(--csd-toolbar-min-height);
  gap: var(--csd-toolbar-gap);
}
.csd-toolbar .csd-toolbar-start,
.csd-toolbar .csd-toolbar-end {
  display: var(--csd-toolbar-section-display);
  align-items: var(--csd-toolbar-section-align);
  gap: var(--csd-toolbar-section-gap);
  flex: var(--csd-toolbar-section-flex);
}
.csd-toolbar .csd-toolbar-center {
  display: var(--csd-toolbar-section-display);
  align-items: var(--csd-toolbar-section-align);
  flex: var(--csd-toolbar-center-flex);
  justify-content: var(--csd-toolbar-center-justify);
  padding: var(--csd-toolbar-center-padding);
}
.csd-toolbar .csd-toolbar-center .csd-iconfield {
  width: var(--csd-toolbar-iconfield-width);
  max-width: var(--csd-toolbar-iconfield-max-width);
  position: var(--csd-toolbar-iconfield-position);
}
.csd-toolbar .csd-toolbar-center .csd-iconfield ion-icon {
  position: var(--csd-toolbar-iconfield-icon-position);
  left: var(--csd-toolbar-iconfield-icon-left);
  top: var(--csd-toolbar-iconfield-icon-top);
  transform: var(--csd-toolbar-iconfield-icon-transform);
  color: var(--csd-toolbar-iconfield-icon-color);
  font-size: var(--csd-toolbar-iconfield-icon-size);
}
.csd-toolbar .csd-toolbar-center .csd-iconfield .csd-input {
  width: var(--csd-toolbar-iconfield-input-width);
  padding-left: var(--csd-toolbar-iconfield-input-padding-left);
  box-shadow: var(--csd-toolbar-iconfield-input-box-shadow);
}
.csd-toolbar .toolbar-group {
  display: var(--csd-toolbar-group-display);
  align-items: var(--csd-toolbar-group-align);
  gap: var(--csd-toolbar-group-gap);
}
.csd-toolbar .toolbar-group:not(:last-child) {
  border-right: var(--csd-toolbar-group-border-right);
  padding-right: var(--csd-toolbar-group-padding-right);
  margin-right: var(--csd-toolbar-group-margin-right);
}
.csd-toolbar .toolbar-button,
.csd-toolbar .csd-btn:not(.btn-primary) {
  display: var(--csd-toolbar-btn-display);
  align-items: var(--csd-toolbar-btn-align);
  justify-content: var(--csd-toolbar-btn-justify);
  padding: var(--csd-toolbar-btn-padding);
  height: var(--csd-toolbar-btn-height);
  min-width: var(--csd-toolbar-btn-min-width);
  color: var(--csd-toolbar-btn-color);
  background: var(--csd-toolbar-btn-bg);
  border: var(--csd-toolbar-btn-border);
  border-radius: var(--csd-toolbar-btn-border-radius);
  cursor: var(--csd-toolbar-btn-cursor);
  transition: var(--csd-toolbar-btn-transition);
}
.csd-toolbar .toolbar-button:hover, .csd-toolbar .toolbar-button.text-only:hover,
.csd-toolbar .csd-btn:not(.btn-primary):hover,
.csd-toolbar .csd-btn:not(.btn-primary).text-only:hover {
  color: var(--csd-toolbar-btn-hover-color);
  background-color: var(--csd-toolbar-btn-hover-bg);
}
.csd-toolbar .toolbar-button.active,
.csd-toolbar .csd-btn:not(.btn-primary).active {
  color: var(--csd-toolbar-btn-active-color);
  background-color: var(--csd-toolbar-btn-active-bg);
}
.csd-toolbar .toolbar-button.disabled,
.csd-toolbar .csd-btn:not(.btn-primary).disabled {
  opacity: var(--csd-toolbar-btn-disabled-opacity);
  cursor: not-allowed;
}
.csd-toolbar .toolbar-button.disabled:hover,
.csd-toolbar .csd-btn:not(.btn-primary).disabled:hover {
  background: none;
  color: var(--csd-toolbar-btn-color);
}
.csd-toolbar .toolbar-button ion-icon,
.csd-toolbar .csd-btn:not(.btn-primary) ion-icon {
  color: inherit;
  font-size: var(--csd-toolbar-icon-size);
  --ionicon-stroke-width: var(--csd-toolbar-icon-stroke-width);
}
.csd-toolbar .toolbar-button ion-icon:last-child,
.csd-toolbar .csd-btn:not(.btn-primary) ion-icon:last-child {
  font-size: var(--csd-toolbar-icon-small-size);
}
.csd-toolbar .toolbar-separator {
  width: var(--csd-toolbar-separator-width);
  height: var(--csd-toolbar-separator-height);
  background-color: var(--csd-toolbar-separator-bg);
  margin: var(--csd-toolbar-separator-margin);
}
.csd-toolbar .toolbar-spacer {
  flex: var(--csd-toolbar-spacer-flex);
}
.csd-toolbar.compact {
  padding: var(--csd-toolbar-compact-padding);
}
.csd-toolbar.compact .toolbar-button,
.csd-toolbar.compact .csd-btn:not(.btn-primary) {
  padding: var(--csd-toolbar-btn-compact-padding);
}
.csd-toolbar.compact .toolbar-button ion-icon,
.csd-toolbar.compact .csd-btn:not(.btn-primary) ion-icon {
  font-size: var(--csd-toolbar-icon-compact-size);
}
.csd-toolbar.vertical {
  flex-direction: var(--csd-toolbar-vertical-direction);
  align-items: var(--csd-toolbar-vertical-align);
  width: var(--csd-toolbar-vertical-width);
}
.csd-toolbar.vertical .toolbar-group {
  flex-direction: var(--csd-toolbar-group-vertical-direction);
  border-right: none;
  border-bottom: var(--csd-toolbar-group-vertical-border-bottom);
  padding-right: 0;
  padding-bottom: var(--csd-toolbar-group-vertical-padding-bottom);
  margin-right: 0;
  margin-bottom: var(--csd-toolbar-group-vertical-margin-bottom);
}
.csd-toolbar.vertical .toolbar-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.csd-toolbar.vertical .toolbar-separator {
  width: var(--csd-toolbar-separator-vertical-width);
  height: var(--csd-toolbar-separator-vertical-height);
  margin: var(--csd-toolbar-separator-vertical-margin);
}
@media (max-width: 768px) {
  .csd-toolbar.responsive {
    flex-wrap: var(--csd-toolbar-responsive-wrap);
  }
  .csd-toolbar.responsive .toolbar-group {
    flex-wrap: var(--csd-toolbar-responsive-wrap);
  }
}
.csd-toolbar.overflow .toolbar-group {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.csd-toolbar.overflow .toolbar-group::-webkit-scrollbar {
  display: none;
}

.m-0 {
  margin: 0 !important;
}

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

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

.ms-0 {
  margin-left: 0 !important;
}

.me-0 {
  margin-right: 0 !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pl-3 {
  padding-left: 1rem !important;
}

.pr-3 {
  padding-right: 1rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4 {
  padding-left: 1.5rem !important;
}

.pr-4 {
  padding-right: 1.5rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.mx-5 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.pl-5 {
  padding-left: 3rem !important;
}

.pr-5 {
  padding-right: 3rem !important;
}

.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

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

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

.d-inline-block {
  display: inline-block !important;
}

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

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

.d-inline-flex {
  display: inline-flex !important;
}

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

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

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

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

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

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

.text-end {
  text-align: right !important;
}

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

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.w-25 {
  width: 25% !important;
}

.h-25 {
  height: 25% !important;
}

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

.h-50 {
  height: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.h-75 {
  height: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-auto {
  height: auto !important;
}

.border {
  border: 1px solid var(--border-color) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid var(--border-color) !important;
}

.border-end {
  border-right: 1px solid var(--border-color) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--border-color) !important;
}

.border-start {
  border-left: 1px solid var(--border-color) !important;
}

.rounded {
  border-radius: var(--border-radius) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow {
  box-shadow: var(--shadow) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.user-select-none {
  user-select: none !important;
}

.user-select-all {
  user-select: all !important;
}

.user-select-auto {
  user-select: auto !important;
}

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

hr, .hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: 0.25;
}

.hr-thick {
  border-top-width: 2px;
  opacity: 0.5;
}

.hr-dashed {
  border-top-style: dashed;
}

.hr-dotted {
  border-top-style: dotted;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1rem 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid currentColor;
}
.divider::before {
  margin-right: 1rem;
}
.divider::after {
  margin-left: 1rem;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

.container-fluid {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}
.row > * {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.g-0 {
  margin-right: 0;
  margin-left: 0;
}
.g-0 > * {
  padding-right: 0;
  padding-left: 0;
}

.g-1 {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}
.g-1 > * {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

.g-2 {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}
.g-2 > * {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.g-3 {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}
.g-3 > * {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.g-4 {
  margin-right: -1rem;
  margin-left: -1rem;
}
.g-4 > * {
  padding-right: 1rem;
  padding-left: 1rem;
}

.g-5 {
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}
.g-5 > * {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

h1, .h1 {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h2, .h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h3, .h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h4, .h4 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h6, .h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.display-1 {
  font-size: 5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-5 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-6 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

@media (max-width: 768px) {
  h1, .h1 {
    font-size: 2rem;
  }
  h2, .h2 {
    font-size: 1.75rem;
  }
  h3, .h3 {
    font-size: 1.5rem;
  }
  h4, .h4 {
    font-size: 1.25rem;
  }
  h5, .h5 {
    font-size: 1.1rem;
  }
  h6, .h6 {
    font-size: 1rem;
  }
  .display-1 {
    font-size: 4rem;
  }
  .display-2 {
    font-size: 3.5rem;
  }
  .display-3 {
    font-size: 3rem;
  }
  .display-4 {
    font-size: 2.5rem;
  }
  .display-5 {
    font-size: 2rem;
  }
  .display-6 {
    font-size: 1.75rem;
  }
}
.heading-underline {
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.25rem;
}

.heading-overline {
  border-top: 2px solid currentColor;
  padding-top: 0.25rem;
}

.heading-divider {
  display: flex;
  align-items: center;
}
.heading-divider::after {
  content: "";
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: currentColor;
  opacity: 0.2;
}

/*# sourceMappingURL=csdstyle.css.map */