:root {
  --body:#333; /* default */
  --muted:#666; /* field labels */
  --soft:#f8f8f8; /* cell backgrounds */
  --hover: #e0ffe0; /* cell background hover */
  --border-dark:#ccc;
  --border-light:#eee;

  --primary:#228822;
  --primary-dark:#1b6d1b;

  --primary-soft:#bddbbd;
  --primary-bg:#d4e8d4;

  --positive:#228822;
  --positive-dark:#1b6d1b;

  --negative:#ed0000;
  --negative-dark:#c00000;

  --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;
}

.nobr { white-space: nowrap; }

img {
  vertical-align:top;
}

input::placeholder { color: #999; }

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-dark);
}

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 {
  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: calc(100vh - 175px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

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

.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-dark);
  padding-bottom:20px;
  margin-bottom:20px;
}

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

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

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

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

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

.custom-table th, .custom-table td {
  padding:9px 12px;
  border-bottom:1px solid var(--border-light);
  text-align:left;
  vertical-align:top;
  line-height:1.3rem;
}

.custom-table th {
  background:var(--soft);
  color:var(--muted);
  font-size:0.85rem;
  line-height: 1.3rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.025em;
}

.custom-table tbody tr:last-child td, .custom-table tbody tr:last-child th {
  border-bottom:none;
}

.summary-label {
  width:220px;
}

.clickable-rows tbody td {
  cursor:pointer;
}

.clickable-rows tbody tr: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-dark);
  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: 0 0 0 4px rgba(28, 143, 35, 0.1);
border: 1px solid var(--primary);
}

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;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--body) !important;
    caret-color: var(--body);
}

.buttonLink {
    display: inline-block;
    margin-top: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
}
.buttonLink:hover { text-decoration: underline; } 

.smallLink { color: var(--primary); text-decoration: none; font-size: 0.85rem; }
.smallLink:hover { text-decoration: underline; }

.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;}

.loginDivider { display: flex; align-items: center; gap: 20px; margin: 13px 0; color: #666; }
.loginDivider::before, .loginDivider::after { content: ""; flex: 1; height: 1px; background: #ddd; }


/* =========================
   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:disabled { opacity: 0.45; cursor: not-allowed; }

.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-positive { background:var(--positive); color:#fff; }
.btn-positive:hover { background:var(--positive-dark); text-decoration:none; }
.btn-negative { background:var(--negative); color:#fff; }
.btn-negative:hover { background:var(--negative-dark); text-decoration:none; }

.btn-ghost { background:#fff; color:var(--body); border-color:var(--border-dark); }
.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-dark);
  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-dark);
  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-dark);
}

.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-section { padding:20px 0; border-top:1px solid var(--border-dark); }

.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.2rem;
display: block;
background: var(--border-dark);
padding: 9px 12px;
width: 100%;
border-radius: var(--radius-small);
}

.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;
}


/* =========================
   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-dark);
  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-dark);
  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,
  .form-grid-5,
  .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;
}


/* =========================
   CPD EDITING
========================= */

.is-hidden {
  display: none !important;
}

.cpd-summary p {
  margin-bottom: 8px;
}

.cpd-summary p:last-child {
  margin-bottom: 0;
}

.cpd-row {
  display: grid;
  gap: 16px;
}

.cpd-code-points-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 25px;
  gap: 16px;
  align-items: end;
}

.cpd-code-field {
  grid-column: 1;
}

.cpd-points-field {
  grid-column: 2;
}

.cpd-code-points-grid .repeat-delete-field {
  grid-column: 3;
}

@media (max-width: 768px) {
  .cpd-code-points-grid {
    grid-template-columns: 1fr 25px;
  }

  .cpd-code-field,
  .cpd-points-field {
    grid-column: 1;
  }

  .cpd-code-points-grid .repeat-delete-field {
    grid-column: 2;
    grid-row: 1;
  }
}