/* Ejected Theme CSS - Local Ownership
 * Tailwind CSS configuration is now standalone in tailwind.config.js
 * Theme styles are in ./theme/ directory
 */

/* Theme Application CSS - Ejected from bullet_train-themes-light gem */

/* This is the main theme entrypoint with Tailwind directives */

/* Tailwind directives - MUST be first */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Inter var, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[multiple],[size]:where(select:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox'] {
  border-radius: 0px;
}

[type='radio'] {
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='checkbox']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='radio']:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  [type='radio']:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  [type='checkbox']:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type='file'] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

@media (min-width: 1900px) {
  .\!container {
    max-width: 1900px !important;
  }

  .container {
    max-width: 1900px;
  }
}

.form-input,.form-textarea,.form-select,.form-multiselect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::placeholder,.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-input::-webkit-datetime-edit {
  display: inline-flex;
}

.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

.form-select:where([size]:not([size="1"])) {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

.form-checkbox,.form-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

.form-checkbox {
  border-radius: 0px;
}

.form-checkbox:focus,.form-radio:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.form-checkbox:checked,.form-radio:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  .form-checkbox:checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

.form-checkbox:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  .form-checkbox:indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

.inset-y-0 {
  top: 0;
  bottom: 0;
}

.-left-2 {
  left: -0.375rem;
}

.-left-9 {
  left: -1.6875rem;
}

.-top-0 {
  top: 0;
}

.-top-2 {
  top: -0.375rem;
}

.bottom-0 {
  bottom: 0;
}

.bottom-1 {
  bottom: 0.1875rem;
}

.bottom-4 {
  bottom: 0.75rem;
}

.bottom-full {
  bottom: 100%;
}

.left-0 {
  left: 0;
}

.left-1\.5 {
  left: 0.375rem;
}

.left-1\/2 {
  left: 50%;
}

.left-10 {
  left: 1.875rem;
}

.left-4 {
  left: 0.75rem;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0;
}

.right-0\.5 {
  right: 0.0625rem;
}

.right-1 {
  right: 0.1875rem;
}

.right-10 {
  right: 1.875rem;
}

.right-2 {
  right: 0.375rem;
}

.right-4 {
  right: 0.75rem;
}

.top-0 {
  top: 0;
}

.top-1 {
  top: 0.1875rem;
}

.top-10 {
  top: 1.875rem;
}

.top-2 {
  top: 0.375rem;
}

.top-20 {
  top: 3.75rem;
}

.top-3 {
  top: 0.5625rem;
}

.top-4 {
  top: 0.75rem;
}

.top-8 {
  top: 1.5rem;
}

.z-0 {
  z-index: 0;
}

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

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[9999\] {
  z-index: 9999;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-10 {
  grid-column: span 10 / span 10;
}

.col-span-11 {
  grid-column: span 11 / span 11;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.float-right {
  float: right;
}

.clear-both {
  clear: both;
}

.-m-2 {
  margin: -0.375rem;
}

.m-0 {
  margin: 0;
}

.m-3 {
  margin: 0.5625rem;
}

.m-5 {
  margin: 0.9375rem;
}

.m-auto {
  margin: auto;
}

.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-mx-2 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}

.-mx-4 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.mx-1 {
  margin-left: 0.1875rem;
  margin-right: 0.1875rem;
}

.mx-12 {
  margin-left: 2.25rem;
  margin-right: 2.25rem;
}

.mx-2 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.mx-3 {
  margin-left: 0.5625rem;
  margin-right: 0.5625rem;
}

.mx-4 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-5 {
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-12 {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.my-2 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.my-3 {
  margin-top: 0.5625rem;
  margin-bottom: 0.5625rem;
}

.my-4 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.my-8 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.-mb-1 {
  margin-bottom: -0.1875rem;
}

.-mb-1\.5 {
  margin-bottom: -0.375rem;
}

.-mb-5 {
  margin-bottom: -0.9375rem;
}

.-ml-0\.5 {
  margin-left: -0.0625rem;
}

.-ml-1 {
  margin-left: -0.1875rem;
}

.-ml-10 {
  margin-left: -1.875rem;
}

.-ml-5 {
  margin-left: -0.9375rem;
}

.-ml-px {
  margin-left: -1px;
}

.-mt-0\.5 {
  margin-top: -0.0625rem;
}

.-mt-1 {
  margin-top: -0.1875rem;
}

.-mt-2 {
  margin-top: -0.375rem;
}

.-mt-3 {
  margin-top: -0.5625rem;
}

.-mt-4 {
  margin-top: -0.75rem;
}

.-mt-5 {
  margin-top: -0.9375rem;
}

.-mt-px {
  margin-top: -1px;
}

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

.mb-0\.5 {
  margin-bottom: 0.0625rem;
}

.mb-1 {
  margin-bottom: 0.1875rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 1.875rem;
}

.mb-14 {
  margin-bottom: 2.625rem;
}

.mb-2 {
  margin-bottom: 0.375rem;
}

.mb-3 {
  margin-bottom: 0.5625rem;
}

.mb-4 {
  margin-bottom: 0.75rem;
}

.mb-5 {
  margin-bottom: 0.9375rem;
}

.mb-6 {
  margin-bottom: 1.125rem;
}

.mb-7 {
  margin-bottom: 1.3125rem;
}

.mb-8 {
  margin-bottom: 1.5rem;
}

.ml-0 {
  margin-left: 0;
}

.ml-0\.5 {
  margin-left: 0.0625rem;
}

.ml-1 {
  margin-left: 0.1875rem;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-10 {
  margin-left: 1.875rem;
}

.ml-12 {
  margin-left: 2.25rem;
}

.ml-14 {
  margin-left: 2.625rem;
}

.ml-2 {
  margin-left: 0.375rem;
}

.ml-2\.5 {
  margin-left: 0.625rem;
}

.ml-3 {
  margin-left: 0.5625rem;
}

.ml-4 {
  margin-left: 0.75rem;
}

.ml-5 {
  margin-left: 0.9375rem;
}

.ml-6 {
  margin-left: 1.125rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: 0.1875rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-10 {
  margin-right: 1.875rem;
}

.mr-12 {
  margin-right: 2.25rem;
}

.mr-2 {
  margin-right: 0.375rem;
}

.mr-2\.5 {
  margin-right: 0.625rem;
}

.mr-3 {
  margin-right: 0.5625rem;
}

.mr-4 {
  margin-right: 0.75rem;
}

.mr-auto {
  margin-right: auto;
}

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

.mt-0\.5 {
  margin-top: 0.0625rem;
}

.mt-1 {
  margin-top: 0.1875rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 1.875rem;
}

.mt-2 {
  margin-top: 0.375rem;
}

.mt-3 {
  margin-top: 0.5625rem;
}

.mt-4 {
  margin-top: 0.75rem;
}

.mt-5 {
  margin-top: 0.9375rem;
}

.mt-6 {
  margin-top: 1.125rem;
}

.mt-7 {
  margin-top: 1.3125rem;
}

.mt-8 {
  margin-top: 1.5rem;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.table-header-group {
  display: table-header-group;
}

.table-row-group {
  display: table-row-group;
}

.table-row {
  display: table-row;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 1.875rem;
}

.h-12 {
  height: 2.25rem;
}

.h-16 {
  height: 3rem;
}

.h-2 {
  height: 0.375rem;
}

.h-2\/3 {
  height: 66.666667%;
}

.h-24 {
  height: 4.5rem;
}

.h-28 {
  height: 5.25rem;
}

.h-3 {
  height: 0.5625rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 0.75rem;
}

.h-40 {
  height: 7.5rem;
}

.h-48 {
  height: 9rem;
}

.h-5 {
  height: 0.9375rem;
}

.h-6 {
  height: 1.125rem;
}

.h-64 {
  height: 12rem;
}

.h-7 {
  height: 1.3125rem;
}

.h-8 {
  height: 1.5rem;
}

.h-9 {
  height: 1.6875rem;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[38px\] {
  height: 38px;
}

.h-\[90vh\] {
  height: 90vh;
}

.h-\[calc\(100vh-180px\)\] {
  height: calc(100vh - 180px);
}

.h-\[calc\(100vh-200px\)\] {
  height: calc(100vh - 200px);
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-12 {
  max-height: 2.25rem;
}

.max-h-32 {
  max-height: 6rem;
}

.max-h-40 {
  max-height: 7.5rem;
}

.max-h-60 {
  max-height: 11.25rem;
}

.max-h-64 {
  max-height: 12rem;
}

.max-h-96 {
  max-height: 18rem;
}

.max-h-\[600px\] {
  max-height: 600px;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[80vh\] {
  max-height: 80vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-\[95vh\] {
  max-height: 95vh;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

.min-h-\[100px\] {
  min-height: 100px;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.min-h-\[200px\] {
  min-height: 200px;
}

.min-h-\[300px\] {
  min-height: 300px;
}

.min-h-\[600px\] {
  min-height: 600px;
}

.min-h-\[60px\] {
  min-height: 60px;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.w-0 {
  width: 0;
}

.w-0\.5 {
  width: 0.0625rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-1\/12 {
  width: 8.333333%;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-1\/4 {
  width: 25%;
}

.w-1\/5 {
  width: 20%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-10 {
  width: 1.875rem;
}

.w-11 {
  width: 2.0625rem;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12 {
  width: 2.25rem;
}

.w-14 {
  width: 2.625rem;
}

.w-16 {
  width: 3rem;
}

.w-2 {
  width: 0.375rem;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-20 {
  width: 3.75rem;
}

.w-24 {
  width: 4.5rem;
}

.w-28 {
  width: 5.25rem;
}

.w-3 {
  width: 0.5625rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 6rem;
}

.w-36 {
  width: 6.75rem;
}

.w-4 {
  width: 0.75rem;
}

.w-4\/5 {
  width: 80%;
}

.w-40 {
  width: 7.5rem;
}

.w-48 {
  width: 9rem;
}

.w-5 {
  width: 0.9375rem;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

.w-52 {
  width: 9.75rem;
}

.w-56 {
  width: 10.5rem;
}

.w-6 {
  width: 1.125rem;
}

.w-64 {
  width: 12rem;
}

.w-7 {
  width: 1.3125rem;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-72 {
  width: 13.5rem;
}

.w-8 {
  width: 1.5rem;
}

.w-80 {
  width: 15rem;
}

.w-9 {
  width: 1.6875rem;
}

.w-96 {
  width: 18rem;
}

.w-\[570px\] {
  width: 570px;
}

.w-\[90vw\] {
  width: 90vw;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0;
}

.min-w-\[120px\] {
  min-width: 120px;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[150px\] {
  min-width: 150px;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[250px\] {
  min-width: 250px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-\[400px\] {
  min-width: 400px;
}

.min-w-full {
  min-width: 100%;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[160px\] {
  max-width: 160px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[30px\] {
  max-width: 30px;
}

.max-w-\[64px\] {
  max-width: 64px;
}

.max-w-\[80\%\] {
  max-width: 80%;
}

.max-w-\[80px\] {
  max-width: 80px;
}

.max-w-\[95vw\] {
  max-width: 95vw;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

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

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

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

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

.shrink {
  flex-shrink: 1;
}

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

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

.grow {
  flex-grow: 1;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-20 {
  --tw-translate-x: -3.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-5 {
  --tw-translate-x: 0.9375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-1 {
  --tw-translate-y: 0.1875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-5 {
  --tw-translate-y: 0.9375rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-95 {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-none {
  transform: none;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

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

.cursor-grab {
  cursor: grab;
}

.cursor-help {
  cursor: help;
}

.cursor-move {
  cursor: move;
}

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

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-text {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.list-none {
  list-style-type: none;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.columns-\[var\(--column-width\2c _15ch\)_3\] {
  -moz-columns: var(--column-width, 15ch) 3;
       columns: var(--column-width, 15ch) 3;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

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

.flex-col {
  flex-direction: column;
}

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

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

.place-content-center {
  place-content: center;
}

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

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

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

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

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

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

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

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

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.1875rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.375rem;
}

.gap-20 {
  gap: 3.75rem;
}

.gap-3 {
  gap: 0.5625rem;
}

.gap-4 {
  gap: 0.75rem;
}

.gap-5 {
  gap: 0.9375rem;
}

.gap-6 {
  gap: 1.125rem;
}

.gap-8 {
  gap: 1.5rem;
}

.gap-x-4 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-6 {
  -moz-column-gap: 1.125rem;
       column-gap: 1.125rem;
}

.gap-x-8 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-2 {
  row-gap: 0.375rem;
}

.gap-y-3 {
  row-gap: 0.5625rem;
}

.gap-y-4 {
  row-gap: 0.75rem;
}

.gap-y-6 {
  row-gap: 1.125rem;
}

.gap-y-\[var\(--team-grid-row-gap\2c 5px\)\] {
  row-gap: var(--team-grid-row-gap,5px);
}

.space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.0625rem * var(--tw-space-x-reverse));
  margin-left: calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.1875rem * var(--tw-space-x-reverse));
  margin-left: calc(0.1875rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5625rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5625rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.1875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.1875rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5625rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.9375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.9375rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.125rem * var(--tw-space-y-reverse));
}

.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.3125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.3125rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
}

.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-divide-opacity, 1));
}

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}

.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
}

.divide-slate-900 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-divide-opacity, 1));
}

.divide-opacity-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 0.05;
}

.self-start {
  align-self: flex-start;
}

.self-stretch {
  align-self: stretch;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

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

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-none {
  border-radius: 0px;
}

.rounded-b {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-b-lg {
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-b-md {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.rounded-tl-lg {
  border-top-left-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-0 {
  border-bottom-width: 0px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-0 {
  border-left-width: 0px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-r {
  border-right-width: 1px;
}

.border-r-0 {
  border-right-width: 0px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-solid {
  border-style: solid;
}

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

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

.border-none {
  border-style: none;
}

.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-emerald-600 {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}

.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-green-700 {
  --tw-border-opacity: 1;
  border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
}

.border-green-800 {
  --tw-border-opacity: 1;
  border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
}

.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-orange-700 {
  --tw-border-opacity: 1;
  border-color: rgb(194 65 12 / var(--tw-border-opacity, 1));
}

.border-primary-300 {
  border-color: var(--primary-300);
}

.border-primary-500 {
  border-color: var(--primary-500);
}

.border-primary-600 {
  border-color: var(--primary-600);
}

.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}

.border-purple-300 {
  --tw-border-opacity: 1;
  border-color: rgb(216 180 254 / var(--tw-border-opacity, 1));
}

.border-purple-500 {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}

.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}

.border-red-800 {
  --tw-border-opacity: 1;
  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-slate-600 {
  --tw-border-opacity: 1;
  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}

.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}

.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
}

.border-yellow-400 {
  --tw-border-opacity: 1;
  border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.border-yellow-700 {
  --tw-border-opacity: 1;
  border-color: rgb(161 98 7 / var(--tw-border-opacity, 1));
}

.border-l-blue-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-l-primary-500 {
  border-left-color: var(--primary-500);
}

.border-l-yellow-400 {
  --tw-border-opacity: 1;
  border-left-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-50\/20 {
  background-color: rgb(239 246 255 / 0.2);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-500\/30 {
  background-color: rgb(59 130 246 / 0.3);
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.bg-gray-300\/50 {
  background-color: rgb(209 213 219 / 0.5);
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-500\/30 {
  background-color: rgb(107 114 128 / 0.3);
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.bg-green-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-500\/30 {
  background-color: rgb(34 197 94 / 0.3);
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-orange-500\/30 {
  background-color: rgb(249 115 22 / 0.3);
}

.bg-orange-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-pink-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}

.bg-pink-500\/30 {
  background-color: rgb(236 72 153 / 0.3);
}

.bg-primary-100 {
  background-color: var(--primary-100);
}

.bg-primary-200 {
  background-color: var(--primary-200);
}

.bg-primary-400 {
  background-color: var(--primary-400);
}

.bg-primary-500 {
  background-color: var(--primary-500);
}

.bg-primary-600 {
  background-color: var(--primary-600);
}

.bg-primary-700 {
  background-color: var(--primary-700);
}

.bg-primary-900 {
  background-color: var(--primary-900);
}

.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}

.bg-purple-500\/30 {
  background-color: rgb(168 85 247 / 0.3);
}

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/30 {
  background-color: rgb(239 68 68 / 0.3);
}

.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
}

.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-teal-500\/30 {
  background-color: rgb(20 184 166 / 0.3);
}

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

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}

.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500\/30 {
  background-color: rgb(234 179 8 / 0.3);
}

.bg-opacity-25 {
  --tw-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --tw-bg-opacity: 0.75;
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-primary-500 {
  --tw-gradient-from: var(--primary-500) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-700 {
  --tw-gradient-from: var(--primary-700) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-900 {
  --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary-200 {
  --tw-gradient-from: var(--secondary-200) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-400 {
  --tw-gradient-to: var(--primary-400) var(--tw-gradient-to-position);
}

.to-primary-600 {
  --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
}

.to-primary-800 {
  --tw-gradient-to: var(--primary-800) var(--tw-gradient-to-position);
}

.fill-current {
  fill: currentColor;
}

.stroke-current {
  stroke: currentColor;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0;
}

.p-0\.5 {
  padding: 0.0625rem;
}

.p-1 {
  padding: 0.1875rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.375rem;
}

.p-3 {
  padding: 0.5625rem;
}

.p-4 {
  padding: 0.75rem;
}

.p-5 {
  padding: 0.9375rem;
}

.p-6 {
  padding: 1.125rem;
}

.p-8 {
  padding: 1.5rem;
}

.p-9 {
  padding: 1.6875rem;
}

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

.px-0\.5 {
  padding-left: 0.0625rem;
  padding-right: 0.0625rem;
}

.px-1 {
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}

.px-2 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
}

.px-4 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-5 {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

.px-6 {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}

.px-7 {
  padding-left: 1.3125rem;
  padding-right: 1.3125rem;
}

.px-8 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

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

.py-0\.5 {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}

.py-1 {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

.py-12 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.py-2 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-5 {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}

.py-6 {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}

.py-8 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-\[9px\] {
  padding-top: 9px;
  padding-bottom: 9px;
}

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

.pb-0\.5 {
  padding-bottom: 0.0625rem;
}

.pb-1 {
  padding-bottom: 0.1875rem;
}

.pb-2 {
  padding-bottom: 0.375rem;
}

.pb-20 {
  padding-bottom: 3.75rem;
}

.pb-3 {
  padding-bottom: 0.5625rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-4 {
  padding-bottom: 0.75rem;
}

.pb-7 {
  padding-bottom: 1.3125rem;
}

.pl-1 {
  padding-left: 0.1875rem;
}

.pl-10 {
  padding-left: 1.875rem;
}

.pl-2 {
  padding-left: 0.375rem;
}

.pl-3 {
  padding-left: 0.5625rem;
}

.pl-4 {
  padding-left: 0.75rem;
}

.pl-5 {
  padding-left: 0.9375rem;
}

.pl-6 {
  padding-left: 1.125rem;
}

.pl-8 {
  padding-left: 1.5rem;
}

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

.pr-1 {
  padding-right: 0.1875rem;
}

.pr-10 {
  padding-right: 1.875rem;
}

.pr-2 {
  padding-right: 0.375rem;
}

.pr-3 {
  padding-right: 0.5625rem;
}

.pr-3\.5 {
  padding-right: 0.875rem;
}

.pr-4 {
  padding-right: 0.75rem;
}

.pr-5 {
  padding-right: 0.9375rem;
}

.pr-8 {
  padding-right: 1.5rem;
}

.pr-9 {
  padding-right: 1.6875rem;
}

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

.pt-1 {
  padding-top: 0.1875rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-2 {
  padding-top: 0.375rem;
}

.pt-3 {
  padding-top: 0.5625rem;
}

.pt-4 {
  padding-top: 0.75rem;
}

.pt-5 {
  padding-top: 0.9375rem;
}

.pt-6 {
  padding-top: 1.125rem;
}

.pt-7 {
  padding-top: 1.3125rem;
}

.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: Inter var, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-2xs {
  font-size: 0.65rem;
  line-height: 0.9rem;
  letter-spacing: 1px;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: .81rem;
}

.font-bold {
  font-weight: 700;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-cyan-800 {
  --tw-text-opacity: 1;
  color: rgb(21 94 117 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}

.text-indigo-500 {
  --tw-text-opacity: 1;
  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
}

.text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}

.text-orange-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}

.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-orange-500 {
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-orange-800 {
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}

.text-pink-200 {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}

.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}

.text-pink-600 {
  --tw-text-opacity: 1;
  color: rgb(219 39 119 / var(--tw-text-opacity, 1));
}

.text-pink-700 {
  --tw-text-opacity: 1;
  color: rgb(190 24 93 / var(--tw-text-opacity, 1));
}

.text-pink-800 {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}

.text-primary-400 {
  color: var(--primary-400);
}

.text-primary-500 {
  color: var(--primary-500);
}

.text-primary-600 {
  color: var(--primary-600);
}

.text-primary-700 {
  color: var(--primary-700);
}

.text-primary-800 {
  color: var(--primary-800);
}

.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}

.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.text-red-900 {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

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

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

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

.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-50 {
  --tw-text-opacity: 1;
  color: rgb(248 250 252 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-teal-200 {
  --tw-text-opacity: 1;
  color: rgb(153 246 228 / var(--tw-text-opacity, 1));
}

.text-teal-300 {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.text-teal-500 {
  --tw-text-opacity: 1;
  color: rgb(20 184 166 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}

.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}

.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}

.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.no-underline {
  text-decoration-line: none;
}

.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-red-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}

.placeholder-red-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(239 68 68 / var(--tw-placeholder-opacity, 1));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-slate-900 {
  --tw-shadow-color: #0f172a;
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-black {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
}

.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.ring-green-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
}

.ring-red-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.ring-opacity-5 {
  --tw-ring-opacity: 0.05;
}

.ring-opacity-50 {
  --tw-ring-opacity: 0.5;
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Box Container Padding Overrides
   * Bullet Train uses .py-6.px-8 on boxes (24px/32px padding)
   * We reduce this to more compact values
   */

.px-8 {
  padding-left: 0.75rem !important;
  /* 12px instead of 32px */
  padding-right: 0.75rem !important;
}

.py-6 {
  padding-top: 0.75rem !important;
  /* 12px instead of 24px */
  padding-bottom: 0.75rem !important;
}

.pt-7 {
  padding-top: 0.875rem !important;
  /* 14px instead of 28px */
}

.pb-7 {
  padding-bottom: 0.875rem !important;
  /* 14px instead of 28px */
}

.pb-3 {
  padding-bottom: 0.5rem !important;
  /* 8px instead of 12px */
}

.p-4 {
  padding: 0.25rem !important;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0 !important;
  /* Remove bottom padding from subform rows */
}

/* Vertical Spacing Between Sections */

.space-y-7 > * + * {
  margin-top: 0.875rem !important;
  /* 14px instead of 28px */
}

.space-y-4 > * + * {
  margin-top: 0 !important;
  /* 0px - No gap between subform rows */
}

.space-y-2 > * + * {
  margin-top: 0.25rem !important;
  /* 4px instead of 8px */
}

/* Grid Gaps */

.gap-y-4 {
  row-gap: 0.125rem !important;
  /* 2px instead of 16px - Maximum compression for subforms */
}

.gap-y-3 {
  row-gap: 0.375rem !important;
  /* 6px instead of 12px */
}

.gap-y-2 {
  row-gap: var(--team-grid-row-gap, 5px) !important;
}

/* Form Field Specific Spacing
   * These target the actual form elements, not .form-grouped
   */

form[data-remote="true"] .mt-1\.5,
  .field-group .mt-1\.5,
  [data-controller*="fields"] .mt-1\.5 {
  margin-top: 0.125rem !important;
  /* 2px label-to-input gap */
}

/* Label-to-input gap using team variable (mt-0.5 wrappers around inputs) */

.form-field-wrapper > .mt-0\.5,
  .form-field-wrapper .mt-0\.5 {
  margin-top: var(--team-label-bottom-margin, 5px) !important;
}

form[data-remote="true"] .gap-y-2,
  .field-group .gap-y-2,
  .grid.gap-y-2 {
  row-gap: var(--team-grid-row-gap, 5px) !important;
}

form[data-remote="true"] .mb-1\.5,
  .field-group .mb-1\.5,
  [data-controller*="fields"] .mb-1\.5 {
  margin-bottom: 0.125rem !important;
  /* 2px after inputs */
}

/* Field containers */

[data-controller*="fields"] {
  margin-bottom: var(--team-field-bottom-padding, 5px) !important;
}

/* Margin Overrides */

.my-4, .my-5, .my-6, .my-7, .my-8 {
  margin-top: 0.5rem !important;
  /* 8px vertical margins */
  margin-bottom: 0.5rem !important;
}

.mt-4, .mt-5, .mt-6, .mt-7, .mt-8 {
  margin-top: 0.5rem !important;
  /* 8px top margin */
}

.mb-4, .mb-5, .mb-6, .mb-7, .mb-8 {
  margin-bottom: 0.125rem !important;
  /* 2px bottom margin - Maximum compression for subforms */
}

/* Container and Layout Spacing */

.\!container {
  padding-left: 0.75rem !important;
  /* 12px container padding */
  padding-right: 0.75rem !important;
}

.container, .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl {
  padding-left: 0.75rem !important;
  /* 12px container padding */
  padding-right: 0.75rem !important;
}

/* Main content areas */

main {
  padding-top: 0.75rem !important;
  /* 12px main padding */
  padding-bottom: 0.75rem !important;
}

/* Mobile Responsive Overrides */

@media (max-width: 639px) {
  .px-8, .px-6, .px-4 {
    padding-left: 0.5rem !important;
    /* 8px on mobile */
    padding-right: 0.5rem !important;
  }

  .py-6, .py-4 {
    padding-top: 0.5rem !important;
    /* 8px on mobile */
    padding-bottom: 0.5rem !important;
  }
}

/* Table Headers on Mobile */

@media (max-width: 1023px) {
  thead.hidden,
    .hidden.lg\:table-header-group {
    display: none !important;
  }

  tbody.block,
    tbody.lg\:table-row-group {
    display: block !important;
  }

  tr.block,
    tr.lg\:table-row {
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
}

.\[lookup\:Name\] {
  lookup: Name;
}

/* Theme component styles */

/* Additional theme styles */

/* Form button styling */

form.button_to {
  display: inline-block;
}

form.button_to input[type=submit] {
  background-color: transparent;
}

form.button_to input[type=submit].button {
  background-color: var(--primary-500);
}

form.button_to input[type=submit].button:hover {
  background-color: var(--primary-600);
}

/* hide the first breadcrumb chevron */

ol.breadcrumb li:first-child svg {
  display: none;
}

/* Override Turbo's progress bar color with the application's theme. */

.turbo-progress-bar {
  height: 5px;
  background-color: var(--primary-500);
}

/*
  When dragging a sortable table row, only show the first column, usually containing the element's label.
  Can be customize on a per-table basis.
*/

tr.gu-mirror > *:not(:first-child) {
  display: none;
}

/* Custom styling for Super Select multi-selected items */

/* Make selected items more prominent with borders */

.ss-multi-selected .ss-value-delete {
  border: 2px solid #d1d5db !important;
  /* gray-300 */
  border-radius: var(--team-field-border-radius, 6px) !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.25rem !important;
  background-color: white !important;
  font-weight: 600 !important;
  /* semibold */
}

/* Dark mode support */

.dark .ss-multi-selected .ss-value-delete {
  border-color: #4b5563 !important;
  /* gray-600 */
  background-color: #1f2937 !important;
  /* gray-800 */
  color: #f3f4f6 !important;
  /* gray-100 */
}

/* Remove any box shadows */

.ss-multi-selected .ss-value-delete {
  box-shadow: none !important;
}

/* Make the text more bold */

.ss-multi-selected .ss-value-text {
  font-weight: 600 !important;
  color: #111827 !important;
  /* gray-900 */
}

.dark .ss-multi-selected .ss-value-text {
  color: #f3f4f6 !important;
  /* gray-100 */
}

/* Style the delete button */

.ss-multi-selected .ss-value-delete:hover {
  background-color: #fef2f2 !important;
  /* red-50 */
  border-color: #ef4444 !important;
  /* red-500 */
}

.dark .ss-multi-selected .ss-value-delete:hover {
  background-color: rgba(127, 29, 29, 0.2) !important;
  /* red-900/20 */
  border-color: #dc2626 !important;
  /* red-600 */
}

/* Ensure proper spacing between items */

.ss-multi-selected {
  gap: 0.5rem !important;
  padding: 0.5rem !important;
}

/* Make the entire multi-select area have a light background */

.ss-main .ss-multi-selected {
  background-color: #f9fafb !important;
  /* gray-50 */
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.dark .ss-main .ss-multi-selected {
  background-color: #111827 !important;
  /* gray-900 */
}

/* Fix for super-select dropdowns to respect container width */

/* Make super-select fill its container but respect max-width constraints */

.ss-main {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* For selects with buttons (picklist), make them flexible */

.select-with-buttons .ss-main,
.select-field-with-button .ss-main {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Ensure the single select fills available space */

.ss-main .ss-single {
  width: 100% !important;
}

/* Ensure the select content area fills available space */

.ss-main .ss-content {
  width: 100% !important;
}

/* Make sure the search box fills the dropdown */

.ss-main .ss-search input {
  width: 100% !important;
}

/* For nexus-super-select containers, ensure full width */

.nexus-super-select {
  width: 100% !important;
}

.nexus-super-select .ss-main {
  width: 100% !important;
  min-width: 0 !important;
}

/* For form fields containing super select */

.form-field .ss-main,
.field .ss-main {
  width: 100% !important;
  min-width: 0 !important;
}

/* Ensure select dropdowns don't overflow their containers */

.ss-main .ss-content .ss-list {
  max-width: 100% !important;
}

/* For responsive design - allow smaller widths on mobile */

@media (max-width: 640px) {
  .ss-main {
    min-width: 0 !important;
  }

  .select-with-buttons .ss-main,
  .select-field-with-button .ss-main {
    min-width: 0 !important;
  }
}

/* Fix spacing and arrow for older super_select fields */

/* Match the arrow style from unified select */

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
  top: 0;
  width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

/* Add the same double chevron arrow as unified select */

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Match the select2 height and padding to unified select */

.select2-container--default .select2-selection--single {
  height: 38px;
  padding: 0;
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-field-bg, white);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  line-height: 22px;
  color: var(--team-text-color, #111827);
}

/* Match focus styles */

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--team-accent-color, #3b82f6);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, transparent);
}

/* Remove ALL extra margins - parent template already provides spacing */

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

/* Remove spacing from wrapper divs in form contexts */

.mt-0\.5 > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure the Select2 container has no vertical spacing when inside mt-0.5 wrapper */

.mt-0\.5 .select2-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove any default spacing on the wrapper div that contains Select2 */

div[data-controller*="fields--super-select"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure consistent width */

.select2-container {
  width: 100% !important;
}

/* =====================================================
   SlimSelect Styling with Team UI Variables
   ===================================================== */

/* Base SlimSelect styling to match team UI */

.ss-main {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
}

.ss-main .ss-single-selected {
  height: 38px !important;
  padding: 0 2.5rem 0 0.75rem !important;
  background-color: var(--team-field-bg, white) !important;
  border: none !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.ss-main .ss-single-selected .placeholder,
.ss-main .ss-single-selected .ss-value {
  color: var(--team-text-color, #111827) !important;
  line-height: 38px !important;
}

/* SlimSelect focus state */

.ss-main.ss-open,
.ss-main:focus-within {
  border-color: var(--team-accent-color, #3b82f6) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, transparent) !important;
}

/* SlimSelect dropdown */

.ss-main .ss-content {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.ss-main .ss-content .ss-list .ss-option {
  color: var(--team-text-color, #111827) !important;
}

.ss-main .ss-content .ss-list .ss-option:hover,
.ss-main .ss-content .ss-list .ss-option.ss-highlighted {
  background-color: var(--team-nav-button-bg, #f3f4f6) !important;
}

.ss-main .ss-content .ss-list .ss-option.ss-selected {
  background-color: var(--team-accent-color, #3b82f6) !important;
  color: white !important;
}

/* SlimSelect search input */

.ss-main .ss-content .ss-search input {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  color: var(--team-text-color, #111827) !important;
}

.ss-main .ss-content .ss-search input:focus {
  border-color: var(--team-accent-color, #3b82f6) !important;
  outline: none !important;
}

/* Dark mode for SlimSelect */

.dark .ss-main {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .ss-main .ss-single-selected {
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .ss-main .ss-single-selected .placeholder,
.dark .ss-main .ss-single-selected .ss-value {
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .ss-main .ss-content {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .ss-main .ss-content .ss-list .ss-option {
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .ss-main .ss-content .ss-list .ss-option:hover,
.dark .ss-main .ss-content .ss-list .ss-option.ss-highlighted {
  background-color: var(--team-nav-button-bg, #374151) !important;
}

.dark .ss-main .ss-content .ss-search input {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
  color: var(--team-text-color, #f3f4f6) !important;
}

/* =====================================================
   Select2 Multi-Select Styling
   ===================================================== */

.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  min-height: 38px !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--team-accent-color, #3b82f6) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, transparent) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--team-nav-button-bg, #f3f4f6) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  color: var(--team-text-color, #111827) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--team-muted-text, #6b7280) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--team-error-color, #ef4444) !important;
}

/* Select2 Dropdown styling */

.select2-container--default .select2-dropdown {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  color: var(--team-text-color, #111827) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--team-accent-color, #3b82f6) !important;
  outline: none !important;
}

.select2-container--default .select2-results__option {
  color: var(--team-text-color, #111827) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--team-accent-color, #3b82f6) !important;
  color: white !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, var(--team-field-bg, white)) !important;
}

/* Dark mode for Select2 */

.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--multiple {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .select2-container--default .select2-dropdown {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .select2-container--default .select2-results__option {
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--team-nav-button-bg, #374151) !important;
  border-color: var(--team-outline-color, #4b5563) !important;
  color: var(--team-text-color, #f3f4f6) !important;
}

/* Fix for Turbo Frame height constraints on list pages */

/* Ensure Turbo Frames can grow to their content height */

turbo-frame {
  display: block;
  min-height: auto;
}

/* Specific fix for list frames */

turbo-frame[id$="_list_frame"] {
  display: block;
  width: 100%;
  min-height: auto;
  /* Remove any potential height constraints */
  height: auto !important;
  max-height: none !important;
}

/* Ensure the table container within frames expands properly */

turbo-frame [data-sortable-table-target="table"] {
  min-height: auto;
}

/* Fix for overflow containers to not constrain height */

.overflow-x-auto {
  /* Only constrain horizontal overflow, not vertical */
  overflow-x: auto;
  overflow-y: visible;
}

/* Picklist button styling to integrate with select fields */

/* Remove right border radius from select fields that have buttons */

.select-with-buttons select,
.select-with-buttons .ss-main,
.select-with-buttons .form-select,
.select-with-buttons input[type="text"],
.select-with-buttons input.form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* REMOVED hard-coded width to allow field configuration to control width */
  /* width now controlled by grid system */
}

/* REMOVED height overrides - now using Tailwind h-[38px] class consistently */

/* Style select fields that have buttons attached */

.select-with-buttons {
  display: block !important;
  /* Changed from inline-block to block */
  /* REMOVED hard-coded width */
  width: 100% !important;
  /* Fill container */
  /* REMOVED vertical-align - not needed for block elements */
}

.select-with-buttons select {
  border-right-width: 1px !important;
  /* REMOVED hard-coded width */
  width: 100% !important;
  /* Fill container */
  /* REMOVED vertical-align - not needed */
}

/* Fix alignment for select fields with buttons */

.select-field-with-button {
  display: block;
  /* Changed from inline-block to block */
  /* REMOVED hard-coded width */
  width: 100%;
}

.select-field-with-button select,
.select-field-with-button .ss-main,
.select-field-with-button .select2-container {
  /* REMOVED hard-coded width */
  width: 100% !important;
  /* Fill container */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Fix alignment issues with Select2 and other custom selects */

.select-with-buttons .select2-container .select2-selection--single {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* REMOVED height override - use Tailwind classes */
}

/* Fix for super select fields */

.select-with-buttons .ss-main .ss-single {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* REMOVED height override - use Tailwind classes */
}

/* MINIMAL rules for picklist button alignment - let Tailwind handle the rest */

/* The parent flex container with items-stretch will handle vertical alignment */

/* Picklist Modal Styling with Team Theme Variables */

/* Uses CSS variables from team_color_css_variables helper */

/* Default fallback values match Tailwind defaults for light mode */

/* ========================================
   PICKLIST MODAL CONTAINER
   ======================================== */

/* Modal overlay */

.picklist-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Picklist row styling - base styles for JS-generated rows */

.picklist-row {
  cursor: pointer;
  transition: background-color 100ms;
}

.picklist-row:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

/* Modal content box */

.picklist-modal-content {
  background-color: var(--team-page-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modal title */

.picklist-modal-title {
  color: var(--team-text-color, #111827);
  font-weight: 500;
}

/* Close button */

.picklist-close-button {
  color: var(--team-muted-text, #6b7280);
  transition: color 150ms;
}

.picklist-close-button:hover {
  color: var(--team-text-color, #374151);
}

/* ========================================
   FILTER BUTTONS
   ======================================== */

.picklist-filter-container {
  display: flex;
  width: 100%;
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-header-bg, #f9fafb);
  overflow: hidden;
}

.picklist-filter-button {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-muted-text, #6b7280);
  border: none;
  border-left: 1px solid var(--team-outline-color, #e5e7eb);
  transition: all 150ms;
}

.picklist-filter-button:first-child {
  border-left: none;
}

.picklist-filter-button:hover {
  background-color: var(--team-field-bg, white);
  color: var(--team-text-color, #374151);
}

.picklist-filter-button.active,
.picklist-filter-button[data-filter-active="true"] {
  background-color: var(--team-accent-color, #3b82f6) !important;
  color: white !important;
  font-weight: 600;
}

/* Filter badge */

.picklist-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--team-header-bg, #e5e7eb);
  color: var(--team-muted-text, #6b7280);
}

.picklist-filter-button.active .picklist-filter-badge,
.picklist-filter-button[data-filter-active="true"] .picklist-filter-badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ========================================
   SEARCH INPUT
   ======================================== */

.picklist-search-input {
  width: 100%;
  padding: var(--team-input-vertical-padding, 8px) var(--team-input-horizontal-padding, 12px);
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  color: var(--team-text-color, #374151);
  font-size: 0.875rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.picklist-search-input:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.picklist-search-input::-moz-placeholder {
  color: var(--team-muted-text, #9ca3af);
}

.picklist-search-input::placeholder {
  color: var(--team-muted-text, #9ca3af);
}

/* ========================================
   LIST CONTAINER
   ======================================== */

.picklist-list-container {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-field-bg, white);
  overflow: hidden;
}

/* ========================================
   TABLE STYLING
   ======================================== */

.picklist-table {
  width: 100%;
  border-collapse: collapse;
}

.picklist-table thead {
  background-color: var(--team-header-bg, #f9fafb);
}

.picklist-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--team-muted-text, #6b7280);
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

.picklist-table tbody {
  background-color: var(--team-field-bg, white);
}

.picklist-table tbody tr {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  cursor: pointer;
  transition: background-color 100ms;
}

.picklist-table tbody tr:last-child {
  border-bottom: none;
}

.picklist-table tbody tr:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

.picklist-table td {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--team-text-color, #111827);
}

/* Selected row styling */

.picklist-table tbody tr.selected {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, var(--team-field-bg, white));
}

/* Checkbox/Radio styling */

.picklist-checkbox,
.picklist-radio {
  border-color: var(--team-outline-color, #d1d5db);
  color: var(--team-accent-color, #3b82f6);
}

.picklist-checkbox:checked,
.picklist-radio:checked {
  background-color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

.picklist-checkbox {
  border-radius: calc(var(--team-field-border-radius, 6px) / 2);
}

.picklist-radio {
  border-radius: 50%;
}

/* ========================================
   SORTABLE HEADERS
   ======================================== */

.picklist-sort-header {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 150ms;
}

.picklist-sort-header:hover {
  color: var(--team-text-color, #374151);
}

.picklist-sort-header.active {
  color: var(--team-accent-color, #3b82f6);
  font-weight: 600;
}

.picklist-sort-indicator {
  margin-left: 4px;
  color: var(--team-muted-text, #9ca3af);
}

.picklist-sort-header.active .picklist-sort-indicator {
  color: var(--team-accent-color, #3b82f6);
}

/* ========================================
   LOADING INDICATOR
   ======================================== */

.picklist-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.picklist-loading-spinner {
  color: var(--team-accent-color, #3b82f6);
}

.picklist-loading-text {
  margin-left: 0.75rem;
  color: var(--team-muted-text, #6b7280);
}

/* ========================================
   SELECTED ITEMS DISPLAY
   ======================================== */

.picklist-selected-section {
  padding: 0.75rem;
  background-color: var(--team-header-bg, #f9fafb);
  border-radius: var(--team-field-border-radius, 6px);
}

.picklist-selected-label {
  font-size: 0.875rem;
  color: var(--team-text-color, #374151);
}

.picklist-selected-count {
  font-weight: 600;
  color: var(--team-accent-color, #3b82f6);
}

.picklist-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 15%, var(--team-field-bg, white));
  color: var(--team-accent-color, #3b82f6);
}

.picklist-selected-badge-remove {
  margin-left: 0.25rem;
  color: var(--team-accent-color, #3b82f6);
  opacity: 0.7;
  cursor: pointer;
}

.picklist-selected-badge-remove:hover {
  opacity: 1;
}

/* ========================================
   MODAL ACTIONS
   ======================================== */

.picklist-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.picklist-btn-cancel {
  padding: var(--team-input-vertical-padding, 8px) 1rem;
  background-color: var(--team-field-bg, white);
  color: var(--team-text-color, #374151);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}

.picklist-btn-cancel:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

.picklist-btn-confirm {
  padding: var(--team-input-vertical-padding, 8px) 1rem;
  background-color: var(--team-accent-color, #3b82f6);
  color: white;
  border: none;
  border-radius: var(--team-field-border-radius, 6px);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms;
}

.picklist-btn-confirm:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 85%, black);
}

/* ========================================
   DETAIL BUTTON
   ======================================== */

.picklist-detail-btn {
  color: var(--team-muted-text, #9ca3af);
  padding: 0.25rem;
  border-radius: var(--team-field-border-radius, 6px);
  transition: color 150ms;
}

.picklist-detail-btn:hover {
  color: var(--team-accent-color, #3b82f6);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.picklist-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--team-muted-text, #6b7280);
}

.picklist-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */

@media (prefers-color-scheme: dark) {
  .picklist-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .picklist-modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  .picklist-search-input:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #60a5fa) 25%, transparent);
  }
}

/* Nexus Super Select - Enhanced dropdown system for Nexus */

/* Base container - takes full width of its parent */

.nexus-super-select {
  width: 100%;
}

/* Ensure select fields fill their container */

.nexus-super-select select,
.nexus-super-select .select2-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove any min-width constraints */

.nexus-super-select .select2-container .select2-selection {
  min-width: unset !important;
}

/* For the dropdown complex (select + buttons) */

.nexus-super-select .flex {
  width: 100%;
}

/* Ensure the select wrapper takes available space */

.nexus-super-select .flex-1 {
  flex: 1 1 0%;
  min-width: 0;
  /* Prevent flex items from overflowing */
}

/* Multi-select list items should fill container */

.nexus-super-select .multi-select-list {
  width: 100%;
}

/* Selected items container */

.nexus-super-select [data-multi-select-list-target="listContainer"] {
  width: 100%;
}

/* Override any Select2 default widths */

.nexus-super-select .select2-container--default {
  width: 100% !important;
}

/* Ensure dropdowns don't exceed their containers */

.nexus-super-select .select2-dropdown {
  max-width: 100vw;
}

/* For fields with picklist buttons, ensure proper layout */

.nexus-super-select .select-with-buttons {
  display: flex;
  width: 100%;
}

.nexus-super-select .select-with-buttons select,
.nexus-super-select .select-with-buttons .select2-container {
  flex: 1 1 0%;
}

/* Responsive behavior for different column widths */

@media (min-width: 1024px) {
  /* Contained within grid columns, respect the grid */

  .lg\:col-span-2 .nexus-super-select,
  .lg\:col-span-3 .nexus-super-select,
  .lg\:col-span-4 .nexus-super-select,
  .lg\:col-span-5 .nexus-super-select,
  .lg\:col-span-6 .nexus-super-select {
    width: 100%;
  }
}

/* Dark mode support - uses media query to match app's dark mode system */

@media (prefers-color-scheme: dark) {
  .nexus-super-select select {
    background-color: rgb(31 41 55);
    border-color: rgb(75 85 99);
    color: #f9fafb;
  }
}

/* Lazy Select Loading States */

/* Pending state - field not yet initialized */

select.lazy-select-pending {
  background-color: var(--team-field-bg, #f9fafb);
  cursor: pointer;
  position: relative;
}

select.lazy-select-pending:hover {
  background-color: color-mix(in srgb, var(--team-field-bg, white) 95%, var(--team-text-color, black));
}

/* Add loading indicator */

select.lazy-select-pending::after {
  content: "⚡";
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--team-text-color, #6b7280);
  opacity: 0.7;
  pointer-events: none;
}

/* Visual cue that field will load on click */

select.lazy-select-pending:focus {
  outline: 2px solid var(--team-accent-color, #3b82f6);
  outline-offset: 2px;
}

/* Loading state while initializing */

select.lazy-select-loading {
  opacity: 0.6;
  cursor: wait;
}

/* Prevent layout shift during initialization */

.lazy-select-container {
  min-height: 38px;
  position: relative;
}

/* Smooth transition when Select2 initializes */

.select2-container--default .select2-selection--single {
  transition: all 0.2s ease;
}

/* Styling for field containers with filters to keep components grouped */

/* Field bottom padding - configurable via team settings */

/* Only apply to form-group and form-field-wrapper;
   NOT to field-auto-save because it's nested inside form-field-wrapper
   and would cause double padding */

.form-group,
.form-field-wrapper {
  padding-bottom: var(--team-field-bottom-padding, 5px);
}

/* field-auto-save elements should NOT have padding when inside form-field-wrapper
   (they already inherit the wrapper's padding) */

[data-controller="field-auto-save"] {
  padding-bottom: 0;
}

/* Consistent styling for all field labels */

.field-label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

@media (max-width: 1023px) {
  tbody.field-label {
    display: block;
  }

  tr.field-label {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.field-label {
    display: block;
  }

  tr.field-label {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.field-label {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .field-label {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
}

/* Unified multi-select container - all-in-one component */

.unified-multi-select-container {
  display: block;
  position: relative;
  width: 100%;
}

/* Ensure sections within unified container stay together */

.unified-multi-select-container .dropdown-section,
.unified-multi-select-container .filter-section,
.unified-multi-select-container .selected-items-section {
  position: relative;
  width: 100%;
}

/* Visual connection between dropdown and filters in unified component */

.unified-multi-select-container .dropdown-section select.border-b-0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.unified-multi-select-container .dropdown-section button.border-b-0 {
  border-bottom-right-radius: 0;
}

/* Ensure filter section attaches seamlessly */

.unified-multi-select-container .filter-section {
  margin-top: -1px;
}

/* Main container that keeps dropdown, filters, and selected items together */

.field-with-filters-container {
  /* Ensure this container maintains its block context */
  display: block;
  position: relative;
  /* Prevent child elements from escaping */
  contain: layout;
}

/* Container for dropdown and filters that are visually connected */

.super-select-with-filters {
  /* Keep dropdown and filters visually connected */
  display: block;
  position: relative;
}

/* Ensure filter buttons stay attached to their dropdown */

.super-select-with-filters .has-filter-buttons + div[data-controller="filter-buttons"] {
  /* Remove any gaps between dropdown and filters */
  margin-top: -1px;
}

/* Container for multi-select fields without filters */

.field-container {
  display: block;
  position: relative;
}

/* Ensure selected items list stays within the container */

.field-with-filters-container [data-multi-select-list-target="listContainer"],
.field-container [data-multi-select-list-target="listContainer"] {
  /* Selected items should stay within their parent container */
  position: relative;
  z-index: 1;
}

/* Prevent other elements from inserting between our grouped components */

.field-with-filters-container > *:not(:first-child),
.field-container > *:not(:first-child) {
  /* Ensure proper spacing but no unexpected gaps */
  margin-top: 1rem;
}

/* Special handling for the filter section and selected items */

.field-with-filters-container .super-select-with-filters + [data-multi-select-list-target="listContainer"] {
  /* Consistent spacing between filter section and selected items */
  margin-top: 1rem;
}

/* Ensure the container doesn't break across grid cells or flex items */

.field-with-filters-container,
.field-container {
  /* Prevent breaking across columns in grid/flex layouts */
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  page-break-inside: avoid;
}

/* Field Box Headers - Consistent 15px band for alignment */

.field-box-header {
  height: 15px;
  min-height: 15px;
  max-height: 15px;
  background-color: var(--team-outline-color, #e5e7eb);
  color: var(--team-label-text, #000000);
  font-size: 0.625rem;
  /* 10px font - keeping same font size */
  line-height: 15px;
  padding: 0 8px;
  /* Horizontal padding for text inside */
  margin: 0;
  /* No margins */
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  /* Full width of parent */
}

/* Spacer for unlabeled boxes - maintains alignment without visual noise */

.field-box-header-spacer {
  height: 15px;
  min-height: 15px;
  max-height: 15px;
  background-color: transparent;
  margin: 0;
  display: block;
  width: 100%;
  /* Properly contained - no negative margins */
}

/* Content area below the header */

.field-box-content {
  padding-top: var(--team-field-bottom-padding, 5px);
  padding-right: var(--team-field-bottom-padding, 5px);
  padding-bottom: var(--team-field-bottom-padding, 5px);
  padding-left: var(--team-field-bottom-padding, 5px);
}

/* Mobile responsiveness for field box headers */

@media (max-width: 768px) {
  .field-box-header {
    font-size: 0.5625rem;
    /* Slightly smaller on mobile (9px) */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .field-box-header-spacer {
    /* Maintain same height on mobile */
    height: 15px;
  }
}

/* ===========================================
   Label Placement - Horizontal Layout Support
   =========================================== */

/* Horizontal label layouts (label left or right of field) */

.field-layout-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Label container in horizontal layouts needs top padding to align with input */

.field-layout-horizontal .field-label {
  padding-top: 0.375rem;
  /* Aligns with input text baseline */
}

/* Responsive: Stack labels on mobile for horizontal layouts */

@media (max-width: 640px) {
  .field-layout-horizontal {
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .field-layout-horizontal > div {
    width: 100% !important;
  }

  .field-layout-horizontal .field-label {
    padding-top: 0;
    /* Reset padding when stacked */
  }
}

/* =========================================
   Field Height Multipliers - Responsive
   Desktop: uses HTML rows attribute
   Mobile: CSS overrides height via min-height
   Each row ≈ 24px (20px line-height + 4px)
   =========================================== */

/* Grid mode: ensure container accommodates taller fields */

.subform-grid-mode [class*="field-height-desktop-"],
.subform-grid-mode [class*="field-height-mobile-"] {
  align-self: stretch;
}

/* Mobile height overrides - uses min-height to set rows */

@media (max-width: 767px) {
  /* Full width on mobile */

  [class*="field-height-mobile-"] textarea {
    width: 100%;
  }

  /* Mobile row heights (each row ≈ 24px + 16px padding) */

  .field-height-mobile-1x textarea {
    min-height: 40px;
    height: 40px;
  }

  .field-height-mobile-2x textarea {
    min-height: 64px;
    height: 64px;
  }

  .field-height-mobile-3x textarea {
    min-height: 88px;
    height: 88px;
  }

  .field-height-mobile-4x textarea {
    min-height: 112px;
    height: 112px;
  }

  .field-height-mobile-5x textarea {
    min-height: 136px;
    height: 136px;
  }

  .field-height-mobile-6x textarea {
    min-height: 160px;
    height: 160px;
  }

  .field-height-mobile-8x textarea {
    min-height: 208px;
    height: 208px;
  }

  .field-height-mobile-10x textarea {
    min-height: 256px;
    height: 256px;
  }
}

/* Unified Dropdown System - Clean Box Model with CSS Variables */

/* CSS Variables for consistent measurements */

:root {
  --dropdown-height: 38px;
  /* Match text input height */
  --dropdown-border-width: 1px;
  --dropdown-inner-height: 36px;
  /* height minus 2x border */
  --filter-height: 18px;
  /* 20% shorter than original 22px */
  --dropdown-padding-x: 12px;
  --button-padding-x: 10px;
  /* Use team outline color if available, fallback to gray */
  --border-color: var(--team-outline-color, rgb(209 213 219));
}

/* ========================================
   LEVEL 1: Dropdown Line Container
   ======================================== */

/* The main container - always 36px total height */

.dropdown-line-container {
  display: block;
  height: var(--dropdown-height);
  box-sizing: border-box;
  /* Border included in height */
  border: var(--dropdown-border-width) solid var(--border-color);
  border-radius: var(--team-field-border-radius, 6px);
  overflow: hidden;
  /* Clip any overflow */
  width: 100%;
  position: relative;
  background: var(--team-field-bg, white);
}

/* When inside a container with filters, remove border */

.unified-dropdown-container.has-filters .dropdown-line-container {
  border: 0;
  border-radius: 0;
  height: var(--dropdown-height);
  /* Still 36px but no border now */
}

/* ========================================
   DROPDOWN ROW
   ======================================== */

/* The row that contains select and buttons */

.dropdown-row {
  display: flex;
  align-items: center;
  /* Center all children vertically */
  justify-content: space-between;
  height: 100%;
  /* Fills container (34px with border, 36px without) */
  width: 100%;
  padding: 0;
  margin: 0;
}

/* ========================================
   SELECT ELEMENT
   ======================================== */

/* The actual select dropdown */

.dropdown-select {
  flex: 1 1 auto;
  /* Take available space */
  width: 100%;
  min-width: 0;
  height: auto;
  /* Natural height with padding */
  padding: 6px var(--dropdown-padding-x);
  /* Vertical padding for text centering */
  padding-right: 2rem;
  /* Extra padding for the arrow */
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  /* Only make background-color transparent */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-size: 0.875rem;
  /* text-sm */
  line-height: 1.25rem;
  /* Consistent line height */
  color: inherit;
}

/* Dark mode arrow color */

.dark .dropdown-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Remove focus outline - container handles focus state */

.dropdown-select:focus {
  outline: none;
  box-shadow: none;
}

/* Ensure the select fills its flex container */

.dropdown-row > .flex-1 {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* ========================================
   BUTTONS IN DROPDOWN
   ======================================== */

/* Picklist and Add buttons - use nav button colors */

.dropdown-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Fill row height */
  padding: 0 var(--button-padding-x);
  margin: 0;
  border: 0;
  border-left: var(--dropdown-border-width) solid var(--border-color);
  background: transparent;
  color: var(--team-nav-button-text, #374151);
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
}

.dropdown-button:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
}

/* Button icons */

.dropdown-button svg,
.dropdown-button i {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}

/* ========================================
   LEVEL 2: Container with Filters
   ======================================== */

/* Container that wraps dropdown + filters */

.unified-dropdown-container {
  display: flex;
  flex-direction: column;
  border-radius: var(--team-field-border-radius, 6px);
  overflow: hidden;
}

/* Only add border when filters are present */

.unified-dropdown-container.has-filters {
  border: var(--dropdown-border-width) solid var(--border-color);
}

/* ========================================
   FILTER ROW
   ======================================== */

/* Filter buttons row */

.filter-row {
  display: flex;
  height: var(--filter-height);
  border-top: var(--dropdown-border-width) solid var(--border-color);
  background: var(--team-field-bg, white);
}

/* Individual filter buttons */

.filter-button {
  flex: 1 1 0;
  height: 100%;
  padding: 0 var(--team-input-horizontal-padding, 5px);
  margin: 0;
  border: 0;
  border-right: var(--dropdown-border-width) solid var(--border-color);
  background: transparent;
  font-size: 0.6875rem;
  /* 11px */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms;
  color: var(--team-text-color, rgb(75 85 99));
  opacity: 0.8;
}

.filter-button:last-child {
  border-right: 0;
}

.filter-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--team-text-color, rgb(17 24 39));
  opacity: 1;
}

/* Active filter state - uses team accent color with dark mode opacity */

.filter-button[data-filter-active="true"],
.filter-button.filter-button-active {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) var(--team-ui-element-opacity, 100%),
    var(--team-field-bg, white)
  );
  color: white;
  opacity: 1;
  border-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) 50%,
    transparent
  );
}

/* Filter count badge */

.filter-button .badge-count {
  margin-left: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 0.125rem;
  font-size: 0.5625rem;
  /* 9px */
  border-radius: 9999px;
  background-color: var(--team-header-bg, rgb(209 213 219));
  color: var(--team-muted-text, rgb(75 85 99));
}

/* Active filter badge */

.filter-button[data-filter-active="true"] .badge-count,
.filter-button.filter-button-active .badge-count {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ========================================
   BUTTON GROUP MODE
   ======================================== */

/* Container for button group mode */

.button-group-container {
  display: block;
  width: 100%;
}

.button-group-container .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Button group buttons */

.button-group-container button {
  padding: 0.5rem 0.75rem;
  border-radius: var(--team-field-border-radius, 6px);
  border: 1px solid var(--team-outline-color, rgb(209 213 219));
  background: var(--team-field-bg, white);
  color: var(--team-text-color, rgb(55 65 81));
  transition: all 150ms;
  cursor: pointer;
}

.button-group-container button:hover {
  background: color-mix(in srgb, var(--team-field-bg, white) 95%, var(--team-text-color, black));
}

/* Active button in button group - uses team accent with dark mode opacity */

.button-group-container button.active,
.button-group-container button[data-action*="unified-select#selectButton"].active {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) var(--team-ui-element-opacity, 100%),
    var(--team-field-bg, white)
  );
  border-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) 50%,
    transparent
  );
  color: white;
}

/* ========================================
   MULTI-SELECT COMPONENTS
   ======================================== */

/* Selected items container */

.selected-items-section {
  margin-top: 1rem;
}

.selected-items-section .space-y-2 > * + * {
  margin-top: 0.5rem;
}

/* Individual selected item */

.selected-item-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--team-page-bg, rgb(249 250 251));
  border: 1px solid var(--team-outline-color, rgb(229 231 235));
  border-radius: var(--team-field-border-radius, 6px);
  transition: background-color 200ms;
}

.selected-item-box:hover {
  background: color-mix(in srgb, var(--team-page-bg, white) 95%, var(--team-text-color, black));
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Ensure clean layout */

.truly-unified-select-container,
.single-select-container,
.multi-select-container {
  display: block;
  width: 100%;
  /* Match the label-to-input gap used by text fields */
  margin-top: var(--team-label-bottom-margin, 5px);
}

/* Container for truly-unified-select fields */

/* NOTE: Do NOT use 'contain: layout' here - it creates a new containing block
   that breaks position:fixed dropdowns, causing them to render off-screen */

.truly-unified-select-field {
  display: block;
  width: 100%;
}

/* Remove any transform/translate that might affect positioning */

.unified-dropdown-container *,
.dropdown-line-container * {
  transform: none;
  translate: none;
}

/* Focus states for accessibility */

.dropdown-line-container:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

.unified-dropdown-container.has-filters:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

/* ========================================
   DROPDOWN OPTIONS
   ======================================== */

/* Selected option in dropdown list */

.dropdown-option-selected {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, rgb(59 130 246)) 10%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, rgb(59 130 246));
}

/* Selected option checkmark */

.dropdown-option-checkmark {
  color: var(--team-accent-color, rgb(59 130 246));
}

/* ========================================
   DROPDOWN PANEL
   ======================================== */

/* Floating dropdown panel */

.custom-dropdown-panel {
  border-radius: var(--team-field-border-radius, 6px);
}

/* Search input inside dropdown */

.custom-dropdown-panel .search-container input {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

/* Selected item in multi-select */

.selected-item-box {
  border-radius: var(--team-field-border-radius, 6px);
  border-color: var(--border-color);
}

/* Fix native select height and alignment to match other form controls */

/*
 * Native select elements have browser-specific default styling that differs from text inputs.
 * This CSS ensures selects have identical dimensions and positioning as text inputs.
 */

.form-select.h-\[38px\],
select.h-\[38px\] {
  /* Ensure exact height - browsers may add internal spacing to selects */
  height: 38px !important;
  /* Match text input box model - includes borders in height calculation */
  box-sizing: border-box !important;
  /* Prevent browser default vertical-align (baseline vs middle) differences */
  vertical-align: middle !important;
  /* Match text input line-height (sm:text-sm = line-height: 1.25rem) */
  line-height: 1.25rem !important;
  /* Ensure padding matches text inputs for consistent internal spacing */
  padding-top: 0.375rem !important;
  /* 6px */
  padding-bottom: 0.375rem !important;
  /* 6px */
  /* Remove any browser UA stylesheet margins */
  margin: 0 !important;
}

/* Ensure select uses block display for consistent layout */

.form-select {
  display: block !important;
}

/* Calendar Styles */

.simple-calendar {
  width: 100%;
}


.subform-grid-mode .form-field-wrapper .simple-calendar {
  margin: 0;
  padding: 0;
}

.simple-calendar table {
  width: 100%;
  border-collapse: collapse;
}


.subform-grid-mode .form-field-wrapper .simple-calendar table {
  margin: 0;
  padding: 0;
}

.simple-calendar th {
  border-bottom-width: 1px;
  padding: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--team-text-color, #374151);
  border-color: var(--team-outline-color, #e5e7eb);
}

.simple-calendar td {
  position: relative;
  height: 4.5rem;
  border-width: 1px;
  padding: 0.375rem;
  vertical-align: top;
}

.simple-calendar td.border-gray-200.rounded-lg.bg-gray-50 {
  padding: 0.75rem;
}

.simple-calendar td {
  border-color: var(--team-outline-color, #e5e7eb);
}

.simple-calendar .day {
  min-height: 100px;
}

.simple-calendar .wday-0 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.border.border-gray-200.rounded-lg.simple-calendar .wday-0 {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .wday-0 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.simple-calendar .wday-6 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.border.border-gray-200.rounded-lg.simple-calendar .wday-6 {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .simple-calendar .wday-6 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.simple-calendar .today {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, var(--team-field-bg, white));
}

.simple-calendar .past {
  opacity: 0.75;
}

.simple-calendar .future {
}

.simple-calendar .start-date {
}

.simple-calendar .prev-month {
  opacity: 0.5;
}

.simple-calendar .next-month {
  opacity: 0.5;
}

.simple-calendar .current-month {
}

.simple-calendar .has-events {
}

/* Calendar Navigation */

.simple-calendar .calendar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding: 0.25rem;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0;
  /* Remove bottom padding from subform rows */
  margin-bottom: 0.125rem;
  /* 2px bottom margin - Maximum compression for subforms */
}

.nexus-super-select .simple-calendar .calendar-heading {
  width: 100%;
}

.button-group-container .simple-calendar .calendar-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .simple-calendar .calendar-heading {
  display: flex;
  width: 100%;
}

.rounded-md.simple-calendar .calendar-heading.overflow-hidden:has(.subform-sticky-header) {
  overflow: visible;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .simple-calendar .calendar-heading.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-desktop .flex.simple-calendar .calendar-heading.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .simple-calendar .calendar-heading.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-mobile .flex.simple-calendar .calendar-heading.mb-0\.5 {
    display: none;
  }
}


.rounded-md.simple-calendar .calendar-heading.overflow-hidden:has(.list-sticky-header) {
  overflow: visible;
}

.bg-white.rounded-md.simple-calendar .calendar-heading .divide-y > div,
.dark\:bg-slate-700.rounded-md.simple-calendar .calendar-heading .divide-y > div {
  padding: 0.75rem;
}

.simple-calendar .calendar-heading {
  background-color: var(--team-field-bg, white);
  border-radius: var(--team-field-border-radius, 6px);
}

.simple-calendar .calendar-heading nav {
  display: flex;
  gap: 0.375rem;
}

.nexus-super-select .simple-calendar .calendar-heading nav {
  width: 100%;
}

.button-group-container .simple-calendar .calendar-heading nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .simple-calendar .calendar-heading nav {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .simple-calendar .calendar-heading nav.items-center.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .simple-calendar .calendar-heading nav.items-center.mb-0\.5 {
    display: none;
  }
}

.simple-calendar .calendar-heading a {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
  border-radius: var(--team-field-border-radius, 6px);
}

.simple-calendar .calendar-heading a:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 15%, var(--team-nav-button-bg, #f3f4f6));
}

.simple-calendar .calendar-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

h3.simple-calendar .calendar-title {
  font-size: 1rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

.simple-calendar .calendar-title {
  color: var(--team-text-color, #111827);
}

/* Day Number */

.day-number {
  margin-bottom: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}


table td .day-number,
.table td .day-number {
  color: var(--team-muted-text, #6b7280);
}

@media (prefers-color-scheme: dark) {
  .day-number {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }
}

/* Events Container */

.events-container > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.1875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.1875rem * var(--tw-space-y-reverse));
}

.events-container {
  overflow: hidden;
}

.rounded-md.shadow.events-container:has(.subform-sticky-header),.events-container:has(.subform-sticky-header) {
  overflow: visible;
}

.events-container:has(.list-sticky-header),
.rounded-md.shadow.events-container:has(.list-sticky-header) {
  overflow: visible;
}

/* Calendar Event */

.calendar-event {
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.1875rem;
  font-size: .81rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.calendar-event:hover {
  opacity: 0.8;
}

.calendar-event .event-link {
  display: block;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

@media (max-width: 1023px) {
  tbody.calendar-event .event-link {
    display: block;
  }

  tr.calendar-event .event-link {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.calendar-event .event-link {
    display: block;
  }

  tr.calendar-event .event-link {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.calendar-event .event-link {
  display: block;
}

@media (prefers-color-scheme: dark) {
  .calendar-event .event-link {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }
}

.calendar-event .event-title {
  display: block;
}

@media (max-width: 1023px) {
  tbody.calendar-event .event-title {
    display: block;
  }

  tr.calendar-event .event-title {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.calendar-event .event-title {
    display: block;
  }

  tr.calendar-event .event-title {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.calendar-event .event-title {
  display: block;
}

.calendar-event .event-time {
  font-size: .81rem;
}

/* More Events Link */

.more-events {
  cursor: pointer;
  font-weight: 500;
  color: var(--team-accent-color, #3b82f6);
}

.more-events:hover {
  color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 80%, black);
}

/* Week Calendar Specific */

.simple-calendar.week-calendar td {
  height: auto;
  min-height: 200px;
}

.simple-calendar.week-calendar .events-container > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.simple-calendar.week-calendar .events-container > * + * {
  margin-top: 0.25rem;
  /* 4px instead of 8px */
}

.selected-items-section .simple-calendar.week-calendar .events-container > * + * {
  margin-top: 0.5rem;
}

.simple-calendar.week-calendar .calendar-event {
  padding: 0.375rem;
}

/* Calendar Container */

.calendar-container {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  /* Only constrain horizontal overflow, not vertical */
  overflow-x: auto;
  overflow-y: visible;
}

.rounded-md.calendar-container.overflow-hidden:has(.subform-sticky-header) {
  overflow: visible;
}


.rounded-md.calendar-container.overflow-hidden:has(.list-sticky-header) {
  overflow: visible;
}

.bg-white.rounded-md.calendar-container .divide-y > div,
.dark\:bg-slate-700.rounded-md.calendar-container .divide-y > div {
  padding: 0.75rem;
}

.calendar-container {
  background-color: var(--team-field-bg, white);
  border-radius: var(--team-field-border-radius, 6px);
}

/* Week View Specific Styles */

.calendar-week-grid {
  min-width: 1000px;
  /* Ensure minimum width for readability */
  display: block;
}

.calendar-week-grid .flex {
  display: flex;
  width: 100%;
}

.calendar-week-grid .flex-1 {
  flex: 1 1 0%;
  width: 14.28%;
  /* 100% / 7 days */
}

/* Event cards in week view */

.calendar-week-grid .line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Time slots in week view */

.calendar-week-grid .time-slot {
  position: relative;
  height: 2.25rem;
  border-bottom-width: 1px;
  border-color: var(--team-outline-color, #e5e7eb);
}

.calendar-week-grid .time-slot:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* Today highlighting in week view */

.calendar-week-grid .today-column {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 5%, transparent);
}

/* Filter Box */

.calendar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.25rem;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0;
  /* Remove bottom padding from subform rows */
}

.nexus-super-select .calendar-filters {
  width: 100%;
}

.button-group-container .calendar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .calendar-filters {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .calendar-filters.items-center.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .calendar-filters.items-center.mb-0\.5 {
    display: none;
  }
}

.calendar-filters {
  background-color: var(--team-header-bg, #f9fafb);
  border-radius: var(--team-field-border-radius, 6px);
}

/* Responsive Design */

@media (max-width: 640px) {
  .simple-calendar td {
    padding: 0.1875rem;
    font-size: .81rem;
  }

  .calendar-event {
    padding: 0.0625rem;
  }

  .event-title {
    display: none;
  }

  @media (max-width: 1023px) {
    thead.event-title,.event-title.lg\:table-header-group {
      display: none;
    }
  }

  .audit-history-modal.event-title {
    display: none;
  }

  .memo-edit-popup-overlay.event-title {
    display: none;
  }

  .event-title {
    display: none;
  }

  @media (max-width: 1023px) {
    td.event-title.lg\:table-cell {
      display: none;
    }
  }

  .calendar-event i {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

/* Auto-Save Field Visual Feedback Styles */

/* Base editable field styling */

.auto-save-field {
  cursor: text;
  padding: 0.25rem 0.5rem;
  border-radius: var(--team-field-border-radius, 6px);
  transition: all 0.2s ease;
  position: relative;
  display: inline-block;
}

.auto-save-field:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 5%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.auto-save-field:focus {
  outline: 2px solid color-mix(in srgb, var(--team-accent-color, #3b82f6) 50%, transparent);
  outline-offset: 1px;
  background-color: var(--team-field-bg, white);
}

/* Editing state - NO visual feedback (clean) */

.auto-save-field.field-editing {
  /* No styles - keep it clean */
}

/* Saving state - NO visual feedback (clean) */

.auto-save-field.field-saving {
  /* No styles - keep it clean */
}

/* Saved state - SUBTLE green background flash only */

.field-saved,
input.field-saved,
select.field-saved,
textarea.field-saved {
  background-color: color-mix(in srgb, var(--team-success-color, #10b981) 15%, var(--team-field-bg, white)) !important;
  transition: background-color 0.3s ease;
}

/* Error state - red border (important to show errors) */

.field-error,
input.field-error,
select.field-error,
textarea.field-error {
  border-color: var(--team-error-color, #ef4444) !important;
  box-shadow: 0 0 0 1px var(--team-error-color, #ef4444) !important;
}

/* Status icon container */

.auto-save-status {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.875rem;
  vertical-align: middle;
  min-width: 1.25rem;
  text-align: center;
}

/* Hide empty status span to prevent it from creating extra line-height space */

.auto-save-status:empty {
  display: none;
}

/* Dropdown auto-save styling */

select.auto-save-field {
  cursor: pointer;
}

select.auto-save-field.field-saving {
  animation: pulse-blue 1s ease-in-out infinite;
}

/* Audit history icon styling */

.audit-history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
  color: var(--team-text-color, #6b7280);
  opacity: 0.7;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.audit-history-icon:hover {
  color: var(--team-accent-color, #3b82f6);
  opacity: 1;
}

/* Audit history modal */

.audit-history-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.audit-history-modal.hidden {
  display: none;
}

.audit-history-content {
  background: var(--team-page-bg, white);
  color: var(--team-text-color, inherit);
  border-radius: var(--team-field-border-radius, 6px);
  padding: 1.5rem;
  max-width: 48rem;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Loading state */

.audit-loading {
  text-align: center;
  padding: 2rem;
  color: var(--team-text-color, #6b7280);
  opacity: 0.8;
}

.audit-loading::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--team-outline-color, #e5e7eb);
  border-top-color: var(--team-accent-color, #3b82f6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Empty state */

.audit-empty {
  text-align: center;
  padding: 2rem;
  color: var(--team-text-color, #9ca3af);
  opacity: 0.7;
  font-style: italic;
}

/* Filter controls */

.audit-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

.audit-filter-button {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 9999px;
  border: 1px solid var(--team-outline-color, #d1d5db);
  background-color: var(--team-field-bg, white);
  color: var(--team-text-color, #6b7280);
  cursor: pointer;
  transition: all 0.2s ease;
}

.audit-filter-button:hover {
  border-color: var(--team-accent-color, #3b82f6);
  color: var(--team-accent-color, #3b82f6);
}

.audit-filter-button.active {
  background-color: var(--team-accent-color, #3b82f6);
  color: white;
  border-color: var(--team-accent-color, #3b82f6);
}

/* MS Access-style Property Sheet */

.property-sheet {
  overflow: hidden;
  border-radius: 0.5rem;
}

.rounded-md.shadow.property-sheet:has(.subform-sticky-header),.property-sheet:has(.subform-sticky-header) {
  overflow: visible;
}

.property-sheet:has(.list-sticky-header),
.rounded-md.shadow.property-sheet:has(.list-sticky-header) {
  overflow: visible;
}

.border.border-gray-200.property-sheet.bg-gray-50 {
  padding: 0.75rem;
}

[data-subform-target="row"].property-sheet,
[data-subform-target="row"] .property-sheet {
  border-radius: 0;
}

.property-sheet {
  border: 1px solid var(--team-outline-color, #d1d5db);
  background-color: var(--team-page-bg, #ffffff);
}

/* Tab navigation */

.property-tabs {
  display: flex;
  flex-wrap: wrap;
}

.nexus-super-select .property-tabs {
  width: 100%;
}

.button-group-container .property-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .property-tabs {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .property-tabs.items-center.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .property-tabs.items-center.mb-0\.5 {
    display: none;
  }
}

.property-tabs {
  border-bottom: 1px solid var(--team-outline-color, #d1d5db);
  background-color: var(--team-header-bg, #f9fafb);
}

.property-tabs .tab-button {
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--team-muted-text, #6b7280);
}

.property-tabs .tab-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-inset: inset;
}

.property-tabs .tab-button:hover {
  color: var(--team-label-text, #374151);
  background-color: var(--team-page-bg, #ffffff);
}

.property-tabs .tab-button:focus {
  --tw-ring-color: var(--team-accent-color, #3b82f6);
}

.property-tabs .tab-button.active {
  background-color: var(--team-page-bg, #ffffff);
  color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

/* Tab panel */

.property-panel {
  background-color: var(--team-page-bg, #ffffff);
}

/* Property row - label on left, input on right */

.property-row {
  display: flex;
  align-items: flex-start;
}

.nexus-super-select .property-row {
  width: 100%;
}

.button-group-container .property-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .property-row {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .property-row.items-center.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .property-row.items-center.mb-0\.5 {
    display: none;
  }
}

.property-row {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

.property-row:last-child {
  border-bottom-width: 0px;
}

.unified-multi-select-container .dropdown-section select.property-row:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.unified-multi-select-container .dropdown-section button.property-row:last-child {
  border-bottom-right-radius: 0;
}

.property-row .property-label {
  width: 6.75rem;
  flex-shrink: 0;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  font-size: .81rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .property-row .property-label {
    width: 8.25rem;
  }
}

.property-row .property-label {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nexus-super-select .property-row .property-label {
  width: 100%;
}

.button-group-container .property-row .property-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .property-row .property-label {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .property-row .property-label.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-desktop .flex.property-row .property-label.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .property-row .property-label.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-mobile .flex.property-row .property-label.mb-0\.5 {
    display: none;
  }
}

.property-row .property-label {
  color: var(--team-muted-text, #6b7280);
  background-color: var(--team-header-bg, #f9fafb);
  border-right: 1px solid var(--team-outline-color, #e5e7eb);
}

.property-row .property-input {
  flex: 1 1 0%;
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.nexus-super-select .property-row .property-input {
  flex: 1 1 0%;
  min-width: 0;
  /* Prevent flex items from overflowing */
}

.dropdown-row > .property-row .property-input {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.calendar-week-grid .property-row .property-input {
  flex: 1 1 0%;
  width: 14.28%;
  /* 100% / 7 days */
}

#mobile-menu-backdrop nav.property-row .property-input {
  overflow-y: auto;
  min-height: 0;
  /* Required for flex children to shrink and enable scroll */
}

/* Compact inputs for property sheet */

.property-row input[type="text"],
.property-row input[type="number"],
.property-row select,
.property-row textarea {
  width: 100%;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


.subform-grid-mode .form-field-wrapper .property-row input[type="text"],
.subform-grid-mode .form-field-wrapper 
.property-row input[type="number"],
.subform-grid-mode .form-field-wrapper 
.property-row select,
.subform-grid-mode .form-field-wrapper 
.property-row textarea {
  margin: 0;
  padding: 0;
}

.property-row input[type="text"],
.property-row input[type="number"],
.property-row select,
.property-row textarea {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  border-color: var(--team-outline-color, #d1d5db);
  background-color: var(--team-field-bg, #ffffff);
  color: var(--team-text-color, #334155);
}

.property-row input[type="text"]:focus,
.property-row input[type="number"]:focus,
.property-row select:focus,
.property-row textarea:focus {
  --tw-ring-color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

.property-row input[type="checkbox"] {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 0.25rem;
  border-color: var(--team-outline-color, #d1d5db);
}

.property-row input[type="checkbox"]:checked {
  background-color: var(--team-accent-color, #3b82f6);
  border-color: var(--team-accent-color, #3b82f6);
}

.property-row input[type="checkbox"]:focus {
  --tw-ring-color: var(--team-accent-color, #3b82f6);
}

.property-row textarea {
  min-height: 60px;
  resize: vertical;
}

/* Checkbox rows - more compact */

.property-row.checkbox-row {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}

.property-row.checkbox-row .property-label {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

/* Mobile: Stack label above input */

@media (max-width: 640px) {
  .property-row {
    flex-direction: column;
  }

  #mobile-menu-backdrop .property-row {
    max-height: 100vh;
    overflow-y: auto;
  }

  .property-row .property-label {
    width: 100%;
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
  }

  
.subform-grid-mode .form-field-wrapper .property-row .property-label {
    margin: 0;
    padding: 0;
  }

  .property-row .property-label {
    border-right: 0;
    border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  }

  .property-row .property-input {
    width: 100%;
  }

  
.subform-grid-mode .form-field-wrapper .property-row .property-input {
    margin: 0;
    padding: 0;
  }

  .property-tabs {
    /* Only constrain horizontal overflow, not vertical */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .property-tabs .tab-button {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Section headers within panels */

.property-section-header {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: .81rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background-color: var(--team-header-bg, #f3f4f6);
  color: var(--team-label-text, #374151);
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
}

/* Slide-out Panel - 1/3 width on desktop, full width on mobile */

/* Overlay backdrop */

.slide-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.slide-panel-backdrop.active {
  pointer-events: auto;
  opacity: 1;
}

/* Panel container */

.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  height: 100%;
  background-color: var(--team-page-bg, #ffffff);
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.nexus-super-select .slide-panel {
  width: 100%;
}

.button-group-container .slide-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .slide-panel {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .slide-panel.items-center.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .slide-panel.items-center.mb-0\.5 {
    display: none;
  }
}

#mobile-menu-backdrop .slide-panel {
  max-height: 100vh;
  overflow-y: auto;
}

.slide-panel {
  /* Full width on mobile */
  width: 100%;
}

.slide-panel.active {
  --tw-translate-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Desktop: 1/3 width */

@media (min-width: 1024px) {
  .slide-panel {
    width: 33.333%;
    min-width: 400px;
    max-width: 600px;
  }
}

/* Tablet: 50% width */

@media (min-width: 768px) and (max-width: 1023px) {
  .slide-panel {
    width: 50%;
    min-width: 400px;
  }
}

/* Panel header */

.slide-panel-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

@media (max-width: 639px) {
  .slide-panel-header {
    padding-left: 0.5rem;
    /* 8px on mobile */
    padding-right: 0.5rem;
  }
}

.nexus-super-select .slide-panel-header {
  width: 100%;
}

.button-group-container .slide-panel-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .slide-panel-header {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .slide-panel-header.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-desktop .flex.slide-panel-header.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .slide-panel-header.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-mobile .flex.slide-panel-header.mb-0\.5 {
    display: none;
  }
}

.slide-panel-header {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-header-bg, #f9fafb);
}

/* Panel title */

.slide-panel-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--team-label-text, #374151);
}

/* Close button */

.slide-panel-close {
  border-radius: 0.25rem;
  padding: 0.1875rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: var(--team-muted-text, #6b7280);
}

.slide-panel-close:hover {
  color: var(--team-text-color, #334155);
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* Panel body - scrollable */

.slide-panel-body {
  flex: 1 1 0%;
  overflow-y: auto;
}

.nexus-super-select .slide-panel-body {
  flex: 1 1 0%;
  min-width: 0;
  /* Prevent flex items from overflowing */
}

.dropdown-row > .slide-panel-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.calendar-week-grid .slide-panel-body {
  flex: 1 1 0%;
  width: 14.28%;
  /* 100% / 7 days */
}

#mobile-menu-backdrop nav.slide-panel-body {
  overflow-y: auto;
  min-height: 0;
  /* Required for flex children to shrink and enable scroll */
}

.slide-panel-body {
  padding: 0.25rem;
  /* 4px instead of 16px - Maximum compression for subforms */
  padding-bottom: 0;
  /* Remove bottom padding from subform rows */
  background-color: var(--team-page-bg, #ffffff);
  /* Ensure vertical scrolling works */
  -webkit-overflow-scrolling: touch;
}

/* Panel footer for actions */

.slide-panel-footer {
  flex-shrink: 0;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
}

@media (max-width: 639px) {
  .slide-panel-footer {
    padding-left: 0.5rem;
    /* 8px on mobile */
    padding-right: 0.5rem;
  }
}

.slide-panel-footer {
  border-top: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-header-bg, #f9fafb);
}

/* Compact property sheet inside panel */

.slide-panel .property-sheet {
  border-radius: 0px;
  border-width: 0px;
}

.slide-panel .property-row .property-label {
  width: 7.5rem;
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
}

@media (min-width: 768px) {
  .slide-panel .property-row .property-label {
    width: 9rem;
  }
}

.slide-panel .property-row .property-label {
  font-size: 0.7rem;
}

.slide-panel .property-row .property-input {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.0625rem;
  padding-right: 0.0625rem;
}

.slide-panel .property-row input,
.slide-panel .property-row select,
.slide-panel .property-row textarea {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
  font-size: .81rem;
}

/* Tighter tabs for panel */

.slide-panel .property-tabs .tab-button {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: .81rem;
}

/* Loading state */

.slide-panel-loading {
  display: flex;
  height: 6rem;
  align-items: center;
  justify-content: center;
}

.nexus-super-select .slide-panel-loading {
  width: 100%;
}

.button-group-container .slide-panel-loading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-week-grid .slide-panel-loading {
  display: flex;
  width: 100%;
}

@media (min-width: 768px) {
  
  .hide-labels-desktop .slide-panel-loading.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-desktop .flex.slide-panel-loading.mb-0\.5 {
    display: none;
  }
}

@media (max-width: 767px) {
  
  .hide-labels-mobile .slide-panel-loading.items-center.mb-0\.5 {
    display: none;
  }

  
  .hide-labels-mobile .flex.slide-panel-loading.mb-0\.5 {
    display: none;
  }
}

.slide-panel-loading-spinner {
  height: 1.5rem;
  width: 1.5rem;
}

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

.slide-panel-loading-spinner {
  animation: spin 1s linear infinite;
  color: var(--team-accent-color, #3b82f6);
}

/* Floating Announcements Styles */

/* Smooth transition for dynamic bottom padding on mobile */

body {
  transition: padding-bottom 0.3s ease;
}

#floating-announcements-container {
  pointer-events: none;
  max-width: 360px;
  width: 100%;
}

#floating-announcements-container .announcement-item {
  pointer-events: auto;
  margin-bottom: 0.5rem;
}

/* Only animate NEW announcements - prevents re-animation on page navigation */

#floating-announcements-container .announcement-item.announcement-new {
  animation: slideIn 0.3s ease-out;
}

/* Slide-in animation */

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

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

/* Slide-out animation (used when dismissing) */

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Non-dismissable announcements (like clock-in) have a subtle indicator */

.announcement-undismissable {
  border-left: 4px solid rgba(255, 255, 255, 0.5);
}

/* Pulse animation for undismissable announcements to draw attention */

.announcement-undismissable::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 0.5rem;
  animation: pulse 2s infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
}

/* Hover state */

.announcement-item:hover {
  transform: scale(1.02);
}

/* Clock-in specific styles - make it more prominent */

.announcement-item[data-dismissable="false"] {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */

@media (max-width: 640px) {
  #floating-announcements-container {
    max-width: calc(100vw - 2rem);
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* UI Element Box Styles
 * Styling for box container elements in the UI Elements system
 */

.ui-box {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  padding: var(--team-field-bottom-padding, 5px);
  background-color: var(--team-header-bg, #f9fafb);
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

.ui-box-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--team-label-text, #374151);
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

.ui-box-content {
  /* Uses Tailwind grid classes: grid grid-cols-12 gap-2 items-end */
  /* Child elements use col-span-X based on their width_columns */
}

.ui-box-child {
  /* Wrapper for each child element in the box grid */
}

/* Nested boxes get slightly different styling for visual hierarchy */

.ui-box .ui-box {
  background-color: #ffffff;
  border-color: #d1d5db;
}

.ui-box .ui-box .ui-box {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}

/* Empty box placeholder */

.ui-box-empty {
  display: block;
  padding: var(--team-field-bottom-padding, 5px);
  text-align: center;
  width: 100%;
}

/* Box within a grid layout */

.ui-box[style*="grid-column"] {
  height: -moz-fit-content;
  height: fit-content;
}

/* Hover state for boxes in edit mode */

[data-edit-mode="true"] .ui-box:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Box with children should show flex layout */

.ui-box-content > * {
  flex-shrink: 0;
}

/* ===== Collapsible Box Styles ===== */

/* Collapsible box header - clickable area */

.ui-box-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: var(--team-field-bottom-padding, 5px);
  padding: calc(var(--team-field-bottom-padding, 5px) / 2) 0;
}

.ui-box-header:hover {
  opacity: 0.8;
}

.ui-box-label-clickable {
  cursor: pointer;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

/* Arrow indicator - CSS triangle */

.ui-box-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5rem;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #374151;
  transition: transform 0.2s ease;
}

/* Rotated arrow for closed state */

.ui-box-arrow-closed {
  transform: rotate(-90deg);
}

/* Smooth transition for content visibility */

[data-controller="collapsible-box"] .ui-box-content {
  transition: opacity 0.15s ease;
}

/* ===== Custom Background Color Support ===== */

/* Uses --team-ui-element-opacity (100% light, 25% dark) for consistent styling */

/* Background color with team-controlled opacity for light/dark mode */

.ui-box.has-bg-color {
  background-color: color-mix(in srgb, var(--ui-box-bg-color) var(--team-ui-element-opacity, 100%), var(--team-field-bg, white));
}

/* Nested boxes with custom colors */

.ui-box .ui-box.has-bg-color {
  background-color: color-mix(in srgb, var(--ui-box-bg-color) var(--team-ui-element-opacity, 100%), var(--team-field-bg, white));
}

.ui-box .ui-box .ui-box.has-bg-color {
  background-color: color-mix(in srgb, var(--ui-box-bg-color) var(--team-ui-element-opacity, 100%), var(--team-field-bg, white));
}

/* ===== Responsive adjustments ===== */

@media (max-width: 768px) {
  .ui-box {
    padding: var(--team-field-bottom-padding, 5px);
  }

  .ui-box-content {
    flex-direction: column;
  }

  .ui-box-content > * {
    width: 100%;
  }
}

/* Truncated text with expand-on-hover for list tables */

.truncated-expandable {
  position: relative;
  display: inline;
}

/* Truncated text - visible by default */

.truncated-expandable .te-short {
  display: inline;
}

/* Full text - hidden by default */

.truncated-expandable .te-full {
  display: none;
}

/* On hover: hide short, show full */

.truncated-expandable:hover .te-short {
  visibility: hidden;
}

.truncated-expandable:hover .te-full {
  display: block;
  position: absolute;
  left: 0;
  top: -2px;
  z-index: 1000;
  width: -moz-max-content;
  width: max-content;
  max-width: 400px;
  padding: 4px 8px;
  white-space: normal;
  word-break: break-word;
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  /* Use team CSS variables for dark/light mode support */
  background-color: var(--team-page-bg, #ffffff);
  color: var(--team-text-color, #1f2937);
}

/* Ensure table cells allow overflow */

td:has(.truncated-expandable) {
  position: relative;
  overflow: visible;
}

/* Filter Buttons Integration with Super Select Dropdowns */

/* Uses --team-ui-element-opacity (100% light, 25% dark) for consistent styling */

/* ========================================
   TEMPLATE FILTER CONTAINERS
   Standard styling for filter wrapper boxes
   ======================================== */

.template-filter-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 150ms;
}

.template-filter-box:hover {
  background-color: var(--team-header-bg, #f9fafb);
}

/* Filter input fields */

.template-filter-input {
  width: 100%;
  padding: var(--team-input-vertical-padding, 8px) var(--team-input-horizontal-padding, 12px);
  font-size: 0.875rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: var(--team-text-color, #374151);
  transition: border-color 150ms, box-shadow 150ms;
}

.template-filter-input:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

.template-filter-input::-moz-placeholder {
  color: var(--team-muted-text, #9ca3af);
}

.template-filter-input::placeholder {
  color: var(--team-muted-text, #9ca3af);
}

/* Filter select dropdowns */

.template-filter-select {
  width: 100%;
  padding: var(--team-input-vertical-padding, 8px) 2.5rem var(--team-input-vertical-padding, 8px) var(--team-input-horizontal-padding, 12px);
  font-size: 0.875rem;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--team-text-color, #374151);
  transition: border-color 150ms, box-shadow 150ms;
}

.template-filter-select:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

/* Color indicator dots */

.filter-color-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--team-field-border-radius, 6px);
  border: 1px solid var(--team-outline-color, #d1d5db);
}

.filter-color-dot-lg {
  width: 1rem;
  height: 1rem;
}

/* ========================================
   COUNT BADGES
   Used for displaying numeric counts in lists
   ======================================== */

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--team-field-border-radius, 6px);
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 15%, var(--team-field-bg, white));
  color: var(--team-accent-color, #3b82f6);
}

/* Clickable count badge */

.count-badge[data-controller="clickable-count"] {
  cursor: pointer;
  transition: background-color 150ms, transform 100ms;
}

.count-badge[data-controller="clickable-count"]:hover {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 25%, var(--team-field-bg, white));
  transform: scale(1.02);
}

/* Zero count badge - muted styling */

.count-badge-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--team-field-border-radius, 6px);
  background-color: var(--team-header-bg, #f3f4f6);
  color: var(--team-muted-text, #6b7280);
}

/* Dark mode adjustments */

@media (prefers-color-scheme: dark) {
  .count-badge {
    background-color: color-mix(in srgb, var(--team-accent-color, #60a5fa) 20%, var(--team-field-bg, #1e293b));
    color: var(--team-accent-color, #60a5fa);
  }

  .count-badge-zero {
    background-color: var(--team-field-bg, #1e293b);
    color: var(--team-muted-text, #9ca3af);
  }
}

/* Ensure super-select dropdowns have proper bottom border radius when filters are present */

.has-filter-buttons .ss-main,
.has-filter-buttons .select2-container .select2-selection,
.has-filter-buttons select,
.has-filter-buttons input[type="text"] {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Filter button container styling */

.filter-buttons-container {
  margin-top: -1px;
  /* Overlap border with dropdown */
}

/* Ensure smooth visual connection between dropdown and filters */

.filter-buttons-group {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-color: var(--team-field-bg, white);
  border-color: var(--team-outline-color, rgb(209 213 219));
}

/* Default filter button - uses navigation button colors for inactive state */

.filter-button {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
  border-color: var(--team-outline-color, rgb(209 213 219));
  padding: 0 var(--team-input-horizontal-padding, 5px);
  transition: all 150ms ease-in-out;
}

.filter-button:hover {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 15%,
    var(--team-nav-button-bg, #f3f4f6)
  );
}

/* Active filter button styling - uses accent color with dark mode opacity */

.filter-button-active {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) var(--team-ui-element-opacity, 100%),
    var(--team-field-bg, white)
  ) !important;
  color: white !important;
  font-weight: 600;
  border-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 50%,
    transparent
  ) !important;
}

.filter-button-active:hover {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 90%,
    var(--team-field-bg, white)
  ) !important;
}

/* Filter badge styling - uses team colors */

.filter-button .badge-count {
  background-color: var(--team-header-bg, #e5e7eb);
  color: var(--team-muted-text, #6b7280);
}

/* Filter badge when active */

.filter-button-active .badge-count,
.filter-button-active .filter-badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: white !important;
}

/* Badge with items - highlight when filter has matching items */

.badge-count.badge-count-has-items {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 20%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, #3b82f6);
}

/* Active filter with items badge stays white */

.filter-button-active .badge-count.badge-count-has-items {
  background-color: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Ensure dropdown and filters align properly */

.super-select-with-filters {
  position: relative;
}

/* Ensure proper stacking when dropdowns are open */

.select2-container--open + .filter-buttons-container {
  z-index: 999;
  /* Below the dropdown but above other content */
}

/* Selected items that don't match current filter - uses team accent color */

.selected-outside-filter {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 10%,
    var(--team-field-bg, white)
  ) !important;
  border-left: 4px solid var(--team-accent-color, #3b82f6) !important;
}

/* Pre-selected items moved to top of picklist - uses team accent color */

.selected-at-top {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 8%,
    var(--team-field-bg, white)
  ) !important;
  border-left: 3px solid var(--team-accent-color, #3b82f6) !important;
}

/* Separator row between selected items at top and other items */

.picklist-separator-row {
  height: 4px !important;
  padding: 0 !important;
}

.picklist-separator-row td {
  padding: 0 !important;
  height: 4px !important;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--team-accent-color, #3b82f6) 40%, transparent),
    transparent
  ) !important;
}

/* Picklist filter count badges */

[data-picklist-filter-count] {
  font-size: 0.65rem;
  min-width: 1.25rem;
  text-align: center;
  transition: all 0.2s ease;
}

/* When count is loaded (not "-"), use accent color */

[data-picklist-filter-count]:not(:empty) {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 20%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, #3b82f6);
}

/* Zero count gets muted styling */

[data-picklist-filter-count="0"] {
  background-color: var(--team-field-bg, #f3f4f6);
  color: #9ca3af;
}

/* Selected item badges in picklist */

.picklist-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) 15%,
    var(--team-field-bg, white)
  );
  color: var(--team-accent-color, #3b82f6);
}

.picklist-selected-badge button {
  margin-left: 0.25rem;
  color: var(--team-accent-color, #3b82f6);
  opacity: 0.7;
}

.picklist-selected-badge button:hover {
  opacity: 1;
}

/* ========================================
   FILTER COLLAPSE HEADER
   Collapsible filter section header button
   ======================================== */

.filter-collapse-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 25% smaller than p-3 (12px): ~9px */
  padding: 9px var(--team-input-horizontal-padding, 9px);
  background-color: var(--team-header-bg, #f9fafb) !important;
  border: 1px solid var(--team-outline-color, #e5e7eb) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  cursor: pointer;
  transition: background-color 150ms;
}

.filter-collapse-header:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

.filter-collapse-label {
  font-size: 0.8125rem;
  /* 13px - slightly smaller than 14px */
  font-weight: 600;
  color: var(--team-text-color, #374151);
}

.filter-collapse-icon {
  width: 0.875rem;
  /* 14px */
  height: 0.875rem;
  font-size: 0.875rem;
  color: var(--team-muted-text, #6b7280);
  transition: transform 200ms;
}

/* ========================================
   BOX/CONTAINER COMPONENTS
   Bordered containers, subforms, and panels
   ======================================== */

.team-box {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  overflow: hidden;
}

.team-box-header {
  background-color: var(--team-header-bg, #f3f4f6);
  padding: 0.5rem 1rem;
}

.team-box-content {
  padding: var(--team-field-bottom-padding, 5px);
}

/* Info/help boxes */

.team-info-box {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, var(--team-field-bg, white));
  border: 1px solid color-mix(in srgb, var(--team-accent-color, #3b82f6) 30%, transparent);
  border-radius: var(--team-field-border-radius, 6px);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

/* Subform row container */

.team-subform-row {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  padding: var(--team-field-bottom-padding, 5px);
  margin-bottom: var(--team-field-bottom-padding, 5px);
  position: relative;
  transition: box-shadow 150ms ease-in-out;
}

.team-subform-row:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Error state for subform rows */

.team-subform-row-error {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

/* Section container with shadow */

.team-section-box {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: var(--team-field-bottom-padding, 5px);
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

/* Dark mode adjustments for boxes */

@media (prefers-color-scheme: dark) {
  .team-box {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #4b5563);
  }

  .team-box-header {
    background-color: var(--team-header-bg, #374151);
  }

  .team-info-box {
    background-color: color-mix(in srgb, var(--team-accent-color, #60a5fa) 15%, var(--team-field-bg, #1e293b));
    border-color: color-mix(in srgb, var(--team-accent-color, #60a5fa) 40%, transparent);
  }

  .team-subform-row {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #4b5563);
  }

  .team-section-box {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #374151);
  }
}

/* ========================================
   CARD COMPONENTS
   Cards for displaying records and aggregated data
   ======================================== */

.team-card {
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: var(--team-field-bottom-padding, 5px);
  transition: box-shadow 150ms ease-in-out;
}

.team-card-clickable {
  cursor: pointer;
}

.team-card-clickable:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Card header */

.team-card-header {
  font-weight: 700;
  font-size: 1rem;
  color: var(--team-text-color, #111827);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: var(--team-field-bottom-padding, 5px);
}

/* Card label text */

.team-card-label {
  font-size: 0.875rem;
  color: var(--team-muted-text, #6b7280);
  margin-bottom: 0.25rem;
}

/* Card group heading */

.team-card-group-heading {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--team-muted-text, #6b7280);
  margin-top: var(--team-field-bottom-padding, 5px);
  margin-bottom: calc(var(--team-field-bottom-padding, 5px) / 2);
}

.team-card-group-heading:first-child {
  margin-top: 0;
}

/* Dark mode adjustments for cards */

@media (prefers-color-scheme: dark) {
  .team-card {
    background-color: var(--team-field-bg, #1e293b);
    border-color: var(--team-outline-color, #374151);
  }

  .team-card-header {
    color: var(--team-text-color, #f3f4f6);
  }

  .team-card-label {
    color: var(--team-muted-text, #9ca3af);
  }

  .team-card-group-heading {
    color: var(--team-muted-text, #d1d5db);
  }
}

/* Styles for prefilled form fields - uses team success color with team-controlled opacity */

/* Uses --team-input-opacity (20% light, 25% dark) for consistent styling */

.prefilled-field,
input.bg-green-50,
select.bg-green-50,
textarea.bg-green-50 {
  background-color: color-mix(in srgb, var(--team-success-color, #10b981) var(--team-input-opacity, 20%), var(--team-field-bg, white)) !important;
  border-color: color-mix(in srgb, var(--team-success-color, #10b981) 30%, transparent) !important;
}

/* Ensure the green background is visible even with focus */

.prefilled-field:focus,
input.bg-green-50:focus,
select.bg-green-50:focus,
textarea.bg-green-50:focus {
  background-color: color-mix(in srgb, var(--team-success-color, #10b981) var(--team-input-opacity, 20%), var(--team-field-bg, white)) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Prefilled indicator text - uses team success color */

.prefilled-indicator {
  color: var(--team-success-color, #16a34a);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* Animation for when the green background is removed */

input:not(.bg-green-50),
select:not(.bg-green-50),
textarea:not(.bg-green-50) {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Nexus File Field - Attachment control styling */

.nexus-file-field-container {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  padding: 0.75rem;
  background-color: var(--team-field-bg, #ffffff);
}

.nexus-file-item {
  border: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-header-bg, #f9fafb);
}

.nexus-file-item:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* Field Label Icons Popup Bubble
   Floating popup for gear (config) and audit (history) icons */

.field-label-icons-popup {
  position: absolute;
  z-index: 9999;
  /* Default: appears to the right of label for above/below placement */
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5rem;
}

/* For left/right label placement, popup appears above the label */

.field-label-icons-popup[data-placement="left"],
.field-label-icons-popup[data-placement="right"] {
  left: 0;
  top: auto;
  bottom: 100%;
  transform: none;
  margin-left: 0;
  margin-bottom: 0.25rem;
}

.field-label-icons-bubble {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  background-color: var(--team-page-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

/* Icon styling inside bubble */

.field-label-icons-bubble a,
.field-label-icons-bubble span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
}

.field-label-icons-bubble a:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* Dark mode support via media query */

@media (prefers-color-scheme: dark) {
  .field-label-icons-bubble {
    background-color: var(--team-page-bg, #1f2937);
    border-color: var(--team-outline-color, #374151);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }

  .field-label-icons-bubble a:hover {
    background-color: var(--team-nav-button-bg, #374151);
  }
}

/* Dark mode support via explicit .dark class */

.dark .field-label-icons-bubble {
  background-color: var(--team-page-bg, #1f2937);
  border-color: var(--team-outline-color, #374151);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.dark .field-label-icons-bubble a:hover {
  background-color: var(--team-nav-button-bg, #374151);
}

/* Field Note Popup - shows field_note content when note icon is clicked */

.field-label-note-popup {
  position: absolute;
  z-index: 9998;
  /* Below icons popup */
  left: 100%;
  top: 100%;
  margin-left: 0.5rem;
  margin-top: 0.25rem;
}

/* For left/right label placement, note popup appears below */

.field-label-note-popup[data-placement="left"],
.field-label-note-popup[data-placement="right"] {
  left: 0;
  top: 100%;
  margin-left: 0;
  margin-top: 0.25rem;
}

.field-label-note-bubble {
  min-width: 200px;
  max-width: 300px;
  padding: 0.5rem 0.75rem;
  font-size: 13px;
  line-height: 1.4;
  color: var(--team-text-color, #374151);
  background-color: var(--team-page-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  white-space: normal;
  word-wrap: break-word;
}

/* Dark mode support for note bubble via media query */

@media (prefers-color-scheme: dark) {
  .field-label-note-bubble {
    color: var(--team-text-color, #e5e7eb);
    background-color: var(--team-page-bg, #1f2937);
    border-color: var(--team-outline-color, #374151);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  }
}

/* Dark mode support for note bubble via explicit .dark class */

.dark .field-label-note-bubble {
  color: var(--team-text-color, #e5e7eb);
  background-color: var(--team-page-bg, #1f2937);
  border-color: var(--team-outline-color, #374151);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Memo Edit Popup - Expandable text area editor */

/* Tab trigger - subtle icon immediately below text area, right-aligned */

.memo-edit-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1;
  color: var(--team-muted-text, #9ca3af);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
  opacity: 0.6;
}

.memo-edit-tab:hover {
  color: var(--team-accent-color, #3b82f6);
  opacity: 1;
}

.memo-edit-tab:focus {
  outline: none;
  color: var(--team-accent-color, #3b82f6);
  opacity: 1;
}

.memo-edit-tab i {
  font-size: 15px;
  line-height: 1;
}

/* Popup overlay */

.memo-edit-popup-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.memo-edit-popup-overlay.hidden {
  display: none;
}

/* Popup container - uses team colors and styling */

.memo-edit-popup {
  position: relative;
  width: 50%;
  height: 80vh;
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #e5e7eb);
  border-radius: var(--team-field-border-radius, 6px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: 90% width, 90% height */

@media (max-width: 768px) {
  .memo-edit-popup {
    width: 90%;
    height: 90vh;
  }
}

/* Popup header - uses team nav button colors */

.memo-edit-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--team-field-padding, 12px) var(--team-field-padding, 16px);
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-nav-button-bg, #f9fafb);
  flex-shrink: 0;
}

.memo-edit-popup-header .field-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--team-text-color, #374151);
}

/* Close button - uses team colors */

.memo-edit-popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--team-muted-text, #6b7280);
  background-color: transparent;
  border: none;
  border-radius: var(--team-field-border-radius, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.memo-edit-popup-close:hover {
  background-color: color-mix(
    in srgb,
    var(--team-error-color, #ef4444) 15%,
    transparent
  );
  color: var(--team-error-color, #ef4444);
}

/* Popup body - fills available space */

.memo-edit-popup-body {
  flex: 1;
  padding: var(--team-field-padding, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Textarea fills the body */

.memo-edit-popup-body textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: var(--team-field-padding, 12px);
  font-size: 14px;
  line-height: 1.6;
  color: var(--team-text-color, #374151);
  background-color: var(--team-field-bg, white);
  border: 1px solid var(--team-outline-color, #d1d5db);
  border-radius: var(--team-field-border-radius, 6px);
  resize: none;
}

.memo-edit-popup-body textarea:focus {
  outline: none;
  border-color: var(--team-accent-color, #3b82f6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, transparent);
}

/* Popup footer - uses team nav button colors */

.memo-edit-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--team-field-padding, 12px) var(--team-field-padding, 16px);
  border-top: 1px solid var(--team-outline-color, #e5e7eb);
  background-color: var(--team-nav-button-bg, #f9fafb);
  flex-shrink: 0;
}

.memo-edit-popup-footer .auto-save-status {
  font-size: 12px;
  color: var(--team-muted-text, #6b7280);
}

.memo-edit-popup-footer .auto-save-status.saved {
  color: var(--team-success-color, #10b981);
}

.memo-edit-popup-footer .auto-save-status.saving {
  color: var(--team-accent-color, #3b82f6);
}

.memo-edit-popup-footer .auto-save-status.error {
  color: var(--team-error-color, #ef4444);
}

/* Container wrapper for positioning the tab */

.memo-edit-container {
  position: relative;
}

.memo-edit-tab-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  height: 15px;
}

/* Sticky Table Header for Subforms
   Keeps column labels visible while scrolling through subform rows */

/* CRITICAL: Allow overflow on team-box when sticky header is used */

/* Without this, position: sticky won't work due to overflow: hidden */

.team-box.subform-has-sticky-header {
  overflow: visible !important;
}

/* Fallback: Use :has() selector for modern browsers */

/* This catches cases where the class might not be applied */

.team-box:has(.subform-sticky-header) {
  overflow: visible !important;
}

/* Additional fallback: target the subform controller parent's team-box */

[data-controller="subform"] > .team-box {
  overflow: visible !important;
}

/* Most aggressive: any team-box containing a sticky header anywhere inside */

.team-box:has([class*="sticky"]) {
  overflow: visible !important;
}

/* CRITICAL FIX: The _box.html.erb partial (page-level form wrapper) also has overflow-hidden */

/* This wrapper is far up the ancestor chain and breaks sticky positioning */

/* We need to override it when there's a sticky header descendant */

.rounded-md.shadow.overflow-hidden:has(.subform-sticky-header),
.overflow-hidden:has(.subform-sticky-header),
div[class*="overflow-hidden"]:has(.subform-sticky-header) {
  overflow: visible !important;
}

/* Hide per-row labels on desktop when sticky header is enabled */

/* Labels remain visible on mobile (below 768px) */

@media (min-width: 768px) {
  .hide-labels-desktop .field-label,
  .hide-labels-desktop label.field-label,
  .hide-labels-desktop .flex.items-center.mb-0\.5 {
    display: none !important;
  }

  /* Also hide the label wrapper that contains field-label-icons */

  .hide-labels-desktop [data-controller="field-label-icons"] {
    display: none !important;
  }
}

/* Remove gap between box header (title) and sticky header (field labels) */

/* Override Tailwind's mb-4 on team-box-header */

.subform-has-sticky-header > .team-box-header,
.team-box.subform-has-sticky-header .team-box-header,
div.team-box-header + div.subform-sticky-header {
  margin-top: 0 !important;
}

.subform-has-sticky-header > .team-box-header {
  margin-bottom: 0 !important;
  padding-bottom: 0.25rem !important;
}

/* :has() for modern browsers */

.team-box:has(.subform-sticky-header) > .team-box-header {
  margin-bottom: 0 !important;
  padding-bottom: 0.25rem !important;
}

.subform-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--team-header-bg);
  border-bottom: 1px solid var(--team-outline-color);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0;
  margin-top: 0;
}

/* Header grid - ensure single row, consistent cell heights */

.subform-sticky-header .subform-header-grid {
  align-items: center;
  /* Prevent grid row wrap on desktop */
  flex-wrap: nowrap;
}

/* Header cells - consistent sizing */

.subform-sticky-header .subform-header-grid > div {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* Header label styling - matches subform row field labels */

.subform-sticky-header .subform-header-label {
  display: block;
  font-size: 0.75rem;
  /* text-xs */
  font-weight: 500;
  /* font-medium */
  color: var(--team-muted-text);
  cursor: pointer;
  line-height: 1.25;
  /* Prevent label wrapping - truncate if too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Header cells - consistent styling with grid lines */

.subform-sticky-header .subform-header-cell {
  padding: 0.25rem 0.5rem;
  border-right: 1px solid var(--team-outline-color);
  background-color: var(--team-header-bg);
}

/* Last header cell - no right border */

.subform-sticky-header .subform-header-cell:last-child {
  border-right: none;
}

.subform-sticky-header .subform-header-label:hover {
  color: var(--team-text-color);
}

/* Required indicator */

.subform-sticky-header .required-indicator {
  color: #ef4444;
  /* red-500 */
  margin-left: 0.125rem;
}

/* Active row indicator - subtle highlight when a row has focus */

.subform-row-active {
  box-shadow: inset 0 0 0 2px var(--team-primary-color, #3b82f6);
}

/* ========================================
   SUBFORM GRID MODE
   Makes subform look like a spreadsheet grid
   with ZERO vertical spacing between rows
   ======================================== */

/* Container - remove ALL padding */

.subform-grid-mode {
  padding: 0 !important;
  gap: 0 !important;
}

/* Row styling - zero margins, zero padding, grid borders */

.subform-grid-mode .team-subform-row {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb) !important;
  box-shadow: none !important;
  /* Override any inline row-gap via CSS custom property */
  --team-grid-row-gap: 0px;
  --team-field-bottom-padding: 0px;
}

/* First row gets top border for clean grid look */

.subform-grid-mode .team-subform-row:first-child {
  border-top: 1px solid var(--team-outline-color, #e5e7eb) !important;
}

.subform-grid-mode .team-subform-row:last-child {
  border-bottom: 1px solid var(--team-outline-color, #e5e7eb) !important;
}

.subform-grid-mode .team-subform-row:hover {
  box-shadow: none !important;
  background-color: color-mix(
    in srgb,
    var(--team-primary-color, #3b82f6) 3%,
    var(--team-field-bg, white)
  ) !important;
}

/* Override the editable-subform-row wrapper spacing */

.subform-grid-mode .editable-subform-row {
  margin: 0 !important;
  padding: 0 !important;
}

/* Form field wrapper - remove padding in grid mode for tight grid appearance */

.subform-grid-mode .form-field-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove margin from field content wrappers in grid mode */

.subform-grid-mode .form-field-wrapper > div,
.subform-grid-mode .form-field-wrapper .mt-0\.5,
.subform-grid-mode .form-field-wrapper .w-full {
  margin: 0 !important;
  padding: 0 !important;
}

/* Field box wrappers - remove all padding/margins */

.subform-grid-mode .field-box-content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide field box headers in grid mode - using sticky header instead */

.subform-grid-mode .field-box-header,
.subform-grid-mode .field-box-header-spacer {
  display: none !important;
}

/* Grid layout - zero gaps (override gap-x-6 and inline row-gap) */

.subform-grid-mode .grid,
.subform-grid-mode .grid-cols-12 {
  gap: 0 !important;
  row-gap: 0 !important;
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}

/* Override Tailwind gap utilities in grid mode */

.subform-grid-mode .gap-x-6,
.subform-grid-mode .gap-x-4,
.subform-grid-mode .gap-4,
.subform-grid-mode .gap-6,
.subform-grid-mode [class*="gap-"] {
  gap: 0 !important;
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Force CSS variable values to 0 in grid mode
   This overrides inline styles like style="row-gap: var(--team-grid-row-gap, 5px)"
   because CSS variables cascade to the point of use */

.subform-grid-mode,
.subform-grid-mode * {
  --team-grid-row-gap: 0px !important;
  --team-field-bottom-padding: 0px !important;
}

/* Additional direct override for elements with inline styles */

.subform-grid-mode [style*="row-gap"] {
  row-gap: 0 !important;
}

.subform-grid-mode [style*="padding"]:not(.subform-sticky-header) {
  padding: 0 !important;
}

/* Field containers - zero padding */

.subform-grid-mode .grid > div,
.subform-grid-mode .col-span-1,
.subform-grid-mode .col-span-2,
.subform-grid-mode .col-span-3,
.subform-grid-mode .col-span-4,
.subform-grid-mode .col-span-5,
.subform-grid-mode .col-span-6,
.subform-grid-mode .col-span-7,
.subform-grid-mode .col-span-8,
.subform-grid-mode .col-span-9,
.subform-grid-mode .col-span-10,
.subform-grid-mode .col-span-11,
.subform-grid-mode .col-span-12,
.subform-grid-mode [class*="col-span-"] {
  padding: 0 !important;
  margin: 0 !important;
}

/* Inputs - grid cell appearance with vertical dividers */

/* More specific selectors to override spacing-overrides.css and Tailwind classes */

.subform-grid-mode input[type="text"],
.subform-grid-mode input[type="number"],
.subform-grid-mode input[type="email"],
.subform-grid-mode input[type="date"],
.subform-grid-mode input[type="datetime-local"],
.subform-grid-mode input,
.subform-grid-mode select,
.subform-grid-mode textarea {
  /* Explicit border sides to override Tailwind border classes */
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid var(--team-outline-color, #e5e7eb) !important;
  border-radius: 0 !important;
  padding: 0.375rem 0.5rem !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Textarea specific - no resize handle in grid mode, let rows attribute control height */

.subform-grid-mode textarea,
div.subform-grid-mode textarea {
  resize: none !important;
  /* Don't constrain height - let rows attribute work naturally */
  height: auto !important;
  min-height: unset !important;
  border-radius: 0 !important;
  /* Explicit border sides */
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid var(--team-outline-color, #e5e7eb) !important;
}

/* Delete button column - keep its right border for grid edge */

.subform-grid-mode .grid > div:last-child {
  border-right: none !important;
}

/* Grid mode - box container styling */

.subform-grid-mode-box {
  border-radius: 0 !important;
}

/* Grid mode header - matching grid appearance */

.subform-grid-mode-box .subform-sticky-header {
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

/* Grid mode header grid layout */

.subform-grid-mode-box .subform-sticky-header .grid {
  gap: 0 !important;
  row-gap: 0 !important;
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}

/* Grid mode header cells - matching input column widths */

.subform-grid-mode-box .subform-sticky-header .grid > div {
  padding: 0.375rem 0.5rem !important;
  margin: 0 !important;
  border-right: 1px solid var(--team-outline-color, #e5e7eb) !important;
}

/* Last header cell (delete button spacer) - no right border */

.subform-grid-mode-box .subform-sticky-header .grid > div:last-child {
  border-right: none !important;
}

/* Active row in grid mode - subtler highlight */

.subform-grid-mode .subform-row-active {
  background-color: color-mix(
    in srgb,
    var(--team-primary-color, #3b82f6) 5%,
    var(--team-field-bg, white)
  ) !important;
  box-shadow: none !important;
}

/* Default: Hide header on mobile - mobile uses per-row labels
   When sticky_header_mobile is enabled, the header gets different visibility classes */

@media (max-width: 767px) {
  /* Only hide if not explicitly marked for mobile display */

  .subform-sticky-header:not(.subform-sticky-header-mobile) {
    display: none !important;
  }
}

/* ========================================
   MOBILE STICKY HEADER
   When sticky_header_mobile is enabled
   ======================================== */

/* Mobile header styling - slightly different from desktop */

@media (max-width: 767px) {
  .subform-sticky-header-mobile {
    padding: 0.375rem 0.5rem;
  }

  /* Mobile header uses flex wrap for column stacking */

  .subform-sticky-header-mobile .subform-header-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
  }

  /* Mobile header columns - use CSS variable for width */

  .subform-sticky-header-mobile .mobile-header-col {
    flex: 0 0 auto;
    width: calc(var(--mobile-col-width, 25%) - 0.5rem);
    min-width: 60px;
  }
}

/* On very small screens, stack all columns vertically */

@media (max-width: 480px) {
  .subform-sticky-header-mobile .mobile-header-col {
    width: 100%;
    flex-basis: 100%;
  }
}

/* Hide per-row labels on mobile when mobile sticky header is enabled */

@media (max-width: 767px) {
  .hide-labels-mobile .field-label,
  .hide-labels-mobile label.field-label,
  .hide-labels-mobile .flex.items-center.mb-0\.5 {
    display: none !important;
  }

  .hide-labels-mobile [data-controller="field-label-icons"] {
    display: none !important;
  }
}

/* ========================================
   MOBILE GRID MODE
   On mobile, use a 4-column grid instead of 12.
   Items sit side-by-side when they fit.
   Target md:col-span-* to get desktop width config.
   ======================================== */

@media (max-width: 767px) {
  /* ========================================
     MOBILE HEADER - Match field widths and add grid lines
     ======================================== */

  /* Mobile sticky header - floating appearance with shadow */

  .subform-grid-mode .subform-sticky-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: none;
    margin-bottom: 0;
  }

  /* Mobile header uses flex layout */

  .subform-grid-mode .subform-sticky-header .subform-header-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border-bottom: none;
  }

  /* Mobile header cells - grid lines */

  .subform-grid-mode .subform-sticky-header .subform-header-cell {
    border-right: 1px solid var(--team-outline-color);
    border-bottom: 1px solid var(--team-outline-color);
    padding: 0.375rem 0.5rem;
    background-color: var(--team-header-bg);
  }

  /* Mobile header cell widths - match field widths */

  /* All header cells start at 100% (for 3+ col fields) */

  .subform-grid-mode .subform-sticky-header .subform-header-cell {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 1-2 desktop cols → 50% mobile (small fields can pair up) */

  /* Use data-cols attribute for precise matching */

  .subform-grid-mode .subform-sticky-header .subform-header-cell[data-cols="1"],
  .subform-grid-mode .subform-sticky-header .subform-header-cell[data-cols="2"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  /* ========================================
     MOBILE ROWS - Strong dividing lines
     ======================================== */

  /* CRITICAL: Strong dividing lines between rows on mobile */

  /* When fields stack, rows need clear visual separation */

  /* Uses team-configurable mobile_thick_line_px and mobile_thick_line_color */

  .subform-grid-mode .team-subform-row,
  div.subform-grid-mode .team-subform-row,
  .subform-grid-mode > .team-subform-row {
    border-bottom: var(--team-mobile-thick-line-px, 3px) solid var(--team-mobile-thick-line-color) !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    background-color: var(--team-field-bg) !important;
  }

  /* First row also gets top border on mobile for clarity */

  .subform-grid-mode .team-subform-row:first-child {
    border-top: var(--team-mobile-thick-line-px, 3px) solid var(--team-mobile-thick-line-color) !important;
  }

  /* Subtle background alternation for even rows */

  .subform-grid-mode .team-subform-row:nth-child(even) {
    background-color: color-mix(
      in srgb,
      var(--team-mobile-thick-line-color) 3%,
      var(--team-field-bg)
    ) !important;
  }

  /* Convert 12-col grid to flex with 4-column logic */

  /* Higher specificity to beat Tailwind's .grid { display: grid } */

  .subform-grid-mode .team-subform-row .grid.grid-cols-12,
  .subform-grid-mode .grid.grid-cols-12.gap-x-6,
  div.subform-grid-mode .grid.grid-cols-12 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  /* Mobile column expansion - small desktop fields need more space on mobile
     1-2 cols (tiny) → 50% (two can pair up)
     3+ cols → 100% (full width, stack vertically) */

  /* All field containers default to 100% width on mobile */

  .subform-grid-mode .subform-field-container,
  .subform-grid-mode .grid > div[class*="col-span"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 1-2 desktop cols → 50% mobile (pair up tiny fields) */

  /* Use data-cols attribute for precise matching */

  .subform-grid-mode .subform-field-container[data-cols="1"],
  .subform-grid-mode .subform-field-container[data-cols="2"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  /* Delete button column - stays small */

  .subform-grid-mode .grid > div:last-child:not([class*="md:col-span-"]) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 30px;
  }

  /* ========================================
     CRITICAL: Field width rules with high specificity
     These MUST override Tailwind and the default 100% rule
     ======================================== */

  /* Force the parent grid to be flex container */

  .subform-grid-mode .team-subform-row .field-box-content .grid,
  .subform-grid-mode .team-subform-row .grid.grid-cols-12 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  /* All fields default to 100% (3+ cols) - high specificity */

  .subform-grid-mode .team-subform-row .grid .subform-field-container,
  .subform-grid-mode .field-box-content .grid .subform-field-container {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--team-outline-color);
  }

  /* 1-2 cols = 50% width - these rules are more specific and come after */

  .subform-grid-mode .team-subform-row .grid .subform-field-container[data-cols="1"],
  .subform-grid-mode .team-subform-row .grid .subform-field-container[data-cols="2"],
  .subform-grid-mode .field-box-content .grid .subform-field-container[data-cols="1"],
  .subform-grid-mode .field-box-content .grid .subform-field-container[data-cols="2"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  /* Right border on all fields for grid look */

  .subform-grid-mode .team-subform-row .grid .subform-field-container {
    border-right: 1px solid var(--team-outline-color);
  }

  /* No right border on last field in a row */

  .subform-grid-mode .team-subform-row .grid .subform-field-container:last-of-type {
    border-right: none;
  }
}

/* Dark mode support via media query */

@media (prefers-color-scheme: dark) {
  .subform-sticky-header {
    background-color: var(--team-header-bg);
    border-bottom-color: var(--team-outline-color);
  }

  .subform-sticky-header .subform-header-label {
    color: var(--team-muted-text);
  }

  .subform-sticky-header .subform-header-label:hover {
    color: var(--team-text-color);
  }
}

/* Dark mode support via explicit .dark class */

.dark .subform-sticky-header {
  background-color: var(--team-header-bg);
  border-bottom-color: var(--team-outline-color);
}

.dark .subform-sticky-header .subform-header-label {
  color: var(--team-muted-text);
}

.dark .subform-sticky-header .subform-header-label:hover {
  color: var(--team-text-color);
}

/* ========================================
   FINAL OVERRIDE: Mobile Grid Flex Layout
   Placed at end to ensure highest cascade priority
   ======================================== */

@media screen and (max-width: 767px) {
  /* Force flex layout on mobile grid mode - override Tailwind's .grid */

  .subform-grid-mode .grid {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* ========================================
   LIST STICKY HEADER
   Keeps column headers visible when scrolling through list tables
   ======================================== */

/* Sticky header for list tables (desktop only) */

.list-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--team-header-bg);
}

/* Ensure header cells have proper background */

.list-sticky-header th {
  background-color: var(--team-header-bg);
}

/* Allow overflow on containers with sticky list headers */

.team-box:has(.list-sticky-header) {
  overflow: visible !important;
}

/* Also handle the overflow-hidden wrapper */

.overflow-hidden:has(.list-sticky-header),
.rounded-md.shadow.overflow-hidden:has(.list-sticky-header) {
  overflow: visible !important;
}

/* Dark mode support */

.dark .list-sticky-header,
.dark .list-sticky-header th {
  background-color: var(--team-header-bg);
}

/* CRITICAL: spacing-overrides must be imported LAST to override all Tailwind utilities
 * This file uses @layer utilities to ensure proper cascade precedence
 * All spacing customizations are now centralized here for maintainability
 */

/* Spacing Overrides for Bullet Train Theme
 * =========================================
 * This file centralizes all spacing customizations to override Bullet Train's
 * generous default padding and margins. Using @layer ensures these overrides
 * apply at the correct cascade level and win against Tailwind utilities.
 *
 * To disable: Comment out the import in application.css
 * To customize: Adjust the values below
 */

/* Non-utility overrides that need higher specificity */

/* Form Input Bottom Padding Override
 * Reduce bottom padding from default 8px to 4px for more compact forms
 * The @tailwindcss/forms plugin applies 0.5rem (8px) padding on all sides
 * This must be OUTSIDE @layer utilities to override the forms plugin base styles
 */

.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  padding-left: var(--team-input-horizontal-padding, 5px) !important;
  padding-right: var(--team-input-horizontal-padding, 5px) !important;
  padding-top: var(--team-input-vertical-padding, 4px) !important;
  padding-bottom: var(--team-input-vertical-padding, 4px) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  background-color: var(--team-field-bg, white) !important;
  color: var(--team-text-color, #111827) !important;
}

/* Focus state for all form inputs - uses team accent color */

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
  border-color: var(--team-accent-color, #3b82f6) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, transparent) !important;
}

/* Dark Mode Text Colors for Form Inputs
 * Uses @media (prefers-color-scheme: dark) to match app's dark mode system
 * Team variables should already handle dark mode, but this provides fallbacks
 */

@media (prefers-color-scheme: dark) {
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    color: var(--team-text-color, #f9fafb) !important;
    background-color: var(--team-field-bg, rgb(30 41 59)) !important;
    border-color: var(--team-outline-color, rgb(71 85 105)) !important;
  }

  /* Placeholder text in dark mode */

  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #9ca3af !important;
    /* gray-400 */
  }

  input::placeholder,
  textarea::placeholder {
    color: #9ca3af !important;
    /* gray-400 */
  }

  /* Focus state in dark mode */

  input:focus,
  select:focus,
  textarea:focus {
    color: var(--team-text-color, #f9fafb) !important;
    background-color: var(--team-field-bg, rgb(30 41 59)) !important;
    border-color: var(--team-accent-color, #3b82f6) !important;
  }

  /* Disabled inputs */

  input:disabled,
  select:disabled,
  textarea:disabled {
    color: #6b7280 !important;
    /* gray-500 */
    background-color: rgb(51 65 85) !important;
    /* slate-700 */
  }
}

/* Dark mode support via .dark class (for class-based dark mode toggle) */

.dark .form-input,
.dark .form-textarea,
.dark .form-select,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="month"],
.dark input[type="week"],
.dark select,
.dark textarea {
  color: var(--team-text-color, #f9fafb) !important;
  background-color: var(--team-field-bg, rgb(30 41 59)) !important;
  border-color: var(--team-outline-color, rgb(71 85 105)) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  color: var(--team-text-color, #f9fafb) !important;
  background-color: var(--team-field-bg, rgb(30 41 59)) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Field group headers */

h3.text-lg {
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

/* Box structure specific overrides */

.bg-white.rounded-md.shadow .divide-y > div,
.dark\:bg-slate-700.rounded-md.shadow .divide-y > div {
  padding: 0.75rem !important;
}

/* Field group gray boxes */

.border.border-gray-200.rounded-lg.bg-gray-50 {
  padding: 0.75rem !important;
}

/* Subform row boxes - remove rounded corners for stacked appearance */

[data-subform-target="row"].rounded-lg,
[data-subform-target="row"] .rounded-lg {
  border-radius: 0 !important;
}

/* Remove double borders between stacked subform rows - but NOT in grid mode */

/* Grid mode rows only have border-bottom, so no overlap needed */

[data-subform-target="row"] + [data-subform-target="row"] {
  margin-top: -1px !important;
  /* Overlap borders by 1px to eliminate double line */
}

/* In grid mode, reset the negative margin so row borders are visible */

.subform-grid-mode [data-subform-target="row"] + [data-subform-target="row"],
.subform-grid-mode .team-subform-row + .team-subform-row {
  margin-top: 0 !important;
}

/* ========================================
   DATE FIELD INPUT BUTTONS
   Style to match dropdown button pattern
   ======================================== */

/* Date input container - make it look like dropdown-line-container */

.date-input {
  display: flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: var(--team-field-border-radius, 6px);
  background: var(--team-field-bg, white);
  overflow: hidden;
}

/* Date input text field - fill the container */

.date-input input.form-control,
.date-input input.single-daterange {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: var(--team-input-vertical-padding, 4px) var(--team-input-horizontal-padding, 5px) !important;
}

/* Clear/trash button - match dropdown-button style */

.date-input button.clear {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: 0;
  background: transparent;
  color: var(--team-nav-button-text, #374151);
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
}

.date-input button.clear:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
}

/* Icon in clear button - uses team nav button colors */

.date-input button.clear i {
  font-size: 1rem;
  line-height: 1;
  color: var(--team-nav-button-text, #374151);
}

.date-input button.clear:hover i {
  color: var(--team-nav-button-text, #374151);
}

/* Focus state for date input container */

.date-input:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

/* ========================================
   NATIVE DATE INPUT CALENDAR ICON
   Style the browser's native date picker icon
   ======================================== */

/* WebKit browsers (Chrome, Safari, Edge) */

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 4px;
  margin-right: 2px;
  border-radius: var(--team-field-border-radius, 6px);
  opacity: 0.7;
  filter: var(--team-calendar-icon-filter, none);
  -webkit-transition: opacity 150ms, background-color 150ms;
  transition: opacity 150ms, background-color 150ms;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--team-nav-button-bg, #f3f4f6);
}

/* For dark mode, invert the icon color */

@media (prefers-color-scheme: dark) {
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }
}

/* ========================================
   GENERIC INPUT ADDON BUTTONS
   For any input with an inline icon/button
   ======================================== */

/* Password field container - match dropdown pattern */

.password-input-container,
input[type="password"] + button,
input[type="text"] + button[onclick*="password"] {
  /* For absolutely positioned password toggle buttons */
}

/* Container for inputs with addon buttons */

.input-with-addon {
  display: flex;
  align-items: center;
  height: 38px;
  border: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: var(--team-field-border-radius, 6px);
  background: var(--team-field-bg, white);
  overflow: hidden;
}

.input-with-addon input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Generic addon button style (right side) */

.input-addon-button,
.input-with-addon button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--team-outline-color, rgb(209 213 219));
  border-radius: 0;
  background: transparent;
  color: var(--team-nav-button-text, #374151);
  flex-shrink: 0;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
}

.input-addon-button:hover,
.input-with-addon button:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  color: var(--team-nav-button-text, #374151);
}

/* Input addon button icons */

.input-addon-button i,
.input-with-addon button i {
  font-size: 1rem;
  line-height: 1;
  color: inherit;
}

/* Focus state */

.input-with-addon:focus-within {
  border-color: var(--team-accent-color, rgb(59 130 246));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, rgb(59 130 246)) 10%, transparent);
}

/* ========================================
   TRIX EDITOR - Team UI Variables
   Override theme styles with team variables
   ======================================== */

trix-editor {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  color: var(--team-text-color, #111827) !important;
}

trix-editor:focus,
trix-editor:active {
  border-color: var(--team-accent-color, #3b82f6) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-accent-color, #3b82f6) 10%, transparent) !important;
}

trix-toolbar {
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.trix-button-group {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.trix-button {
  border-color: var(--team-outline-color, #d1d5db) !important;
}

/* Dark mode trix */

.dark trix-editor {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .trix-button {
  background-color: var(--team-field-bg, #1f2937) !important;
  border-color: var(--team-outline-color, #374151) !important;
}

/* ========================================
   DATE RANGE PICKER - Team UI Variables
   Override theme styles with team variables
   ======================================== */

.daterangepicker {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
}

.daterangepicker .calendar-table {
  border: 1px solid var(--team-outline-color, #e5e7eb) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--team-accent-color, #3b82f6) !important;
  color: white !important;
}

.daterangepicker td.in-range {
  background-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 20%, var(--team-field-bg, white)) !important;
}

.daterangepicker .drp-buttons .btn-primary {
  background-color: var(--team-accent-color, #3b82f6) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

.daterangepicker .hourselect,
.daterangepicker .minuteselect,
.daterangepicker .ampmselect {
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
  background-color: var(--team-field-bg, white) !important;
  color: var(--team-text-color, #111827) !important;
}

.daterangepicker .hourselect:focus,
.daterangepicker .minuteselect:focus,
.daterangepicker .ampmselect:focus {
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Dark mode daterangepicker */

.dark .daterangepicker {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .daterangepicker .calendar-table {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
}

.dark .daterangepicker th,
.dark .daterangepicker td {
  color: var(--team-text-color, #f3f4f6) !important;
}

.dark .daterangepicker .hourselect,
.dark .daterangepicker .minuteselect,
.dark .daterangepicker .ampmselect {
  border-color: var(--team-outline-color, #374151) !important;
  background-color: var(--team-field-bg, #1f2937) !important;
  color: var(--team-text-color, #f3f4f6) !important;
}

/* =========================================
   Grid Mode Override - Must be at END of file
   Override the border styles for subform grid mode
   Grid mode needs no border (except right divider)
   ========================================= */

.subform-grid-mode input,
.subform-grid-mode select,
.subform-grid-mode textarea {
  /* Explicit border sides to override all border shorthand properties */
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid var(--team-outline-color, #e5e7eb) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Textarea in grid mode - no resize handle */

.subform-grid-mode textarea {
  resize: none !important;
}

/* ✅ YOUR APPLICATION'S CSS */

/* If you need to customize your application's CSS, this is the place to do it. This helps
   avoid merge conflicts in the future when Rails or Bullet Train update their own CSS.
*/

/* Compact form spacing overrides for Bullet Train box containers */

.form-compact .space-y-7 > * + * {
  margin-top: 0.5rem !important;
  /* 8px instead of 21px */
}

.form-compact .space-y-4 > * + * {
  margin-top: 0.25rem !important;
  /* 4px instead of 12px */
}

.form-compact .pt-7 {
  padding-top: 0.5rem !important;
  /* 8px instead of 21px */
}

.form-compact .pb-7 {
  padding-bottom: 0.5rem !important;
  /* 8px instead of 21px */
}

.form-compact .pb-3 {
  padding-bottom: 0.25rem !important;
  /* 4px instead of 9px */
}

.form-compact .px-8 {
  padding-left: 1rem !important;
  /* 16px instead of 32px */
  padding-right: 1rem !important;
  /* 16px instead of 32px */
}

.form-compact .py-6 {
  padding-top: 0.75rem !important;
  /* 12px instead of 24px */
  padding-bottom: 0.75rem !important;
  /* 12px instead of 24px */
}

.hidden {
  display: none;
}

.block {
  display: block;
}

/* You can add this CSS in your application's stylesheet */

/* CUSTOM CONTAINER PADDING OVERRIDE - Reduce excessive margins */

/* This reduces the main container padding for better space utilization */

/* Reduce padding on the main page wrapper */

.page-wrapper,
[class*="page-"] {
  padding-left: 0.75rem !important;
  /* 12px instead of default */
  padding-right: 0.75rem !important;
  /* 12px instead of default */
}

/* Reduce padding on main content containers */

.container,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl {
  padding-left: 0.75rem !important;
  /* 12px */
  padding-right: 0.75rem !important;
  /* 12px */
}

/* For larger screens, slightly increase but still keep it tight */

@media (min-width: 640px) {
  .page-wrapper,
  [class*="page-"],
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 1rem !important;
    /* 16px */
    padding-right: 1rem !important;
    /* 16px */
  }
}

@media (min-width: 1024px) {
  .page-wrapper,
  [class*="page-"],
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl {
    padding-left: 1.5rem !important;
    /* 24px */
    padding-right: 1.5rem !important;
    /* 24px */
  }
}

/* Reduce excessive margins on box/card components */

.box,
[class*="box-"],
.card,
[class*="card-"] {
  margin-bottom: 1rem !important;
  /* 16px instead of larger margins */
}

/* Tighten up the main content area margins */

main {
  padding-top: 1rem !important;
  /* 16px */
  padding-bottom: 1rem !important;
  /* 16px */
}

/* Reduce spacing between sections */

section + section {
  margin-top: 1.5rem !important;
  /* 24px between sections */
}

/* Prevent excessive hover states on sortable headers */

th a {
  text-decoration: none !important;
}

/* Prevent hover triggering on table cells */

td {
  pointer-events: auto;
}

/* Only allow pointer events on actual clickable elements */

td a, td button, td input[type="checkbox"] {
  pointer-events: auto;
}

/* Pagination styling - uses nav button colors */

.pagy-nav a {
  transition: all 0.15s ease;
  color: var(--team-nav-button-text, #374151);
}

.pagy-nav a:hover {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  text-decoration: none !important;
}

/* Active pagination page */

.pagy-nav .current {
  background-color: color-mix(
    in srgb,
    var(--team-accent-color, #3b82f6) var(--team-ui-element-opacity, 100%),
    var(--team-field-bg, white)
  );
  color: white;
}

.upload {
  padding: 10px;
  margin-bottom: 5px;
  /* Standardized 5px spacing */
}

.upload-label {
  font-weight: bold;
  margin-bottom: 5px;
}

.upload-preview {
  margin-top: 10px;
}

.upload-image {
  max-width: 100%;
  height: auto;
}

/* Commented out to fix excessive form spacing - using Tailwind utilities instead
.field {
   margin-bottom: 15px;
 }
*/

/* Commented out to let field-label class handle this properly
 .form-label {
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
 }
 */

/* Commented out to fix file input spacing
 .file-input {
   display: block;
   margin-bottom: 10px;
 }
 */

/* Primary button - uses team accent color with UI element opacity */

.button {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) var(--team-ui-element-opacity, 100%),
     var(--team-field-bg, white)
   );
  border: none;
  color: #fff;
  /* padding: 8px 12px; */
  /* Removed to use button-smaller padding consistently */
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  border-radius: var(--team-field-border-radius, 6px);
  cursor: pointer;
}

.button:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 90%,
     var(--team-field-bg, white)
   );
}

/* Primary button variant - same as .button, uses team accent color */

.button-primary {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) var(--team-ui-element-opacity, 100%),
     var(--team-field-bg, white)
   ) !important;
  border: none !important;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  border-radius: var(--team-field-border-radius, 6px);
  cursor: pointer;
}

.button-primary:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 90%,
     var(--team-field-bg, white)
   ) !important;
}

/* Smaller button variant */

.button-smaller {
  padding: 4px 10px !important;
  font-size: 13px !important;
}

/* Alternative button - uses nav button colors for secondary actions */

.button-alternative {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--team-nav-button-bg, #f3f4f6) !important;
  color: var(--team-nav-button-text, #374151) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

/* General button border-radius - applies to .btn classes from frameworks */

.btn,
 [class*="btn-"] {
  border-radius: var(--team-field-border-radius, 6px) !important;
}

.button-alternative:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 15%,
     var(--team-nav-button-bg, #f3f4f6)
   ) !important;
}

/* Compact count button for list views - uses nav button colors */

.button-count {
  background-color: var(--team-nav-button-bg, #f3f4f6);
  border: 1px solid var(--team-outline-color, #d1d5db);
  color: var(--team-nav-button-text, #374151);
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  border-radius: var(--team-field-border-radius, 6px);
  cursor: pointer;
  min-width: 2.5rem;
}

.button-count:hover {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 15%,
     var(--team-nav-button-bg, #f3f4f6)
   );
}

/* Remove/delete button - uses team error color */

.remove-button {
  background-color: color-mix(
     in srgb,
     var(--team-error-color, #dc3545) var(--team-ui-element-opacity, 100%),
     var(--team-field-bg, white)
   );
  color: white;
}

.remove-button:hover {
  background-color: color-mix(
     in srgb,
     var(--team-error-color, #dc3545) 90%,
     var(--team-field-bg, white)
   );
}

/* ========================================
    FORM ELEMENTS - Team Colors
    ======================================== */

/* Checkboxes and radios - use team accent color */

input[type="checkbox"].text-blue-600,
 input[type="radio"].text-blue-600 {
  color: var(--team-accent-color, #3b82f6) !important;
  --tw-ring-color: var(--team-accent-color, #3b82f6) !important;
}

/* Override Tailwind's blue checkbox color globally */

input[type="checkbox"]:checked {
  background-color: var(--team-accent-color, #3b82f6) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

input[type="radio"]:checked {
  background-color: var(--team-accent-color, #3b82f6) !important;
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Focus ring colors - use team accent color */

.focus\:ring-blue-500:focus,
 input:focus,
 select:focus,
 textarea:focus,
 button:focus {
  --tw-ring-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 50%, transparent) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--team-accent-color, #3b82f6) !important;
}

/* Dropdown option selected state - use team accent color */

.bg-blue-50 {
  background-color: color-mix(
     in srgb,
     var(--team-accent-color, #3b82f6) 10%,
     var(--team-field-bg, white)
   ) !important;
}

.no-upload {
  font-style: italic;
  color: #777;
}

/* Style the nested table */

.nested-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.nested-table th, .nested-table td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

/* Optional: Add a little background color to alternate rows */

.nested-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Optional: Make the nested table appear with a little margin */

.details {
  padding-top: 10px;
  margin-top: 10px;
}

/* CUSTOM TABLE PADDING OVERRIDE - More compact list items */

/* Reduces vertical padding on table cells for tighter list display */

.table td {
  padding-top: 0.5rem !important;
  /* 8px instead of ~10.5px */
  padding-bottom: 0.5rem !important;
  /* 8px instead of ~10.5px */
}

/* Optional: Make table headers slightly smaller too for consistency */

.table th {
  padding-top: 0.5rem !important;
  /* 8px instead of ~9px */
  padding-bottom: 0.5rem !important;
  /* 8px instead of ~9px */
}

/* ========================================
   TABLE/LIST TEXT COLOR - Uses Team Text Color
   ======================================== */

/* Table cells use team text color */

table td,
.table td,
tbody td {
  color: var(--team-text-color, #374151) !important;
}

/* Table headers use team text color */

table th,
.table th,
thead th {
  color: var(--team-text-color, #374151) !important;
}

/* List items and spans within tables */

table td span,
table td a,
.table td span,
.table td a {
  color: inherit;
}

/* Links in tables - inherit but allow hover override */

table td a:hover,
.table td a:hover {
  color: var(--team-accent-color, #3b82f6);
}

/* Muted/secondary text in tables - uses muted text color */

table td .text-gray-400,
table td .text-gray-500,
table td .text-gray-600,
.table td .text-gray-400,
.table td .text-gray-500,
.table td .text-gray-600 {
  color: var(--team-muted-text, #6b7280) !important;
}

/* Select2 Tailwind Theme */

.select2-container--default .select2-selection--single {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media (max-width: 1023px) {
  tbody.select2-container--default .select2-selection--single {
    display: block;
  }

  tr.select2-container--default .select2-selection--single {
    display: block;
    margin-bottom: 0.5rem;
  }

  tbody.select2-container--default .select2-selection--single {
    display: block;
  }

  tr.select2-container--default .select2-selection--single {
    display: block;
    margin-bottom: 0.5rem;
  }
}

.select2-container--default .select2-selection--single.shadow.overflow-hidden:has(.subform-sticky-header) {
  overflow: visible;
}


.subform-grid-mode .form-field-wrapper .select2-container--default .select2-selection--single {
  margin: 0;
  padding: 0;
}

.select2-container--default .select2-selection--single.shadow.overflow-hidden:has(.list-sticky-header) {
  overflow: visible;
}

.bg-white.select2-container--default .select2-selection--single.shadow .divide-y > div,
.dark\:bg-slate-700.select2-container--default .select2-selection--single.shadow .divide-y > div {
  padding: 0.75rem;
}

.select2-container--default .select2-selection--single {
  display: block;
}

@media (min-width: 640px) {
  .select2-container--default .select2-selection--single {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-selection--single {
  height: 38px;
  padding: 0;
}

.select2-container--default .select2-selection--single:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.5rem 0.75rem;
  line-height: 1.25rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  top: 1px;
  right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

table td .select2-container--default .select2-selection--single .select2-selection__placeholder,
.table td .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--team-muted-text, #6b7280);
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }
}

.select2-dropdown {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.select2-dropdown.shadow.overflow-hidden:has(.subform-sticky-header) {
  overflow: visible;
}

.select2-dropdown.shadow.overflow-hidden:has(.list-sticky-header) {
  overflow: visible;
}

.bg-white.select2-dropdown.shadow .divide-y > div,
.dark\:bg-slate-700.select2-dropdown.shadow .divide-y > div {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .select2-dropdown {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }
}

.select2-dropdown {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.select2-dropdown.rounded-md.shadow .divide-y > div {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .select2-dropdown {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 0.375rem;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.select2-container--default .select2-search--dropdown .select2-search__field.shadow.overflow-hidden:has(.subform-sticky-header) {
  overflow: visible;
}

.select2-container--default .select2-search--dropdown .select2-search__field.shadow.overflow-hidden:has(.list-sticky-header) {
  overflow: visible;
}

.bg-white.select2-container--default .select2-search--dropdown .select2-search__field.shadow .divide-y > div,
.dark\:bg-slate-700.select2-container--default .select2-search--dropdown .select2-search__field.shadow .divide-y > div {
  padding: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-search--dropdown .select2-search__field {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  --tw-ring-color: color-mix(in srgb, var(--team-accent-color, #3b82f6) 50%, transparent);
  border-color: var(--team-accent-color, #3b82f6);
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.select2-container--default .select2-results__option {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-results__option {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }
}

.select2-container--default .select2-results__option {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.select2-container--default .select2-results__option[aria-selected=true] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

@media (prefers-color-scheme: dark) {
  .select2-container--default .select2-results__option[aria-selected=true] {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }
}

/* Prefilled field highlighting */

.prefilled-field,
input.bg-green-50,
select.bg-green-50,
textarea.bg-green-50,
.select2-container--default .select2-selection--single.bg-green-50,
.select2-container--default .select2-selection--multiple.bg-green-50 {
  background-color: #f0fdf4 !important;
  /* Tailwind green-50 */
  border-color: #86efac !important;
  /* Tailwind green-300 */
}

/* Select2 specific green highlighting */

.select2-container--default .select2-selection--single.bg-green-50 .select2-selection__rendered,
.select2-container--default .select2-selection--multiple.bg-green-50 .select2-selection__rendered {
  background-color: #f0fdf4 !important;
}

/* Ensure the green background is visible even with focus */

.prefilled-field:focus,
input.bg-green-50:focus,
select.bg-green-50:focus,
textarea.bg-green-50:focus {
  background-color: #f0fdf4 !important;
  border-color: #3b82f6 !important;
  /* Keep blue border on focus */
}

/* Prefilled indicator text */

.prefilled-indicator {
  color: #16a34a;
  /* Tailwind green-600 */
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

/* Required field highlighting - uses team error color with team-controlled opacity */

/* Uses --team-input-opacity (20% light, 25% dark) for consistent styling */

.required-field,
input.required-field,
select.required-field,
textarea.required-field {
  background-color: color-mix(in srgb, var(--team-error-color, #ef4444) var(--team-input-opacity, 20%), var(--team-field-bg, white)) !important;
  border-color: color-mix(in srgb, var(--team-error-color, #ef4444) 30%, transparent) !important;
}

.required-field:focus,
input.required-field:focus,
select.required-field:focus,
textarea.required-field:focus {
  background-color: color-mix(in srgb, var(--team-error-color, #ef4444) var(--team-input-opacity, 20%), var(--team-field-bg, white)) !important;
  border-color: var(--team-error-color, #ef4444) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-error-color, #ef4444) 10%, transparent) !important;
}

/* Required field label indicator - uses team error color */

.required-indicator {
  color: var(--team-error-color, #ef4444);
  font-weight: normal;
  margin-left: 2px;
}

/* Responsive list fixes */

@media (min-width: 1024px) {
  /* Hide mobile content on desktop */

  .mobile-list-cell {
    display: none !important;
  }

  .mobile-card-content {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  /* Show mobile content on mobile */

  .mobile-list-cell {
    display: table-cell !important;
  }

  /* Hide desktop cells on mobile */

  td.hidden.lg\:table-cell {
    display: none !important;
  }
}

/* Note: All spacing overrides have been moved to spacing-overrides.css
 * The previous duplicate padding overrides (lines 470-676) have been removed.
 * All spacing customization is now consolidated in one place for maintainability.
 */

/* UI Element button loading state - prevents double-clicks */

button.is-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* UI Element button styling - uses team button colors as defaults */

/* Uses --team-ui-element-opacity (100% light, 25% dark) for consistent styling */

/* Default UI element buttons use team UI button colors (configurable per team) */

button[data-controller="ui-element"],
a.button[data-controller="ui-element"] {
  background-color: color-mix(
    in srgb,
    var(--team-ui-button-bg, #3b82f6) var(--team-ui-element-opacity, 100%),
    var(--team-field-bg, white)
  ) !important;
  color: var(--team-ui-button-text, white) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
  border-radius: var(--team-field-border-radius, 6px) !important;
}

button[data-controller="ui-element"]:hover,
a.button[data-controller="ui-element"]:hover {
  background-color: color-mix(
    in srgb,
    var(--team-ui-button-bg, #3b82f6) 90%,
    var(--team-field-bg, white)
  ) !important;
}

button[data-controller="ui-element"]:focus,
a.button[data-controller="ui-element"]:focus {
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--team-ui-button-bg, #3b82f6) 30%,
    transparent
  ) !important;
}

/* UI element buttons with custom colors from field configuration */

/* Custom colors override team button colors when set */

.ui-button-custom-colors {
  background-color: color-mix(
    in srgb,
    var(--ui-button-bg) var(--team-ui-element-opacity, 100%),
    var(--team-field-bg, white)
  ) !important;
  color: var(--ui-button-text, var(--team-ui-button-text, white)) !important;
  border: 1px solid var(--team-outline-color, #d1d5db) !important;
}

.ui-button-custom-colors:hover {
  background-color: color-mix(
    in srgb,
    var(--ui-button-bg) 90%,
    var(--team-field-bg, white)
  ) !important;
}

.ui-button-custom-colors:focus {
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--ui-button-bg) 30%,
    transparent
  ) !important;
}

/* Menu item icon size - 20% smaller than default */

/* Target icon spans in menu items - uses h-6 w-6 text-xl by default */

[data-desktop-menu-target] span.h-6.w-6,
[class*="group/item"] span.h-6.w-6 {
  height: 1.25rem !important;
  width: 1.25rem !important;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
}

/* Harmonized menu item hover effect - subtle outline instead of background */

/* Targets both Bullet Train partial items and custom-rendered items */

/* Color is handled by Tailwind hover: classes in the ERB, not here */

.menu-item-link:hover,
[data-desktop-menu-target="menuItemLink"]:hover {
  background-color: transparent !important;
  outline: 1px solid rgba(255, 255, 255, 0.3) !important;
  outline-offset: 0 !important;
  text-decoration: none !important;
}

/* Remove sliding animation on menu items */

[data-desktop-menu-target="menuItemLink"] > div {
  transform: none !important;
  transition: none !important;
}

[data-desktop-menu-target="menuItemLink"]:hover > div {
  transform: none !important;
}

/* Menu configuration drag-and-drop styles */

.menu-item-row.sortable-ghost {
  background-color: #dbeafe !important;
  opacity: 0.8;
}

.menu-item-row.sortable-chosen {
  background-color: #eff6ff !important;
}

.drag-handle {
  cursor: grab;
}

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

.children-list {
  margin-left: 0;
  min-height: 4px;
}

.children-list:empty {
  display: none;
}

/* Mobile menu scroll support */

/* Makes the mobile menu scrollable when content exceeds viewport height */

#mobile-menu-backdrop .flex-col {
  max-height: 100vh;
  overflow-y: auto;
}

/* Ensure the nav inside sidebar can scroll */

#mobile-menu-backdrop nav.flex-1 {
  overflow-y: auto;
  min-height: 0;
  /* Required for flex children to shrink and enable scroll */
}

/* ========================================
   MOBILE GRID MODE - FINAL OVERRIDE
   Must be at end to beat Tailwind's .grid { display: grid }
   Small desktop fields EXPAND on mobile to be usable
   ======================================== */

@media (max-width: 767px) {
  /* Force flex layout on mobile grid mode */

  .subform-grid-mode .grid {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Mobile column expansion - small desktop fields need more space on mobile
     1-2 cols (tiny) → 50% (two can pair up)
     3+ cols → 100% (full width, stack vertically) */

  /* 1-2 desktop cols → 50% mobile (pair up tiny fields) */

  .subform-grid-mode [class*="md:col-span-1 "],
  .subform-grid-mode [class*="md:col-span-2 "],
  .subform-grid-mode [class$="md:col-span-1"],
  .subform-grid-mode [class$="md:col-span-2"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  /* 3+ desktop cols → 100% mobile (full width) */

  .subform-grid-mode [class*="md:col-span-3"],
  .subform-grid-mode [class*="md:col-span-4"],
  .subform-grid-mode [class*="md:col-span-5"],
  .subform-grid-mode [class*="md:col-span-6"],
  .subform-grid-mode [class*="md:col-span-7"],
  .subform-grid-mode [class*="md:col-span-8"],
  .subform-grid-mode [class*="md:col-span-9"],
  .subform-grid-mode [class*="md:col-span-10"],
  .subform-grid-mode [class*="md:col-span-11"],
  .subform-grid-mode [class*="md:col-span-12"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Mobile subform styles are in subform_sticky_header.css */

.file\:mr-2::file-selector-button {
  margin-right: 0.375rem;
}

.file\:mr-4::file-selector-button {
  margin-right: 0.75rem;
}

.file\:rounded::file-selector-button {
  border-radius: 0.25rem;
}

.file\:rounded-md::file-selector-button {
  border-radius: 0.375rem;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-blue-50::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.file\:px-3::file-selector-button {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
}

.file\:px-4::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-1::file-selector-button {
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
}

.file\:py-2::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.file\:font-semibold::file-selector-button {
  font-weight: 600;
}

.file\:text-blue-700::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

@media (max-width: 639px) {
  .file\:px-4::file-selector-button {
    padding-left: 0.5rem !important;
    /* 8px on mobile */
    padding-right: 0.5rem !important;
  }
}

.first\:mt-0:first-child {
  margin-top: 0;
}

.last\:mb-0:last-child {
  margin-bottom: 0;
}

.last\:border-r-0:last-child {
  border-right-width: 0px;
}

.hover\:border-blue-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}

.hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-orange-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(194 65 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary-600:hover {
  background-color: var(--primary-600);
}

.hover\:bg-primary-700:hover {
  background-color: var(--primary-700);
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:text-amber-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-200:hover {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-400:hover {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-green-200:hover {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.hover\:text-green-600:hover {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}

.hover\:text-green-900:hover {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-900:hover {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}

.hover\:text-orange-600:hover {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.hover\:text-pink-200:hover {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}

.hover\:text-pink-300:hover {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}

.hover\:text-primary-600:hover {
  color: var(--primary-600);
}

.hover\:text-primary-800:hover {
  color: var(--primary-800);
}

.hover\:text-primary-900:hover {
  color: var(--primary-900);
}

.hover\:text-purple-200:hover {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-300:hover {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-800:hover {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-red-900:hover {
  --tw-text-opacity: 1;
  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary-600:hover {
  color: var(--secondary-600);
}

.hover\:text-slate-500:hover {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-200:hover {
  --tw-text-opacity: 1;
  color: rgb(153 246 228 / var(--tw-text-opacity, 1));
}

.hover\:text-teal-300:hover {
  --tw-text-opacity: 1;
  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-sm:hover {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:outline:hover {
  outline-style: solid;
}

.hover\:outline-1:hover {
  outline-width: 1px;
}

.hover\:outline-white\/30:hover {
  outline-color: rgb(255 255 255 / 0.3);
}

.hover\:file\:bg-blue-100::file-selector-button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.focus\:z-10:focus {
  z-index: 10;
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-indigo-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
}

.focus\:border-primary-500:focus {
  border-color: var(--primary-500);
}

.focus\:border-purple-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
}

.focus\:border-red-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-indigo-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1));
}

.focus\:ring-orange-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--primary-500);
}

.focus\:ring-primary-600:focus {
  --tw-ring-color: var(--primary-600);
}

.focus\:ring-purple-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
}

.focus\:ring-red-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
}

.focus\:ring-white:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}

.focus\:ring-yellow-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-slate-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group[open] .group-open\:hidden {
  display: none;
}

@media (max-width: 1023px) {
  .group[open] .group-open\:hiddenthead,.group[open] .group-open\:hidden.lg\:table-header-group {
    display: none !important;
  }
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:block {
  display: block;
}

.group\/item:hover .group-hover\/item\:translate-x-3 {
  --tw-translate-x: 0.5625rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-3 {
  --tw-translate-x: 0.5625rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}

.group:hover .group-hover\:no-underline {
  text-decoration-line: none;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (max-width: 1023px) {
  .group:hover .group-hover\:blocktbody {
    display: block !important;
  }

  .group:hover .group-hover\:blocktr {
    display: block !important;
    margin-bottom: 0.5rem !important;
  }

  .group:hover .group-hover\:blocktbody {
    display: block !important;
  }

  .group:hover .group-hover\:blocktr {
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
}

.peer[open] ~ .peer-open\:hidden {
  display: none;
}

@media (max-width: 1023px) {
  .peer[open] ~ .peer-open\:hiddenthead,.peer[open] ~ .peer-open\:hidden.lg\:table-header-group {
    display: none !important;
  }
}

.peer:checked ~ .peer-checked\:border-gray-900 {
  --tw-border-opacity: 1;
  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
}

.peer:checked ~ .peer-checked\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:checked ~ .peer-checked\:ring-gray-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1));
}

.peer:checked ~ .peer-checked\:ring-offset-1 {
  --tw-ring-offset-width: 1px;
}

@media (min-width: 640px) {
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:m-10 {
    margin: 1.875rem;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:my-8 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .sm\:mt-0 {
    margin-top: 0;
  }

  .sm\:mt-6 {
    margin-top: 1.125rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-3 {
    gap: 0.5625rem;
  }

  .sm\:gap-4 {
    gap: 0.75rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.5rem;
  }

  .sm\:rounded-md {
    border-radius: 0.375rem;
  }

  .sm\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .sm\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .sm\:p-0 {
    padding: 0;
  }

  .sm\:p-4 {
    padding: 0.75rem;
  }

  .sm\:p-6 {
    padding: 1.125rem;
  }

  .sm\:px-10 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }

  .sm\:px-12 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .sm\:py-12 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .sm\:py-14 {
    padding-top: 2.625rem;
    padding-bottom: 2.625rem;
  }

  .sm\:py-4 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:pl-8 {
    padding-left: 1.5rem;
  }

  .sm\:pr-10 {
    padding-right: 1.875rem;
  }

  .sm\:pr-6 {
    padding-right: 1.125rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .sm\:p-4 {
    padding: 0.25rem !important;
    /* 4px instead of 16px - Maximum compression for subforms */
    padding-bottom: 0 !important;
    /* Remove bottom padding from subform rows */
  }

  .sm\:grid.gap-y-2 {
    row-gap: var(--team-grid-row-gap, 5px) !important;
  }

  .sm\:my-8 {
    margin-top: 0.5rem !important;
    /* 8px vertical margins */
    margin-bottom: 0.5rem !important;
  }

  .sm\:mt-6 {
    margin-top: 0.5rem !important;
    /* 8px top margin */
  }

  @media (max-width: 639px) {
    .sm\:px-6 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }

    .sm\:py-4 {
      padding-top: 0.5rem !important;
      /* 8px on mobile */
      padding-bottom: 0.5rem !important;
    }
  }

  @media (max-width: 1023px) {
    tbody.sm\:block {
      display: block !important;
    }

    tr.sm\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }

    tbody.sm\:block {
      display: block !important;
    }

    tr.sm\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }
  }
}

@media (min-width: 768px) {
  .md\:top-0\.5 {
    top: 0.0625rem;
  }

  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:col-span-10 {
    grid-column: span 10 / span 10;
  }

  .md\:col-span-11 {
    grid-column: span 11 / span 11;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .md\:block {
    display: block;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-14 {
    height: 2.625rem;
  }

  .md\:h-auto {
    height: auto;
  }

  .md\:w-1\/12 {
    width: 8.333333%;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-1\/6 {
    width: 16.666667%;
  }

  .md\:w-11\/12 {
    width: 91.666667%;
  }

  .md\:w-14 {
    width: 2.625rem;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-44 {
    width: 8.25rem;
  }

  .md\:w-48 {
    width: 9rem;
  }

  .md\:w-5\/12 {
    width: 41.666667%;
  }

  .md\:w-5\/6 {
    width: 83.333333%;
  }

  .md\:w-7\/12 {
    width: 58.333333%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5625rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5625rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:rounded-l-lg {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  .md\:rounded-t-lg {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  .md\:rounded-tl-lg {
    border-top-left-radius: 0.5rem;
  }

  .md\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .md\:p-5 {
    padding: 0.9375rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:grid.gap-y-2 {
    row-gap: var(--team-grid-row-gap, 5px) !important;
  }

  @media (max-width: 1023px) {
    thead.md\:hidden,.md\:hidden.lg\:table-header-group {
      display: none !important;
    }

    tbody.md\:block {
      display: block !important;
    }

    tr.md\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }

    tbody.md\:block {
      display: block !important;
    }

    tr.md\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-10 {
    grid-column: span 10 / span 10;
  }

  .lg\:col-span-11 {
    grid-column: span 11 / span 11;
  }

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:m-20 {
    margin: 3.75rem;
  }

  .lg\:-ml-px {
    margin-left: -1px;
  }

  .lg\:-mr-px {
    margin-right: -1px;
  }

  .lg\:-mt-5 {
    margin-top: -0.9375rem;
  }

  .lg\:mb-0 {
    margin-bottom: 0;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:table-header-group {
    display: table-header-group;
  }

  .lg\:table-row-group {
    display: table-row-group;
  }

  .lg\:table-row {
    display: table-row;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-4\/5 {
    width: 80%;
  }

  .lg\:max-w-md {
    max-width: 28rem;
  }

  .lg\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:gap-4 {
    gap: 0.75rem;
  }

  .lg\:rounded-l-none {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-8 {
    padding-left: 0.75rem !important;
    /* 12px instead of 32px */
    padding-right: 0.75rem !important;
  }

  @media (max-width: 639px) {
    .lg\:px-8 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }

    .lg\:px-4 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }
  }

  @media (max-width: 1023px) {
    thead.lg\:hidden,.lg\:hidden.lg\:table-header-group {
      display: none !important;
    }

    tbody.lg\:block {
      display: block !important;
    }

    tr.lg\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }

    tbody.lg\:block {
      display: block !important;
    }

    tr.lg\:block {
      display: block !important;
      margin-bottom: 0.5rem !important;
    }
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:px-8 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl\:py-8 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xl\:px-8 {
    padding-left: 0.75rem !important;
    /* 12px instead of 32px */
    padding-right: 0.75rem !important;
  }

  .xl\:grid.gap-y-2 {
    row-gap: var(--team-grid-row-gap, 5px) !important;
  }

  @media (max-width: 639px) {
    .xl\:px-8 {
      padding-left: 0.5rem !important;
      /* 8px on mobile */
      padding-right: 0.5rem !important;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));
  }

  .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));
  }

  .dark\:border-amber-700 {
    --tw-border-opacity: 1;
    border-color: rgb(180 83 9 / var(--tw-border-opacity, 1));
  }

  .dark\:border-blue-700 {
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-600 {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-700 {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
  }

  .dark\:border-green-700 {
    --tw-border-opacity: 1;
    border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
  }

  .dark\:border-green-800 {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-600 {
    --tw-border-opacity: 1;
    border-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-700 {
    --tw-border-opacity: 1;
    border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
  }

  .dark\:border-red-800 {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-500 {
    --tw-border-opacity: 1;
    border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-600 {
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-700 {
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
  }

  .dark\:border-slate-900 {
    --tw-border-opacity: 1;
    border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
  }

  .dark\:border-yellow-600 {
    --tw-border-opacity: 1;
    border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
  }

  .dark\:border-yellow-700 {
    --tw-border-opacity: 1;
    border-color: rgb(161 98 7 / var(--tw-border-opacity, 1));
  }

  .dark\:border-opacity-10 {
    --tw-border-opacity: 0.1;
  }

  .dark\:bg-amber-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-amber-900\/20 {
    background-color: rgb(120 53 15 / 0.2);
  }

  .dark\:bg-amber-900\/50 {
    background-color: rgb(120 53 15 / 0.5);
  }

  .dark\:bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-blue-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-blue-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-blue-900\/20 {
    background-color: rgb(30 58 138 / 0.2);
  }

  .dark\:bg-blue-900\/30 {
    background-color: rgb(30 58 138 / 0.3);
  }

  .dark\:bg-blue-900\/50 {
    background-color: rgb(30 58 138 / 0.5);
  }

  .dark\:bg-gray-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-600\/50 {
    background-color: rgb(75 85 99 / 0.5);
  }

  .dark\:bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-700\/50 {
    background-color: rgb(55 65 81 / 0.5);
  }

  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-800\/30 {
    background-color: rgb(31 41 55 / 0.3);
  }

  .dark\:bg-gray-800\/50 {
    background-color: rgb(31 41 55 / 0.5);
  }

  .dark\:bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-green-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-green-900\/20 {
    background-color: rgb(20 83 45 / 0.2);
  }

  .dark\:bg-green-900\/30 {
    background-color: rgb(20 83 45 / 0.3);
  }

  .dark\:bg-green-900\/50 {
    background-color: rgb(20 83 45 / 0.5);
  }

  .dark\:bg-orange-900\/10 {
    background-color: rgb(124 45 18 / 0.1);
  }

  .dark\:bg-purple-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-purple-900\/10 {
    background-color: rgb(88 28 135 / 0.1);
  }

  .dark\:bg-purple-900\/20 {
    background-color: rgb(88 28 135 / 0.2);
  }

  .dark\:bg-purple-900\/50 {
    background-color: rgb(88 28 135 / 0.5);
  }

  .dark\:bg-red-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-red-700\/40 {
    background-color: rgb(185 28 28 / 0.4);
  }

  .dark\:bg-red-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-red-900\/20 {
    background-color: rgb(127 29 29 / 0.2);
  }

  .dark\:bg-red-900\/30 {
    background-color: rgb(127 29 29 / 0.3);
  }

  .dark\:bg-slate-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-slate-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-yellow-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(113 63 18 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-yellow-900\/20 {
    background-color: rgb(113 63 18 / 0.2);
  }

  .dark\:bg-yellow-900\/30 {
    background-color: rgb(113 63 18 / 0.3);
  }

  .dark\:bg-opacity-10 {
    --tw-bg-opacity: 0.1;
  }

  .dark\:bg-opacity-50 {
    --tw-bg-opacity: 0.5;
  }

  .dark\:bg-opacity-75 {
    --tw-bg-opacity: 0.75;
  }

  .dark\:bg-opacity-80 {
    --tw-bg-opacity: 0.8;
  }

  .dark\:from-primary-900 {
    --tw-gradient-from: var(--primary-900) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-slate-700 {
    --tw-gradient-from: #334155 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-slate-700\/50 {
    --tw-gradient-from: rgb(51 65 85 / 0.5) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:from-slate-800 {
    --tw-gradient-from: #1e293b var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(30 41 59 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:to-primary-600 {
    --tw-gradient-to: var(--primary-600) var(--tw-gradient-to-position);
  }

  .dark\:to-slate-800 {
    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
  }

  .dark\:text-amber-200 {
    --tw-text-opacity: 1;
    color: rgb(253 230 138 / var(--tw-text-opacity, 1));
  }

  .dark\:text-amber-300 {
    --tw-text-opacity: 1;
    color: rgb(252 211 77 / var(--tw-text-opacity, 1));
  }

  .dark\:text-amber-400 {
    --tw-text-opacity: 1;
    color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-100 {
    --tw-text-opacity: 1;
    color: rgb(219 234 254 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-200 {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-300 {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }

  .dark\:text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-100 {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
  }

  .dark\:text-green-200 {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1));
  }

  .dark\:text-green-300 {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1));
  }

  .dark\:text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
  }

  .dark\:text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
  }

  .dark\:text-primary-300 {
    color: var(--primary-300);
  }

  .dark\:text-purple-200 {
    --tw-text-opacity: 1;
    color: rgb(233 213 255 / var(--tw-text-opacity, 1));
  }

  .dark\:text-purple-300 {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
  }

  .dark\:text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-100 {
    --tw-text-opacity: 1;
    color: rgb(254 226 226 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-200 {
    --tw-text-opacity: 1;
    color: rgb(254 202 202 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-300 {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-400 {
    --tw-text-opacity: 1;
    color: rgb(148 163 184 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-500 {
    --tw-text-opacity: 1;
    color: rgb(100 116 139 / var(--tw-text-opacity, 1));
  }

  .dark\:text-slate-800 {
    --tw-text-opacity: 1;
    color: rgb(30 41 59 / var(--tw-text-opacity, 1));
  }

  .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .dark\:text-yellow-200 {
    --tw-text-opacity: 1;
    color: rgb(254 240 138 / var(--tw-text-opacity, 1));
  }

  .dark\:text-yellow-300 {
    --tw-text-opacity: 1;
    color: rgb(253 224 71 / var(--tw-text-opacity, 1));
  }

  .dark\:text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1));
  }

  .dark\:shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .dark\:ring-transparent {
    --tw-ring-color: transparent;
  }

  .dark\:ring-offset-slate-700 {
    --tw-ring-offset-color: #334155;
  }

  .dark\:file\:bg-gray-700::file-selector-button {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:file\:text-gray-200::file-selector-button {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:border-gray-600:hover {
    --tw-border-opacity: 1;
    border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  }

  .dark\:hover\:bg-amber-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-blue-900\/30:hover {
    background-color: rgb(30 58 138 / 0.3);
  }

  .dark\:hover\:bg-gray-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-800\/50:hover {
    background-color: rgb(31 41 55 / 0.5);
  }

  .dark\:hover\:bg-red-900\/20:hover {
    background-color: rgb(127 29 29 / 0.2);
  }

  .dark\:hover\:bg-slate-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-slate-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
  }

  .hover\:dark\:bg-slate-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:text-blue-200:hover {
    --tw-text-opacity: 1;
    color: rgb(191 219 254 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-blue-300:hover {
    --tw-text-opacity: 1;
    color: rgb(147 197 253 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-blue-400:hover {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-100:hover {
    --tw-text-opacity: 1;
    color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-300:hover {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-gray-400:hover {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-purple-300:hover {
    --tw-text-opacity: 1;
    color: rgb(216 180 254 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-red-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-red-400:hover {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .dark\:hover\:file\:bg-gray-600::file-selector-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
  }

  .disabled\:dark\:bg-slate-700:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .group:hover .dark\:group-hover\:bg-slate-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }

  .group:hover .dark\:group-hover\:bg-opacity-25 {
    --tw-bg-opacity: 0.25;
  }

  .group:hover .dark\:group-hover\:text-slate-100 {
    --tw-text-opacity: 1;
    color: rgb(241 245 249 / var(--tw-text-opacity, 1));
  }
}

@media (min-width: 640px) {
  @media (prefers-color-scheme: dark) {
    .sm\:dark\:bg-slate-700 {
      --tw-bg-opacity: 1;
      background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
    }

    .sm\:dark\:shadow-lg {
      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
  }
}