nodewarden/webapp/src/styles/forms.css

.muted {
  @apply m-0 mb-4 text-center leading-relaxed text-muted;
}

.field {
  @apply mb-3.5 block;
}

.field > span {
  @apply mb-2 mt-2.5 block text-sm font-semibold;
}

.input {
  @apply h-12 w-full rounded-xl border px-3.5 py-2.5 text-base text-ink outline-none transition;
  background: var(--panel);
  border-color: rgba(74, 103, 150, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

select.input {
  @apply pr-[42px];
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #365fa8 50%),
    linear-gradient(135deg, #365fa8 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input[type='file'].input {
  @apply h-auto min-h-12 px-2.5 py-2 text-sm leading-[1.4];
}

input[type='file'].input::file-selector-button {
  @apply mr-2.5 h-8 cursor-pointer rounded-full border px-3 font-bold;
  background: #eef4ff;
  border-color: #9db8ea;
  color: #1f4ea0;
}

input[type='file'].input::file-selector-button:hover {
  background: #dfeaff;
  border-color: #2f5fd8;
}

.textarea {
  @apply h-auto min-h-28 resize-y;
}

.input:focus {
  border-color: rgba(43, 102, 217, 0.6);
  background-color: #fbfdff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10), 0 8px 18px rgba(37, 99, 235, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.input-readonly {
  @apply bg-slate-100 text-slate-600;
}

.input:disabled {
  @apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-400;
}

.password-wrap {
  @apply relative;
}

.password-wrap .input {
  @apply pr-11;
}

.input-action-wrap {
  @apply relative;
}

.input-action-wrap .input {
  @apply pr-12;
}

.input-icon-btn {
  @apply absolute right-2 top-1/2 grid h-8 w-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-slate-700 transition;
  transform: translateY(-50%);
}

.input-icon-btn:hover:not(:disabled) {
  color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
  transform: translateY(-50%) scale(1.04);
}

.input-icon-btn:disabled {
  @apply cursor-not-allowed text-slate-400;
}

.password-toggle {
  @apply absolute right-2 top-1/2 grid cursor-pointer place-items-center border-0 bg-transparent text-blue-700 transition;
  transform: translateY(-50%);
}

.eye-btn {
  @apply absolute bottom-2.5 right-2.5 grid h-8 w-8 cursor-pointer place-items-center border-0 bg-transparent text-slate-700 transition;
}

.password-toggle:hover,
.eye-btn:hover {
  color: var(--primary);
  transform: translateY(-1px) scale(1.04);
}

.btn {
  @apply inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-full border border-transparent px-4 text-[15px] font-bold no-underline transition;
}

.topbar-actions .btn,
.user-chip,
.side-link,
.mobile-tab {
  @apply relative overflow-hidden;
}

.topbar-actions .btn::before,
.user-chip::before,
.side-link::before,
.mobile-tab::before {
  content: '';
  @apply absolute left-1/2 top-1/2 h-[110px] w-[110px] rounded-full opacity-0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 42%, transparent 72%);
  transform: translate(-50%, -50%) scale(0.68);
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-smooth),
    transform var(--dur-medium) var(--ease-out-soft);
}

.topbar-actions .btn:hover::before,
.user-chip:hover::before,
.side-link:hover::before,
.mobile-tab:hover::before {
  opacity: 0;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  transition-duration: var(--dur-quick);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-instant);
}

.btn-icon {
  @apply shrink-0;
}

.btn.full {
  @apply my-2.5 h-12 w-full text-lg;
}

.btn-primary {
  @apply border-blue-700/30 bg-blue-600 text-white;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.20);
}

.btn-primary:hover {
  @apply bg-blue-700;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
}

.btn-secondary {
  @apply bg-panel text-brand-strong;
  border-color: rgba(37, 99, 235, 0.20);
  box-shadow: 0 6px 14px rgba(13, 31, 68, 0.04);
}

.btn-secondary:hover {
  background: #f4f8ff;
  border-color: rgba(37, 99, 235, 0.34);
}

.btn-danger {
  @apply bg-white/80 text-danger;
  border-color: rgba(217, 45, 87, 0.28);
}

.btn-danger:hover {
  background: rgba(255, 241, 242, 0.96);
  border-color: rgba(217, 45, 87, 0.38);
}

.btn:disabled {
  @apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-400;
}

.or {
  @apply text-center text-slate-700;
}

.field-help {
  @apply mt-2 text-[13px] leading-normal text-slate-500;
}

.check-line-compact {
  @apply mb-0;
}

.auth-support-row {
  @apply -mt-0.5 mb-3 flex items-center justify-between gap-2.5;
}

.auth-link-btn {
  @apply cursor-pointer border-0 bg-transparent p-0 text-[13px] font-bold text-blue-700 transition;
}

.auth-link-btn:hover {
  text-decoration: underline;
  transform: translateX(2px);
}

.auth-link-btn:disabled {
  @apply cursor-not-allowed text-slate-400 no-underline;
}