docuseal/app/javascript/application.scss

@config "../../tailwind.application.config.js";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

body {
  @apply antialiased text-base-content;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

a[href],
input[type='checkbox'],
input[type='submit'],
input[type='image'],
input[type='radio'],
label[for],
select,
button {
  cursor: pointer;
}

button .disabled {
  display: none;
}

button[disabled] .disabled, button.btn-disabled .disabled {
  display: initial;
}

button .enabled {
  display: initial;
}

button[disabled] .enabled, button.btn-disabled .enabled {
  display: none;
}

/* Form controls - enterprise-grade inputs */
.input-bordered,
.select-bordered,
.textarea-bordered {
  @apply border-base-content/15 transition-all duration-200;
}

.input-bordered:focus,
.select-bordered:focus,
.textarea-bordered:focus {
  @apply border-primary outline-none ring-2 ring-primary/20;
}

.input-bordered:hover:not(:focus):not(:disabled),
.textarea-bordered:hover:not(:focus):not(:disabled) {
  @apply border-base-content/25;
}

.base-input {
  @apply input input-bordered bg-white h-11 px-4 text-base rounded-lg font-normal transition-all duration-200;
}

.base-input::placeholder {
  @apply text-base-content/50;
}

.base-input:disabled,
.base-input[readonly] {
  @apply bg-base-200 cursor-not-allowed opacity-90;
}

.base-textarea {
  @apply textarea textarea-bordered bg-white rounded-lg px-4 py-3 text-base font-normal transition-all duration-200 min-h-[100px];
}

.base-select {
  @apply select base-input w-full font-normal;
}

/* Form labels */
.form-control .label {
  @apply mb-1.5;
}

.form-control .label .label-text {
  @apply font-medium text-base-content text-sm;
}

.form-control .label-text-alt {
  @apply text-base-content/70 text-sm mt-1;
}

/* Buttons - clear hierarchy with transitions */
.btn {
  @apply transition-all duration-200 font-medium;
}

.base-button {
  @apply btn btn-primary text-primary-content text-base px-6 h-11 rounded-lg hover:opacity-90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2;
}

.white-button {
  @apply btn btn-outline text-base bg-white border-2 border-base-300 rounded-lg px-6 h-11 hover:bg-base-200 hover:border-base-content/20 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 transition-all duration-200;
}

.btn-neutral,
.btn-primary {
  @apply transition-all duration-200 hover:opacity-90 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply focus:ring-primary/30;
}

.btn-neutral {
  @apply focus:ring-neutral/20;
}

.base-checkbox {
  @apply checkbox rounded bg-white checkbox-sm no-animation transition-colors duration-200;
}

.base-radio {
  @apply radio bg-white radio-sm no-animation;
}

.tooltip-bottom-end:before {
  transform: translateX(-95%);
  top: var(--tooltip-offset);
  left: 100%;
  right: auto;
  bottom: auto;
}

.tooltip-pre:before {
  white-space: pre;
  text-align: left;
}

.tooltip-bottom-end:after {
  transform: translateX(-25%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.tooltip-bottom-start:before {
  transform: translateX(-31%);
  top: var(--tooltip-offset);
  left: 100%;
  right: auto;
  bottom: auto;
}

.tooltip-bottom-start:after {
  transform: translateX(-25%);
  border-color: transparent transparent var(--tooltip-color) transparent;
  top: var(--tooltip-tail-offset);
  left: 50%;
  right: auto;
  bottom: auto;
}

.autocomplete {
  background: white;
  z-index: 1000;
  font: inherit;
  overflow: auto;
  box-sizing: border-box;
  @apply border border-base-300 mt-1 rounded-lg shadow-soft-lg;
}

.autocomplete * {
  font: inherit;
}

.autocomplete > div {
  @apply px-3 py-2.5 font-normal transition-colors duration-150;
}

.autocomplete .group {
  @apply bg-base-200;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
  @apply bg-base-200;
  cursor: pointer;
}

.input-outlined {
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 3px;
  outline-color: hsl(var(--bc) / 0.2);
}

.font-times {
  font-family: "Times New Roman", Times, ui-serif, serif, Cambria, Georgia;
}

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