@import url('https://fonts.googleapis.com/css2?family=Anton&family=Graduate&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;700&display=swap');

/*
 * NextPossession coach-facing application skin.
 * Visual-only overrides for the legacy app pages. It intentionally does not
 * touch report rendering, admin screens, or any JavaScript behavior.
 */

body.np-app {
  --purple:#122B52;
  --purple-deep:#0D2140;
  --teal:#17867B;
  --orange:#F0662C;
  --orange-dark:#D9531E;
  --cream:#F6EEDC;
  --cream-dark:#EDE2C8;
  --paper:#FDF8EC;
  --ink:#1B1611;
  --hardwood:#C98A4B;
  --card-shadow:6px 6px 0 var(--ink);

  /* Legacy aliases used by the existing app pages. */
  --dark:var(--paper);
  --darker:var(--cream);
  --accent:var(--teal);
  --accent-dark:#106E66;
  --gray:var(--cream-dark);
  --light-gray:#CDBF9F;
  --text:var(--ink);
  --text-muted:#62594D;
  --error:#A0442A;
  --success:var(--teal);
  --warning:#8A6200;

  font-family:'Barlow',sans-serif !important;
  background:var(--cream) !important;
  color:var(--ink) !important;
}

body.np-app * { box-sizing:border-box; }
body.np-app :focus-visible { outline:3px solid var(--orange); outline-offset:3px; }

/* ---------- Shared coach app navigation ---------- */
body.np-app:not(.np-checkout):not(.np-signup) .header {
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  height:70px !important;
  padding:0 max(22px, calc((100vw - 1120px)/2 + 24px)) !important;
  background:var(--cream) !important;
  border:0 !important;
  border-bottom:4px solid var(--ink) !important;
  backdrop-filter:none !important;
  z-index:100 !important;
  box-shadow:none !important;
}

body.np-app:not(.np-checkout):not(.np-signup) .logo {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-family:'Anton',sans-serif !important;
  font-size:25px !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  line-height:1 !important;
}
body.np-app:not(.np-checkout):not(.np-signup) .logo img { display:none !important; }
body.np-app:not(.np-checkout):not(.np-signup) .logo::before {
  content:'';
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:
    linear-gradient(90deg,transparent 46%,var(--ink) 46% 54%,transparent 54%),
    linear-gradient(0deg,transparent 46%,var(--ink) 46% 54%,transparent 54%),
    var(--orange);
  border:3px solid var(--ink);
  transform:rotate(-12deg);
}
body.np-app:not(.np-checkout):not(.np-signup) .logo::after { content:'NextPossession'; }

body.np-app .nav-links { gap:20px !important; }
body.np-app .nav-links a,
body.np-app .nav-links button {
  font-family:'Barlow',sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  background:transparent !important;
  border-radius:0 !important;
  padding:8px 0 !important;
  text-decoration:none !important;
}
body.np-app .nav-links a:hover,
body.np-app .nav-links button:hover,
body.np-app .nav-links a.active {
  color:var(--orange) !important;
  background:transparent !important;
}
body.np-app .nav-links .btn-logout,
body.np-app .btn-logout { color:#A0442A !important; }

body.np-app .hamburger span {
  width:26px !important;
  height:4px !important;
  border-radius:0 !important;
  background:var(--ink) !important;
}
body.np-app .mobile-nav {
  top:70px !important;
  background:var(--cream) !important;
  border-bottom:4px solid var(--ink) !important;
  padding:12px 20px !important;
}
body.np-app .mobile-nav a,
body.np-app .mobile-nav button {
  color:var(--ink) !important;
  border-radius:0 !important;
  font-family:'Barlow',sans-serif !important;
  font-weight:600 !important;
}
body.np-app .mobile-nav a:hover,
body.np-app .mobile-nav button:hover,
body.np-app .mobile-nav a.active {
  background:var(--cream-dark) !important;
  color:var(--orange) !important;
}

/* ---------- Shared typography / controls ---------- */
body.np-app .section-title,
body.np-app .card-title,
body.np-app .confirmation h2,
body.np-app .title,
body.np-app .plan-name,
body.np-app .section h1,
body.np-app .section h2 {
  font-family:'Anton',sans-serif !important;
  text-transform:uppercase;
  letter-spacing:.02em !important;
}

body.np-app input,
body.np-app textarea,
body.np-app select {
  font-family:'Barlow',sans-serif !important;
  background:#FFFDF5 !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.np-app input::placeholder,
body.np-app textarea::placeholder { color:#756B5C !important; }
body.np-app input:focus,
body.np-app textarea:focus,
body.np-app select:focus { border-color:var(--orange) !important; }

body.np-app .btn,
body.np-app .btn-upload,
body.np-app .btn-upload-sm,
body.np-app .btn-dashboard {
  font-family:'Graduate',serif !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:5px 5px 0 var(--ink) !important;
  transition:transform .12s ease, box-shadow .12s ease !important;
  text-decoration:none !important;
}
body.np-app .btn:hover,
body.np-app .btn-upload:hover,
body.np-app .btn-upload-sm:hover,
body.np-app .btn-dashboard:hover {
  transform:translate(2px,2px) !important;
  box-shadow:3px 3px 0 var(--ink) !important;
}
body.np-app .btn:active,
body.np-app .btn-upload:active,
body.np-app .btn-upload-sm:active,
body.np-app .btn-dashboard:active {
  transform:translate(5px,5px) !important;
  box-shadow:0 0 0 var(--ink) !important;
}
body.np-app .btn-primary,
body.np-app .btn-upload,
body.np-app .btn-upload-sm,
body.np-app .btn-dashboard {
  background:var(--orange) !important;
  color:var(--ink) !important;
}
body.np-app .btn-secondary {
  background:var(--cream-dark) !important;
  color:var(--ink) !important;
}
body.np-app .btn-primary:disabled { opacity:.55 !important; box-shadow:none !important; }

/* ---------- Dashboard ---------- */
body.np-dashboard .main {
  max-width:820px !important;
  padding-top:48px !important;
  padding-bottom:64px !important;
}
body.np-dashboard .cta-card {
  background:var(--purple) !important;
  color:var(--cream) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:var(--card-shadow) !important;
  padding:52px 34px !important;
}
body.np-dashboard .cta-card h1 {
  font-family:'Anton',sans-serif !important;
  font-size:clamp(38px,6vw,56px) !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  text-shadow:2px 2px 0 var(--orange);
}
body.np-dashboard .cta-card .subtitle { color:#D6E0F2 !important; }
body.np-dashboard .cta-icon {
  border:3px solid var(--cream) !important;
  border-radius:0 !important;
  background:rgba(240,102,44,.16) !important;
}
body.np-dashboard .film-card {
  background:var(--paper) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:4px 4px 0 var(--ink) !important;
}
body.np-dashboard .film-card:hover { border-color:var(--ink) !important; transform:translateY(-2px); }
body.np-dashboard .section-title { font-size:28px !important; }
body.np-dashboard .footer {
  background:var(--cream-dark) !important;
  color:var(--ink) !important;
  border-top:4px solid var(--ink) !important;
}
body.np-dashboard .footer a { color:var(--ink) !important; }

/* ---------- Upload ---------- */
body.np-upload { background:var(--purple) !important; }
body.np-upload .main {
  max-width:720px !important;
  padding-top:46px !important;
  padding-bottom:72px !important;
}
body.np-upload .admin-badge,
body.np-upload .usage-banner { color:#D6E0F2 !important; }
body.np-upload .steps { margin-bottom:28px !important; }
body.np-upload .step-dot {
  width:11px !important;
  height:11px !important;
  background:#6E7F9B !important;
  border:2px solid var(--ink) !important;
}
body.np-upload .step-dot.active { background:var(--orange) !important; }
body.np-upload .step-dot.done { background:var(--teal) !important; }
body.np-upload .card {
  background:var(--paper) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:8px 8px 0 var(--ink) !important;
  padding:34px 30px !important;
}
body.np-upload .card-title { font-size:30px !important; }
body.np-upload .card-subtitle { color:#62594D !important; }
body.np-upload .type-card {
  background:#FFFDF5 !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:3px 3px 0 var(--ink);
}
body.np-upload .type-card.selected {
  background:#FBE5D7 !important;
  border-color:var(--orange) !important;
}
body.np-upload .type-card .desc { color:#62594D !important; }
body.np-upload .drop-zone {
  background:#FFFDF5 !important;
  border:3px dashed var(--ink) !important;
  border-radius:0 !important;
}
body.np-upload .drop-zone:hover,
body.np-upload .drop-zone.dragover { background:#FBE5D7 !important; border-color:var(--orange) !important; }
body.np-upload .drop-zone.has-file { background:#DDECE8 !important; border-color:var(--teal) !important; }
body.np-upload .report-banner,
body.np-upload .optional-section {
  background:var(--cream-dark) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
}
body.np-upload .optional-section-header { color:var(--ink) !important; }
body.np-upload .optional-section-header:hover { background:#E5D8BB !important; }
body.np-upload .progress-track {
  height:12px !important;
  background:var(--cream-dark) !important;
  border:2px solid var(--ink);
  border-radius:0 !important;
}
body.np-upload .progress-fill { background:var(--teal) !important; border-radius:0 !important; }
body.np-upload .confirmation p { color:#62594D !important; }
body.np-upload .confirmation .email-note {
  background:#DDECE8 !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
}

/* ---------- Films ---------- */
body.np-films .main {
  max-width:900px !important;
  padding-top:48px !important;
  padding-bottom:64px !important;
}
body.np-films .section-title { font-size:34px !important; }
body.np-films .film-card {
  background:var(--paper) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:5px 5px 0 var(--ink) !important;
  margin-bottom:16px !important;
}
body.np-films .film-card:hover { border-color:var(--orange) !important; transform:translateY(-2px); }
body.np-films .filter-tab,
body.np-films .tab,
body.np-films select {
  border-radius:0 !important;
}
body.np-films .empty-state {
  background:var(--paper);
  border:3px dashed var(--ink);
  padding:40px 22px !important;
}

/* ---------- Account ---------- */
body.np-account .account-container {
  max-width:780px !important;
  padding-top:48px !important;
  padding-bottom:72px !important;
}
body.np-account .section {
  background:var(--paper) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:var(--card-shadow) !important;
  padding:26px !important;
  margin-bottom:26px !important;
}
body.np-account .section-title {
  font-family:'Anton',sans-serif !important;
  font-size:24px !important;
  text-transform:uppercase !important;
}
body.np-account .profile-field label,
body.np-account .plan-row .label { color:#62594D !important; }
body.np-account .btn-scan,
body.np-account .mn-scan { background:var(--orange) !important; color:var(--ink) !important; }
body.np-account .danger-zone,
body.np-account .danger-section { border-color:#A0442A !important; }

/* ---------- Checkout + signup ---------- */
body.np-checkout,
body.np-signup {
  background:var(--purple) !important;
  color:var(--ink) !important;
  min-height:100vh;
  padding:36px 20px !important;
}
body.np-checkout .container,
body.np-signup .container { max-width:520px !important; }
body.np-checkout .card,
body.np-signup .card {
  background:var(--paper) !important;
  border:4px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:8px 8px 0 var(--ink) !important;
}
body.np-checkout .header,
body.np-signup .header {
  position:static !important;
  height:auto !important;
  background:var(--orange) !important;
  color:var(--ink) !important;
  border:0 !important;
  border-bottom:4px solid var(--ink) !important;
  padding:28px 24px !important;
}
body.np-checkout .header .logo,
body.np-signup .header .logo {
  font-family:'Anton',sans-serif !important;
  color:var(--ink) !important;
  font-size:36px !important;
  text-transform:uppercase !important;
  text-shadow:2px 2px 0 var(--cream);
}
body.np-checkout .header p,
body.np-signup .header p { color:var(--ink) !important; }
body.np-checkout .content,
body.np-signup .content { padding:30px 26px !important; }
body.np-checkout .plan-summary,
body.np-signup .plan-summary {
  background:var(--cream-dark) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
}
body.np-checkout .plan-name,
body.np-signup .plan-name { font-family:'Anton',sans-serif !important; text-transform:uppercase; }
body.np-checkout .plan-price { font-family:'Anton',sans-serif !important; color:var(--orange) !important; }
body.np-checkout .back-link,
body.np-signup .back-link { color:var(--cream) !important; font-family:'IBM Plex Mono',monospace !important; }
body.np-checkout select option,
body.np-signup select option { background:var(--paper) !important; color:var(--ink) !important; }
body.np-checkout .divider,
body.np-signup .divider { color:#62594D !important; }
body.np-checkout .security-note,
body.np-signup .security-note,
body.np-signup .terms-note { color:#62594D !important; }

/* ---------- Badges / alerts ---------- */
body.np-app .badge { border-radius:0 !important; }
body.np-app .error-msg,
body.np-app .error,
body.np-app .alert-error {
  background:#F4DDD3 !important;
  color:#7A2F1D !important;
  border:3px solid #A0442A !important;
  border-radius:0 !important;
}
body.np-app .success-msg,
body.np-app .alert-success {
  background:#DDECE8 !important;
  color:#0C5D56 !important;
  border:3px solid var(--teal) !important;
  border-radius:0 !important;
}
body.np-app .toast {
  background:var(--paper) !important;
  color:var(--ink) !important;
  border:3px solid var(--ink) !important;
  border-radius:0 !important;
  box-shadow:4px 4px 0 var(--ink) !important;
}

@media (max-width:768px) {
  body.np-app:not(.np-checkout):not(.np-signup) .header { padding:0 18px !important; }
  body.np-app:not(.np-checkout):not(.np-signup) .logo { font-size:21px !important; }
  body.np-dashboard .main,
  body.np-films .main,
  body.np-upload .main,
  body.np-account .account-container { padding-left:16px !important; padding-right:16px !important; }
  body.np-upload .card,
  body.np-account .section { padding:22px 18px !important; }
}