/* Starter CSS so the project looks decent before running the Tailwind build. */
@import url("https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css");

input,
select,
textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.auth-shell {
  background-color: #1f2933;
  background-image:
    linear-gradient(90deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.18) 47%, rgba(15, 23, 42, 0.78) 100%),
    url("https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?auto=format&fit=crop&w=2200&q=80");
  background-position: center;
  background-size: cover;
}

.auth-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.2) 100%);
}

.auth-stage {
  min-height: calc(100vh - 4rem);
}

.auth-card {
  width: min(100%, 340px);
}

.auth-shell input {
  border-radius: 0.45rem;
  border-color: #cbd5e1;
  padding: 0.62rem 0.85rem;
  font-size: 0.92rem;
  box-shadow: none;
}

.auth-shell input::placeholder {
  color: #94a3b8;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
  outline: none;
}

button,
a {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  width: 100%;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.28);
  outline-offset: 2px;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

@media (max-width: 640px) {
  .rounded-2xl {
    border-radius: 1rem;
  }

  input,
  select,
  textarea,
  button {
    font-size: 0.95rem;
  }
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}