/*
  theme.css — shared design system for the app pages (login, sign-up, welcome,
  dashboard, forms, admin). Implements the "utilitarian sub-style" from
  .redesign/phase0_design_tokens.md: same palette / fonts / buttons as the
  marketing landing page, but decorative elements (grain, drop-caps, compass)
  are suppressed and Fraunces is reserved for page titles.

  Loaded AFTER webflow.css / dr-jorandbys-site.webflow.css so it wins on the
  elements it targets, without needing to remove the Webflow base.

  Requires css/fonts.css (self-hosted Fraunces + Inter) loaded alongside.
*/

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */
:root {
  --ink: #0b1a2b;
  --ink-soft: #2a3b51;
  --paper: #f6f1e7;
  --paper-warm: #ede4d2;
  --sky-deep: #1d3557;
  --sky-mid: #457b9d;
  --sky-pale: #a8c5d8;
  --accent: #c9472b;
  --accent-soft: #e8a07a;
  --rule: rgba(11, 26, 43, 0.18);
  --shadow: 0 30px 60px -30px rgba(11, 26, 43, 0.35);
  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. Base page — paper background, Inter body, ink text
   --------------------------------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Page titles use Fraunces; subheads stay sans (utilitarian rule). */
.forms-title,
.admin-title,
.dashboard-title,
.login_title,
.signup_heading,
.forms-card-header,
.documents-card-header,
.profile-card-header,
.users-heading,
.id-upload-heading {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.login_sub-txt,
.forms-intro,
.forms-card-desc,
.form-card-desc {
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   3. Nav — the landing page navbar, shared with the signed-in app pages.
      Markup: <nav> > a.logo (span.logo-mark + brand) + div.nav-links > a's.
   --------------------------------------------------------------------------- */
nav.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(246, 241, 231, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.app-nav .logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.app-nav .logo-mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.app-nav .logo-mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  transform: rotate(45deg);
  border-radius: 2px;
}

.app-nav .nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.app-nav .nav-links a,
.app-nav .nav-links button {
  position: relative;
  transition: opacity 0.3s;
  color: var(--ink);
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.app-nav .nav-links a:hover,
.app-nav .nav-links button:hover {
  opacity: 0.6;
}

/* The Log Out control gets the pill treatment (like the landing nav-cta). */
.app-nav .nav-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:
    transform 0.3s,
    background 0.3s;
}
.app-nav .nav-cta:hover {
  background: var(--accent);
  color: var(--paper);
  transform: translateY(-1px);
  opacity: 1;
}

/* Fixed nav → offset the page content so it isn't hidden underneath. */
body.has-app-nav .page-wrapper,
body.has-app-nav .main-wrapper {
  padding-top: 88px;
}

@media (max-width: 991px) {
  nav.app-nav {
    padding: 16px 24px;
  }
  .app-nav .nav-links {
    gap: 18px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
   4. Buttons — pill shape, accent primary, ink hover (spec §5)
   --------------------------------------------------------------------------- */
.button-primary,
.w-button,
.login_submit-button,
.signup_submit-button,
.cta_button,
.upload-docs-btn,
.id-upload-trigger-btn,
.goformz-open-btn,
.upload-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.3s;
}

.button-primary:hover,
.w-button:hover,
.login_submit-button:hover,
.signup_submit-button:hover,
.cta_button:hover,
.upload-docs-btn:hover,
.id-upload-trigger-btn:hover,
.goformz-open-btn:hover,
.upload-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.upload-btn:disabled {
  background: var(--rule);
  color: var(--ink-soft);
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   5. Form inputs + labels (spec §"Form inputs" / "Form labels")
   --------------------------------------------------------------------------- */
.login_input,
.signup_input,
.document-type-select,
input[type="email"],
input[type="password"],
input[type="text"] {
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
}

.login_input:focus,
.signup_input:focus,
.document-type-select:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  border: 1px solid var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.login_field-label,
.signup_field-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   6. Cards — paper surface, subtle rule border (spec §Cards)
   --------------------------------------------------------------------------- */
.profile-card,
.forms-card,
.documents-card,
.form-card,
.id-upload-section,
.stat-card,
.users-table-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: none;
}

/* Stat card: Inter (NOT Fraunces) big number, eyebrow title (spec §Stat card) */
.stat-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stat-number {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 600;
  color: var(--ink);
}
.stat-detail {
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   7. Modals — paper card, Fraunces title, ink/blur overlay (spec §Modals)
   --------------------------------------------------------------------------- */
#modal-content,
#docs-modal-content,
#document-viewer-container,
#pdf-viewer-container,
#doc-viewer-container {
  background: var(--paper);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
#forms-modal-bg,
#docs-modal-bg,
#document-viewer-bg,
#pdf-viewer-bg,
#doc-viewer-bg {
  background: rgba(11, 26, 43, 0.7);
  backdrop-filter: blur(8px);
}
#modal-user-name,
#docs-modal-user-name {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   8. Status messages — keep semantic colors, align to palette
   --------------------------------------------------------------------------- */
.status-message.info {
  background: var(--paper-warm);
  color: var(--ink);
}
.status-message.success {
  background: #dcfce7;
  color: #166534;
}
.status-message.error {
  background: #fde8e4;
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   8b. Secondary / action buttons — the per-page dashboard & forms styles
       hardcode old blue/green backgrounds. Re-map to the palette (ink for
       secondary actions, so they read as secondary vs the accent primaries).
       !important is needed because these classes are also styled in each page's
       own <style> block at equal specificity.
   --------------------------------------------------------------------------- */
.view-pdf-btn,
.document-view-btn,
.modal-view-btn,
.select-file-btn {
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 999px !important;
  transition: all 0.3s;
}
.view-pdf-btn:hover,
.document-view-btn:hover,
.modal-view-btn:hover,
.select-file-btn:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  transform: translateY(-1px);
}

/* Document link items use the old blue accent for the text/hover. */
.doc-link-item {
  color: var(--ink) !important;
}
.doc-link-item:hover {
  color: var(--accent) !important;
}

/* Spinners: swap the old blue top-color to accent. */
.loading-spinner,
.loading-spinner-docs,
.pdf-loading-spinner,
.doc-loading-spinner {
  border-top-color: var(--accent) !important;
}

/* ---------------------------------------------------------------------------
   9. Accessibility — focus outline never removed (spec §11)
   --------------------------------------------------------------------------- */
*[tabindex]:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}