:root {
  --primary: #8E1F2F;
  --secondary: #C54E60;
  --accent: #E6B7BF;
  --surface: #FFF8F8;
  --text: #2F1A1D;
  --muted: #6E4B50;
  --success: #1E8E5A;
  --border: #eadde0;
  --shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: linear-gradient(180deg, #f8fafc 0%, #f4f7fb 100%); color: var(--text); }
.auth-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(248,250,252,.96); }
.auth-card { width: min(420px, 100%); padding: 28px; background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 0 0 8px; }
.auth-card p { margin: 0 0 20px; color: var(--muted); }
.auth-card .btn { width: 100%; margin-top: 8px; }
.portal-bar { display:flex; justify-content:flex-end; align-items:center; gap:12px; min-height:36px; margin-bottom:10px; color:var(--muted); font-size:13px; }
.portal-bar .btn { padding:7px 12px; }
.viewer-mode #saveReportBtn { display:none; }
.user-management-card table { width:100%; border-collapse:collapse; margin-top:14px; }
.user-management-card th, .user-management-card td { padding:10px 12px; border-bottom:1px solid #e5e9ef; text-align:left; }
.user-management-card th { background:var(--primary); color:#fff; }
.user-management-card .btn { padding:7px 10px; margin-right:6px; }
.page-shell { max-width: 1480px; margin: 0 auto; padding: 24px; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.hero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 24px; margin-bottom: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, white), white); }
.eyebrow { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--primary); letter-spacing: 0.15em; margin-bottom: 8px; }
.hero h1 { margin: 0 0 10px; font-size: 34px; }
.hero p { margin: 0 0 8px; color: var(--muted); max-width: 860px; }
.hero-note { font-size: 14px; }
.hero-badge { padding: 10px 14px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; white-space: nowrap; }
.controls { padding: 20px; margin-bottom: 18px; }
.grid { display: grid; gap: 14px; }
.controls-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.text-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-size: 13px; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid #d7dce3; background: #fff; font: inherit; }
.field textarea { min-height: 110px; resize: vertical; }
.field-file input { padding: 10px; }
.subcard { margin-top: 18px; padding: 16px; border: 1px dashed var(--border); border-radius: 18px; background: #fafbfc; }
.subcard-title { font-weight: 800; margin-bottom: 12px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn { border: 0; border-radius: 12px; padding: 11px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: #eef2f7; color: #182230; }
.status-box { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px dashed #d5dbe3; color: var(--muted); }
.hidden { display: none; }
.summary-card { padding: 20px; margin-bottom: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, white), #fff); }
.summary-brand { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); }
.summary-title { font-size: 31px; font-weight: 800; margin: 6px 0; }
.summary-sub, .summary-latest { color: var(--muted); margin-top: 5px; }
.summary-theme { display: inline-block; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; font-size: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
#dashboardArea > .card, .snapshot-grid .card, .chart-card { padding: 18px; }
.kpi-card { border: 1px solid var(--accent); border-left: 6px solid var(--secondary); border-radius: 16px; padding: 16px; background: #fff; }
.kpi-card.good { border-left-color: var(--success); background: #f5fff9; }
.kpi-label { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.kpi-value { font-size: 29px; font-weight: 800; color: var(--primary); }
.kpi-card.good .kpi-value { color: var(--success); }
.chart-grid, .snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.chart-card-wide { grid-column: span 2; }
.chart-card canvas { width: 100% !important; height: 340px !important; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-head h2, .chart-card h3 { margin: 0; }
.table-wrap { overflow: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 340px; }
.table-wrap th, .table-wrap td { padding: 10px 12px; border-bottom: 1px solid #e5e9ef; text-align: center; vertical-align: middle; font-size: 14px; }
.table-wrap th { background: var(--primary); color: #fff; position: sticky; top: 0; }
.table-wrap tr:nth-child(even) td { background: #fafcfe; }
.dashboard { padding-bottom: 24px; }
@media (max-width: 980px) { .chart-grid, .snapshot-grid { grid-template-columns: 1fr; } .chart-card-wide { grid-column: span 1; } .hero { flex-direction: column; } }


.display-options { margin-top: 16px; }
.subcard-help { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.visibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.visibility-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; }
.visibility-item .meta { display:flex; flex-direction:column; gap:2px; }
.visibility-item .title { font-size:14px; font-weight:700; color:var(--text); }
.visibility-item .desc { font-size:12px; color:var(--muted); }
.switch { position:relative; width:48px; height:28px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; background:#d1d7df; border-radius:999px; cursor:pointer; transition:.2s; }
.slider:before { content:''; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.switch input:checked + .slider { background:var(--primary); }
.switch input:checked + .slider:before { transform:translateX(20px); }
.section-hidden { display:none !important; }


.field.is-disabled { opacity: 0.6; }
.field.is-disabled input,
.field.is-disabled select,
.field.is-disabled textarea { background: #eef2f7; cursor: not-allowed; }


/* v17: remove report header/footer on all PDF pages */
.pdf-header, .pdf-footer, header.pdf-header, footer.pdf-footer, .page-header, .page-footer {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


.report-design-note{margin-top:8px;color:var(--muted);font-size:13px;}


/* Advanced Design */
.advanced-design .card{border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.15);}
.advanced-design .kpi-grid{gap:10px}
.advanced-design h1,.advanced-design h2{letter-spacing:0.5px}
.advanced-design .chart-card{background:linear-gradient(135deg,#ffffff,#f0f4f8)}

#disciplinaryActionDashboardSection{margin-top:18px;padding:18px;}

.kpi-card.good .kpi-label { color: var(--success); font-weight: 700; }

/* Final: Center all table content */
table th, table td { text-align: center; vertical-align: middle; }


#brandPerformanceDashboardSection {
  margin-top: 18px;
  padding: 18px;
}
.brand-performance-dashboard-chart {
  padding: 0;
  box-shadow: none;
  border: 0;
}
#brandPerformanceDashboardChart {
  width: 100% !important;
  height: 420px !important;
}
.empty-chart-message {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: #fff;
}


/* Compact ON: explicit 2-page Food Safety PDF 1 layout */
.fs-summary-page .content { padding: 10px 24px 16px !important; }
.fs-summary-page .header-block { padding: 32px 16px 12px !important; }
.fs-summary-page .merged-kpi-row { grid-template-columns: repeat(5,1fr) !important; gap: 8px !important; margin: 12px 0 10px !important; }
.fs-summary-page .merged-kpi-row .kpi-box { min-height: 74px !important; padding: 7px !important; }
.fs-page1-grid { display:grid; grid-template-columns: 49% 51%; gap: 10px; align-items:start; }
.fs-left-col, .fs-right-col, .fs-page2-left, .fs-page2-right { display:flex; flex-direction:column; gap:10px; }
.fs-summary-page .panel, .fs-compact-second-page .panel { margin:0 !important; break-inside: avoid; page-break-inside: avoid; }
.fs-summary-page .panel-head, .fs-compact-second-page .panel-head { padding:8px 11px !important; font-size:14px !important; }
.fs-summary-page .panel-body, .fs-compact-second-page .panel-body { padding:7px 9px !important; font-size:12px !important; line-height:1.35 !important; }
.fs-summary-page table, .fs-compact-second-page table { font-size:11px !important; }
.fs-summary-page th, .fs-summary-page td, .fs-compact-second-page th, .fs-compact-second-page td { padding:4px 5px !important; text-align:center !important; vertical-align:middle !important; }
.fs-page1-chart { width:100%; height:205px; object-fit:contain; display:block; margin:0 auto; }
.fs-compact-second-page { min-height:297mm !important; height:auto !important; overflow:visible !important; }
.fs-compact-second-page .content { padding: 14px 24px 12px !important; }
.fs-page2-grid { display:grid; grid-template-columns: 50% 50%; gap:10px; align-items:start; margin-bottom:10px; }
.fs-page2-chart { width:100%; height:195px; object-fit:contain; display:block; margin:0 auto; }
.fs-incident-embedded { margin-top:8px; break-inside: avoid; page-break-inside: avoid; }
.fs-incident-embedded .page-title { font-size:24px !important; margin:4px 0 8px !important; }
.fs-incident-embedded .section-subtitle { font-size:17px !important; margin:0 0 6px !important; }
.fs-incident-embedded .panel { margin-top:8px !important; }
.fs-incident-embedded .panel-body img { max-height:220px !important; object-fit:contain !important; }
.fs-incident-embedded .comment-lines { min-height:58px !important; }
.fs-incident-embedded .comment-line { height:9px !important; }