/* Shared form and dialog primitives for the application and authentication pages. */
:root {
  --control-bg: color-mix(in srgb, var(--surface-2, #1a222e) 62%, var(--bg, #080b11));
  --control-height: 44px;
  --control-radius: 12px;
}
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not(.tagpick-input):not(.sk-date-range input),
body select, body textarea, body [contenteditable="true"] {
  box-sizing: border-box;
  min-height: var(--control-height) !important;
  height: auto;
  padding: 11px 14px;
  border: 1px solid var(--border, #29323f) !important;
  border-radius: var(--control-radius) !important;
  background: var(--control-bg) !important;
  color: var(--text, #eef1f7) !important;
  font-family: inherit;
  font-size: max(13px, var(--fs-md, 14px));
  line-height: 1.45;
  outline: none;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body select { padding-right: 32px; cursor: pointer; }
body .tagpick-box, body .sk-date-item {
  box-sizing: border-box; min-height: var(--control-height); height: auto;
  border: 1px solid var(--border); border-radius: var(--control-radius);
  background: var(--control-bg);
}
body .tagpick-box { padding: 7px 12px; }
body .tagpick-box:focus-within, body .sk-date-item:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
body .tagpick-box input.tagpick-input, body .sk-date-range input {
  min-height: 28px; padding: 2px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; outline: none;
}
body textarea, body [contenteditable="true"] { min-height: 108px !important; resize: vertical; }
body input::placeholder, body textarea::placeholder { color: var(--text-dim, #94a1b2); opacity: .75; }
body :is(input, select, textarea, [contenteditable="true"]):not(.tagpick-input):not(.sk-date-range input):hover:not(:disabled):not([readonly]) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important;
}
body :is(input, select, textarea, [contenteditable="true"]):not(.tagpick-input):not(.sk-date-range input):focus-visible {
  border-color: var(--accent, #3d86e0) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft, rgb(61 134 224 / .16));
}
body :is(input, select, textarea)[aria-invalid="true"],
body .is-invalid :is(input, select, textarea), body :is(input, select, textarea).invalid {
  border-color: var(--red, #e06060) !important;
}
body :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
body input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent, #3d86e0); }
body input[type="file"] { color: var(--text-dim); font: inherit; max-width: 100%; }
body input[type="file"]::file-selector-button {
  min-height: var(--control-height); margin-right: 12px; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: var(--control-radius);
  color: var(--text); background: var(--control-bg); cursor: pointer; font: inherit;
}
body input:-webkit-autofill {
  -webkit-text-fill-color: var(--text, #eef1f7);
  box-shadow: 0 0 0 1000px var(--control-bg) inset;
  caret-color: var(--text, #eef1f7);
}
.ui-back { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ui-back .ic { width: 19px; height: 19px; flex: none; stroke-width: 1.8; transition: transform .15s; }
.ui-back:hover .ic { transform: translateX(-2px); }
.ui-confirm {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  padding: 28px; margin: auto; overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 20px; color: var(--text); background: var(--surface, #10151d);
  box-shadow: 0 28px 90px rgb(0 0 0 / .38), inset 0 1px 0 var(--fill-strong);
}
.ui-confirm:not([open]) { display: none; }
.ui-confirm::backdrop { background: rgb(4 9 18 / .6); backdrop-filter: blur(7px); }
.ui-confirm-mark {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--info-border);
  border-radius: 15px;
}
.ui-confirm-mark .ic { width: 23px; height: 23px; }
.ui-confirm[data-tone="danger"] .ui-confirm-mark { color: var(--red); background: var(--red-soft); border-color: var(--red-border); }
.ui-confirm .ui-confirm-close { position: absolute; right: 18px; top: 18px; padding: 8px; min-width: 36px; min-height: 36px; }
.ui-confirm h2 { margin: 0 0 12px; font-size: var(--fs-xl, 20px); font-weight: 600; letter-spacing: .02em; }
.ui-confirm-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; color: var(--text-dim); font-size: var(--fs-base, 14px); }
.ui-confirm-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.ui-confirm-actions .btn { min-width: 92px; min-height: 42px; border-radius: 11px; }
@media (prefers-reduced-motion: reduce) {
  body :is(input, select, textarea), .ui-back .ic { transition: none; }
}