:root {
  --navy: #0d1117;
  --navy-light: #161b22;
  --charcoal: #1c2128;
  --charcoal-light: #242a33;
  --slate: #8b949e;
  --silver: #c9d1d9;
  --white: #f0f2f5;
  --white-pure: #ffffff;
  --accent: #c8a24e;
  --accent-light: #d4b462;
  --accent-dim: rgba(200, 162, 78, 0.12);
  --danger: #f85149;
  --danger-dim: rgba(248, 81, 73, 0.12);
  --success: #3fb950;
  --info: #58a6ff;
  --warning: #d29922;
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

body.portal-body {
  font-family: var(--font-primary);
  background: var(--navy);
  color: var(--silver);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-light); }

/* Login */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.login-card {
  background: var(--navy-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 3rem;
  width: 100%;
  max-width: 400px;
}

.login-logo { font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 2rem; }
.login-logo span { color: var(--accent); }
.login-card h1 { font-size: 1.5rem; color: var(--white); margin-bottom: 1.5rem; font-weight: 600; }
.login-error { background: var(--danger-dim); color: var(--danger); padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; }

/* Forms */
.form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--slate); text-transform: uppercase; }
.form-group input, .form-group textarea, .form-group select {
  font-family: var(--font-primary); font-size: 0.95rem; color: var(--white);
  background: var(--charcoal); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; padding: 0.75rem 1rem; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 162, 78, 0.1); }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(139, 148, 158, 0.5); }
.form-group textarea { resize: vertical; min-height: 80px; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600;
  color: var(--navy); background: var(--accent); padding: 0.75rem 1.5rem;
  border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s, transform 0.2s; text-decoration: none;
}
.btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); color: var(--navy); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-size: 0.9rem; font-weight: 600;
  color: var(--silver); background: var(--charcoal); padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; cursor: pointer;
  transition: border-color 0.2s; text-decoration: none;
}
.btn-secondary:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--white); }
.btn-sm { font-size: 0.8rem; padding: 0.5rem 1rem; }
.btn-approve { background: var(--success); }
.btn-approve:hover { background: #46c75a; }

/* Layout */
.portal-layout { display: flex; min-height: 100vh; }

.portal-sidebar {
  width: 240px; background: var(--navy-light);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.5rem; display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 10;
}
.portal-sidebar-logo { font-size: 1.1rem; font-weight: 700; color: var(--white); padding-bottom: 0.75rem; }
.portal-sidebar-logo span { color: var(--accent); }
.portal-client-name { font-size: 0.85rem; color: var(--accent); font-weight: 500; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 1.5rem; }
.portal-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.portal-nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.9rem; font-weight: 500; color: var(--slate);
  padding: 0.65rem 0.75rem; border-radius: 8px;
  transition: background 0.2s, color 0.2s; text-decoration: none;
}
.portal-nav-link:hover { background: var(--charcoal); color: var(--white); }
.portal-nav-link svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.portal-sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.portal-nav-link.logout { color: var(--danger); }
.portal-nav-link.logout:hover { background: var(--danger-dim); }

.portal-main { flex: 1; margin-left: 240px; padding: 2rem 3rem; max-width: 1000px; }
.portal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.portal-header h1 { font-size: 1.75rem; color: var(--white); font-weight: 600; }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1.5rem; }
.stat-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin-bottom: 0.5rem; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--white); }
.score-max { font-size: 1rem; color: var(--slate); font-weight: 400; }
.score-good { color: var(--success) !important; }
.score-fair { color: var(--warning) !important; }
.score-poor { color: var(--danger) !important; }

/* Score display (report page) */
.score-display { text-align: center; padding: 2rem; background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; margin-bottom: 2rem; }
.score-number { font-size: 4rem; font-weight: 700; line-height: 1; }
.score-label { font-size: 0.85rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.5rem; }
.score-rating { font-size: 1rem; font-weight: 600; color: var(--white); margin-top: 0.25rem; }
.score-inline { font-weight: 600; font-size: 0.85rem; }

/* Chart */
.chart-container { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; }
.chart-container h2 { font-size: 1rem; color: var(--white); margin-bottom: 1rem; }

/* Section cards */
.section-card { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.section-card h2 { font-size: 1rem; color: var(--white); margin-bottom: 1rem; }
.list-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.list-item:last-child { border-bottom: none; }
.item-title { color: var(--white); font-weight: 500; font-size: 0.95rem; }
.item-title:hover { color: var(--accent); }
.item-meta { font-size: 0.8rem; color: var(--slate); margin-top: 0.2rem; }

/* Tables */
.portal-table { width: 100%; border-collapse: collapse; background: var(--navy-light); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); }
.portal-table th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.portal-table td { padding: 0.85rem 1rem; font-size: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); }
.portal-table td.empty { text-align: center; color: var(--slate); padding: 2rem; }

/* Badges */
.badge { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; }
.badge-published { color: var(--accent); background: var(--accent-dim); }
.badge-pending-approval { color: var(--info); background: rgba(88, 166, 255, 0.12); }
.badge-revision-requested { color: var(--warning); background: rgba(210, 153, 34, 0.12); }
.badge-approved { color: #2ea043; background: rgba(46, 160, 67, 0.12); }
.badge-draft { color: var(--slate); background: rgba(139, 148, 158, 0.12); }
.badge-sent { color: var(--info); background: rgba(88, 166, 255, 0.12); }
.badge-viewed { color: var(--slate); background: rgba(139, 148, 158, 0.12); }
.badge-signed { color: var(--success); background: rgba(63, 185, 80, 0.12); }

/* Back link */
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 500; color: var(--slate); margin-bottom: 1.5rem; }
.back-link:hover { color: var(--accent); }

/* Post/doc headers */
.post-header, .doc-header, .report-header { margin-bottom: 2rem; }
.post-header h1, .doc-header h1, .report-header h1 { font-size: 1.75rem; color: var(--white); font-weight: 600; margin-bottom: 0.75rem; }
.post-meta, .doc-meta, .report-meta { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9rem; color: var(--slate); flex-wrap: wrap; }

/* Content body */
.content-body { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; }
.content-body h1, .content-body h2, .content-body h3 { color: var(--white); }
.content-body h2 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: 0.75rem; }
.content-body h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.content-body p { font-size: 1rem; line-height: 1.8; color: var(--silver); margin-bottom: 1rem; max-width: 100%; }
.content-body ul, .content-body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.content-body li { font-size: 1rem; line-height: 1.8; color: var(--silver); margin-bottom: 0.35rem; }
.content-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.25rem; margin: 1.5rem 0; font-size: 1.05rem; color: var(--white); font-weight: 500; line-height: 1.6; }
.content-body strong { color: var(--white); }
.content-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.content-body th, .content-body td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; }
.content-body th { color: var(--white); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ============================================================
   Branded document content (.doc-content)
   Matches PDF generator styling adapted for dark theme
   ============================================================ */

/* Branded header bar inside document */
.doc-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--accent);
}
.doc-brand-header .brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
}
.doc-brand-header .brand-name .brand-dot { color: var(--accent); }
.doc-brand-header .brand-name .brand-digital { font-weight: 400; color: var(--slate); }
.doc-brand-header .brand-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate);
}

/* Document headings */
.doc-content h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.doc-content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

.doc-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.doc-content h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

/* Paragraphs */
.doc-content p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 1rem;
  max-width: 100%;
}

/* Strong / emphasis */
.doc-content strong { color: var(--white); font-weight: 600; }
.doc-content em { color: var(--slate); }

/* Links */
.doc-content a { color: var(--accent); text-decoration: none; }
.doc-content a:hover { color: var(--accent-light); text-decoration: underline; }

/* Lists with gold markers */
.doc-content ul, .doc-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.doc-content li {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--silver);
  margin-bottom: 0.35rem;
}
.doc-content li::marker { color: var(--accent); }

/* Task list checkboxes */
.doc-content li input[type="checkbox"] {
  margin-right: 0.5rem;
  accent-color: var(--accent);
}

/* Tables: navy header, alternating rows (dark theme) */
.doc-content .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0 1.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.doc-content table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.doc-content thead { background: var(--navy); }

.doc-content th {
  color: var(--white);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.doc-content td {
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  color: var(--silver);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.doc-content tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.doc-content tbody tr:hover {
  background: rgba(200, 162, 78, 0.04);
}

/* Blockquotes: gold left border */
.doc-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.75rem 1.25rem;
  margin: 1.5rem 0;
  background: rgba(200, 162, 78, 0.04);
  border-radius: 0 8px 8px 0;
  font-size: 1.05rem;
  color: var(--white);
  font-weight: 500;
  line-height: 1.6;
}

.doc-content blockquote p { color: var(--white); margin-bottom: 0.5rem; }
.doc-content blockquote p:last-child { margin-bottom: 0; }

/* Horizontal rules */
.doc-content hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2rem 0;
}

/* Code (rare in client docs, but covered) */
.doc-content code {
  font-size: 0.85rem;
  background: var(--charcoal);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--accent-light);
}

.doc-content pre {
  background: var(--charcoal);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
  margin: 1rem 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.doc-content pre code { background: none; padding: 0; }

/* Images */
.doc-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }

/* Approval actions */
.approval-actions { display: flex; gap: 1rem; margin-bottom: 2rem; }
.revision-form { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem; }

/* Comments */
.comments-section { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1.5rem; }
.comments-section h2 { font-size: 1rem; color: var(--white); margin-bottom: 1rem; }
.comment { padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.comment:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.35rem; }
.comment-header strong { color: var(--accent); font-size: 0.9rem; }
.comment-date { font-size: 0.75rem; color: var(--slate); }
.comment p { font-size: 0.9rem; color: var(--silver); margin: 0; }

/* Signature */
.signature-section { background: var(--navy-light); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 2rem; }
.signature-section h2 { font-size: 1.25rem; color: var(--white); margin-bottom: 0.5rem; }
.signature-legal { font-size: 0.9rem; color: var(--slate); margin-bottom: 1.5rem; }
.canvas-wrapper { background: var(--white-pure); border-radius: 8px; padding: 4px; margin-bottom: 1rem; display: inline-block; max-width: 100%; }
#signatureCanvas { display: block; border-radius: 6px; cursor: crosshair; max-width: 100%; height: auto; }
.signature-actions { display: flex; gap: 1rem; }
.signature-display { background: var(--navy-light); border: 1px solid rgba(63, 185, 80, 0.2); border-radius: 12px; padding: 2rem; text-align: center; }
.signature-display h2 { font-size: 1rem; color: var(--success); margin-bottom: 1rem; }
.signature-image { max-width: 400px; margin: 0 auto 1rem; border-radius: 8px; background: white; padding: 8px; }
.signature-meta { font-size: 0.8rem; color: var(--slate); }

/* Responsive */
/* Print styles for PDF download */
@media print {
  body.portal-body { background: white; color: #1a1a1a; }
  .portal-sidebar, .back-link, .no-print, .signature-section, .approval-actions, .revision-form { display: none !important; }
  .portal-layout { display: block; }
  .portal-main { margin-left: 0; padding: 0; max-width: 100%; }
  .portal-header, .doc-header, .report-header { margin-bottom: 1rem; }
  .portal-header h1, .doc-header h1, .report-header h1 { color: #1a1a1a; font-size: 1.5rem; }
  .doc-meta, .report-meta, .post-meta { color: #666; }
  .badge { border: 1px solid #ccc; background: #f5f5f5; color: #333; }
  .content-body { background: none; border: none; padding: 0; }
  .content-body h2, .content-body h3 { color: #1a1a1a; }
  .content-body p, .content-body li { color: #333; }
  .content-body blockquote { border-left-color: #999; color: #333; }
  .content-body th { color: #1a1a1a; }
  .content-body td, .content-body th { border-bottom-color: #ddd; }
  .signature-display { border-color: #ccc; background: #fafafa; text-align: center; }
  .signature-display h2 { color: #2d7d2d; }
  .signature-image { max-width: 300px; }
  .signature-meta { color: #666; }
  .score-display { background: #fafafa; border-color: #ddd; }
  .score-number { color: #1a1a1a !important; }
  .score-good { color: #2d7d2d !important; }
  .score-fair { color: #b8860b !important; }
  .score-poor { color: #cc3333 !important; }
  .chart-container { display: none; } /* charts don't print well */

  /* Narrative Digital letterhead */
  .portal-main::before {
    content: 'Narrative Digital — NSW, Australia';
    display: block;
    font-size: 0.75rem;
    color: #999;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 968px) {
  .portal-sidebar { position: static; width: 100%; flex-direction: row; padding: 1rem; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .portal-sidebar-logo, .portal-client-name { display: none; }
  .portal-nav { flex-direction: row; gap: 0.5rem; }
  .portal-sidebar-footer { flex-direction: row; border-top: none; padding-top: 0; margin-left: auto; }
  .portal-layout { flex-direction: column; }
  .portal-main { margin-left: 0; padding: 1.5rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .approval-actions { flex-direction: column; }

  /* Document content responsive */
  .content-body, .doc-content { padding: 1.25rem; }
  .doc-brand-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-bottom: 1rem; margin-bottom: 1.5rem; }
  .doc-content h1 { font-size: 1.4rem; }
  .doc-content h2 { font-size: 1.15rem; margin-top: 2rem; }
  .doc-content h3 { font-size: 1rem; }
  .doc-content p, .doc-content li { font-size: 0.95rem; line-height: 1.7; }
  .doc-content blockquote { font-size: 0.95rem; padding: 0.6rem 1rem; }

  /* Tables: horizontal scroll on mobile */
  .doc-content .table-responsive { margin: 1rem -1.25rem; border-radius: 0; border-left: none; border-right: none; }
  .doc-content table { min-width: 540px; }

  /* Signature canvas responsive */
  .canvas-wrapper { width: 100%; }
  #signatureCanvas { width: 100%; }
  .signature-actions { flex-wrap: wrap; }
  .signature-image { max-width: 100%; }
}

@media (max-width: 480px) {
  .portal-main { padding: 1rem; }
  .content-body, .doc-content { padding: 1rem; }
  .doc-content h1 { font-size: 1.25rem; }
  .doc-content h2 { font-size: 1.05rem; }
  .doc-content th, .doc-content td { padding: 0.5rem 0.65rem; font-size: 0.8rem; }
  .doc-header h1, .report-header h1 { font-size: 1.35rem; }
  .doc-meta, .report-meta { font-size: 0.8rem; gap: 0.75rem; }
}