:root {
  --navy: #1f4e78;
  --navy-dark: #163955;
  --bg: #f4f6f8;
  --card-bg: #ffffff;
  --border: #dfe3e8;
  --text: #26333d;
  --muted: #6b7785;
  --high: #f8696b;
  --medium: #ffd166;
  --low: #63be7b;
  --na: #c9ced3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.navbar {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.navbar .brand { display: flex; align-items: center; gap: 10px; font-weight: bold; font-size: 16px; color: #fff; }
.navbar .brand:hover { text-decoration: none; }
.brand-logo-wrap {
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo { height: 22px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-company { font-size: 15px; font-weight: bold; color: #fff; }
.brand-tool { font-size: 10.5px; font-weight: normal; color: #cfe0ef; text-transform: uppercase; letter-spacing: .03em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 36px;
}
.nav-links a {
  color: #cfe0ef;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 13px;
  border-radius: 5px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
  text-decoration: none;
}
.nav-links a.active {
  color: #fff;
  background: rgba(255,255,255,.16);
  text-decoration: none;
}

.nav-divider {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.18);
  margin: 0 18px 0 auto;
  flex-shrink: 0;
}

.nav-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 11.5px;
  font-weight: bold;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.navbar .user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  margin-left: 0;
}
.user-name { font-size: 13px; font-weight: 600; color: #fff; }
.user-role { font-size: 10.5px; color: #a9c2d8; text-transform: uppercase; letter-spacing: .04em; }
.nav-account-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.nav-account-links a {
  color: #cfe0ef;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 5px;
  transition: background-color .15s ease, color .15s ease;
}
.nav-account-links a:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
  text-decoration: none;
}

@media (max-width: 1080px) {
  .nav-links { margin-left: 18px; }
  .nav-links a { padding: 8px 9px; font-size: 12.5px; }
  .user-name, .user-role { display: none; }
  .nav-divider { margin-left: 8px; }
}

.container {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 20px;
}
/* The Fill Checklist page has an unusually wide table (No. / Checkpoint / Applicable /
   Reference / Review Comments / Observation / Compliance / Risk / Assessed By all in
   one row), so it's given extra breathing room on wide screens instead of squeezing
   into the same 1200px cap as narrower pages like the dashboard or admin forms.
   The formula below reclaims two-thirds of the left/right margin that the 1200px
   cap would otherwise leave empty on a wide screen, keeping about a third of that
   margin as breathing room on either side rather than stretching edge to edge. */
.container.container-wide {
  max-width: calc(400px + 66.667vw);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}

h1 { font-size: 22px; color: var(--navy); margin: 0 0 4px; }
h2 { font-size: 17px; color: var(--navy); margin: 0 0 12px; }
h3 { font-size: 15px; color: var(--navy); margin: 18px 0 8px; }
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-card {
  flex: 1 1 160px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
  padding: 14px 18px;
}
.stat-card .num { font-size: 26px; font-weight: bold; color: var(--navy); }
.stat-card .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-card.high { border-left-color: var(--high); }
.stat-card.medium { border-left-color: var(--medium); }
.stat-card.low { border-left-color: var(--low); }

table { border-collapse: collapse; width: 100%; }
th, td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}
th { background: var(--navy); color: #fff; font-weight: 600; }
tr:nth-child(even) td { background: #fafbfc; }
.table-wrap { overflow-x: auto; }

.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.btn:hover { background: var(--navy-dark); text-decoration: none; }
.btn.secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.btn.secondary:hover { background: #eef3f8; }
.btn.danger { background: #b3261e; }
.btn.danger:hover { background: #8c1e18; }
.btn.small { padding: 4px 10px; font-size: 12px; }

form.inline { display: inline; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=password], input[type=date], input[type=email], select, textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 14px;
  background: #fff;
  color: var(--text);
}
textarea { min-height: 50px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-actions { margin-top: 6px; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}
.badge.risk-high { background: var(--high); color: #4a0000; }
.badge.risk-medium { background: var(--medium); color: #4a3900; }
.badge.risk-low { background: var(--low); color: #063412; }
.badge.risk-na { background: var(--na); color: #333; }
.badge.role-admin { background: var(--navy); }
.badge.role-assessor { background: #6b7785; }
.badge.status { background: #6b7785; }

select.risk-select.risk-high, td.risk-cell select.risk-high { background: #fde3e3; }

.flash-list { margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 8px; font-size: 13px; }
.flash.success { background: #e2f4ea; color: #16653d; border: 1px solid #b7e4c7; }
.flash.error { background: #fdecea; color: #9b2c2c; border: 1px solid #f5c2c0; }
.flash.info { background: #eaf2fb; color: #1f4e78; border: 1px solid #cfe0f0; }

.checklist-table input[type=text], .checklist-table textarea, .checklist-table select, .checklist-table input[type=date] {
  margin-bottom: 0;
  font-size: 12px;
  padding: 5px 6px;
}
.checklist-table td { min-width: 120px; }
.checklist-table td.checkpoint-col { min-width: 220px; }
.checklist-table td.text-col { min-width: 160px; }
/* The "No." column only ever holds a short label like "1.1" or "14.2" — give it
   just enough room for that, instead of inheriting the 120px minimum meant for
   the wider columns (Applicable, Compliance Status, etc.), which was wasting
   space that the Checkpoint/Reference/Comments columns need more. */
.checklist-table td.num-col, .checklist-table th.num-col {
  min-width: 40px;
  width: 40px;
  max-width: 56px;
  text-align: center;
}
.area-header td {
  background: var(--navy);
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 10px;
}

.empty-state { color: var(--muted); font-style: italic; padding: 20px 0; }

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, #274b6b 100%);
}
.login-card {
  background: #fff;
  border-radius: 8px;
  padding: 36px 40px;
  width: 340px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.login-logo { display: block; height: 44px; width: auto; margin: 0 auto 14px; }
.login-card h1 { text-align: center; margin-bottom: 10px; }
.login-card .subtitle { text-align: center; margin-bottom: 20px; }
.login-card .tool-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 5px 16px;
  border-radius: 20px;
  background: #eaf1fa;
  border: 1px solid #cfe0f2;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
}
.login-card .signin-heading {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
.login-hint { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; }

.pill-nav { display: flex; gap: 8px; margin-bottom: 18px; }
.pill-nav a {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 12px;
  color: var(--navy);
}
.pill-nav a.active { background: var(--navy); color: #fff; }

.helper-text { font-size: 12px; color: var(--muted); margin: -8px 0 14px; }
.wrap-text { white-space: pre-line; }
.ref-clause { font-style: italic; color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.assessed-by-cell { font-size: 12px; color: var(--muted); min-width: 110px; }
.cp-number { color: var(--navy); font-size: 12.5px; white-space: nowrap; }

.risk-select-High { background: #fddede; border-color: var(--high); font-weight: bold; }
.risk-select-Medium { background: #fff2cc; border-color: var(--medium); font-weight: bold; }
.risk-select-Low { background: #e2f4ea; border-color: var(--low); font-weight: bold; }
.risk-select-NA { background: #eee; }

.assessment-meta { display: flex; flex-wrap: wrap; gap: 24px; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.assessment-meta strong { color: var(--text); }
.sticky-save { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 12px 0; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }

.fill-layout { display: flex; align-items: flex-start; gap: 20px; }
.fill-sidebar {
  flex: 0 0 220px;
  width: 220px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
}
.fill-sidebar-title { font-size: 11px; font-weight: bold; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.fill-sidebar ul { list-style: none; margin: 0; padding: 0; }
.fill-sidebar li { margin-bottom: 2px; }
.fill-sidebar a {
  display: block;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text);
  border-left: 3px solid transparent;
  line-height: 1.3;
}
.fill-sidebar a:hover { background: #eef3f8; text-decoration: none; }
.fill-sidebar a.active { background: #eaf2fb; border-left-color: var(--navy); color: var(--navy); font-weight: bold; }
.fill-main { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .fill-layout { flex-direction: column; }
  .fill-sidebar { position: static; width: 100%; max-height: none; }
}