/* Approved admin brand. Public and candidate-facing pages are excluded. */
@layer components {
  body[data-authed='1']:has(#main-content > .page) {
    .page-bg {
      display: none;
    }
    .page-header h1 {
      text-transform: none;
      letter-spacing: -0.025em;
      font-weight: 400;
    }
    .page-header h1::after {
      display: block;
    }
    .page-header :is(.page-icon, .page-header-icon) {
      display: none;
    }
    .talent-management-page:not(.detail-page) .page-header h1 {
      font-size: 34px;
    }
    .detail-page .page-header h1 {
      font-size: 30px;
      line-height: 1.25;
    }
    .section-head h2 {
      font-size: 16px;
      letter-spacing: -0.015em;
    }
    .section-head .section-icon {
      inline-size: 28px;
      block-size: 28px;
    }
    .talent-management-page .positions-table th {
      font-weight: 500;
    }
    :is(.primary-button, .submit-button) {
      border-radius: 8px;
      &:hover {
        transform: none;
      }
    }
    .page .secondary-button {
      border-width: 1px;
      border-style: solid;
      border-radius: 8px;
      &:hover {
        transform: none;
      }
    }
    :is(.card, .table-container, .positions-empty) {
      border-width: 1px;
      border-style: solid;
      border-radius: 12px;
      backdrop-filter: none;
    }
    .list-toolbar {
      flex-wrap: wrap;
    }
    .list-toolbar .list-meta {
      white-space: nowrap;
    }
    .list-toolbar input[type='search'] {
      flex: 1 1 180px;
      min-inline-size: 0;
    }
    /* Same reading size as the Assessment tab (.sim-info-desc), so the
       position's tabs read as one record. */
    .detail-page .overview-text {
      font-size: var(--fs-small);
      line-height: 1.6;
    }
    .nav-brand-text {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }
    .positions-table td {
      padding-block: 17px;
    }
  }
}

@layer theme {
  /* Tokens also reach the sign-in page, which is logged out and so outside the
     app scope, and is always light (layout.html). Component overrides below
     stay app-only; signin.css styles its own components from these tokens. */
  :is(body[data-authed='1']:has(#main-content > .page), body:has(#main-content > .signin-page)) {
    --font-heading: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --bg-primary: #faf7f0;
    --bg-secondary: #eeefeb;
    --text-primary: #242522;
    --text-secondary: #686b64;
    --accent-primary: #465b32;
    --accent-secondary: #354526;
    --accent-warm: #b8541f;
    --accent-warm-hover: #934018;
    --surface-elevated: #ffffff;
    --surface-base: #ffffff;
    --surface-sunken: #eeefeb;
    --surface-deep: #eeefeb;
    --pilot-border: #e3e4df;
    --pilot-selected: #e7ecdf;
    --pilot-icon-bg: #e2eeeb;
    --pilot-icon-ink: #37665e;
    --pilot-brand: #465b32;
    --pilot-nav-text: #252622;
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  body[data-authed='1']:has(#main-content > .page) {
    nav.navbar {
      background: var(--bg-primary);
      border-color: var(--pilot-border);
    }
    nav.navbar .nav-links a {
      color: var(--pilot-nav-text);
    }
    .nav-brand-text {
      color: var(--text-secondary);
    }
    nav.navbar .nav-links a.active {
      background: var(--pilot-selected);
      color: var(--accent-primary);
    }
    .page-header {
      border-color: var(--pilot-border);
      padding-block-end: 24px;
      margin-block-end: 24px;
    }
    .page-header h1 {
      font-family: var(--font-display);
    }
    :is(.primary-button, .submit-button) {
      background: var(--accent-warm);
      color: #fff;
      box-shadow: 0 1px 2px #24252214;
      &:hover {
        background: var(--accent-warm-hover);
        box-shadow: none;
      }
    }
    .page .secondary-button {
      background: var(--surface-elevated);
      color: var(--text-primary);
      border-color: var(--pilot-border);
      box-shadow: none;
      &:hover {
        background: var(--surface-sunken);
        box-shadow: none;
      }
    }
    :is(.card, .table-container, .positions-empty) {
      background: var(--surface-elevated);
      border-color: var(--pilot-border);
      box-shadow: 0 2px 6px #24252205;
    }
    .section-head .section-icon {
      background: var(--pilot-icon-bg);
      border-color: transparent;
      color: var(--pilot-icon-ink);
      box-shadow: none;
    }
    .positions-table thead {
      background: color-mix(in srgb, var(--pilot-selected) 45%, var(--surface-elevated));
    }
    .positions-table th {
      color: var(--text-secondary);
      text-transform: none;
      letter-spacing: 0;
    }
    .positions-table td {
      border-color: var(--pilot-border);
    }
    .positions-table tbody tr:not(.empty-row):hover {
      background: var(--bg-primary);
    }
    .detail-tabs [aria-selected='true'] {
      background: var(--pilot-selected);
      color: var(--accent-primary);
    }
    .position-count {
      background: var(--pilot-selected);
      color: var(--accent-primary);
    }
    .detail-tabs {
      background: transparent;
      border-color: var(--pilot-border);
    }
    .page :is(strong, b) {
      color: var(--accent-warm);
    }
    :is(input, select, textarea) {
      background: var(--surface-elevated);
      border-color: var(--pilot-border);
    }
  }

  html[data-theme='dark'] body[data-authed='1']:has(#main-content > .page) {
    --bg-primary: #0b0c0e;
    --bg-secondary: #1c1e22;
    --text-primary: #f3f4f6;
    --text-secondary: #a4a8ae;
    --accent-primary: #e47a3c;
    --accent-secondary: #ec8f58;
    --accent-warm: #e47a3c;
    --accent-warm-hover: #ec8f58;
    --surface-elevated: #16181b;
    --surface-base: #16181b;
    --surface-sunken: #101114;
    --surface-deep: #08090a;
    --pilot-border: #2a2d32;
    --pilot-selected: #2b1c14;
    --pilot-icon-bg: #2b1c14;
    --pilot-icon-ink: #ec8f58;
    --pilot-brand: #e47a3c;
    --pilot-nav-text: #e5e7eb;
    /* Gunmetal finish: a top light and a diagonal glint over the flat surface. */
    --pilot-sheen:
      linear-gradient(180deg, #ffffff0a, #ffffff00 220px),
      linear-gradient(115deg, #ffffff00 20%, #ffffff07 42%, #ffffff00 64%);
    --pilot-sheen-edge: inset 0 1px 0 #ffffff17;
    --pilot-page-sheen:
      radial-gradient(90rem 40rem at 100% -5rem, #2a303a59, #2a303a00 70%),
      linear-gradient(170deg, #121419, #0b0c0e 22rem, #08090a 56rem);
    background: var(--pilot-page-sheen);
    background-color: var(--bg-primary);
    /* Burnt orange CTA; lighter #e47a3c is kept for text accents (AA on gunmetal). */
    :is(.primary-button, .submit-button) {
      background: #b8541f;
      color: #fff;
      &:hover {
        background: #a3481a;
      }
    }
    nav.navbar {
      background: linear-gradient(180deg, #1a1d22, #0e1013 55%, #0b0c0e);
      box-shadow: inset -1px 0 0 #ffffff0a;
    }
    :is(
      .card,
      .table-container,
      .positions-empty,
      .get-started,
      .setup-continuation,
      .company-card,
      .insight-card,
      :where(.company-intel-page) .detail-section,
      .detail-card,
      .brief-card,
      .criteria-card
    ) {
      background-image: var(--pilot-sheen);
      box-shadow:
        var(--pilot-sheen-edge),
        0 8px 24px #00000059;
    }
    .page :is(strong, b) {
      color: var(--text-primary);
    }
  }
}

@layer components {
  .detail-page {
    .detail-edit-link {
      margin-inline-start: auto;
      font-size: 14px;
    }
    .section-head .detail-print {
      padding: 9px;
      min-inline-size: 36px;
      margin-inline-start: 8px;
      padding-inline: 9px;
      flex: none;
    }
    /* The overview's four list sections — Required experience, Must-have
       requirements, Key responsibilities, Nice-to-haves — read as one
       document: same divider, heading, bullets and text size as the
       description above them. */
    :is(.detail-experience, .must-haves, .brief-list-section) {
      margin-block-start: 24px;
      padding-block-start: 20px;
      border-block-start: 1px solid;

      h3 {
        margin-block: 0 12px;
        margin-inline: 0;
        font-size: 16px;
        font-weight: var(--fw-semibold);
      }
    }
    :is(.detail-experience .overview-text, .must-haves, .brief-list-section) :is(ul, ol) {
      margin: 0;
      padding-inline-start: 1.3em;
      list-style-position: outside;
    }
    :is(.detail-experience .overview-text, .must-haves, .brief-list-section) ul {
      list-style-type: disc;
    }
    .detail-experience .overview-text ol {
      list-style-type: decimal;
    }
    :is(.detail-experience .overview-text, .must-haves, .brief-list-section) li {
      margin-block: 0.5em;
      padding-inline-start: 0.2em;
      font-size: var(--fs-small);
      line-height: 1.6;

      > p {
        margin: 0;
      }
    }
    .must-haves .must-haves-empty {
      list-style: none;
      margin-inline-start: -1.3em;
    }
    .activity-disclosure > summary {
      cursor: pointer;
    }
    .activity-disclosure > summary::after {
      content: '+';
      margin-inline-start: auto;
    }
    .activity-disclosure[open] > summary::after {
      content: '−';
    }
    .pipeline-empty-hint {
      display: none;
      font-size: 14px;
      line-height: 1.6;
    }
    [data-pipeline-empty='true'] .pipeline-empty-hint {
      display: block;
    }
    [data-pipeline-empty='true'] .side-kv {
      display: none;
    }
  }
}
@layer theme {
  .detail-page {
    :is(.detail-experience, .must-haves, .brief-list-section) {
      border-color: var(--pilot-border);
    }
    /* Body text secondary, headings primary — the Assessment tab's contrast. */
    .overview-section :is(.overview-text, .must-haves li, .brief-list-section li) {
      color: var(--text-secondary);
    }
    .overview-section h3 {
      color: var(--text-primary);
    }
    .must-haves .must-haves-empty {
      color: var(--text-secondary);
    }
    .pipeline-empty-hint {
      color: var(--text-secondary);
    }
  }
}