/**
 * portal.css — client portal styling.
 *
 * Ported from the marketing site's warm-limestone system (css/styles.css):
 * cream / sand / terracotta / ink, Rubik, --radius: 2px, generous whitespace,
 * .eyebrow. Deliberately NOT the utilitarian dashboard palette. The portal
 * should feel like it belongs to thomasprimard.com.
 */

:root {
  /* Neutrals — warm limestone */
  --cream-50:  #FAF7F2;
  --cream-100: #F3EDE4;
  --cream-200: #E9E1D4;
  --sand-300:  #D6C9B4;
  --sand-400:  #B8A78C;

  /* Accent — terracotta */
  --terracotta-500: #B5714C;
  --terracotta-600: #8F563A;

  /* Ink */
  --ink-900: #1F1C18;
  --ink-700: #55504A;
  --ink-500: #827C74;

  /* Semantic */
  --bg: var(--cream-50);
  --bg-soft: var(--cream-100);
  --text: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --line: rgba(31, 28, 24, 0.12);
  --accent: var(--terracotta-500);
  --accent-strong: var(--terracotta-600);

  /* Status */
  --status-paid: #5C7A5A;        /* muted green */
  --status-paid-bg: #EAF0E8;
  --status-overdue: #B23B2E;     /* warm red */
  --status-overdue-bg: #F6E7E4;

  --grad-beige-soft: linear-gradient(165deg, var(--cream-100) 0%, var(--cream-50) 55%, var(--cream-200) 100%);

  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--terracotta-500); color: var(--cream-50); }

/* ============ TYPE HELPERS ============ */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; line-height: 1.14; }

/* ============ BUTTONS ============ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--terracotta-500);
  color: var(--cream-50);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--ease);
}
.btn-primary:hover { background: var(--terracotta-600); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-primary:focus-visible { outline: 2px solid var(--terracotta-600); outline-offset: 2px; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  background: var(--cream-50);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.btn-outline:hover { border-color: var(--ink-900); }
.btn-outline:focus-visible { outline: 2px solid var(--terracotta-500); outline-offset: 2px; }

.btn-quiet {
  display: inline-block;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.btn-quiet:hover { color: var(--accent); }

/* ============ LOGIN ============ */
.portal-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-beige-soft);
  padding: 24px;
}

.login-wrap { width: 100%; max-width: 420px; }

.login-card {
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px 40px 40px;
  box-shadow: 0 24px 60px -32px rgba(31, 28, 24, 0.28);
}

.login-card .eyebrow { display: block; margin-bottom: 12px; }
.login-card h1 { font-size: 30px; margin-bottom: 30px; }

.login-card label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.login-card input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-50);
  font-size: 15px;
  color: var(--ink-900);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.login-card input:focus {
  outline: none;
  border-color: var(--terracotta-500);
  box-shadow: 0 0 0 3px rgba(181, 113, 76, 0.16);
}

.login-card .btn-primary { width: 100%; margin-top: 4px; }

.login-actions { margin-top: 20px; text-align: center; }

.login-note { color: var(--text-body); font-size: 15px; }
.login-note strong { color: var(--ink-900); font-weight: 500; }

.form-error {
  color: var(--status-overdue);
  font-size: 13px;
  margin: -8px 0 16px;
}

/* Email-first flow */
.login-identity {
  font-size: 14px;
  color: var(--text-body);
  margin: -16px 0 24px;
}
.login-identity strong { color: var(--ink-900); font-weight: 500; }

.link-inline {
  display: inline;
  padding: 0;
  margin-left: 8px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-inline:hover { color: var(--accent-strong); }

.field-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: -12px 0 14px;
}
/* Hint under the highlighted sign-in-link button (centered, sits below a button not an input) */
.field-hint--magic {
  margin: 10px 0 0;
  text-align: center;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.btn-block { width: 100%; justify-content: center; }

/* ============ LOGIN TOP BAR ============ */
.login-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--cream-50);
}
.login-topbar .brand-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.login-topbar .brand-name {
  font-weight: 600; letter-spacing: 0.14em; font-size: 14px; color: var(--ink-900);
}
.login-topbar .brand-sub {
  font-size: 10px; letter-spacing: 0.18em; color: var(--text-muted); margin-top: 2px;
}
.login-topbar .topbar-portal {
  color: var(--text-muted); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; padding-left: 20px; border-left: 1px solid var(--line);
}
.login-topbar .topbar-spacer { margin-left: auto; }

/* portal-login page becomes a column: bar on top, card centered below */
.portal-login.has-topbar { flex-direction: column; align-items: stretch; padding: 0; }
.portal-login.has-topbar .login-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  max-width: none; padding: 24px;
}
.portal-login.has-topbar .login-card { width: 100%; max-width: 420px; }

/* ============ LANGUAGE TOGGLE (login bar + shell bar) ============ */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; }
.lang-opt {
  padding: 5px 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-muted); border-radius: var(--radius);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-opt:hover { color: var(--ink-900); }
.lang-opt.is-active { color: var(--accent); background: rgba(181, 113, 76, 0.10); }
.lang-opt:focus-visible { outline: 2px solid var(--terracotta-500); outline-offset: 2px; }
.shell-lang { margin-left: 4px; }

/* ============ APP SHELL ============ */
.portal-app { background: var(--bg); min-height: 100vh; }

.shell-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--pad-x, clamp(20px, 5vw, 48px));
  border-bottom: 1px solid var(--line);
  background: var(--cream-50);
}

.shell-brand {
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 14px;
  color: var(--ink-900);
}

.shell-client {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.shell-nav { display: flex; gap: 26px; margin-left: auto; }
.shell-nav a {
  color: var(--text-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.shell-nav a:hover { color: var(--ink-900); }
.shell-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.shell-account {
  font-size: 13px;
  color: var(--text-body);
  padding: 8px 4px;
  transition: color 0.2s var(--ease);
}
.shell-account:hover { color: var(--accent); }

.shell-logout {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-700);
  transition: border-color 0.2s var(--ease);
}
.shell-logout:hover { border-color: var(--ink-900); }

/* Set-password modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 28, 24, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  width: 100%;
  max-width: 420px;
  box-shadow: 0 30px 70px -30px rgba(31, 28, 24, 0.5);
}
.modal-title { font-size: 24px; margin: 0 0 14px; }
.modal-card .login-note { margin-bottom: 22px; }
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 6px;
}

.portal-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) var(--pad-x, clamp(20px, 5vw, 48px)) 80px;
}

.loading { color: var(--text-muted); font-size: 15px; }

/* ============ PAGE HEADINGS ============ */
.page-head { margin-bottom: 36px; }
.page-head .eyebrow { display: block; margin-bottom: 12px; }
.page-head h1 { font-size: clamp(28px, 3.4vw, 40px); }
.page-head .lede { color: var(--text-body); margin-top: 10px; font-size: 16px; }

.section-block { margin-bottom: 48px; }
.section-block > h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ============ CARDS & ROWS ============ */
.card {
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
}

.stack { display: flex; flex-direction: column; gap: 14px; }

.row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.row-main { min-width: 0; flex: 1; }
.row-title { font-size: 16px; color: var(--ink-900); margin-bottom: 4px; }
.row-meta { font-size: 13px; color: var(--text-muted); letter-spacing: 0.01em; }
.row-meta span + span::before { content: "·"; margin: 0 8px; color: var(--sand-400); }
.row-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }

/* ============ STATUS CHIPS ============ */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip--delivered { background: var(--cream-200); color: var(--ink-900); }
.chip--scheduled { background: transparent; color: var(--terracotta-600); border: 1px solid var(--terracotta-500); }
.chip--paid { background: var(--status-paid-bg); color: var(--status-paid); }
.chip--overdue { background: var(--status-overdue-bg); color: var(--status-overdue); }
.chip--muted { background: var(--cream-100); color: var(--text-muted); }

/* ============ FILTER PILLS ============ */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pill {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-body);
  background: var(--cream-50);
  transition: all 0.2s var(--ease);
}
.pill:hover { border-color: var(--sand-400); }
.pill[aria-pressed="true"] {
  background: var(--ink-900);
  color: var(--cream-50);
  border-color: var(--ink-900);
}

/* ============ EMPTY STATES ============ */
.empty {
  border: 1px dashed var(--sand-300);
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/* ============ BOOK CARD ============ */
.book-card {
  background: var(--ink-900);
  color: var(--cream-50);
  border-radius: var(--radius);
  padding: 32px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.book-card h3 { font-size: 22px; margin-bottom: 6px; }
.book-card p { color: var(--sand-300); font-size: 15px; max-width: 46ch; }
.book-card .book-cta { margin-left: auto; }
.book-card .btn-primary { background: var(--cream-50); color: var(--ink-900); }
.book-card .btn-primary:hover { background: var(--cream-200); }

/* ============ INVOICE LINES (expandable) ============ */
.lines { margin-top: 6px; border-top: 1px solid var(--line); }
.lines-toggle {
  font-size: 13px;
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lines-detail { margin-top: 14px; display: grid; gap: 8px; }
.line-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--text-body);
  padding: 6px 0;
  border-bottom: 1px dotted var(--line);
}
.line-item .line-amt { color: var(--ink-900); white-space: nowrap; }

.amount { font-size: 16px; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* ============ RESPONSIVE ============ */
@media (max-width: 680px) {
  .shell-bar { flex-wrap: wrap; gap: 14px 18px; padding: 14px 20px; }
  .shell-client { padding-left: 0; border-left: none; }
  .shell-nav { gap: 18px; margin-left: 0; width: 100%; order: 3; }
  .shell-logout { margin-left: auto; }
  .row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .row-actions { margin-left: 0; width: 100%; }
  .book-card .book-cta { margin-left: 0; width: 100%; }
}