/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide scrollbars while keeping scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Compose modal */
.modal-compose {
  width: 80vw;
  height: 85vh;
}

/* Readable typography for admin-authored legal HTML (/terms, /privacy) */
.legal-body { color: #374151; line-height: 1.7; font-size: 16px; }
.legal-body h1 { font-size: 1.6rem; font-weight: 700; color: #111827; margin: 1.8rem 0 .8rem; }
.legal-body h2 { font-size: 1.3rem; font-weight: 700; color: #111827; margin: 1.6rem 0 .6rem; }
.legal-body h3 { font-size: 1.1rem; font-weight: 600; color: #111827; margin: 1.3rem 0 .5rem; }
.legal-body p { margin: .8rem 0; }
.legal-body ul, .legal-body ol { margin: .8rem 0; padding-left: 1.4rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin: .3rem 0; }
.legal-body a { color: #c24600; text-decoration: underline; }
.legal-body strong { font-weight: 600; color: #111827; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal-body th, .legal-body td { border: 1px solid #e5e7eb; padding: .5rem .7rem; text-align: left; }
.legal-body hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.6rem 0; }

/* ─────────────────────────────────────────────────────────────
 * New auth aesthetic — decorative utilities (login redesign).
 * Scoped with the `auth-` prefix so they never collide with app styles.
 * ───────────────────────────────────────────────────────────── */

/* Isometric hairline grid for the dark brand panel */
.auth-iso {
  background-image:
    linear-gradient(30deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(-30deg, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 48px 84px;
}

/* Subtle plus-dot pattern for the light form panel */
.auth-plus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 12v8M12 16h8' stroke='%23202028' stroke-opacity='0.08' stroke-width='1' stroke-linecap='round'/></svg>");
  background-size: 32px 32px;
}

/* Warm orange radial glow */
.auth-glow {
  background:
    radial-gradient(ellipse 60% 50% at 70% 28%, rgba(231, 88, 0, .45), transparent 60%),
    radial-gradient(ellipse 50% 40% at 18% 82%, rgba(252, 165, 77, .22), transparent 60%);
}

/* Primary CTA depth */
.auth-cta {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .4) inset,
    0 1px 2px rgba(231, 88, 0, .4),
    0 8px 24px -8px rgba(231, 88, 0, .5);
}

/* Text inputs */
.auth-field {
  width: 100%;
  border: 1px solid #e2e2e6;
  border-radius: 8px;
  background: #fff;
  padding: 12px 14px;
  font-size: 15px;
  color: #20222b;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-field::placeholder { color: #9498a6; }
.auth-field:focus {
  border-color: #e75800;
  box-shadow: 0 0 0 3px rgba(231, 88, 0, .12);
}
.auth-label {
  font-size: 13px;
  font-weight: 600;
  color: #3e414e;
  margin-bottom: 7px;
  display: block;
}

/* Single-digit verification code box */
.auth-code {
  width: 100%;
  height: 62px;
  min-width: 0;
  border: 1px solid #e2e2e6;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 600;
  color: #20222b;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-code:focus {
  border-color: #e75800;
  box-shadow: 0 0 0 3px rgba(231, 88, 0, .12);
}

/* Select styled as an auth-field with a custom chevron (set via .auth-select-wrap) */
.auth-select { appearance: none; padding-right: 38px; cursor: pointer; }
.auth-select-wrap { position: relative; }
.auth-select-chev {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none;
}

/* Required-field marker */
.auth-req { color: #e75800; font-weight: 700; }

/* Custom checkbox */
.auth-check {
  appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  border: 1px solid #cfd0d6;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: .15s;
}
.auth-check:checked {
  background-color: #e75800;
  border-color: #e75800;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}