/* TechPrysm brand: navy #36487F (primary), red #C62B25 (accent). */
:root {
  --tp-navy: #36487f;
  --tp-navy-dark: #2a3966;
  --tp-navy-darker: #222e52;
  --tp-navy-soft: #e9edf6;
  --tp-red: #c62b25;
  --tp-red-dark: #a3231e;
  --tp-logo-t: var(--tp-navy);
  --rt-brand: var(--tp-navy);
  --rt-accent: var(--tp-navy);
  --rt-paper: #ffffff;
  --rt-paper-border: #dde2ec;
  --rt-muted-bg: #f4f6fa;
  --rt-added: #e6f4ea;
  --rt-added-text: #14532d;
  --rt-removed: #fdecea;
  --rt-removed-text: #7f1d1d;

  --bs-primary: var(--tp-navy);
  --bs-primary-rgb: 54, 72, 127;
  --bs-primary-text-emphasis: var(--tp-navy-darker);
  --bs-primary-bg-subtle: var(--tp-navy-soft);
  --bs-primary-border-subtle: #b9c3dd;
  --bs-link-color: var(--tp-navy);
  --bs-link-color-rgb: 54, 72, 127;
  --bs-link-hover-color: var(--tp-red-dark);
  --bs-link-hover-color-rgb: 163, 35, 30;
  --bs-focus-ring-color: rgba(54, 72, 127, .3);
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
  --tp-logo-t: #c9d3ef;
  --rt-brand: #9fb2e6;
  --rt-accent: #7f95d6;
  --rt-paper: #1b1f26;
  --rt-paper-border: #343a46;
  --rt-muted-bg: #14171c;
  --rt-added: #11301d;
  --rt-added-text: #9be3b0;
  --rt-removed: #3a1717;
  --rt-removed-text: #f4a6a6;
  --bs-primary-rgb: 127, 149, 214;
  --bs-primary-text-emphasis: #c9d3ef;
  --bs-primary-bg-subtle: #1d2540;
  --bs-primary-border-subtle: #34436f;
  --bs-link-color: #9fb2e6;
  --bs-link-color-rgb: 159, 178, 230;
  --bs-link-hover-color: #f08a85;
  --bs-link-hover-color-rgb: 240, 138, 133;
}

body {
  background: var(--rt-muted-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/* Header: white bar with the full-colour logo and a red accent line. */
.tp-header { background: var(--bs-body-bg); border-bottom: 3px solid var(--tp-red); box-shadow: 0 1px 4px rgba(34, 46, 82, .06); }
.tp-header .nav-link { color: var(--bs-emphasis-color); font-weight: 500; }
.tp-header .nav-link:hover, .tp-header .nav-link:focus { color: var(--tp-red); }
.tp-header .nav-link.active { color: var(--rt-brand); box-shadow: inset 0 -2px 0 var(--tp-red); }
.navbar-brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--rt-brand); }
.navbar-brand:hover { color: var(--rt-brand); }
.brand-name { line-height: 1.05; }
.brand-name small { display: block; font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-red); }
.tp-logo .tp-logo-t { fill: var(--tp-logo-t); }
.tp-logo .tp-logo-v { fill: var(--tp-red); }

/* Bootstrap components in brand colours. */
.btn-primary {
  --bs-btn-bg: var(--tp-navy); --bs-btn-border-color: var(--tp-navy);
  --bs-btn-hover-bg: var(--tp-navy-dark); --bs-btn-hover-border-color: var(--tp-navy-dark);
  --bs-btn-active-bg: var(--tp-navy-darker); --bs-btn-active-border-color: var(--tp-navy-darker);
  --bs-btn-disabled-bg: var(--tp-navy); --bs-btn-disabled-border-color: var(--tp-navy);
  --bs-btn-focus-shadow-rgb: 54, 72, 127;
}
.btn-outline-primary {
  --bs-btn-color: var(--rt-brand); --bs-btn-border-color: var(--rt-brand);
  --bs-btn-hover-bg: var(--tp-navy); --bs-btn-hover-border-color: var(--tp-navy); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--tp-navy-dark); --bs-btn-active-border-color: var(--tp-navy-dark); --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--rt-brand); --bs-btn-disabled-border-color: var(--rt-brand);
  --bs-btn-focus-shadow-rgb: 54, 72, 127;
}
.btn-danger {
  --bs-btn-bg: var(--tp-red); --bs-btn-border-color: var(--tp-red);
  --bs-btn-hover-bg: var(--tp-red-dark); --bs-btn-hover-border-color: var(--tp-red-dark);
  --bs-btn-active-bg: var(--tp-red-dark); --bs-btn-active-border-color: var(--tp-red-dark);
}
.btn-outline-danger {
  --bs-btn-color: var(--tp-red); --bs-btn-border-color: var(--tp-red);
  --bs-btn-hover-bg: var(--tp-red); --bs-btn-hover-border-color: var(--tp-red);
  --bs-btn-active-bg: var(--tp-red-dark); --bs-btn-active-border-color: var(--tp-red-dark);
}
.form-control:focus, .form-select:focus { border-color: #8d9cc7; box-shadow: 0 0 0 .25rem rgba(54, 72, 127, .2); }
.form-check-input:checked { background-color: var(--tp-navy); border-color: var(--tp-navy); }
.form-check-input:focus { border-color: #8d9cc7; box-shadow: 0 0 0 .25rem rgba(54, 72, 127, .2); }
.progress { --bs-progress-bar-bg: var(--tp-navy); }
.pagination { --bs-pagination-active-bg: var(--tp-navy); --bs-pagination-active-border-color: var(--tp-navy); --bs-pagination-color: var(--rt-brand); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--tp-navy); }
.list-group { --bs-list-group-active-bg: var(--tp-navy); --bs-list-group-active-border-color: var(--tp-navy); }

.page-header { margin: 1.5rem 0 1.25rem; }
.page-header h1 { font-size: 1.6rem; font-weight: 650; margin: 0; color: var(--bs-emphasis-color); }
.page-header h1::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .45rem; background: var(--tp-red); border-radius: 2px; }
.page-header .lead { font-size: 1rem; margin: .25rem 0 0; }

.card { border-color: var(--rt-paper-border); }
.card-header { background: transparent; font-weight: 600; }

.auth-card { max-width: 440px; margin: 3rem auto; border-top: 4px solid var(--tp-navy); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 1rem; }

/* Resume preview: looks like a page, clearly separate from the report. */
.resume-paper {
  background: var(--rt-paper);
  border: 1px solid var(--rt-paper-border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  padding: 2.25rem 2.5rem;
  font-size: .94rem;
  line-height: 1.45;
}
.resume-paper { font-family: var(--r-font, inherit); }
.resume-paper .r-name { font-size: 1.55rem; font-weight: 700; text-align: center; margin-bottom: .1rem; color: var(--r-accent, inherit); }
.resume-paper .r-center { text-align: center; color: var(--bs-secondary-color); }
.resume-paper[data-align="left"] .r-name, .resume-paper[data-align="left"] .r-center { text-align: left; }
.resume-paper h2 {
  font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rt-brand); border-bottom: 1px solid var(--rt-brand); padding-bottom: .15rem; margin: 1.1rem 0 .45rem;
}
.resume-paper .r-entry { font-weight: 650; margin-top: .55rem; }
.resume-paper .r-meta { font-weight: 400; color: var(--bs-secondary-color); }
.resume-paper ul { margin-bottom: .25rem; padding-left: 1.2rem; }
/* Resume styles (tailoring/styles.py) */
.resume-paper[style*="--r-size"] { font-size: calc(var(--r-size) * 1.05); }
.resume-paper h2 { color: var(--r-accent, var(--rt-brand)); border-bottom-color: var(--r-accent, var(--rt-brand)); }
.resume-paper[data-rule="none"] h2 { border-bottom: 0; }
.resume-paper[data-rule="above"] h2 { border-bottom: 0; border-top: 1px solid var(--r-accent); padding-top: .3rem; }
.resume-paper[data-rule="band"] h2 { border-bottom: 0; padding: .2rem .45rem; background: color-mix(in srgb, var(--r-accent) 12%, transparent); }
.resume-paper[data-case="title"] h2 { text-transform: none; letter-spacing: 0; font-size: 1.02em; }
.resume-paper li::marker { content: var(--r-bullet, "•") "  "; color: var(--r-accent, inherit); }
.protected-badge { font-size: .7rem; vertical-align: middle; }

.score-ring {
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border: 6px solid currentColor; font-weight: 700; font-size: 1.6rem; line-height: 1;
}
.score-ring small { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.req-list .list-group-item { font-size: .9rem; }
.evidence { font-size: .82rem; color: var(--bs-secondary-color); border-left: 3px solid var(--rt-paper-border); padding-left: .5rem; margin-top: .25rem; }

.diff { font-family: var(--bs-font-monospace); font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.diff .same { padding: 1px 8px; }
.diff .added { background: var(--rt-added); color: var(--rt-added-text); padding: 1px 8px; }
.diff .removed { background: var(--rt-removed); color: var(--rt-removed-text); padding: 1px 8px; text-decoration: line-through; }
.diff .added::before { content: "+ "; }
.diff .removed::before { content: "− "; }

.bar { height: 10px; background: var(--rt-accent); border-radius: 4px; min-width: 2px; }
.card-header { border-bottom-color: var(--rt-paper-border); }
.stat { font-size: 1.5rem; font-weight: 700; }
.stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }

.table td, .table th { vertical-align: middle; }
.text-break-all { word-break: break-all; }
footer { color: var(--bs-secondary-color); font-size: .85rem; background: var(--bs-body-bg); }
footer .tp-logo { vertical-align: -3px; margin-right: .35rem; }

@media (max-width: 576px) {
  .resume-paper { padding: 1.25rem 1rem; }
  .page-header h1 { font-size: 1.35rem; }
}

/* Compact previews in the admin style gallery */
.style-sample .resume-paper { padding: 1rem 1.1rem; box-shadow: none; font-size: calc(var(--r-size) * .82); }
.style-sample .resume-paper .r-name { font-size: 1.15rem; }

/* New tailoring: resume picker cards */
.resume-choice { cursor: pointer; border-width: 2px; transition: border-color .15s, box-shadow .15s; }
.resume-choice:hover { border-color: #8d9cc7; }
.btn-check:checked + .resume-choice { border-color: var(--tp-navy); box-shadow: 0 0 0 .2rem rgba(54, 72, 127, .2); }
.btn-check:focus-visible + .resume-choice { outline: 3px solid rgba(54, 72, 127, .45); outline-offset: 2px; }
.resume-choice .choice-badge { visibility: hidden; background: var(--tp-navy); }
.btn-check:checked + .resume-choice .choice-badge { visibility: visible; }
.resume-thumb {
  height: 13rem; overflow: hidden; background: var(--rt-paper); border: 1px solid var(--rt-paper-border);
  padding: .6rem .7rem; font-size: .66rem; line-height: 1.35; color: var(--bs-secondary-color);
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent);
}
.resume-thumb .thumb-name { font-size: .85rem; font-weight: 700; color: var(--bs-emphasis-color); margin-bottom: .15rem; }
.resume-thumb div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }