/* Default Theme - Based on Tailwind CSS Design System */
:root {
    /* Colors */
    --input-border: #e2e8f0;
    --primary: #3b82f6;
    --input-border-error: #ef4444;
    --input-bg: #f8fafc;
    --input-text: #111827;
    --input-placeholder: #9ca3af;
    --input-error-text: #ef4444;
    --input-desc-text: #6b7280;
    --input-label-color: #374151;
    --input-label-secondary-color: #6b7280;
    --input-disabled-bg: #f9fafb;
    --input-disabled-text: #6b7280;
    --input-action-hover-bg: #f3f4f6;
    --input-prefix-color: #6b7280;
    
    /* Dimensions */
    --input-radius: 4px;
    --input-padding-x: 12px;
    --input-padding-y: 10px;
    --input-height: 3rem;
    
    /* Typography */
    --input-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --input-font-size: 0.875rem;
    --input-line-height: 1.5rem;
    --input-label-font-size: 0.875rem;
    --input-label-line-height: 1.25rem;
    --input-label-font-weight: 600;
    --input-secondary-font-size: 0.75rem;
    --input-secondary-line-height: 1rem;
    --input-description-font-size: 0.75rem;
    --input-description-line-height: 1rem;
    --input-action-font-size: 0.75rem;
    --input-action-font-weight: 500;
    
    /* Shadows */
    --input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --input-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --input-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    
    /* Transitions */
    --input-transition: all 0.15s ease-in-out;
    
    /* Spacing */
    --input-label-margin-bottom: 0.5rem;
    --input-description-margin-top: 0.5rem;
    --input-error-margin-top: 0.5rem;
    --input-gap: 0.25rem;
    --input-inline-gap: 0.75rem;
    
    /* Border radius for specific elements */
    --input-action-border-radius: 0 0.25rem 0.25rem 0;
    --input-prefix-border-radius: 0.25rem 0 0 0.25rem;
    --input-color-preview-radius: 0.25rem;
    --input-color-button-radius: 4px;
    --input-error-radius: var(--input-radius);
}

/* Core component styles */
.i-field {
    display: flex;
    flex-direction: column;
    position: relative;
}

.i-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--input-gap);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    position: relative;
    border: 1px solid var(--input-border);
    padding: 0;
    margin: 0;
    background-color: var(--input-bg);
    border-radius: var(--input-radius);
    overflow: hidden;
    box-shadow: var(--input-shadow);
    transition: var(--input-transition);
}

.i-wrapper-range {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--input-gap);
    font-family: var(--input-font-family);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    position: relative;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    height: auto;
    box-shadow: none;
    transition: none;
}

.i-wrapper-range range-slider {
    flex: 1;
    margin: 2px 0;
    width: 100%;
    min-width: 200px;
}

.i-wrapper-range range-slider [data-runnable-track] {
    inset: 0 0;
}

.i-wrapper-range range-slider [data-thumb] {
    margin-inline-start: calc(var(--thumb-size) / 2 * -1);
}

.i-wrapper-range range-slider [data-thumb]:first-child {
    margin-inline-start: calc(var(--thumb-size) / 2 * -1);
}

.i-wrapper-range range-slider [data-thumb]:last-child {
    margin-inline-start: calc(var(--thumb-size) / 2 * -1);
}

.i-wrapper-range range-slider [data-thumb] {
    margin-inline-start: calc(var(--thumb-size) / 2 * -1);
}

.i-wrapper-range range-slider [data-thumb]:first-child {
    margin-inline-start: calc(var(--thumb-size) / 2 * -1);
}

.i-value-display {
    margin-left: auto;
    color: var(--primary);
    font-weight: 600;
}

.i-range-limits {
    display: flex;
    justify-content: space-between;
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
    margin-top: 0.25rem;
}

/* Label styles */
.i-label {
    font-weight: var(--input-label-font-weight);
    font-size: var(--input-label-font-size);
    line-height: var(--input-label-line-height);
    color: var(--input-label-color);
    margin-bottom: var(--input-label-margin-bottom);
    display: flex;
}

.i-label .i-required {
    margin-left: auto;
    color: var(--input-label-secondary-color);
    font-size: var(--input-secondary-font-size);
    font-weight: 400;
}

.i-label-group {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: var(--input-gap);
}

.i-label-secondary {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
}

.i-label-secondary .i-icon svg {
    margin: 0 0.25rem;
    width: 1rem;
    height: auto;
}

/* Input styles */
.i-input {
    padding: 0 var(--input-padding-x);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    line-height: var(--input-label-line-height);
    transition: var(--input-transition);
    border: none !important;
    flex-grow: 1;
    height: var(--input-height);
    font-family: inherit;
}

/* Textarea styles */
.i-textarea {
    padding: var(--input-padding-y) var(--input-padding-x);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    transition: var(--input-transition);
    border: none !important;
    flex-grow: 1;
    height: auto;
    font-family: inherit;
    resize: vertical;
    min-height: calc(var(--input-height) * 2);
}

/* Focus and error states */
.i-wrapper:focus-within {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--input-shadow-focus);
}

.i-wrapper-error {
    border-color: var(--input-border-error);
    box-shadow: var(--input-shadow-error);
}

/* Character count */
.i-char-count {
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
    text-align: right;
    margin-top: 0.25rem;
}

/* Date picker styles */
.i-field wc-datepicker {
    margin-top: 1rem;
    width: 100%;
}

.i-field wc-datepicker .wc-datepicker {
    width: 100%;
    max-width: none;
}
/* Datepicker component styles */
wc-datepicker,
wc-datepicker *,
wc-datepicker *:before,
wc-datepicker *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

wc-datepicker {
  display: inline-flex;
}

.wc-datepicker {
  display: block;
  width: min-content;
  min-width: 17rem;
  max-width: 24rem;
  border: 0.0625rem solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  background-color: var(--input-bg);
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  font-weight: 400;
  line-height: 1.5;
}

.wc-datepicker--disabled *:disabled {
  opacity: 0.5;
  cursor: default;
}

.wc-datepicker--disabled .wc-datepicker__weekday {
  color: var(--input-disabled-text);
}

.wc-datepicker--disabled .wc-datepicker__date:focus > * {
  outline: none;
}

.wc-datepicker--disabled .wc-datepicker__date {
  cursor: default;
  opacity: 0.5;
}

.wc-datepicker--disabled .wc-datepicker__date:hover > * {
  background-color: transparent;
}

.wc-datepicker--disabled .wc-datepicker__date--in-range:hover > * {
  background-color: var(--input-action-hover-bg);
}

.wc-datepicker--disabled .wc-datepicker__date--selected:hover > * {
  color: #fff;
  background-color: var(--primary);
}

.wc-datepicker__header {
  display: flex;
  padding: 0.75rem;
  align-items: center;
  gap: 0.5rem;
}

.wc-datepicker__current-month {
  display: flex;
  flex-grow: 1;
  gap: 0.5rem;
}

.wc-datepicker__month-select,
.wc-datepicker__year-select {
  display: flex;
  height: 2rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  align-items: center;
  border: none;
  border-radius: 0.25rem;
  color: var(--input-text);
  background: var(--input-action-hover-bg);
  font: inherit;
  line-height: 1.125;
}

.wc-datepicker__month-select {
  flex-grow: 1;
  cursor: pointer;
  appearance: none;
}

.wc-datepicker__year-select {
  max-width: 5rem;
}

.wc-datepicker__previous-month-button,
.wc-datepicker__next-month-button,
.wc-datepicker__previous-year-button,
.wc-datepicker__next-year-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.25rem;
  color: var(--input-text);
  background-color: transparent;
  background-color: var(--input-action-hover-bg);
  cursor: pointer;
}

.wc-datepicker__body {
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
}

.wc-datepicker__calendar {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.wc-datepicker__weekday > span {
  display: flex;
  padding: 0.125rem;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  aspect-ratio: 1;
}

.wc-datepicker__date {
  padding: 0.125rem;
  text-align: center;
  cursor: pointer;
}

.wc-datepicker__date:focus {
  outline: none;
}

.wc-datepicker__date:focus > * {
  outline: 0.125rem solid var(--primary);
}

.wc-datepicker__date:hover > * {
  background-color: var(--input-action-hover-bg);
}

.wc-datepicker__date > * {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  aspect-ratio: 1;
}

.wc-datepicker__date--current {
}

.wc-datepicker__date--overflowing {
}

.wc-datepicker__date--today > * {
  font-weight: 700;
  font-style: normal;
}

.wc-datepicker__date--in-range > * {
  background-color: var(--input-action-hover-bg);
}

.wc-datepicker__date--selected > *,
.wc-datepicker__date--selected:hover > * {
  color: #fff;
  background-color: var(--primary);
  font-weight: 500;
}

.wc-datepicker__date--disabled {
  color: var(--input-disabled-text);
  cursor: default;
}

.wc-datepicker__date--disabled:not(.wc-datepicker__date--selected):not(.wc-datepicker__date--in-range):hover
  > * {
  background-color: transparent;
}

.wc-datepicker__date--disabled.wc-datepicker__date--in-range:not(.wc-datepicker__date--selected):not(.wc-datepicker__date--in-range)
  > * {
  background-color: transparent;
}

.wc-datepicker__footer {
  display: flex;
  padding-right: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
  align-items: center;
  gap: 0.5rem;
}

.wc-datepicker__clear-button,
.wc-datepicker__today-button {
  display: inline-flex;
  height: 2rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.25rem;
  color: var(--input-text);
  background-color: var(--input-action-hover-bg);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

/* Color picker styles */
.i-color-preview {
    display: inline-block;
    width: calc(var(--input-height) - 1rem);
    height: calc(var(--input-height) - 1rem);
    border-radius: var(--input-color-preview-radius);
    flex-shrink: 0;
}

.clr-field {
    display: block;
    width: 100%;
}

.clr-field button {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--input-color-button-radius);
    cursor: pointer;
    right: 0.5rem;
    z-index: 10;
}

.clr-field input {
    width: 100%;
}

/* Disabled state */
.i-input:disabled {
    background: var(--input-disabled-bg);
    color: var(--input-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.i-input:focus {
    outline: none;
}

.i-input::-webkit-inner-spin-button,
.i-input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Description text */
.i-description {
    font-size: var(--input-description-font-size);
    line-height: var(--input-description-line-height);
    color: var(--input-desc-text);
    margin: var(--input-description-margin-top) 0 0 0;
}

/* Action button */
.i-action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-size: var(--input-action-font-size);
    font-weight: var(--input-action-font-weight);
    border-radius: var(--input-action-border-radius);
    cursor: pointer;
    background-color: transparent;
    flex-shrink: 0;
    width: var(--input-height);
    height: var(--input-height);
    text-align: center;
    transition: var(--input-transition);
    border: none;
    color: #6b7280;
}

.i-action:hover {
    background-color: var(--input-action-hover-bg);
    color: #374151;
}

.i-action svg {
    width: 1em;
    height: 1em;
    line-height: 1;
}

/* Number input actions */
.i-number-actions {
    display: flex;
    height: 100%;
}

.i-action-increase,
.i-action-decrease {
    height: calc(var(--input-height));
    line-height: calc(var(--input-height));
    border-radius: 0;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    border-left: 1px solid var(--input-border);
}

.i-action-increase {
    border-radius: 0 var(--input-radius) 0 0;
    border-bottom: none;
}

.i-action-decrease {
    border-radius: 0 0 var(--input-radius) 0;
}

/* Icon styles */
.i-icon {
    pointer-events: none;
    line-height: 1;
}

.i-icon svg {
    width: 1.25em;
    height: 1.25em;
    line-height: 1;
}

/* Action button states */
.i-action-copy .i-action-icon-check {
    display: none;
}

.i-action-copy .i-action-icon-copy {
    display: block;
}

.i-action-copied .i-action-icon-check {
    display: block;
}

.i-action-copied .i-action-icon-copy {
    display: none;
}

/* Prefix and select country */
.i-prefix,
.i-select-country {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    text-align: left;
    padding: 0 0.75rem 0 0.75rem;
    cursor: pointer;
    align-self: stretch;
    background-color: var(--input-disabled-bg);
    color: var(--input-prefix-color);
    height: var(--input-height);
    border: none;
    font-size: var(--input-font-size);
    line-height: 1;
    border-right: 1px solid var(--input-border);
}

.i-select-country {
    width: intrinsic;
    width: -moz-fit-content;
    width: fit-content;
}

/* Error message */
.i-error {
    color: var(--input-error-text);
    border-color: var(--input-border-error);
    display: none;
    font-size: var(--input-font-size);
    font-weight: 500;
    margin-top: var(--input-error-margin-top);
    line-height: var(--input-label-line-height);
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--input-error-radius);
    padding: 0.75rem 1rem;
}

.i-error ul {
    padding-left: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    list-style: disc;
}

.i-error-visible {
    display: block;
}

/* Inline variant: Horizontal layout */
.i-wrapper.inline {
    flex-direction: row;
    align-items: center;
    gap: var(--input-inline-gap);
}

.i-wrapper.inline .i-label {
    flex-shrink: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.i-wrapper.inline .i-input {
    flex: 1;
}

.i-wrapper.inline .i-description,
.i-wrapper.inline .i-error {
    position: absolute;
    left: -9999px;
    /* Hidden off-screen for inline */
}

/* Responsive: Stack on small screens */
@media (max-width: 640px) {
    .i-wrapper.inline {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Range Slider Element Styles */
@layer range-slider-element {
    range-slider {
        --track-size: 0.4rem;
        --thumb-size: 1rem;
        position: relative;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        block-size: var(--thumb-size);
        inline-size: 100%;
        outline: none;
        user-select: none;
        -webkit-user-select: none;
        touch-action: none
    }

    range-slider[orientation=vertical] {
        flex-direction: column;
        inline-size: var(--thumb-size);
        block-size: 130px
    }

    range-slider [data-track] {
        pointer-events: none;
        flex: 1;
        block-size: var(--track-size);
        border-radius: inherit;
        box-sizing: inherit;
    }

    range-slider[orientation=vertical] [data-track] {
        inline-size: var(--track-size);
        block-size: 100%
    }

    range-slider [data-track-fill] {
        pointer-events: none;
        position: absolute;
        block-size: var(--track-size);
        border-start-start-radius: inherit;
        border-end-start-radius: inherit;
        box-sizing: inherit
    }

    range-slider[orientation=vertical] [data-track-fill] {
        inline-size: var(--track-size);
        block-size: auto;
        border-start-start-radius: unset;
        border-end-end-radius: inherit
    }

    range-slider [data-runnable-track] {
        pointer-events: none;
        position: absolute;
        inset: 0 calc(var(--thumb-size) / 2);
        box-sizing: inherit
    }

    range-slider[orientation=vertical] [data-runnable-track] {
        inset: calc(var(--thumb-size) / 2) 0
    }

    range-slider [data-thumb] {
        pointer-events: auto;
        touch-action: none;
        inline-size: var(--thumb-size);
        block-size: var(--thumb-size);
        position: absolute;
        margin-inline-start: calc(var(--thumb-size) / 2 * -1);
        box-sizing: inherit
    }

    range-slider[orientation=vertical] [data-thumb] {
        margin-inline-start: unset;
        margin-block: calc(var(--thumb-size) / 2 * -1)
    }

    range-slider {
        border-radius: var(--track-size);
        margin: 2px
    }

    range-slider:active {
        opacity: .8
    }

    range-slider[disabled] {
        filter: grayscale(1);
        opacity: .4
    }

    range-slider [data-track] {
        background-color: var(--input-border);
    }

    range-slider [data-track-fill] {
        background-color: var(--primary);
    }

    range-slider [data-thumb] {
        background-color: var(--primary);
        border-radius: 100%;
    }
}

/* Chips styles for multiple selection */
.i-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 1.5rem;
}

.i-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary);
    color: white;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    font-weight: 600;
    transition: var(--input-transition);
}

.i-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    transition: var(--input-transition);
}

.i-chip-remove:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.i-chip-remove:focus {
    outline: 2px solid white;
    outline-offset: 2px;
}

.i-chip-remove-icon {
    display: block;
    line-height: 1;
}

/* Select dropdown styles */
.i-dropdown {
    z-index: 9999;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    box-shadow: var(--input-shadow);
    overflow: hidden;
    margin-top: 0.5rem;
}

.i-search {
    width: 100%;
    padding: var(--input-padding-x);
    border: none;
    border-bottom: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: var(--input-font-size);
    font-family: inherit;
    outline: none;
}

.i-options {
    max-height: 200px;
    overflow-y: auto;
}

.i-option {
    padding: var(--input-padding-x);
    cursor: pointer;
    color: var(--input-text);
    transition: var(--input-transition);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.i-option-label {
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    font-weight: 500;
}

.i-option-description {
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
    font-weight: 400;
}

.i-option:hover {
    background-color: var(--input-action-hover-bg);
    color: var(--input-text);
}

.i-option:hover .i-option-label,
.i-option:hover .i-option-description {
    color: var(--input-text);
}

.i-option-selected {
    background-color: var(--primary);
    color: #fff;
}

.i-option-selected .i-option-label,
.i-option-selected .i-option-description {
    color: #fff;
}

.i-option-highlighted {
    background-color: var(--input-action-hover-bg);
    color: var(--input-text);
}

.i-option-highlighted .i-option-label,
.i-option-highlighted .i-option-description {
    color: var(--input-text);
}

.i-option-selected.i-option-highlighted {
    background-color: var(--primary);
    color: #fff;
}

.i-option-selected.i-option-highlighted .i-option-label,
.i-option-selected.i-option-highlighted .i-option-description {
    color: #fff;
}

/* Radio input styles */
.i-radio-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--input-gap);
}

.i-radio-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.i-radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--input-text);
    transition: var(--input-transition);
    padding: 0.25rem;
    border-radius: var(--input-radius);
    position: relative;
}

.i-radio-option:hover {
    background-color: var(--input-action-hover-bg);
}

.i-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.i-radio-option input[type="radio"]:focus + div .i-radio-label::before {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.i-radio-option .i-radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
    padding-left: 1.75rem;
    font-weight: 600;
}

.i-radio-option .i-radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--input-border);
    border-radius: 50%;
    background-color: var(--input-bg);
    transition: var(--input-transition);
    box-sizing: border-box;
}

.i-radio-option input[type="radio"]:checked + div .i-radio-label::before {
    border-color: var(--primary);
    background-color: var(--primary);
    box-shadow: inset 0 0 0 3px var(--input-bg);
}

.i-radio-option input[type="radio"]:checked + div .i-radio-label::after {
    content: '';
    position: absolute;
    left: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--primary);
    opacity: 1;
    transition: var(--input-transition);
}

.i-radio-option-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.i-radio-option-disabled input[type="radio"]:disabled {
    cursor: not-allowed;
}

.i-radio-option-disabled .i-radio-label {
    cursor: not-allowed;
    color: var(--input-disabled-text);
}

.i-radio-option-disabled .i-radio-label::before {
    background-color: var(--input-disabled-bg);
    border-color: var(--input-border);
}

.i-radio-description {
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
    margin-top: 0.125rem;
    margin-left: 1.75rem;
    display: block;
}

.i-radio-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--input-secondary-font-size);
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    background-color: var(--primary);
    color: white;
    margin-left: 0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
}

/* Checkbox input styles */
.i-checkbox-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--input-gap);
}

.i-checkbox-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.i-checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--input-text);
    transition: var(--input-transition);
    padding: 0.25rem;
    border-radius: var(--input-radius);
    position: relative;
}

.i-checkbox-option:hover {
    background-color: var(--input-action-hover-bg);
}

.i-checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.i-checkbox-option input[type="checkbox"]:focus + div .i-checkbox-label::before {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.i-checkbox-option .i-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
    padding-left: 1.75rem;
    font-weight: 600;
}

.i-checkbox-option .i-checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--input-border);
    border-radius: 0.25rem;
    background-color: var(--input-bg);
    transition: var(--input-transition);
    box-sizing: border-box;
}

.i-checkbox-option input[type="checkbox"]:checked + div .i-checkbox-label::before {
    border-color: var(--primary);
    background-color: var(--primary);
}

.i-checkbox-option input[type="checkbox"]:checked + div .i-checkbox-label::after {
    content: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%3E');
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0.1875rem;
    width: 1rem;
    height: 1rem;
    left: 0;
    top: 0.125rem;
    opacity: 1;
    color: #fff;
    transition: var(--input-transition);
}

.i-checkbox-option-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.i-checkbox-option-disabled input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.i-checkbox-option-disabled .i-checkbox-label {
    cursor: not-allowed;
    color: var(--input-disabled-text);
}

.i-checkbox-option-disabled .i-checkbox-label::before {
    background-color: var(--input-disabled-bg);
    border-color: var(--input-border);
}

.i-checkbox-description {
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
    margin-top: 0.125rem;
    margin-left: 1.75rem;
    display: block;
}

.i-checkbox-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: var(--input-secondary-font-size);
    font-weight: 600;
    line-height: 1;
    border-radius: 9999px;
    background-color: var(--primary);
    color: white;
    margin-left: 0.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
}

/* Color picker styles - adapted for Tailwind design system */
.pickr {
    position: relative;
    overflow: visible;
    transform: translateY(0);
}

.pickr * {
    box-sizing: border-box;
    outline: none;
    border: none;
    -webkit-appearance: none;
}

.pickr .pcr-button {
    position: relative;
    height: 2em;
    width: 2em;
    padding: .5em;
    cursor: pointer;
    font-family: var(--input-font-family);
    border-radius: var(--input-radius);
    background: transparent;
    transition: var(--input-transition);
}

.pickr .pcr-button::before {
    display: none;
}

.pickr .pcr-button::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: var(--input-transition);
    background: var(--pcr-color);
    border-radius: var(--input-radius);
}

.pickr .pcr-button.clear {
    background-size: 70%;
}

.pickr .pcr-button.clear::before {
    opacity: 0;
}

.pickr .pcr-button.clear:focus {
    box-shadow: var(--input-shadow-focus);
}

.pickr .pcr-button.disabled {
    cursor: not-allowed;
}

.pickr *, .pcr-app * {
    box-sizing: border-box;
    outline: none;
    border: none;
    -webkit-appearance: none;
}

.pickr input:focus, .pickr input.pcr-active, .pickr button:focus, .pickr button.pcr-active, .pcr-app input:focus, .pcr-app input.pcr-active, .pcr-app button:focus, .pcr-app button.pcr-active {
    box-shadow: var(--input-shadow-focus);
}

.pickr .pcr-palette, .pickr .pcr-slider, .pcr-app .pcr-palette, .pcr-app .pcr-slider {
    transition: box-shadow .3s;
}

.pickr .pcr-palette:focus, .pickr .pcr-slider:focus, .pcr-app .pcr-palette:focus, .pcr-app .pcr-slider:focus {
    box-shadow: var(--input-shadow-focus);
}

.pcr-app {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 10000;
    border-radius: var(--input-radius);
    background: var(--input-bg);
    opacity: 0;
    display: none;
    transition: opacity .3s, visibility 0s .3s;
    font-family: var(--input-font-family);
    box-shadow: var(--input-shadow);
    margin-top: 0.5rem;
    width: 100%;
    left: 0 !important;
    right: 0 !important;
}

.pcr-app.visible {
    transition: opacity .3s;
    visibility: visible;
    opacity: 1;
    display: block;
}

/* Focus indicators for accessibility */
.pcr-app .pcr-swatches > button:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pcr-app .pcr-interaction input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pcr-app .pcr-interaction .pcr-save:focus,
.pcr-app .pcr-interaction .pcr-cancel:focus,
.pcr-app .pcr-interaction .pcr-clear:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Keyboard navigation support */
.pcr-app .pcr-swatches > button {
    tabindex: 0;
}

.pcr-app .pcr-interaction input {
    tabindex: 0;
}

.pcr-app .pcr-interaction .pcr-save,
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
    tabindex: 0;
}

/* High contrast focus for better accessibility */
@media (prefers-contrast: high) {
    .pcr-app .pcr-swatches > button:focus,
    .pcr-app .pcr-interaction input:focus,
    .pcr-app .pcr-interaction .pcr-save:focus,
    .pcr-app .pcr-interaction .pcr-cancel:focus,
    .pcr-app .pcr-interaction .pcr-clear:focus {
        outline: 3px solid #000;
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .pcr-app {
        transition: none;
    }
    
    .pcr-app .pcr-swatches > button,
    .pcr-app .pcr-interaction input,
    .pcr-app .pcr-interaction .pcr-save,
    .pcr-app .pcr-interaction .pcr-cancel,
    .pcr-app .pcr-interaction .pcr-clear {
        transition: none;
    }
}

.pcr-app .pcr-swatches {
    display: flex;
    flex-wrap: wrap;
    margin-top: .75em;
}

.pcr-app .pcr-swatches.pcr-last {
    margin: 0;
}

@supports (display: grid) {
    .pcr-app .pcr-swatches {
        display: grid;
        align-items: center;
        grid-template-columns: repeat(auto-fit, 1.75em);
    }
}

.pcr-app .pcr-swatches > button {
    font-size: 1em;
    position: relative;
    width: calc(1.75em - 5px);
    height: calc(1.75em - 5px);
    border-radius: var(--input-radius);
    cursor: pointer;
    margin: 2.5px;
    flex-shrink: 0;
    justify-self: center;
    transition: var(--input-transition);
    overflow: hidden;
    background: rgba(0,0,0,0);
    z-index: 1;
}

.pcr-app .pcr-swatches > button::before {
    display: none;
}

.pcr-app .pcr-swatches > button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--pcr-color);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--input-radius);
    box-sizing: border-box;
}

.pcr-app .pcr-swatches > button:hover {
    filter: brightness(1.05);
}

.pcr-app .pcr-swatches > button:not(.pcr-active) {
    box-shadow: none;
}

.pcr-app .pcr-interaction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -0.2em 0 -0.2em;
}

.pcr-app .pcr-interaction > * {
    margin: 0 .2em;
}

.pcr-app .pcr-interaction input {
    letter-spacing: .07em;
    font-size: .75em;
    text-align: center;
    cursor: pointer;
    color: var(--input-desc-text);
    background: var(--input-action-hover-bg);
    border-radius: var(--input-radius);
    transition: var(--input-transition);
    padding: .45em .5em;
    margin-top: .75em;
}

.pcr-app .pcr-interaction input:hover {
    filter: brightness(0.975);
}

.pcr-app .pcr-interaction input:focus {
    box-shadow: var(--input-shadow-focus);
    z-index: 2;
}

.pcr-app .pcr-interaction .pcr-result {
    color: var(--input-desc-text);
    text-align: left;
    flex: 1 1 8em;
    min-width: 8em;
    transition: var(--input-transition);
    border-radius: var(--input-radius);
    background: var(--input-action-hover-bg);
    cursor: text;
}

.pcr-app .pcr-interaction .pcr-result::-moz-selection {
    background: var(--primary);
    color: #fff;
}

.pcr-app .pcr-interaction .pcr-result::selection {
    background: var(--primary);
    color: #fff;
}

.pcr-app .pcr-interaction .pcr-type.active {
    color: #fff;
    background: var(--primary);
}

.pcr-app .pcr-interaction .pcr-save, .pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
    color: #fff;
    width: auto;
}

.pcr-app .pcr-interaction .pcr-save, .pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
    color: #fff;
}

.pcr-app .pcr-interaction .pcr-save:hover, .pcr-app .pcr-interaction .pcr-cancel:hover, .pcr-app .pcr-interaction .pcr-clear:hover {
    filter: brightness(0.925);
}

.pcr-app .pcr-interaction .pcr-save {
    background: var(--primary);
}

.pcr-app .pcr-interaction .pcr-clear, .pcr-app .pcr-interaction .pcr-cancel {
    background: var(--input-border-error);
}

.pcr-app .pcr-interaction .pcr-clear:focus, .pcr-app .pcr-interaction .pcr-cancel:focus {
    box-shadow: var(--input-shadow-error);
    z-index: 2;
}

.pcr-app[data-theme=monolith] {
    width: 100%;
    max-width: 95vw;
    padding: .8em;
    border: 1px solid var(--input-border);
}

.pcr-app[data-theme=monolith] .pcr-selection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: .5em;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview::before {
    display: none;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
    cursor: pointer;
    transition: var(--input-transition);
    border-radius: var(--input-radius) 0 0 var(--input-radius);
    z-index: 2;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color {
    border-radius: 0 var(--input-radius) var(--input-radius) 0;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color {
    background: var(--pcr-color);
    width: 50%;
    height: 100%;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette {
    width: 100%;
    height: 8em;
    z-index: 1;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette {
    border-radius: var(--input-radius);
    width: 100%;
    height: 100%;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette::before {
    display: none;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity {
    height: .5em;
    margin-top: .75em;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker {
    top: 50%;
    transform: translateY(-50%);
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
    flex-grow: 1;
    border-radius: 50em;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider {
    background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
    background: linear-gradient(to right, transparent, black);
    background-size: 100%;
}

/* Password strength meter styles */
.i-strength-meter {
    display: flex;
    align-items: center;
    margin-top: var(--input-description-margin-top);
    gap: 0.5rem;
}

.i-strength-bar {
    display: flex;
    flex: 1;
    height: 4px;
    gap: 4px;
}

.i-strength-level {
    flex: 1;
    border-radius: 2px;
    background-color: var(--input-border);
    transition: var(--input-transition);
}

.i-strength-meter.weak .i-strength-level.active {
    background-color: #ef4444; /* red */
}

.i-strength-meter.medium .i-strength-level.active {
    background-color: #f97316; /* orange */
}

.i-strength-meter.strong .i-strength-level.active {
    background-color: #22c55e; /* green */
}

.i-strength-label {
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    font-weight: 500;
    text-transform: capitalize;
    transition: var(--input-transition);
}

.i-strength-meter.weak .i-strength-label {
    color: #ef4444; /* red */
}

.i-strength-meter.medium .i-strength-label {
    color: #f97316; /* orange */
}

.i-strength-meter.strong .i-strength-label {
    color: #22c55e; /* green */
}

/* Toggle switch styles */

.i-field.i-toggle-field {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.i-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: var(--input-transition);
    position: relative;
}

.i-toggle:has(.i-toggle-input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

.i-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.i-toggle-track {
    position: relative;
    width: var(--toggle-width, 2.5rem);
    height: var(--toggle-height, 1.25rem);
    background-color: var(--input-border);
    border-radius: 9999px;
    transition: var(--input-transition);
    display: flex;
    align-items: center;
    padding: 0.125rem;
}

.i-toggle-thumb {
    width: var(--toggle-thumb-size, 1rem);
    height: var(--toggle-thumb-size, 1rem);
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: var(--input-transition);
    flex-shrink: 0;
}

.i-toggle-labels {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 3rem;
}

.i-toggle-label {
    font-size: var(--input-secondary-font-size);
    line-height: var(--input-secondary-line-height);
    color: var(--input-label-secondary-color);
    transition: var(--input-transition);
    text-align: right;
}

.i-toggle-label-on {
    font-weight: 600;
    color: var(--primary);
}

.i-toggle-label-off {
    font-weight: 400;
}

/* Checked state */
.i-toggle.i-toggle-checked .i-toggle-track {
    background-color: var(--primary);
}

.i-toggle.i-toggle-checked .i-toggle-thumb {
    transform: translateX(100%);
}

.i-toggle.i-toggle-checked .i-toggle-label-on {
    color: var(--primary);
    font-weight: 700;
}

.i-toggle.i-toggle-checked .i-toggle-label-off {
    color: var(--input-label-secondary-color);
    font-weight: 400;
}

/* Focus state */
.i-toggle-input:focus + .i-toggle-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Sizes */
.i-toggle.i-toggle-sm {
    --toggle-width: 2rem;
    --toggle-height: 1rem;
    --toggle-thumb-size: 0.75rem;
    --input-secondary-font-size: 0.6875rem;
}

.i-toggle.i-toggle-md {
    --toggle-width: 2.5rem;
    --toggle-height: 1.25rem;
    --toggle-thumb-size: 1rem;
    --input-secondary-font-size: 0.75rem;
}

.i-toggle.i-toggle-lg {
    --toggle-width: 3rem;
    --toggle-height: 1.5rem;
    --toggle-thumb-size: 1.25rem;
    --input-secondary-font-size: 0.875rem;
}

/* Content wrapper for label and description on left, toggle on right */
.i-toggle-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.i-toggle-content .i-label {
    margin-bottom: 0;
}

.i-toggle-content .i-description {
    margin-top: 0;
}

.i-toggle-content .i-error {
    margin-top: 0.25rem;
}

/* Wrapper for toggle field */
.i-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.i-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.i-wrapper.i-wrapper-error {
    /* Error styles handled by existing wrapper-error class */
}