/* Admin-specific overrides (shared base.css loaded via symlink) */

@layer reset {
  /* Global type scale: the admin app reads best at what browsers render
     as 90% zoom, so make that the default. Everything rem-based
     (typography, spacing tokens) scales together; px values (rail width,
     borders, icons) intentionally stay put. Admin-only — candidate FE
     keeps the full-size scale. */
  html {
    font-size: 90%;
  }

  /* Admin page components — make custom elements block-level */
  company-intel-page,
  position-brief-page,
  simulation-story-page,
  talent-management-page,
  create-position-page,
  new-company-page,
  eval-criteria-page,
  evaluation-detail-page,
  members-page,
  admin-allowlist-page {
    display: block;
  }

  /* Top padding to clear the fixed navbar on all pages.
     Landing & contact heroes have their own calc(72px + ...) padding,
     so this only visually matters on workspace pages. */
  #main-content {
    padding-block-start: 60px;
  }

  /* Horizontal padding for workspace pages inside main */
  #main-content:has(company-intel-page),
  #main-content:has(position-brief-page),
  #main-content:has(simulation-story-page),
  #main-content:has(talent-management-page),
  #main-content:has(create-position-page),
  #main-content:has(new-company-page),
  #main-content:has(eval-criteria-page),
  #main-content:has(evaluation-detail-page),
  #main-content:has(members-page),
  #main-content:has(admin-allowlist-page) {
    padding-inline: clamp(1rem, 4vw, 3rem);
  }
}

@layer base {
  p + p {
    margin-block-start: var(--space-sm);
  }

  li + li {
    margin-block-start: var(--space-xs);
  }
}

@layer components {
  /* App-wide header density — admin pages read as a workspace, not a
     hero (the shared default is 1.6rem display type + a 56px icon).
     First shipped on the Positions pages; promoted here so Evaluations,
     Candidate Intelligence, Members, Allowlist and Company Profile
     match. */
  .page-header {
    gap: var(--space-md);

    h1 {
      font-size: var(--fs-xl);
    }
  }

  .page-header-icon,
  .page-icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 12px;

    svg {
      inline-size: 18px;
      block-size: 18px;
    }
  }
}

@layer theme {
  /* Header spacing lives in the theme layer because shared base.css sets
     these same properties on .page-header in @layer theme, which
     outranks any components-layer override. */
  .page-header {
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-md);
  }
}

@layer theme {
  /* Title accent bars — full-width variant for admin pages */
  .company-title h2,
  .brief-header h2,
  .story-title,
  .dialog-header h2,
  .section-header h3,
  .insight-card .label,
  .evaluation-detail-page .detail-card h2 {
    position: relative;
    width: fit-content;
    padding-block-end: var(--space-sm);
    margin-block-end: var(--space-md);

    &::after {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      inline-size: 100%;
      block-size: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
    }
  }
}