:root {
  --body:#333;
  --muted:#666;
  --surface:#fff;
  --soft:#fafafa;
  --hover:#f0f0f0;
  --border:#ccc;

  --primary:#228822;
  --primary-dark:#1b6d1b;
  --primary-soft:#bddbbd;
  --primary-bg:#d4e8d4;

  --success:var(--primary);
  --success-soft:var(--primary-bg);

  --pending:#000;
  --pending-soft:#eebd40;
  --pending-border:#eebd40;

  --warning:#000;
  --warning-soft:#e6772e;
  --warning-border:#e6772e;

  --danger:#000;
  --danger-soft:#e23122;
  --danger-border:#e23122;

  --expiry-soon:#58ba3c;
  --expiry-overdue:#dd4040;

  --neutral-soft:#eef2f7;
  --neutral:#667085;
  --neutral-border:#d0d5dd;

  --radius-small:8px;
  --radius-large:18px;
  --shadow:0 10px 24px rgba(17,24,39,.07);
  --focus:0 0 0 4px rgba(47,63,227,.22);
}

/* =========================
   RESET / BASE
========================= */

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

html,
body {
  background:#f4f4f4;
  color:var(--body);
  font-family:'Lato','Open Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.4;
}

img {
  vertical-align:top;
}

section {
  width:100%;
  background:#fff;
  padding:0 20px;
}

main > div,
header > div,
footer > div {
  max-width:1200px;
  margin:0 auto;
}

main > div {
  padding:20px;
}

header {
  width:100%;
  background:#fff;
  color:#000;
  border-bottom:1px solid var(--border);
}

header > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
}

footer > div {
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}

a {
  color:inherit;
}

h1 {
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 24px;
  color:#111827;
  font-size:1.8rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
}

h1 svg {
  width:32px;
  height:32px;
  color:#2563eb;
  stroke-width:2.25;
  flex-shrink:0;
}

h2 {
  margin:0 0 10px;
  font-size:1.2rem;
  font-weight:700;
}

h2 svg {
  width:28px;
  height:28px;
  margin-right:10px;
  vertical-align:top;
}

h3 {
  margin:0 0 10px;
  color:var(--muted);
  font-size:1.1rem;
  font-weight:500;
}

h2 + h3 {
  margin-top:-10px !important;
}

p.warn { color: #e6772e;}

/* =========================
   LAYOUT UTILITIES
========================= */

.grid,
.grid-1,
.grid-2,
.grid-3,
.grid-4 {
  display:grid;
  gap:20px;
}

.grid-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }

.form-grid,
.form-grid-3,
.form-grid-4, .form-grid-5 {
  display:grid;
  gap:16px;
}

.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.form-grid-5 { grid-template-columns:repeat(4,minmax(0,1fr)) 25px; }

.full-span {
  grid-column:1 / -1;
}

.page-center {
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.page-center .card {
  width:100%;
  max-width:400px;
}

.page-title {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.page-title h1 {
  margin:0 0 6px;
  font-size:2.05rem;
}

.page-title p {
  margin:0;
  color:var(--muted);
}

.border {
  border-bottom:2px solid var(--border);
  padding-bottom:20px;
  margin-bottom:20px;
}

/* =========================
   CARDS / TABLES
========================= */

.card,
article {
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  padding:20px;
}

.card {
  box-shadow:var(--shadow);
  margin-bottom: 20px;
}

.review-card {
  padding:24px;
}

.review-table-wrap {
  width:100%;
  overflow-x:auto;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-small);
}

.review-table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.review-table th,
.review-table td {
  padding:11px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:top;
  line-height:1.45;
}

.review-table th {
  background:var(--soft);
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.025em;
}

.review-table tbody tr:last-child td {
  border-bottom:none;
}

.summary-label {
  width:220px;
}

.clickable-row {
  cursor:pointer;
}

.clickable-row:hover td {
  background:var(--hover);
}

/* =========================
   FORMS
========================= */

.field label,
.referee-decision-box > label {
  display:block;
  margin-bottom:8px;
  font-weight:700;
}

.field small {
  display:block;
  margin-top:6px;
  color:var(--muted);
}

input,
select,
textarea,
.readonly {
  width:100%;
  min-height:50px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background:#fff;
  color:var(--body);
}

textarea {
  min-height:118px;
  resize:vertical;
}

.readonly {
  display:flex;
  align-items:center;
  background:var(--soft);
}

.card input,
.card select {
}

input:focus,
select:focus,
textarea:focus,
.btn:focus,
a:focus {
  outline:none;
  box-shadow:var(--focus);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color:var(--danger);
}

input[type="checkbox"],
input[type="radio"] {
  width:18px;
  min-width:0;
  height:18px;
  min-height:0;
  display:inline-block;
  flex-shrink:0;
  padding:0;
  margin:2px 0 0;
  accent-color:var(--primary);
  vertical-align:middle;
}

input[type="submit"],
button {
  font-family:inherit;
  font-weight:500;
  font-size:16px;
  padding:10px 15px;
  background:var(--primary);
  color:#fff;
}

header button {
  color:#000;
}

.actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.actions span { margin-right: auto; font-size: 13px; color: var(--muted); padding-top: 24px;}

/* =========================
   BUTTONS / NAV
========================= */

nav a {
  padding:10px 12px;
  border-radius:var(--radius-small);
  color:#000;
  font-weight:700;
  text-decoration:none;
}

nav a:hover {
  background:var(--hover);
  color:var(--primary);
}

.btn {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:var(--radius-small);
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:all .2s ease;
}

.btn-full {
  width:100%;
}

.btn-small {
  min-height:38px;
  padding:0 12px;
  font-size:.92rem;
  white-space:nowrap;
}

.btn-primary {
  background:var(--primary);
  color:#fff;
}

.btn-primary:hover {
  background:var(--primary-dark);
  text-decoration:none;
}

.btn-secondary {
  background:var(--primary-soft);
  color:var(--primary);
  border-color:#dfe3ff;
}

.btn-ghost {
  background:#fff;
  color:var(--body);
  border-color:var(--border);
}

.btn-ghost:hover {
  background:var(--hover);
  border-color:var(--primary-dark);
}

.btn-danger {
  background:var(--danger-soft);
  color:var(--danger);
  border-color:var(--danger-border);
}

/* =========================
   STATUS / BADGES / EXPIRY
========================= */

.status {
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 13px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
}

.status.done {
  background:var(--success-soft);
  color:var(--success);
}

.status.active {
  background:var(--primary-soft);
  color:var(--primary);
}

.status.pending {
  background:var(--pending-soft);
  color:var(--pending);
  border:1px solid var(--pending-border);
}

.status.warn {
  background:var(--warning-soft);
  color:var(--warning);
  border:1px solid var(--warning-border);
}

.status.danger {
  background:var(--danger-soft);
  color:var(--danger);
  border:1px solid var(--danger-border);
}

.count-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  padding:5px 9px;
  border:1px solid var(--neutral-border);
  border-radius:999px;
  background:var(--neutral-soft);
  color:var(--neutral);
  font-size:.78rem;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}

.expiry-date {
  font-weight:800;
}

.expiry-date.expiry-soon {
  color:var(--expiry-soon);
}

.expiry-date.expiry-overdue {
  color:var(--expiry-overdue);
}

.expiry-date.expiry-missing {
  color:var(--muted);
  font-weight:700;
}

.notice {
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background:var(--soft);
  margin-bottom:18px;
}

.notice.info {
  background:var(--primary-bg);
  border-color:var(--primary-soft);
}

.notice.warn {
  background:var(--warning-soft);
  border-color:var(--warning-border);
}

/* =========================
   PROGRESS / STEPS
========================= */

.progress-track {
  height:12px;
  overflow:hidden;
  margin:0 0 10px;
  border-radius:999px;
  background:#e5e7eb;
}

.progress-fill {
  height:100%;
  background:var(--primary);
}

.step-list {
  display:grid;
  gap:12px;
  margin-top:18px;
}

.step {
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background:#fff;
}

.step-dot {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaecf0;
  color:#475467;
  font-weight:700;
}

.step.active {
  border-color:var(--primary);
  background:#fbfbff;
}

.step.active .step-dot {
  background:var(--primary);
  color:#fff;
}

.step-link {
  color:inherit;
  text-decoration:none;
}

.step-link:hover {
  border-color:var(--primary);
  background:var(--primary-bg);
  text-decoration:none;
}

.step-link:hover .step-dot {
  background:var(--primary-dark);
  color:#fff;
}

.step-dot:empty {
  background:#eaecf0;
  color:transparent;
  border:1px solid #c8ced8;
}

.step-link:hover .step-dot:empty {
  background:#eaecf0;
  color:transparent;
  border-color:#c8ced8;
}

.step .count-badge {
  align-self:center;
}

.renewal-status-list .renewal-status-step {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

.renewal-status-list .renewal-status-step strong {
  min-width:0;
  line-height:1.35;
}

.renewal-status-list .renewal-status-step .status {
  justify-self:end;
  width:auto;
  max-width:none;
  text-align:right;
  white-space:nowrap;
}

.renewal-status-list .step-dot {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font-size:1rem;
  line-height:1;
}

.renewal-status-list .renewal-status-step.pending .step-dot {
  background:#eaecf0;
  color:transparent;
  border:1px solid var(--border);
}

.renewal-status-list .renewal-status-step.done .step-dot {
  background:var(--primary);
  color:#fff;
  border:1px solid var(--primary);
}

.renewal-status-list .renewal-status-step.active .step-dot {
  background:var(--primary-soft);
  color:var(--primary-dark);
  border:1px solid var(--primary);
}

.renewal-status-list .renewal-status-step.danger .step-dot {
  background:var(--danger-soft);
  color:#000;
  border:1px solid var(--danger-border);
}

/* =========================
   REVIEW / SUMMARY
========================= */

.review-intro {
  max-width:850px;
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.6;
}

.review-section {
  padding:22px 0;
  border-top:1px solid #e5e7eb;
}

.review-section:first-of-type {
  padding-top:0;
  border-top:none;
}

.review-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.review-heading h2 {
  margin:0;
  font-size:1.18rem;
}

.review-summary {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 24px;
  margin:0;
}

.review-summary.compact {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 18px;
}

.review-summary div {
  min-width:0;
}

.review-summary dt {
  margin:0 0 3px;
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.025em;
}

.review-summary dd {
  margin:0;
  color:var(--body);
  font-weight:600;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.review-list {
  display:grid;
  gap:12px;
}

.review-item {
  padding:14px 16px;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-small);
  background:var(--soft);
}

.review-item h3 {
  margin:0 0 10px;
  font-size:1rem;
  line-height:1.3;
}

.review-submit-note {
  margin-top:22px;
}

/* =========================
   DECLARATION
========================= */

.declaration-intro {
  margin:0 0 16px;
  line-height:1.6;
}

.declaration-grade-inline {
  width:auto;
  min-width:220px;
  max-width:320px;
  min-height:44px;
  display:inline-block;
  margin:0 6px;
  vertical-align:middle;
}

.declaration-list {
  margin:14px 0 22px;
  padding:18px 22px 18px 42px;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background:var(--soft);
}

.declaration-list li {
  margin:0 0 10px;
  padding-left:4px;
  line-height:1.55;
}

.declaration-list li:last-child {
  margin-bottom:0;
}

.declaration-confirm {
  margin:18px 0 22px;
  padding:14px 16px;
  border:1px solid var(--primary-soft);
  border-radius:var(--radius-small);
  background:var(--primary-bg);
}

.declaration-confirm label {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  font-weight:700;
  line-height:1.45;
  cursor:pointer;
}

.declaration-confirm input[type="checkbox"] {
  margin-top:2px;
}

/* =========================
   REFEREE REVIEW
========================= */


.referee-review-intro {
  margin:0 0 22px;
  padding:16px 18px;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-small);
  background:var(--soft);
}

.referee-review-intro p {
  margin:0 0 8px;
  line-height:1.6;
}

.referee-review-intro p:last-child {
  margin-bottom:0;
}

.referee-section {
  padding-top:22px;
}

.referee-item-list {
  display:grid;
  gap:16px;
}

.referee-review-item {
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-small);
  background:#fff;
}

.referee-review-item-header {
  margin-bottom:12px;
}

.referee-review-item-header h3 {
  margin:0;
  font-size:1.05rem;
  line-height:1.4;
}

.referee-item-summary {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px 18px;
  margin-bottom:15px;
}

.referee-item-summary .span-3 { grid-column:span 3; }
.referee-item-summary .span-2 { grid-column:span 2; }
.referee-item-summary .span-1 { grid-column:span 1; }

.referee-decision-box {
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-small);
  background:var(--soft);
}

.referee-decision-title {
  margin-bottom:10px;
  font-weight:800;
}

.radio-row {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:14px;
}

.radio-row label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  cursor:pointer;
}

.radio-row input[type="radio"] {
  margin:0;
}

.referee-decision-box textarea {
  min-height:86px;
  margin-bottom:0;
}

/* =========================
   HEADER MENUS
========================= */

.role-switcher,
.user-menu-wrapper {
  position:relative;
}

.role-trigger,
.user-menu {
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:all .2s ease;
}

.role-trigger {
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background:#fff;
  font-size:15px;
  font-weight:600;
}

.role-trigger:hover {
  border-color:var(--primary);
  background:var(--hover);
}

.role-trigger svg,
.user-menu svg,
.user-dropdown-item svg {
  width:18px;
  height:18px;
}

.role-dropdown,
.user-dropdown {
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  display:none;
  flex-direction:column;
  border:1px solid #e5e7eb;
  border-radius:var(--radius-large);
  background:#fff;
  box-shadow:0 10px 25px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  z-index:1000;
}

.role-dropdown {
  width:270px;
  gap:8px;
  padding:12px;
}

.user-dropdown {
  width:240px;
  gap:4px;
  padding:10px;
}

.role-switcher.open .role-dropdown,
.user-menu-wrapper.open .user-dropdown {
  display:flex;
}

.role-option {
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border:none;
  border-radius:var(--radius-small);
  background:var(--primary-bg);
  cursor:pointer;
  text-align:left;
  transition:background .2s ease;
}

.role-icon {
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:999px;
}

.role-icon.green {
  background:var(--primary);
}

.role-icon svg {
  width:20px;
  height:20px;
  color:#fff;
}

.role-content {
  flex:1;
  display:flex;
  flex-direction:column;
}

.role-content strong {
  color:#111;
  font-size:16px;
}

.role-content small {
  margin-top:2px;
  color:#666;
  font-size:13px;
  line-height:1.4;
}

.user-menu {
  padding:0 14px;
  border:none;
  border-radius:var(--radius-small);
  background:transparent;
}

.user-menu:hover {
  background:#f3f4f6;
}

.avatar {
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:14px;
  font-weight:700;
}

.user-dropdown-item {
  height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border-radius:var(--radius-small);
  color:#111827;
  font-weight:500;
  text-decoration:none;
  transition:background .2s ease;
}

.user-dropdown-item:hover {
  background:#f3f4f6;
}

.dropdown-divider {
  height:1px;
  margin:6px 0;
  background:#e5e7eb;
}

.user-dropdown-item.logout {
  color:#dc2626;
}

.user-dropdown-item.logout:hover {
  background:#fef2f2;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:950px) {
  .header-inner {
    flex-direction:column;
    align-items:flex-start;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid,
  .form-grid-3,
  .form-grid-4,
  .dashboard-actions {
    grid-template-columns:1fr;
  }

  .form-grid-5 { grid-template-columns: 1fr 25px; }
  .form-grid-5 .field:not(.repeat-delete-field) { grid-column: 1; }
  .form-grid-5 .repeat-delete-field { grid-column: 2; grid-row; 1; }

  .container {
    padding:20px 16px 44px;
  }

  .step {
    grid-template-columns:36px 1fr;
  }

  .step .status,
  .step .count-badge {
    grid-column:2;
    justify-self:start;
  }
}

@media (max-width:768px) {
  .grid-3,
  .grid-4 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .review-heading {
    align-items:flex-start;
    flex-direction:column;
  }

  .review-heading .btn {
    align-self:flex-end;
  }

  .review-summary,
  .review-summary.compact {
    grid-template-columns:1fr;
  }
}

@media (max-width:650px) {
  .renewal-status-list .renewal-status-step {
    grid-template-columns:36px minmax(0,1fr);
  }

  .renewal-status-list .renewal-status-step .status {
    grid-column:2;
    justify-self:start;
    margin-top:2px;
    text-align:left;
    white-space:normal;
  }
}

@media (max-width:568px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns:1fr;
  }

  .declaration-grade-inline {
    width:100%;
    max-width:none;
    display:block;
    margin:8px 0;
  }

  .declaration-list {
    padding:16px 18px 16px 34px;
  }

  .declaration-confirm label {
    align-items:flex-start;
  }
}

@media (max-width:850px) {

  .referee-item-summary {
    grid-template-columns:1fr;
  }

  .referee-item-summary .span-3,
  .referee-item-summary .span-2,
  .referee-item-summary .span-1 {
    grid-column:auto;
  }
}

.repeat-delete-field {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 12px;
}

.repeat-delete-field label { display: none; }

.repeat-delete-btn {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #dd4040;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.repeat-delete-btn:hover {
  background: #c83232;
}

.repeat-delete-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.repeat-delete-btn:disabled,
.repeat-delete-btn.is-disabled {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 1;
}

.repeat-delete-btn:disabled:hover,
.repeat-delete-btn.is-disabled:hover {
  background: #d1d5db;
}