/*
 * NCC brand theme
 * Loaded after material-dashboard.css and site.css. Replaces the template's pink primary and
 * mixed gradients with the National Council for Construction palette (red + charcoal, as used
 * on www.ncc.org.zm) and tidies the shared shell: sidebar, top bar, cards, tables, forms.
 */

:root {
  --ncc-red: #d92d20;          /* statutory red: primary actions, active states; AA with white text */
  --ncc-red-bright: #f71c3d;   /* brand red from ncc.org.zm; accents, never small text on white */
  --ncc-red-dark: #b42318;     /* hover / pressed */
  --ncc-red-tint: #fef3f2;     /* soft backgrounds */
  --ncc-red-line: #fecdca;     /* border of red tints */
  --ncc-ink: #111827;          /* headings, dark surfaces */
  --ncc-charcoal: #2b3037;
  --ncc-text: #1f2937;
  --ncc-text-secondary: #4b5563;
  --ncc-muted: #6b7280;
  --ncc-line: #e5e7eb;
  --ncc-line-strong: #d1d5db;
  --ncc-surface: #f9fafb;
  --ncc-card: #ffffff;
  --ncc-radius: 8px;           /* cards and panels */
  --ncc-radius-sm: 4px;        /* buttons, inputs, alerts */
  --ncc-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --ncc-shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --ncc-shadow-lg: 0 20px 25px -5px rgba(16, 24, 40, 0.1), 0 8px 10px -6px rgba(16, 24, 40, 0.06);

  --bs-primary: var(--ncc-red);
  --bs-primary-rgb: 217, 45, 32;
  --bs-link-color: var(--ncc-red);
  --bs-link-color-rgb: 217, 45, 32;
  --bs-link-hover-color: var(--ncc-red-dark);
  --bs-link-hover-color-rgb: 180, 35, 24;
  --bs-dark: var(--ncc-ink);
  --bs-dark-rgb: 17, 24, 39;
  --bs-body-color: var(--ncc-text);
}

/* ---------- Base ---------- */

body {
  color: var(--ncc-text);
  background-color: var(--ncc-surface);
  -webkit-font-smoothing: antialiased;
}

body.bg-gray-100,
body.bg-light {
  background-color: var(--ncc-surface) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ncc-ink);
  letter-spacing: -0.01em;
}

a {
  color: var(--ncc-red);
}

a:hover {
  color: var(--ncc-red-dark);
}

::selection {
  background: var(--ncc-red-tint);
  color: var(--ncc-ink);
}

:focus-visible {
  outline: 2px solid var(--ncc-red);
  outline-offset: 2px;
}

/* ---------- Primary colour: pink -> NCC red ---------- */

.text-primary,
.text-rose {
  color: var(--ncc-red) !important;
}

.text-gradient.text-primary {
  background-image: linear-gradient(195deg, var(--ncc-red-bright), var(--ncc-red-dark));
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--ncc-red) !important;
}

.bg-gradient-primary,
.card.card-background.card-background-mask-primary:after,
.pagination.pagination-primary .page-item.active > .page-link,
.pagination.pagination-primary .page-item.active > .page-link:focus,
.pagination.pagination-primary .page-item.active > .page-link:hover {
  background-image: linear-gradient(195deg, var(--ncc-red-bright) 0%, var(--ncc-red) 100%);
}

.border-primary {
  border-color: var(--ncc-red) !important;
}

.shadow-primary {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 0 7px 10px -5px rgba(217, 45, 32, 0.35) !important;
}

.btn-primary,
.btn.bg-gradient-primary {
  --bs-btn-bg: var(--ncc-red);
  --bs-btn-border-color: var(--ncc-red);
  --bs-btn-hover-bg: var(--ncc-red-dark);
  --bs-btn-hover-border-color: var(--ncc-red-dark);
  --bs-btn-active-bg: var(--ncc-red-dark);
  --bs-btn-active-border-color: var(--ncc-red-dark);
  --bs-btn-disabled-bg: var(--ncc-red);
  --bs-btn-disabled-border-color: var(--ncc-red);
  color: #fff;
  background-color: var(--ncc-red);
  border-color: var(--ncc-red);
  box-shadow: 0 1px 2px rgba(217, 45, 32, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn.bg-gradient-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--ncc-red-dark);
  border-color: var(--ncc-red-dark);
  box-shadow: 0 6px 14px -6px rgba(217, 45, 32, 0.5);
}

.btn-outline-primary {
  --bs-btn-color: var(--ncc-red);
  --bs-btn-border-color: var(--ncc-red);
  --bs-btn-hover-bg: var(--ncc-red);
  --bs-btn-hover-border-color: var(--ncc-red);
  --bs-btn-active-bg: var(--ncc-red);
  --bs-btn-active-border-color: var(--ncc-red);
  --bs-btn-focus-shadow-rgb: 217, 45, 32;
  color: var(--ncc-red);
  border-color: var(--ncc-red);
}

.btn-outline-primary:hover:not(.active) {
  color: var(--ncc-red-dark);
  background-color: var(--ncc-red-tint);
  border-color: var(--ncc-red-dark);
}

.btn-link {
  --bs-btn-color: var(--ncc-red);
  --bs-btn-hover-color: var(--ncc-red-dark);
  --bs-btn-active-color: var(--ncc-red-dark);
}

.pagination {
  --bs-pagination-color: var(--ncc-red);
  --bs-pagination-hover-color: var(--ncc-red-dark);
  --bs-pagination-focus-color: var(--ncc-red-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(217, 45, 32, 0.2);
  --bs-pagination-active-bg: var(--ncc-red);
  --bs-pagination-active-border-color: var(--ncc-red);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--ncc-red);
}

.list-group {
  --bs-list-group-active-bg: var(--ncc-red);
  --bs-list-group-active-border-color: var(--ncc-red);
}

.form-check-input:checked[type=checkbox],
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: linear-gradient(195deg, var(--ncc-red-bright) 0%, var(--ncc-red) 100%);
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked,
.form-check:not(.form-switch) .form-check-input[type=radio]:checked,
.form-check-input[type=checkbox]:indeterminate {
  border-color: var(--ncc-red);
}

.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked,
.form-check-input[type=checkbox]:indeterminate {
  background: var(--ncc-red);
}

.form-check:not(.form-switch) .form-check-input[type=radio]:after {
  background-image: linear-gradient(195deg, var(--ncc-red-bright) 0%, var(--ncc-red) 100%);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--ncc-red);
}

.form-range::-moz-range-thumb {
  background-color: var(--ncc-red);
}

.input-group.input-group-dynamic .form-control,
.input-group.input-group-dynamic .form-control:focus,
.input-group.input-group-static .form-control,
.input-group.input-group-static .form-control:focus {
  background-image: linear-gradient(0deg, var(--ncc-red) 2px, rgba(217, 45, 32, 0) 0), linear-gradient(0deg, #d2d2d2 1px, hsla(0, 0%, 82%, 0) 0);
}

.input-group.input-group-dynamic.is-focused label,
.input-group.input-group-static.is-focused label,
.input-group.input-group-outline.is-focused .form-label {
  color: var(--ncc-red);
}

.input-group.input-group-outline.is-focused .form-label + .form-control {
  border-color: var(--ncc-red) !important;
  box-shadow: inset 1px 0 var(--ncc-red), inset -1px 0 var(--ncc-red), inset 0 -1px var(--ncc-red);
}

.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after {
  border-top-color: var(--ncc-red);
  box-shadow: inset 0 1px var(--ncc-red);
}

/* A filled (but not focused) field goes back to neutral instead of staying highlighted */
.input-group.input-group-outline.is-filled:not(.is-focused) .form-label {
  color: var(--ncc-muted);
}

.input-group.input-group-outline.is-filled:not(.is-focused) .form-label + .form-control {
  border-color: #c9ced6 !important;
  box-shadow: inset 1px 0 #c9ced6, inset -1px 0 #c9ced6, inset 0 -1px #c9ced6;
}

.input-group.input-group-outline.is-filled:not(.is-focused) .form-label:before,
.input-group.input-group-outline.is-filled:not(.is-focused) .form-label:after {
  border-top-color: #c9ced6;
  box-shadow: inset 0 1px #c9ced6;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ncc-red);
  box-shadow: 0 0 0 0.2rem rgba(217, 45, 32, 0.12);
}

.nav-link:focus-visible,
.btn-close:focus {
  box-shadow: 0 0 0 0.2rem rgba(217, 45, 32, 0.2);
}

.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
  background: var(--ncc-red) !important;
}

.nav.nav-pills.nav-pills-primary .moving-tab .nav-link.active {
  background: var(--ncc-red);
  color: var(--ncc-red);
}

/* ---------- Dark surfaces: template gradient -> NCC charcoal ---------- */

.bg-gradient-dark {
  background-image: linear-gradient(195deg, var(--ncc-charcoal) 0%, var(--ncc-ink) 100%);
}

.btn.bg-gradient-dark,
.btn-dark {
  color: #fff;
  background-color: var(--ncc-ink);
  border-color: var(--ncc-ink);
}

.btn.bg-gradient-dark:hover,
.btn-dark:hover {
  color: #fff;
  background-color: #000;
}

.shadow-dark {
  box-shadow: 0 4px 16px -6px rgba(27, 31, 36, 0.45) !important;
}

/* ---------- Shared components ---------- */

.btn {
  border-radius: var(--ncc-radius-sm);
  font-weight: 600;
  letter-spacing: 0;
}

.card {
  border: 1px solid var(--ncc-line);
  border-radius: var(--ncc-radius);
  box-shadow: var(--ncc-shadow);
}

.modal-content {
  border: 0;
  border-radius: var(--ncc-radius);
  box-shadow: var(--ncc-shadow-lg);
}

.badge {
  border-radius: 999px;
  font-weight: 600;
}

.table > thead > tr > th,
.table thead th {
  color: var(--ncc-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: #fafbfc;
  border-bottom: 1px solid var(--ncc-line);
}

.table > thead > tr > th a,
.table thead th a {
  color: var(--ncc-ink);
}

.table > :not(caption) > * > * {
  border-color: var(--ncc-line);
}

.table tbody tr:hover > * {
  background-color: #fafbfc;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-item.active {
  color: var(--ncc-ink);
  font-weight: 600;
}

.alert {
  border-radius: var(--ncc-radius-sm);
}

/* ---------- Sidebar ---------- */

.sidenav.bg-white {
  border: 1px solid var(--ncc-line);
  box-shadow: var(--ncc-shadow);
}

.sidenav .sidenav-header {
  height: auto;
}

.sidenav .navbar-brand {
  display: block;
  padding: 1.1rem 1.25rem 0.9rem !important;
}

.sidenav .navbar-brand-img {
  width: 100%;
  max-width: 190px;
  height: auto !important;
  max-height: none !important;
}

.sidenav .navbar-nav .nav-link {
  border-radius: var(--ncc-radius-sm);
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidenav .navbar-nav .nav-link:not(.active):hover {
  background-color: var(--ncc-surface);
}

.sidenav .navbar-nav .nav-link.active {
  color: #fff !important;
  background-image: none !important;
  background-color: var(--ncc-red) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.sidenav .navbar-nav .nav-link.active .material-symbols-rounded {
  opacity: 1 !important;
}

.sidenav .sidenav-footer {
  padding-bottom: 0.75rem;
  background: linear-gradient(to top, #fff 75%, rgba(255, 255, 255, 0));
}

.sidenav .sidenav-footer .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  text-transform: none;
}

.sidenav .sidenav-footer .btn-outline-info {
  color: var(--ncc-ink);
  border-color: var(--ncc-line);
  background: #fff;
}

.sidenav .sidenav-footer .btn-outline-info:hover {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
  border-color: #c9ced6;
}

.sidenav .sidenav-footer .btn-outline-danger {
  color: var(--ncc-red);
  border-color: transparent;
  background: var(--ncc-red-tint);
}

.sidenav .sidenav-footer .btn-outline-danger:hover {
  color: #fff;
  background: var(--ncc-red);
}

/* ---------- Top bar and footer ---------- */

.navbar-main {
  border: 1px solid var(--ncc-line);
  border-radius: var(--ncc-radius) !important;
  box-shadow: var(--ncc-shadow) !important;
}

.navbar-main .breadcrumb {
  background: transparent !important;
}

.navbar-main .breadcrumb a {
  color: var(--ncc-muted);
  opacity: 1 !important;
}

.navbar-main .breadcrumb a:hover {
  color: var(--ncc-red);
}

footer.footer.bg-light {
  margin-top: 2rem;
  background-color: transparent !important;
  border-top: 1px solid var(--ncc-line);
  border-radius: 0 !important;
  box-shadow: none !important;
}

footer.footer h6 {
  font-size: 0.95rem;
}

footer.footer p {
  font-size: 0.875rem;
  color: var(--ncc-muted);
}

/* ---------- Page titles: one scale inside the app shell ---------- */

.main-content h1,
.main-content .h1 {
  font-size: 1.625rem;
  font-weight: 700;
}

.main-content h2,
.main-content .h2 {
  font-size: 1.375rem;
  font-weight: 700;
}

.main-content h3,
.main-content .h3 {
  font-size: 1.2rem;
}

.main-content h4,
.main-content .h4 {
  font-size: 1.1rem;
}

/* ---------- Status colours: readable, soft pills instead of white-on-bright ---------- */

:root {
  --ncc-green: #027a48;
  --ncc-green-dark: #05603a;
  --ncc-green-tint: #ecfdf5;
  --ncc-green-line: #a6f4c5;
  --ncc-amber: #b54708;
  --ncc-amber-tint: #fffaeb;
  --ncc-amber-line: #fedf89;
  --ncc-blue: #175cd3;      /* information: in progress, advisory */
  --ncc-blue-tint: #eff8ff;
  --ncc-blue-line: #b2ddff;
  --ncc-grey-tint: #f3f4f6;
}

.main-content .badge.bg-success,
.main-content .badge.bg-gradient-success {
  color: var(--ncc-green-dark) !important;
  background: var(--ncc-green-tint) !important;
}

.main-content .badge.bg-warning,
.main-content .badge.bg-gradient-warning {
  color: var(--ncc-amber) !important;
  background: var(--ncc-amber-tint) !important;
}

.main-content .badge.bg-danger,
.main-content .badge.bg-gradient-danger,
.main-content .badge.bg-primary,
.main-content .badge.bg-gradient-primary {
  color: var(--ncc-red-dark) !important;
  background: var(--ncc-red-tint) !important;
}

.main-content .badge.bg-info,
.main-content .badge.bg-gradient-info {
  color: var(--ncc-blue) !important;
  background: var(--ncc-blue-tint) !important;
}

.main-content .badge.bg-secondary,
.main-content .badge.bg-gradient-secondary,
.main-content .badge.bg-light {
  color: #475467 !important;
  background: var(--ncc-grey-tint) !important;
}

.btn-success,
.btn.bg-gradient-success {
  --bs-btn-bg: var(--ncc-green);
  --bs-btn-border-color: var(--ncc-green);
  --bs-btn-hover-bg: var(--ncc-green-dark);
  --bs-btn-hover-border-color: var(--ncc-green-dark);
  --bs-btn-active-bg: var(--ncc-green-dark);
  --bs-btn-disabled-bg: var(--ncc-green);
  --bs-btn-disabled-border-color: var(--ncc-green);
  color: #fff;
  background-image: none;
  background-color: var(--ncc-green);
  border-color: var(--ncc-green);
  box-shadow: 0 1px 2px rgba(26, 127, 75, 0.25);
}

.btn-success:hover,
.btn-success:focus,
.btn.bg-gradient-success:hover {
  color: #fff;
  background-color: var(--ncc-green-dark);
  border-color: var(--ncc-green-dark);
  box-shadow: 0 6px 14px -6px rgba(26, 127, 75, 0.5);
}

.btn-outline-success {
  --bs-btn-color: var(--ncc-green);
  --bs-btn-border-color: var(--ncc-green);
  --bs-btn-hover-bg: var(--ncc-green);
  --bs-btn-hover-border-color: var(--ncc-green);
  color: var(--ncc-green);
  border-color: var(--ncc-green);
}

.text-success {
  color: var(--ncc-green) !important;
}

.btn-warning,
.btn.bg-gradient-warning {
  color: #fff;
  background-image: none;
  background-color: #b45309;
  border-color: #b45309;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25);
}

.btn-warning:hover,
.btn-warning:focus,
.btn.bg-gradient-warning:hover {
  color: #fff;
  background-color: #92400e;
  border-color: #92400e;
}

.border-warning {
  border-color: #f2c46d !important;
}

/*
 * Tinted panels: views ask for a 10% tint (bg-* + bg-opacity-10) but the template forces the
 * solid colour, which left white text on bright orange/green. Render the intended soft tint.
 */
.bg-warning.bg-opacity-10 {
  background-color: var(--ncc-amber-tint) !important;
}

.bg-success.bg-opacity-10 {
  background-color: var(--ncc-green-tint) !important;
}

.bg-info.bg-opacity-10 {
  background-color: var(--ncc-blue-tint) !important;
}

.bg-primary.bg-opacity-10,
.bg-danger.bg-opacity-10 {
  background-color: var(--ncc-red-tint) !important;
}

.bg-secondary.bg-opacity-10,
.bg-dark.bg-opacity-10 {
  background-color: var(--ncc-grey-tint) !important;
}

.bg-warning.bg-opacity-10 .text-white {
  color: var(--ncc-amber) !important;
}

.bg-success.bg-opacity-10 .text-white {
  color: var(--ncc-green-dark) !important;
}

.bg-info.bg-opacity-10 .text-white {
  color: var(--ncc-blue) !important;
}

.bg-primary.bg-opacity-10 .text-white,
.bg-danger.bg-opacity-10 .text-white {
  color: var(--ncc-red-dark) !important;
}

.bg-secondary.bg-opacity-10 .text-white,
.bg-dark.bg-opacity-10 .text-white {
  color: var(--ncc-ink) !important;
}

/* Headings keep their white text on dark or coloured surfaces */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-gradient-dark h1, .bg-gradient-dark h2, .bg-gradient-dark h3, .bg-gradient-dark h4, .bg-gradient-dark h5, .bg-gradient-dark h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 {
  color: #fff;
}

/*
 * Section headers inside pages: the template's solid red/green/blue bars become a quiet
 * header with a coloured marker, so a page with several sections no longer looks like a flag.
 */
.main-content .card > .card-header[class*="bg-"]:not(.bg-opacity-10):not(.bg-white):not(.bg-light):not(.bg-transparent) {
  color: var(--ncc-ink) !important;
  background: #fafbfc !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ncc-line);
  box-shadow: inset 4px 0 0 var(--ncc-muted);
}

.main-content .card > .card-header.bg-primary,
.main-content .card > .card-header.bg-gradient-primary,
.main-content .card > .card-header.bg-danger,
.main-content .card > .card-header.bg-gradient-danger {
  box-shadow: inset 4px 0 0 var(--ncc-red) !important;
}

.main-content .card > .card-header.bg-success,
.main-content .card > .card-header.bg-gradient-success {
  box-shadow: inset 4px 0 0 var(--ncc-green) !important;
}

.main-content .card > .card-header.bg-info,
.main-content .card > .card-header.bg-gradient-info {
  box-shadow: inset 4px 0 0 var(--ncc-blue) !important;
}

.main-content .card > .card-header.bg-warning,
.main-content .card > .card-header.bg-gradient-warning {
  box-shadow: inset 4px 0 0 #d97706 !important;
}

.main-content .card > .card-header.bg-dark,
.main-content .card > .card-header.bg-gradient-dark {
  box-shadow: inset 4px 0 0 var(--ncc-ink) !important;
}

.main-content .card > .card-header[class*="bg-"]:not(.bg-opacity-10):not(.bg-white):not(.bg-light):not(.bg-transparent) :is(h1, h2, h3, h4, h5, h6, p, span, small, i, a, .text-white) {
  color: var(--ncc-ink) !important;
}

/* ---------- Dashboards (client, employee, admin): shared action buttons ---------- */

body .dash-action,
body .employee-dash .dash-action {
  color: var(--ncc-ink);
  background: #fff;
  border-color: var(--ncc-line);
  border-radius: var(--ncc-radius-sm);
  box-shadow: var(--ncc-shadow);
}

body .dash-action:hover,
body .employee-dash .dash-action:hover {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
  border-color: #c9ced6;
}

body .dash-action .material-symbols-rounded {
  color: var(--ncc-red);
}

body .dash-action-primary,
body .dash-action-primary:hover,
body .employee-dash .dash-action-primary,
body .employee-dash .dash-action-primary:hover {
  color: #fff;
  border-color: var(--ncc-red);
  background: var(--ncc-red);
}

body .dash-action-primary:hover,
body .employee-dash .dash-action-primary:hover {
  border-color: var(--ncc-red-dark);
  background: var(--ncc-red-dark);
}

body .dash-action-primary .material-symbols-rounded {
  color: #fff;
}

body .dash-btn-link {
  color: var(--ncc-ink);
  background: #fff;
  border-color: var(--ncc-line);
}

body .dash-btn-link:hover {
  color: var(--ncc-red);
  background: #fff;
  border-color: var(--ncc-red);
}

/* ---------- Application forms: progress indicator and button hierarchy ---------- */

.ncc-steps {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem 1.1rem;
  background: #fff;
  border: 1px solid var(--ncc-line);
  border-radius: var(--ncc-radius);
  box-shadow: var(--ncc-shadow);
}

.ncc-steps__count {
  margin: 0 0 0.85rem;
  color: var(--ncc-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ncc-steps__count span {
  color: var(--ncc-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ncc-steps__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.ncc-steps__item {
  position: relative;
  flex: 1 0 4.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ncc-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* connector to the previous step */
.ncc-steps__item + .ncc-steps__item::before {
  content: "";
  position: absolute;
  top: 13px;
  right: calc(50% + 17px);
  left: calc(-50% + 17px);
  height: 2px;
  background: var(--ncc-line);
}

.ncc-steps__item--done + .ncc-steps__item::before {
  background: var(--ncc-green);
}

.ncc-steps__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ncc-muted);
  font-size: 0.75rem;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--ncc-line);
  border-radius: 50%;
}

.ncc-steps__dot .material-symbols-rounded {
  font-size: 16px;
}

.ncc-steps__item--done .ncc-steps__dot {
  color: #fff;
  background: var(--ncc-green);
  border-color: var(--ncc-green);
}

.ncc-steps__item--current {
  color: var(--ncc-ink);
  font-weight: 700;
}

.ncc-steps__item--current .ncc-steps__dot {
  color: #fff;
  background: var(--ncc-red);
  border-color: var(--ncc-red);
  box-shadow: 0 0 0 4px var(--ncc-red-tint);
}

.main-content h1.text-dark-blue,
.main-content h2.text-dark-blue {
  color: var(--ncc-ink) !important;
}

/* One hierarchy for form buttons: red moves forward, neutral goes back, ink adds */
.btn-dark-blue {
  color: #fff;
  background-image: none;
  background-color: var(--ncc-ink);
  border-color: var(--ncc-ink);
  box-shadow: none;
}

.btn-dark-blue:hover,
.btn-dark-blue:focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.btn-outline-dark-blue {
  color: var(--ncc-ink);
  background: #fff;
  border-color: #c9ced6;
}

.btn-outline-dark-blue:hover:not(.active) {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
  border-color: var(--ncc-ink);
}

.btn-info,
.btn.bg-gradient-info {
  color: #fff;
  background-image: none;
  background-color: var(--ncc-blue);
  border-color: var(--ncc-blue);
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.25);
}

.btn-info:hover,
.btn-info:focus,
.btn.bg-gradient-info:hover {
  color: #fff;
  background-color: #1e40af;
  border-color: #1e40af;
}

.main-content button[name="action"][value="prev"] {
  color: var(--ncc-ink);
  background: #fff;
  border: 1px solid #c9ced6;
  box-shadow: none;
}

.main-content button[name="action"][value="prev"]:hover {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
  border-color: var(--ncc-ink);
}

.main-content button[name="action"][value="next"],
.main-content button[name="action"][value="submit"] {
  color: #fff;
  background-image: none;
  background-color: var(--ncc-red);
  border-color: var(--ncc-red);
  box-shadow: 0 1px 2px rgba(217, 45, 32, 0.25);
}

.main-content button[name="action"][value="next"]:hover,
.main-content button[name="action"][value="submit"]:hover {
  color: #fff;
  background-color: var(--ncc-red-dark);
  border-color: var(--ncc-red-dark);
}

.main-content .form-group.d-flex.justify-content-between {
  gap: 0.75rem;
}

/* Section banner at the top of each form step */
.main-content .card-header > .bg-gradient-dark {
  border-radius: var(--ncc-radius-sm) !important;
  box-shadow: inset 4px 0 0 var(--ncc-red-bright) !important;
}

/* ---------- Compact help line in the page footer ---------- */

.ncc-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  color: var(--ncc-muted);
  font-size: 0.875rem;
  background: #fff;
  border: 1px solid var(--ncc-line);
  border-radius: var(--ncc-radius-sm);
}

.ncc-help strong {
  color: var(--ncc-ink);
}

.ncc-help a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.ncc-help .material-symbols-rounded {
  font-size: 18px;
}

/* ---------- Admin dashboard: bring page-specific colours into the palette ---------- */

body .admin-dash .dash-action {
  color: var(--ncc-ink);
  background: #fff;
  border-color: var(--ncc-line);
  border-radius: var(--ncc-radius-sm);
}

body .admin-dash .dash-action:hover {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
  border-color: #c9ced6;
}

body .admin-dash .dash-action-primary {
  color: #fff;
  background: var(--ncc-red);
  border-color: var(--ncc-red);
}

body .admin-dash .dash-action-primary:hover {
  color: #fff;
  background: var(--ncc-red-dark);
  border-color: var(--ncc-red-dark);
}

body .admin-dash-hero {
  background: #fff;
  border-color: var(--ncc-line);
  border-radius: var(--ncc-radius);
}

/* ---------- Public pages (certificate verification) ---------- */

.ncc-public-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-bottom: 3px solid var(--ncc-red-bright);
}

.ncc-public-bar img {
  height: 40px;
  width: auto;
}

.ncc-public-bar a.ncc-public-bar__link {
  color: var(--ncc-ink);
  font-weight: 600;
  font-size: 0.875rem;
}

.ncc-public-bar a.ncc-public-bar__link:hover {
  color: var(--ncc-red);
}

.ncc-public-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--ncc-red);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ncc-public-title {
  margin: 0 0 0.75rem;
  color: var(--ncc-ink);
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.certificate-verify-page .lead {
  font-size: 1rem;
}

.certificate-verify-page .card.shadow {
  box-shadow: var(--ncc-shadow-lg) !important;
}

.certificate-verify-page .text-primary {
  color: var(--ncc-ink) !important;
}

/* ---------- Account pages (login, sign-up, verification, password reset) ---------- */

.ncc-auth {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  min-height: 100vh;
  background: #fff;
}

.ncc-auth__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.75rem 3rem;
  color: #fff;
  background-color: var(--ncc-ink);
  /* blueprint grid, a nod to construction drawings */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    radial-gradient(900px circle at 0% 100%, rgba(247, 28, 61, 0.22), transparent 60%);
  background-size: 32px 32px, 32px 32px, auto;
  overflow: hidden;
}

.ncc-auth__brand::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--ncc-red-bright);
}

.ncc-auth__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: #fff;
  text-decoration: none;
}

.ncc-auth__logo:hover {
  color: #fff;
}

.ncc-auth__logo img {
  width: 64px;
  height: 64px;
  padding: 4px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
}

.ncc-auth__logo span {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ncc-auth__eyebrow {
  margin: 0 0 1rem;
  color: #ff8a9b;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ncc-auth__brand h1 {
  max-width: 15em;
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ncc-auth__lead {
  max-width: 32em;
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.6;
}

.ncc-auth__points {
  display: grid;
  gap: 1rem;
  max-width: 32em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ncc-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.925rem;
  line-height: 1.45;
}

.ncc-auth__points .material-symbols-rounded {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}

.ncc-auth__points strong {
  display: block;
  color: #fff;
  font-weight: 600;
}

.ncc-auth__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
}

.ncc-auth__foot a {
  color: rgba(255, 255, 255, 0.85);
}

.ncc-auth__foot a:hover {
  color: #fff;
}

.ncc-auth__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 2.5rem 1.5rem;
}

.ncc-auth__mobile-logo {
  display: none;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 1.5rem;
}

.ncc-auth__mobile-logo img {
  width: 100%;
  height: auto;
}

/* The account views still carry the old template wrapper; flatten it inside the new shell */
.ncc-auth__main .page-header {
  display: block;
  min-height: 0 !important;
  background-image: none !important;
}

.ncc-auth__main .page-header > .mask,
.ncc-auth__main .page-header > footer,
.ncc-auth__main .page-header footer.footer,
.ncc-auth__main .card-header img {
  display: none !important;
}

.ncc-auth__main .page-header > .container {
  width: 100%;
  max-width: 460px;
  margin: 0 auto !important;
  padding: 0;
}

.ncc-auth__main .page-header > .container > .row {
  margin: 0;
}

.ncc-auth__main .page-header > .container > .row > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.ncc-auth__main .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.ncc-auth__main .card-header {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}

.ncc-auth__main .card-header > div {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.ncc-auth__main .card-header .row {
  display: none;
}

.ncc-auth__main .card-header h4,
.ncc-auth__main .card-header h3,
.ncc-auth__main .card-header h5 {
  margin: 0 0 0.35rem !important;
  color: var(--ncc-ink) !important;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left !important;
}

.ncc-auth__main .card-header p {
  color: var(--ncc-muted) !important;
  text-align: left !important;
}

.ncc-auth__main .card-body {
  padding: 1rem 0 0;
}

/* Intro sentence under the heading lines up with it */
.ncc-auth__main .card-body > p:first-child {
  color: var(--ncc-muted);
  text-align: left !important;
}

.ncc-auth__main .form-control {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.ncc-auth__main .btn.bg-gradient-dark,
.ncc-auth__main .btn.bg-gradient-primary {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  text-transform: none;
  background-image: none;
  background-color: var(--ncc-red);
  border-color: var(--ncc-red);
  box-shadow: 0 1px 2px rgba(217, 45, 32, 0.25);
}

.ncc-auth__main .btn.bg-gradient-dark:hover,
.ncc-auth__main .btn.bg-gradient-primary:hover {
  background-color: var(--ncc-red-dark);
  border-color: var(--ncc-red-dark);
  box-shadow: 0 8px 18px -8px rgba(217, 45, 32, 0.55);
}

.ncc-auth__main .text-gradient.text-primary {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ncc-red) !important;
}

.ncc-auth__main .btn-outline-primary,
.ncc-auth__main .btn-outline-success {
  color: var(--ncc-ink);
  background: #fff;
  border-color: var(--ncc-line);
  text-transform: none;
}

.ncc-auth__main .btn-outline-primary:hover,
.ncc-auth__main .btn-outline-success:hover {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
  border-color: #c9ced6;
}

.ncc-auth__main hr {
  border-color: var(--ncc-line);
  opacity: 1;
}

@media (max-width: 991.98px) {
  .ncc-auth {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncc-auth__brand {
    display: none;
  }

  .ncc-auth__main {
    justify-content: flex-start;
    padding: 2rem 1.25rem 2.5rem;
    border-top: 4px solid var(--ncc-red-bright);
  }

  .ncc-auth__mobile-logo {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Phase 5: one colour language on every page ----------
 * Information is blue, success green, attention amber, problems and primary actions red.
 * Page-level purples and bright blues are mapped onto these (see also the variables below,
 * which the page styles now use instead of their own hex values).
 */

:root {
  --ncc-info: var(--ncc-blue);
  --ncc-info-tint: var(--ncc-blue-tint);
  --bs-info: #175cd3;
  --bs-info-rgb: 23, 92, 211;
  --bs-success: #027a48;
  --bs-success-rgb: 2, 122, 72;
}

.text-info { color: var(--ncc-blue) !important; }
.text-success { color: var(--ncc-green) !important; }
.text-warning { color: var(--ncc-amber) !important; }
.text-danger { color: var(--ncc-red) !important; }

/* Alerts: a soft surface with a coloured edge, dark readable text */
.alert {
  border: 1px solid var(--ncc-line);
  border-left-width: 4px;
  box-shadow: none;
  color: var(--ncc-text);
}
.alert-info, .alert.bg-info {
  background: var(--ncc-blue-tint) !important;
  border-left-color: var(--ncc-blue) !important;
  color: #17324d !important;
}
.alert-success, .alert.bg-success {
  background: var(--ncc-green-tint) !important;
  border-left-color: var(--ncc-green) !important;
  color: #11452b !important;
}
.alert-warning, .alert.bg-warning {
  background: #fffaeb !important;
  border-left-color: #d97706 !important;
  color: #6b3d00 !important;
}
.alert-danger, .alert.bg-danger, .alert-primary {
  background: var(--ncc-red-tint) !important;
  border-left-color: var(--ncc-red) !important;
  color: #7a0a19 !important;
}
.alert-secondary, .alert-light {
  background: #f8f9fb !important;
  border-left-color: #98a2b3 !important;
  color: var(--ncc-text) !important;
}
.alert .alert-heading, .alert h4, .alert h5, .alert h6, .alert strong, .alert b {
  color: inherit;
}
.alert.text-white, .alert .text-white {
  color: inherit !important;
}

/* Small summary tiles (totals, counts) */
.main-content .card.bg-light {
  background: #f8f9fb !important;
  border: 1px solid var(--ncc-line) !important;
  box-shadow: none !important;
}
.main-content .card.bg-light .card-title {
  color: var(--ncc-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Table rows highlighted with Bootstrap's coloured row classes */
.table-primary > *, .table-info > * { --bs-table-bg: var(--ncc-blue-tint); --bs-table-color: var(--ncc-ink); }
.table-success > * { --bs-table-bg: var(--ncc-green-tint); }
.table-warning > * { --bs-table-bg: #fffaeb; }
.table-danger > * { --bs-table-bg: var(--ncc-red-tint); }

/* Information buttons and outlines */
.btn-info, .btn.bg-gradient-info {
  color: #fff !important;
  background-image: none !important;
  background-color: var(--ncc-blue) !important;
  border-color: var(--ncc-blue) !important;
}
.btn-outline-info {
  color: var(--ncc-blue) !important;
  border-color: var(--ncc-blue) !important;
}
.btn-outline-info:hover {
  color: #fff !important;
  background: var(--ncc-blue) !important;
}
.btn-outline-primary {
  color: var(--ncc-red) !important;
  border-color: var(--ncc-red) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background: var(--ncc-red) !important;
}
.btn-outline-success {
  color: var(--ncc-green) !important;
  border-color: var(--ncc-green) !important;
}
.btn-outline-success:hover {
  color: #fff !important;
  background: var(--ncc-green) !important;
}
.btn-outline-warning {
  color: var(--ncc-amber) !important;
  border-color: #d97706 !important;
}
.btn-outline-warning:hover {
  color: #fff !important;
  background: #d97706 !important;
}

/* Tabs */
.main-content .nav-tabs {
  border-bottom: 1px solid var(--ncc-line);
}
.main-content .nav-tabs .nav-link {
  color: var(--ncc-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-weight: 600;
}
.main-content .nav-tabs .nav-link:hover {
  color: var(--ncc-ink);
}
.main-content .nav-tabs .nav-link.active {
  color: var(--ncc-ink);
  border-bottom-color: var(--ncc-red);
  background: transparent;
}

/* Background utilities used as tinted panels */
.bg-info:not(.badge):not(.btn):not(.alert):not(.bg-opacity-10) {
  background-color: var(--ncc-blue) !important;
}
.bg-primary:not(.badge):not(.btn):not(.bg-opacity-10) {
  background-color: var(--ncc-red) !important;
}


/* Admin dashboard: small chart caption (the general h3 size above is for section titles) */
.main-content h3.admin-dash-trend__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ncc-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-dash-trend__bar {
  background: var(--ncc-red) !important;
  opacity: 0.85;
}

/* Timelines: quiet cards, the colour stays on the small icon only */
.timeline-event-wrapper[class*="border-"] {
  border: 1px solid var(--ncc-line) !important;
  border-left: 3px solid #d0d5dd !important;
  box-shadow: none !important;
  background: #fff;
}
.timeline-event-icon {
  box-shadow: none !important;
}

/* Striped tables: a whisper of grey, not a band */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-striped-bg: #fafbfc;
  --bs-table-accent-bg: #fafbfc;
}
.main-content .table-bordered > :not(caption) > * > * {
  border-color: var(--ncc-line);
}

/* ---------- "Institutional Trust" components (Stitch design system, 2026-10-01) ----------
 * Flat surfaces with crisp borders, 4px controls and 8px cards, three-part status pills
 * (tinted surface, border, dark text), 42px inputs with a red focus ring, uppercase table headers.
 */

/* Cards: white, 1px border, barely-there shadow */
.main-content .card {
  border: 1px solid var(--ncc-line);
  border-radius: var(--ncc-radius);
  box-shadow: var(--ncc-shadow);
}
.main-content .card > .card-header:first-child {
  border-radius: var(--ncc-radius) var(--ncc-radius) 0 0;
}

/* Buttons: 4px radius, 40px tall, no lifted shadows */
.main-content .btn,
.ncc-auth .btn {
  border-radius: var(--ncc-radius-sm);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.main-content .btn:not(.btn-sm):not(.btn-lg):not(.btn-link) {
  min-height: 40px;
}
.main-content .btn:hover,
.main-content .btn:focus {
  box-shadow: none;
}
.main-content .btn-outline-secondary,
.main-content .btn-outline-dark {
  --bs-btn-color: var(--ncc-ink);
  --bs-btn-border-color: var(--ncc-line-strong);
  --bs-btn-hover-color: var(--ncc-ink);
  --bs-btn-hover-bg: var(--ncc-surface);
  --bs-btn-hover-border-color: var(--ncc-line-strong);
  color: var(--ncc-ink);
  border-color: var(--ncc-line-strong);
  background: #fff;
}
.main-content .btn-outline-secondary:hover,
.main-content .btn-outline-dark:hover {
  color: var(--ncc-ink);
  background: var(--ncc-surface);
}
/* "Return / reject" style: red outline on a red tint */
.main-content .btn-outline-danger {
  --bs-btn-color: var(--ncc-red-dark);
  --bs-btn-border-color: var(--ncc-red-line);
  --bs-btn-hover-color: var(--ncc-red-dark);
  --bs-btn-hover-bg: #fee4e2;
  --bs-btn-hover-border-color: var(--ncc-red-line);
  color: var(--ncc-red-dark);
  border-color: var(--ncc-red-line);
  background: var(--ncc-red-tint);
}

/* Inputs and selects: 42px, strong border, red focus ring */
.main-content .form-control,
.main-content .form-select,
.ncc-auth .form-control {
  border: 1px solid var(--ncc-line-strong);
  border-radius: var(--ncc-radius-sm);
  background-color: #fff;
  color: var(--ncc-ink);
  font-size: 0.875rem;
}
.main-content input.form-control,
.main-content .form-select,
.ncc-auth input.form-control {
  min-height: 42px;
}
.main-content .form-control::placeholder,
.ncc-auth .form-control::placeholder {
  color: #9ca3af;
}
.main-content .form-control:focus,
.main-content .form-select:focus,
.ncc-auth .form-control:focus {
  border-color: var(--ncc-red);
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}
.main-content .form-control.is-invalid,
.main-content .has-error .form-control {
  border-color: var(--ncc-red);
}
.main-content .invalid-feedback,
.main-content .help-block-error {
  color: var(--ncc-red-dark);
}
.main-content .form-label,
.main-content .control-label {
  color: var(--ncc-text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Status pills: tinted surface, matching border, dark text */
.main-content .badge {
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.2em 0.65em;
}
.main-content .badge.bg-success,
.main-content .badge.bg-gradient-success { border-color: var(--ncc-green-line); }
.main-content .badge.bg-warning,
.main-content .badge.bg-gradient-warning { border-color: var(--ncc-amber-line); }
.main-content .badge.bg-danger,
.main-content .badge.bg-gradient-danger,
.main-content .badge.bg-primary,
.main-content .badge.bg-gradient-primary {
  color: var(--ncc-red-dark) !important;
  background: var(--ncc-red-tint) !important;
  border-color: var(--ncc-red-line);
}
.main-content .badge.bg-info,
.main-content .badge.bg-gradient-info { border-color: var(--ncc-blue-line); }
.main-content .badge.bg-secondary,
.main-content .badge.bg-gradient-secondary,
.main-content .badge.bg-light { border-color: var(--ncc-line); }

/* Alerts: tinted surface with a matching border */
.main-content .alert-success { border-color: var(--ncc-green-line) !important; }
.main-content .alert-warning { border-color: var(--ncc-amber-line) !important; }
.main-content .alert-danger { border-color: var(--ncc-red-line) !important; }
.main-content .alert-info { border-color: var(--ncc-blue-line) !important; }

/* Data tables: grey header strip with small uppercase labels, quiet row dividers */
.main-content .table > thead > tr > th,
.main-content .table thead th {
  color: var(--ncc-text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background-color: var(--ncc-surface);
  border-bottom: 1px solid var(--ncc-line);
}
.main-content .table > tbody > tr > * {
  border-bottom-color: #f3f4f6;
}
.main-content .table tbody tr:hover > * {
  background-color: var(--ncc-surface);
}

/* Tabs: red underline on the active tab */
.main-content .nav-tabs {
  border-bottom: 1px solid var(--ncc-line);
}
.main-content .nav-tabs .nav-link {
  color: var(--ncc-text-secondary);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
}
.main-content .nav-tabs .nav-link:hover {
  color: var(--ncc-ink);
  border-bottom-color: var(--ncc-line-strong);
}
.main-content .nav-tabs .nav-link.active {
  color: var(--ncc-ink);
  background: transparent;
  border-bottom-color: var(--ncc-red);
}

/* Small uppercase captions for metric tiles and labels */
.ncc-label {
  color: var(--ncc-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Contractor dashboard (Stitch "Contractor Dashboard") ---------- */
body .client-dash { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 2rem; }
body .client-dash > .card, body .client-dash section.card { margin: 0; }
.cd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.cd-title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ncc-ink); }
.cd-sub { margin: 4px 0 0; color: var(--ncc-text-secondary); font-size: 0.9rem; }
.cd-head-side { display: flex; align-items: center; gap: 0.75rem; }
.cd-date { display: inline-flex; align-items: center; gap: 4px; color: var(--ncc-muted); font-size: 0.85rem; }
.cd-date .material-symbols-rounded, .cd-head-side .btn .material-symbols-rounded { font-size: 16px; }
.cd-h2 { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 600; color: var(--ncc-ink); }
.cd-h2 .material-symbols-rounded { font-size: 20px; color: var(--ncc-muted); }

/* Alerts: tinted surface, matching border, coloured left edge */
body .client-dash .dash-alert {
  margin: 0; border-radius: var(--ncc-radius); border: 1px solid var(--ncc-line); border-left-width: 4px; padding: 14px 16px;
}
body .client-dash .dash-alert strong { color: var(--ncc-ink); }
body .client-dash .dash-alert-danger { background: var(--ncc-red-tint); border-color: var(--ncc-red-line); border-left-color: var(--ncc-red); }
body .client-dash .dash-alert-danger .material-symbols-rounded, body .client-dash .dash-alert-danger .dash-alert-link { color: var(--ncc-red-dark); }
body .client-dash .dash-alert-warning { background: var(--ncc-amber-tint); border-color: var(--ncc-amber-line); border-left-color: var(--ncc-amber); }
body .client-dash .dash-alert-info { background: var(--ncc-blue-tint); border-color: var(--ncc-blue-line); border-left-color: var(--ncc-blue); }
body .client-dash .dash-alert-success { background: var(--ncc-green-tint); border-color: var(--ncc-green-line); border-left-color: var(--ncc-green); }
body .client-dash .dash-alert-link { font-weight: 600; }

/* Action tiles */
.cd-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cd-action {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 128px; background: #fff;
  border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow);
  color: var(--ncc-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.cd-action:hover { border-color: var(--ncc-line-strong); box-shadow: var(--ncc-shadow-md); color: var(--ncc-ink); }
.cd-action__icon { width: 36px; height: 36px; border-radius: var(--ncc-radius-sm); display: grid; place-items: center;
  background: var(--ncc-surface); border: 1px solid var(--ncc-line); font-size: 20px; color: var(--ncc-ink); }
.cd-action__title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.95rem; margin-top: 4px; }
.cd-action__arrow { font-size: 18px; color: var(--ncc-muted); transition: transform .15s; }
.cd-action:hover .cd-action__arrow { transform: translateX(2px); color: var(--ncc-ink); }
.cd-action__text { font-size: 0.8125rem; color: var(--ncc-text-secondary); line-height: 1.4; }
.cd-action.is-primary { border-color: var(--ncc-red-line); background: var(--ncc-red-tint); }
.cd-action.is-primary .cd-action__icon { background: var(--ncc-red); border-color: var(--ncc-red); color: #fff; }
.cd-action.is-primary:hover { border-color: var(--ncc-red); }
.cd-action.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Figures */
.cd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cd-kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; color: var(--ncc-ink);
  border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow); text-decoration: none;
}
a.cd-kpi:hover { border-color: var(--ncc-line-strong); color: var(--ncc-ink); }
.cd-kpi .material-symbols-rounded { font-size: 20px; }
.cd-kpi__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
.cd-kpi__meta { font-size: 0.8125rem; color: var(--ncc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-kpi.is-attention { border-color: var(--ncc-amber-line); background: var(--ncc-amber-tint); }

/* Progress tracker */
.cd-track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cd-track__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; }
.cd-track__step::before {
  content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--ncc-line); z-index: 0;
}
.cd-track__step:first-child::before { display: none; }
.cd-track__step.is-done::before,
.cd-track__step.is-current::before,
.cd-track__step.is-partial::before { background: var(--ncc-green); }
.cd-track__dot {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ncc-line); color: var(--ncc-text-secondary); font-size: 0.8125rem; font-weight: 700;
}
.cd-track__dot .material-symbols-rounded { font-size: 18px; }
.cd-track__step.is-done .cd-track__dot { background: var(--ncc-green); color: #fff; }
.cd-track__step.is-current .cd-track__dot { background: #fff; color: var(--ncc-red); box-shadow: 0 0 0 2px var(--ncc-red); }
.cd-track__step.is-partial .cd-track__dot { background: var(--ncc-amber); color: #fff; }
.cd-track__label { font-size: 0.8125rem; font-weight: 600; color: var(--ncc-ink); }
.cd-track__step.is-todo .cd-track__label { color: var(--ncc-muted); font-weight: 500; }
.cd-track__step.is-partial .cd-track__label { color: var(--ncc-amber); }
.cd-track__state { font-size: 0.75rem; color: var(--ncc-muted); }
.cd-track__step.is-done .cd-track__state { color: var(--ncc-green-dark); }
.cd-track__step.is-current .cd-track__state { color: var(--ncc-red-dark); font-weight: 600; }
.cd-track__step.is-partial .cd-track__state { color: var(--ncc-amber); font-weight: 600; }

/* Notifications, projects, account */
.cd-notice { padding: 10px 0 10px 12px; border-left: 2px solid var(--ncc-line); margin-bottom: 6px; }
.cd-notice.is-unread { border-left-color: var(--ncc-red); }
.cd-project {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; text-decoration: none;
  border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow); height: 100%;
}
.cd-project:hover { border-color: var(--ncc-line-strong); }
.cd-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 1rem; border-top: 1px solid var(--ncc-line); }
.cd-account a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; font-weight: 500; color: var(--ncc-text-secondary); }
.cd-account a:hover { color: var(--ncc-ink); }
.cd-account .material-symbols-rounded { font-size: 18px; }

@media (max-width: 991.98px) {
  .cd-actions, .cd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .cd-actions { grid-template-columns: 1fr; }
  .cd-action { min-height: 0; }
  .cd-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .cd-track__step:nth-child(4)::before { display: none; }
}

/* Section headings inside cards and pages stay at title size, not the page-heading scale */
body .main-content h2.cd-h2 { font-size: 1rem; line-height: 1.5; margin-top: 0; }

/* ---------- Sign in (Stitch "Log In") ---------- */
.ncc-auth__chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 1.5rem; padding: 6px 12px; border-radius: 999px;
  background: rgba(217, 45, 32, 0.16); border: 1px solid rgba(254, 205, 202, 0.35); color: #fecdca; font-size: 0.8125rem; font-weight: 600;
}
.ncc-auth__chip .material-symbols-rounded { font-size: 16px; }
.ncc-signin { width: 100%; max-width: 420px; margin: 0 auto; }
.ncc-signin__head h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ncc-ink); }
.ncc-signin__head p { color: var(--ncc-text-secondary); font-size: 0.875rem; margin: 0 0 1.5rem; }
.ncc-signin .form-label { color: var(--ncc-ink); font-size: 0.8125rem; font-weight: 600; margin-bottom: 6px; }
.ncc-field { position: relative; }
.ncc-field > .material-symbols-rounded { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ncc-muted); pointer-events: none; }
body .ncc-auth .ncc-field .form-control { padding-left: 42px; min-height: 44px; }
body .ncc-auth .ncc-field .form-control#login-password { padding-right: 44px; }
.ncc-field__toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border: 0; background: transparent; color: var(--ncc-muted); border-radius: var(--ncc-radius-sm); display: grid; place-items: center;
}
.ncc-field__toggle:hover { color: var(--ncc-ink); background: var(--ncc-surface); }
.ncc-signin__submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-size: 0.9375rem; }
.ncc-signin__submit .material-symbols-rounded { font-size: 18px; }
.ncc-signin__links { margin: 1.25rem 0 0; text-align: center; font-size: 0.875rem; color: var(--ncc-text-secondary); line-height: 1.9; }
.ncc-signin__links a { font-weight: 600; }
.ncc-signin__divider { display: flex; align-items: center; gap: 12px; margin: 1.75rem 0 1rem; color: var(--ncc-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ncc-signin__divider::before, .ncc-signin__divider::after { content: ""; flex: 1; height: 1px; background: var(--ncc-line); }
.ncc-signin__verify { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ncc-signin__verify .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8125rem; min-height: 42px; margin: 0; padding: 8px 10px; }
.ncc-signin__verify .material-symbols-rounded { font-size: 18px; }
@media (max-width: 480px) { .ncc-signin__verify { grid-template-columns: 1fr; } }

/* ---------- Public verification (Stitch "Public Certificate Verification") ---------- */
body:has(.ncc-verify) { background: var(--ncc-surface); }
.ncc-verify { max-width: 880px; margin: 0 auto; padding: 3rem 1rem 4rem; }
.ncc-verify__head { text-align: center; margin-bottom: 2rem; }
.ncc-verify__lead { color: var(--ncc-text-secondary); max-width: 560px; margin: 0.5rem auto 1.5rem; }
.ncc-verify__search {
  display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; padding: 6px; background: #fff;
  border: 1px solid var(--ncc-line-strong); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow-md);
}
.ncc-verify__search > .material-symbols-rounded { margin-left: 8px; color: var(--ncc-muted); }
body .ncc-verify__search .form-control { border: 0; box-shadow: none; min-height: 42px; font-size: 1rem; padding-left: 4px; }
body .ncc-verify__search .form-control:focus { box-shadow: none; }
.ncc-verify__search .btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; border-radius: var(--ncc-radius-sm); min-height: 42px; }
.ncc-verify__search .btn .material-symbols-rounded { font-size: 18px; }
.ncc-verify__hint { color: var(--ncc-muted); font-size: 0.8125rem; margin: 0.75rem 0 0; }
.ncc-verify__result { background: #fff; border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow); overflow: hidden; margin-bottom: 1.5rem; }
.ncc-verify__banner { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid; }
.ncc-verify__banner > .material-symbols-rounded { font-size: 28px; }
.ncc-verify__banner strong { display: block; font-size: 1.0625rem; color: var(--ncc-ink); }
.ncc-verify__banner span { font-size: 0.875rem; color: var(--ncc-text-secondary); }
.ncc-verify__banner.is-success { background: var(--ncc-green-tint); border-color: var(--ncc-green-line); }
.ncc-verify__banner.is-success > .material-symbols-rounded { color: var(--ncc-green); }
.ncc-verify__banner.is-warning { background: var(--ncc-amber-tint); border-color: var(--ncc-amber-line); }
.ncc-verify__banner.is-warning > .material-symbols-rounded { color: var(--ncc-amber); }
.ncc-verify__banner.is-danger { background: var(--ncc-red-tint); border-color: var(--ncc-red-line); }
.ncc-verify__banner.is-danger > .material-symbols-rounded { color: var(--ncc-red); }
.ncc-verify__body { padding: 20px; }
.ncc-verify__serial { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; border-bottom: 1px solid var(--ncc-line); margin-bottom: 4px; }
.ncc-verify__serial span:last-child { font-size: 1.375rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ncc-ink); }
body h2.ncc-verify__group { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ncc-text-secondary); margin: 18px 0 8px; }
.ncc-verify__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; margin: 0; }
.ncc-verify__grid dt { font-size: 0.75rem; font-weight: 500; color: var(--ncc-muted); }
.ncc-verify__grid dd { margin: 2px 0 0; font-weight: 600; color: var(--ncc-ink); }
.ncc-verify__checked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ncc-line); font-size: 0.8125rem; color: var(--ncc-muted); }
.ncc-verify__checked .material-symbols-rounded { font-size: 16px; }
.ncc-verify__links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ncc-verify__links .btn { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ncc-radius-sm); }
.ncc-verify__links .material-symbols-rounded { font-size: 18px; }
@media (max-width: 575.98px) {
  .ncc-verify__search { flex-wrap: wrap; }
  .ncc-verify__search .form-control { flex: 1 1 70%; }
  .ncc-verify__search .btn { flex: 1 1 100%; justify-content: center; }
}
@media print {
  .ncc-public-bar, .ncc-verify__search, .ncc-verify__hint, .ncc-verify__links, .ncc-verify__checked .btn { display: none !important; }
}
.ncc-verify__search .form-control { flex: 1 1 auto; min-width: 0; }
.ncc-verify__search .btn { flex: 0 0 auto; }

/* ---------- Project detail (Stitch "Project Registration Detail") ---------- */
.project-view .d-flex.flex-column.gap-4 > .card { margin-bottom: 0 !important; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; margin: 0; }
.pv-grid dt { font-size: 0.75rem; font-weight: 500; color: var(--ncc-muted); margin-bottom: 2px; }
.pv-grid dd { margin: 0; font-weight: 600; color: var(--ncc-ink); }
.pv-grid__wide { grid-column: 1 / -1; }
.pv-steps { padding-left: 1.25rem; color: var(--ncc-text-secondary); }
.pv-steps li { margin-bottom: 4px; }
.pv-upload {
  display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 8px; cursor: pointer;
  border: 1px dashed var(--ncc-line-strong); border-radius: var(--ncc-radius); background: var(--ncc-surface); color: var(--ncc-ink);
}
.pv-upload:hover { border-color: var(--ncc-red); }
.pv-upload.is-done { border-style: solid; border-color: var(--ncc-green-line); background: var(--ncc-green-tint); cursor: default; }
.pv-upload.is-done > i { color: var(--ncc-green); }
.pv-history { list-style: none; margin: 0 0 12px; padding: 0 0 0 16px; border-left: 2px solid var(--ncc-line); }
.pv-history li { position: relative; padding: 0 0 14px 4px; }
.pv-history li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ncc-line-strong); }
.pv-life { list-style: none; margin: 0; padding: 0; }
.pv-life li { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
.pv-life li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--ncc-line); }
.pv-life li.is-done:not(:last-child)::after { background: var(--ncc-red); }
.pv-life__dot { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: var(--ncc-line); color: var(--ncc-text-secondary); position: relative; z-index: 1; }
.pv-life li.is-done .pv-life__dot { background: var(--ncc-red); color: #fff; }
.pv-life li.is-current .pv-life__dot { background: #fff; color: var(--ncc-red); box-shadow: 0 0 0 2px var(--ncc-red); }
.pv-life__label { font-weight: 600; font-size: 0.875rem; color: var(--ncc-ink); }
.pv-life li.is-todo .pv-life__label { color: var(--ncc-muted); font-weight: 500; }
.pv-life__note { font-size: 0.8125rem; color: var(--ncc-muted); }

/* ---------- Shared: page header, summary cards, filter chips (Stitch work queue) ---------- */
.ncc-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 1.5rem; }
.ncc-page-head h1 { margin: 0 0 4px; }
.ncc-page-head p { margin: 0; color: var(--ncc-text-secondary); }
.ncc-stat {
  display: block; height: 100%; padding: 16px 18px; background: #fff; color: var(--ncc-ink);
  border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow);
  text-decoration: none; transition: border-color .15s;
}
a.ncc-stat:hover { border-color: var(--ncc-line-strong); color: var(--ncc-ink); }
.ncc-stat.is-active { border-color: var(--ncc-red); box-shadow: inset 0 -3px 0 var(--ncc-red); }
.ncc-stat.is-attention { border-color: var(--ncc-amber-line); background: var(--ncc-amber-tint); }
.ncc-stat__value { display: block; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 6px 0 2px; }
.ncc-stat__value.is-money { font-size: 1.25rem; padding: 6px 0 4px; }
.ncc-stat__hint { display: block; font-size: 0.8125rem; color: var(--ncc-text-secondary); }
.ncc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ncc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ncc-line-strong); background: #fff; color: var(--ncc-text-secondary);
  font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ncc-chip span { color: var(--ncc-muted); font-weight: 500; }
.ncc-chip:hover { color: var(--ncc-ink); background: var(--ncc-surface); }
.ncc-chip.is-active { background: var(--ncc-ink); border-color: var(--ncc-ink); color: #fff; }
.ncc-chip.is-active span { color: #d1d5db; }
.ncc-chip.has-alert span { color: var(--ncc-red); font-weight: 700; }
.ncc-chip.is-active.has-alert span { color: #fecdca; }
/* Section headings inside cards (h2/h5 alike) */
body .main-content .card-header h2.cd-h2, body .main-content h2.cd-h2 { font-size: 1rem; line-height: 1.5; }

/* Right-hand decision rail (staff review page design): stays in view while the report scrolls */
@media (min-width: 992px) { .ncc-rail { position: sticky; top: 1rem; } }
.ncc-rail > .card:last-child { margin-bottom: 0 !important; }

/* Cards marked by a coloured left edge instead of a full coloured border */
.card.ncc-edge-danger { border-left: 4px solid var(--ncc-red); }
.card.ncc-edge-warning { border-left: 4px solid var(--ncc-amber); }
.card.ncc-edge-success { border-left: 4px solid var(--ncc-green); }
.card.ncc-edge-info { border-left: 4px solid var(--ncc-blue); }

/* ---------- Confirmation dialog (web/js/ncc-confirm.js) ---------- */
.ncc-confirm { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ncc-confirm__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.6); }
.ncc-confirm__dialog {
  position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: var(--ncc-radius);
  box-shadow: var(--ncc-shadow-lg); overflow: hidden; animation: ncc-confirm-in .14s ease-out;
}
@keyframes ncc-confirm-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.ncc-confirm__body { display: flex; gap: 14px; padding: 24px; }
.ncc-confirm__icon {
  flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ncc-red-tint); color: var(--ncc-red); border: 1px solid var(--ncc-red-line);
}
body .ncc-confirm__title { font-size: 1rem; font-weight: 600; color: var(--ncc-ink); margin: 2px 0 6px; letter-spacing: 0; }
.ncc-confirm__message { margin: 0; font-size: 0.875rem; color: var(--ncc-text-secondary); line-height: 1.5; white-space: pre-line; }
.ncc-confirm__footer {
  display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px;
  background: #f8f9fa; border-top: 1px solid var(--ncc-line);
}
.ncc-confirm__cancel, .ncc-confirm__ok {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.875rem; font-weight: 500;
  border-radius: 6px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); transition: background-color .15s; cursor: pointer;
}
.ncc-confirm__cancel { color: #374151; background: #fff; border: 1px solid var(--ncc-line-strong); }
.ncc-confirm__cancel:hover { background: #f3f4f6; }
.ncc-confirm__ok { color: #fff; background: var(--ncc-red); border: 1px solid var(--ncc-red); }
.ncc-confirm__ok:hover { background: var(--ncc-red-dark); border-color: var(--ncc-red-dark); }
.ncc-confirm__ok .material-symbols-rounded { font-size: 18px; }
.ncc-confirm__cancel:focus-visible, .ncc-confirm__ok:focus-visible { outline: 2px solid var(--ncc-red); outline-offset: 2px; }

/* ---------- Callout: a prompt the user must answer (red tint, icon box, one action) ---------- */
.ncc-callout {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px;
  border-radius: var(--ncc-radius); background: var(--ncc-red-tint); border: 1px solid var(--ncc-red-line);
}
.ncc-callout__main { display: flex; align-items: center; gap: 14px; }
.ncc-callout__icon {
  flex: 0 0 36px; height: 36px; border-radius: 6px; display: grid; place-items: center;
  background: var(--ncc-red); color: #fff;
}
.ncc-callout__icon .material-symbols-rounded { font-size: 20px; }
.ncc-callout__title { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ncc-red-dark); }
.ncc-callout__text { margin: 0; font-size: 0.875rem; color: #7a271a; }
.ncc-callout__action {
  flex: 0 0 auto; padding: 6px 12px; font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--ncc-red);
  border: 0; border-radius: 6px; transition: background-color .15s; white-space: nowrap;
}
.ncc-callout__action:hover { background: var(--ncc-red-dark); color: #fff; }
@media (max-width: 575.98px) {
  .ncc-callout { flex-direction: column; align-items: stretch; }
  .ncc-callout__action { text-align: center; padding: 8px 12px; }
}

/* ---------- Bootstrap dialogs follow the same pattern as the confirmation dialog ---------- */
body .modal-content { border: 0; border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow-lg); overflow: hidden; }
body .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--ncc-line); }
body .modal-header .modal-title { font-size: 1rem; font-weight: 600; color: var(--ncc-ink); }
body .modal-body { padding: 20px 24px; color: var(--ncc-text-secondary); }
body .modal-footer { padding: 16px 24px; gap: 12px; background: #f8f9fa; border-top: 1px solid var(--ncc-line); }
body .modal-footer > * { margin: 0; }
body .modal-footer .btn { border-radius: 6px; font-weight: 500; text-transform: none; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); min-height: 38px; }
body .modal-footer .btn-secondary,
body .modal-footer .btn-light,
body .modal-footer .btn-outline-secondary { color: #374151; background: #fff; border: 1px solid var(--ncc-line-strong); }
body .modal-footer .btn-secondary:hover,
body .modal-footer .btn-light:hover,
body .modal-footer .btn-outline-secondary:hover { background: #f3f4f6; color: #374151; }
body .modal-backdrop.show { background: #0f172a; opacity: .6; }

/* ---------- Account pages: shared pieces of the sign-in card ---------- */
.ncc-signin--wide { max-width: 520px; }
body .ncc-auth .ncc-field--toggle .form-control { padding-right: 44px; }
.ncc-signin .invalid-feedback { font-size: 0.8125rem; margin-top: 4px; }
.ncc-signin .has-error .form-control, .ncc-signin .form-control.is-invalid { border-color: var(--ncc-red); }
.ncc-field__hint {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: var(--ncc-green); background: var(--ncc-green-tint); border: 1px solid var(--ncc-green-line);
}
.ncc-field__hint:empty { display: none; }
.ncc-field__hint.is-unknown { color: var(--ncc-red-dark); background: var(--ncc-red-tint); border-color: var(--ncc-red-line); }
.ncc-signin__badge {
  width: 44px; height: 44px; border-radius: var(--ncc-radius); display: grid; place-items: center; margin-bottom: 14px;
  background: var(--ncc-red-tint); border: 1px solid var(--ncc-red-line); color: var(--ncc-red);
}
.ncc-signin__badge .material-symbols-rounded { font-size: 24px; }
body .ncc-auth .ncc-otp {
  min-height: 56px; text-align: center; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.5em; padding-left: 0.5em;
  font-variant-numeric: tabular-nums;
}
body .ncc-auth .ncc-otp::placeholder { color: #d1d5db; letter-spacing: 0.5em; }
.ncc-signin__resend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; margin-top: 1.25rem; font-size: 0.875rem; color: var(--ncc-text-secondary); }
.ncc-linkbtn { border: 0; background: none; padding: 4px 2px; font-weight: 600; color: var(--ncc-red); cursor: pointer; }
.ncc-linkbtn:hover { color: var(--ncc-red-dark); text-decoration: underline; }
.ncc-signin__steps { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.ncc-signin__steps li {
  flex: 1; display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 3px solid var(--ncc-line);
  font-size: 0.75rem; font-weight: 600; color: var(--ncc-muted);
}
.ncc-signin__steps li span {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem;
  background: var(--ncc-line); color: var(--ncc-text-secondary);
}
.ncc-signin__steps li span .material-symbols-rounded { font-size: 14px; }
.ncc-signin__steps li.is-done { border-top-color: var(--ncc-red); color: var(--ncc-ink); }
.ncc-signin__steps li.is-done span { background: var(--ncc-red); color: #fff; }
.ncc-signin__steps li.is-current { border-top-color: var(--ncc-red); color: var(--ncc-red-dark); }
.ncc-signin__steps li.is-current span { background: #fff; color: var(--ncc-red); box-shadow: 0 0 0 2px var(--ncc-red); }

/* Account pages carry their own icons: no Bootstrap validation icons inside the fields */
body .ncc-signin .form-control.is-invalid, body .ncc-signin .form-control.is-valid { background-image: none; }
body .ncc-signin .form-control.is-valid { border-color: var(--ncc-line-strong); }
body .ncc-signin .ncc-field__toggle { color: var(--ncc-muted); }

/* ---------- Staff review pages (Stitch "Staff Application Review") ---------- */
body .main-content h1.review-head__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }
.review-head__facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.875rem; }
.review-head__officer { display: flex; align-items: center; gap: 10px; text-align: left; }
.review-head__avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700;
  background: var(--ncc-ink); color: #fff;
}
.review-head__track { margin-top: 20px !important; padding-top: 16px !important; border-top: 1px solid var(--ncc-line) !important; }
.review-head__waiting { margin: 12px 0 0; font-size: 0.8125rem; color: var(--ncc-text-secondary); }
.review-decision .card-body > .btn,
.review-decision .card-body > form > .btn,
.review-decision .card-body > a.btn,
.review-decision .card-body .d-flex > .btn,
.review-decision .card-body .d-flex > a.btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; margin: 0 0 8px !important; }
.review-decision .card-body .d-flex.flex-wrap { display: block !important; }
.review-decision .card-body form.d-inline { display: block !important; }
.review-decision .btn-danger { color: var(--ncc-red-dark); background: var(--ncc-red-tint); border: 1px solid var(--ncc-red-line); }
.review-decision .btn-danger:hover { color: var(--ncc-red-dark); background: #fee4e2; }
.review-decision .btn-warning { color: var(--ncc-amber); background: #fff; border: 1px solid var(--ncc-amber-line); }
.review-decision .btn-warning:hover { color: var(--ncc-amber); background: var(--ncc-amber-tint); }
.review-decision .alert { text-align: left; }
@media (max-width: 1199.98px) { .review-layout .ncc-rail { position: static; } }

/* ---------- Admin dashboard (Stitch "Admin Dashboard") ---------- */
body .admin-dash { display: flex; flex-direction: column; gap: 1.5rem; }
body .admin-dash > .card, body .admin-dash > section { margin: 0; }
.ad-icon {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--ncc-radius); display: inline-grid; place-items: center;
  background: var(--ncc-surface); border: 1px solid var(--ncc-line); color: var(--ncc-ink); font-size: 20px;
}
.ad-icon--red { background: var(--ncc-red-tint); border-color: var(--ncc-red-line); color: var(--ncc-red); }
.ad-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
body .main-content h1.ad-head__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.ad-head__sub { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 0.8125rem; color: var(--ncc-muted); }
.ad-head__sub .material-symbols-rounded { font-size: 16px; }
.ad-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-head__actions .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.ad-head__actions .material-symbols-rounded { font-size: 18px; }
.ad-welcome__top { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #f3f4f6; }
body .main-content h2.ad-welcome__title { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.ad-welcome__alert { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ncc-red); }
.ad-welcome__ok { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ncc-green); }
.ad-welcome__ok .material-symbols-rounded { font-size: 18px; }
.ad-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ncc-red); animation: ad-pulse 1.6s ease-in-out infinite; }
@keyframes ad-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ad-pulse { animation: none; } }
.ad-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--ncc-radius);
  font-size: 0.75rem; font-weight: 500; text-decoration: none; color: var(--ncc-text-secondary);
  background: var(--ncc-surface); border: 1px solid var(--ncc-line);
}
.ad-chip:hover { background: #f3f4f6; color: var(--ncc-ink); }
.ad-chip .material-symbols-rounded { font-size: 16px; }
.ad-chip__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 0.6875rem; font-weight: 600; color: var(--ncc-muted); background: #fff; border: 1px solid var(--ncc-line);
}
.ad-chip.is-amber { color: #78350f; background: var(--ncc-amber-tint); border-color: var(--ncc-amber-line); }
.ad-chip.is-amber .material-symbols-rounded { color: var(--ncc-amber); }
.ad-chip.is-amber .ad-chip__count { color: #fff; background: #f59e0b; border-color: #f59e0b; font-weight: 700; }
.ad-chip.is-red { color: #7a271a; background: var(--ncc-red-tint); border-color: var(--ncc-red-line); }
.ad-chip.is-red .material-symbols-rounded { color: var(--ncc-red); }
.ad-chip.is-red .ad-chip__count { color: #fff; background: var(--ncc-red); border-color: var(--ncc-red); font-weight: 700; }

/* Figure tiles (shared with the staff dashboard) */
body .dash-stats { gap: 1rem; }
body .admin-dash .dash-stats { margin: 0; }
@media (min-width: 992px) { body .dash-stats:not(.dash-stats--6) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body .dash-stat { gap: 14px; padding: 18px 20px; min-height: 0; border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow); }
body a.dash-stat:hover { border-color: var(--ncc-line-strong); background: #fff; box-shadow: var(--ncc-shadow-md); }
body .dash-stat-icon { width: 44px; height: 44px; border-radius: var(--ncc-radius); font-size: 22px !important; }
body .dash-stat-label { font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--ncc-text-secondary); }
.dash-stat-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
body .dash-stat-value { font-size: 1.5rem; color: var(--ncc-ink); }
body .dash-stat-meta {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 500;
  color: var(--ncc-text-secondary); background: #f3f4f6; max-width: 100%;
}
body .dash-stat--primary .dash-stat-meta, body .dash-stat--info .dash-stat-meta { color: var(--ncc-blue); background: var(--ncc-blue-tint); }
body .dash-stat--warning .dash-stat-meta { color: var(--ncc-amber); background: var(--ncc-amber-tint); }
body .dash-stat--success .dash-stat-meta { color: var(--ncc-green); background: var(--ncc-green-tint); }
body .dash-stat-chevron { color: #d1d5db; transition: transform .15s, color .15s; }
body a.dash-stat:hover .dash-stat-chevron { color: var(--ncc-muted); transform: translateX(2px); }

/* Seven-day intake */
body .main-content h3.ad-trend__title { font-size: 1rem; font-weight: 700; margin: 2px 0 0; }
.ad-trend__total { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: var(--ncc-text-secondary); background: var(--ncc-surface); border: 1px solid var(--ncc-line); }
.ad-trend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ncc-red); }
.ad-trend__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: end; height: 150px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6; }
.ad-trend__col { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.ad-trend__value { margin-bottom: 4px; padding: 1px 6px; border-radius: 4px; font-size: 0.6875rem; font-weight: 700; color: var(--ncc-red); background: var(--ncc-red-tint); border: 1px solid var(--ncc-red-line); }
.ad-trend__bar { display: block; width: min(100%, 56px); border-radius: 6px 6px 0 0; background: var(--ncc-red); transition: background .15s; }
.ad-trend__col:hover .ad-trend__bar { background: var(--ncc-red-dark); }
.ad-trend__bar.is-empty { height: 8px; background: #f3f4f6; border-radius: 3px 3px 0 0; }
.ad-trend__labels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; padding-top: 10px; text-align: center; font-size: 0.75rem; font-weight: 500; color: var(--ncc-muted); }
.ad-trend__labels .has-value { font-weight: 700; color: var(--ncc-ink); }
.ad-trend__labels .is-today { font-weight: 700; color: var(--ncc-red-dark); }

/* Recent activity */
.ad-activity__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #f3f4f6; text-decoration: none; }
.ad-activity__row:first-of-type { border-top: 0; }
.ad-activity__type { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; color: var(--ncc-text-secondary); background: #f3f4f6; }
.ad-activity__body { min-width: 0; display: flex; flex-direction: column; }
.ad-activity__name { font-size: 0.8125rem; font-weight: 600; color: var(--ncc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-activity__status { font-size: 0.75rem; color: var(--ncc-muted); }
.ad-activity__row:hover .ad-activity__name { color: var(--ncc-red-dark); }

/* Tabs and panels */
.admin-dash .nav-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.admin-dash .nav-tabs .nav-link .material-symbols-rounded { font-size: 18px; }
.admin-dash .nav-tabs .nav-link.active { color: var(--ncc-red-dark); }
.ad-tab-badge { padding: 0 6px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; color: var(--ncc-red-dark); background: var(--ncc-red-tint); }
.ad-panel { height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--ncc-line); border-radius: var(--ncc-radius); box-shadow: var(--ncc-shadow); }
.ad-panel:hover { border-color: var(--ncc-line-strong); }
.ad-panel__head { display: flex; align-items: flex-start; gap: 12px; }
body .main-content h3.ad-panel__title { font-size: 0.9375rem; font-weight: 700; margin: 0; }
.ad-panel__sub { margin: 2px 0 0; font-size: 0.75rem; color: var(--ncc-muted); }
.ad-panel__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ad-figure { padding: 12px; text-align: center; border-radius: var(--ncc-radius); background: var(--ncc-surface); border: 1px solid #f3f4f6; }
.ad-figure__value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ncc-ink); line-height: 1.2; }
.ad-figure__label { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ncc-muted); }
.ad-figure.is-attention { background: var(--ncc-amber-tint); border-color: var(--ncc-amber-line); }
.ad-figure.is-attention .ad-figure__value, .ad-figure.is-attention .ad-figure__label { color: var(--ncc-amber); }
.ad-panel__link { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--ncc-red); }
.ad-panel__link .material-symbols-rounded { font-size: 18px; }
.ad-recent { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f3f4f6; text-decoration: none; }
.ad-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--ncc-radius); font-size: 0.8125rem; font-weight: 500; color: var(--ncc-ink); background: var(--ncc-surface); border: 1px solid var(--ncc-line); text-decoration: none; }
.ad-links a:hover { background: #f3f4f6; }
.ad-links .material-symbols-rounded { font-size: 18px; color: var(--ncc-muted); }

/* ---------- Top bar: date and signed-in user ---------- */
.ncc-topbar-date { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--ncc-radius); font-size: 0.75rem; color: var(--ncc-text-secondary); background: var(--ncc-surface); border: 1px solid var(--ncc-line); white-space: nowrap; }
.ncc-topbar-date .material-symbols-rounded { font-size: 15px; color: var(--ncc-muted); }
.ncc-user-pill { display: inline-flex !important; align-items: center; gap: 10px; }
.ncc-user-pill__avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--ncc-ink); }
.ncc-user-pill__text { flex-direction: column; line-height: 1.2; text-align: left; max-width: 200px; }
.ncc-user-pill__name { font-size: 0.75rem; font-weight: 600; color: var(--ncc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncc-user-pill__role { font-size: 0.6875rem; color: var(--ncc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Figures stay dark; the tone shows on the icon and the note. A zero figure's note is neutral. */
body .dash-stat .dash-stat-value { color: var(--ncc-ink); }
body .dash-stat.is-zero .dash-stat-meta { color: var(--ncc-muted); background: #f3f4f6; }

/* Six-tile rows (staff dashboard) stay compact; labels may wrap rather than be cut off */
body .dash-stats--6 .dash-stat { gap: 10px; padding: 12px 14px; }
body .dash-stats--6 .dash-stat-icon { width: 36px; height: 36px; font-size: 18px !important; }
body .dash-stat-label { white-space: normal; overflow: visible; }
body .dash-stat-meta { white-space: normal; }

/* ---------- Regional inspection report ---------- */
.rr-doc { display: flex; flex-direction: column; gap: 1.5rem; }
.rr-doc > .card { margin: 0; }
.rr-cover { text-align: center; padding: 8px 0 4px; }
.rr-cover__org { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ncc-red-dark); margin: 0; }
body .main-content h1.rr-cover__title { font-size: 1.5rem; font-weight: 700; margin: 6px 0 4px; }
.rr-cover__period { margin: 0; color: var(--ncc-text-secondary); }
.rr-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rr-figure { padding: 12px 14px; border-radius: var(--ncc-radius); background: var(--ncc-surface); border: 1px solid var(--ncc-line); }
.rr-figure__value { display: block; font-size: 1.375rem; font-weight: 700; color: var(--ncc-ink); line-height: 1.2; }
.rr-figure__label { display: block; font-size: 0.75rem; color: var(--ncc-muted); }
.rr-figure.is-alert { background: var(--ncc-red-tint); border-color: var(--ncc-red-line); }
.rr-figure.is-alert .rr-figure__value { color: var(--ncc-red-dark); }
.rr-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ncc-text-secondary); }
.rr-table td, .rr-table th { vertical-align: top; }
.rr-list-title { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 700; margin: 0 0 8px; }
.rr-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: #f3f4f6; color: var(--ncc-ink); }
.rr-count.is-red { background: var(--ncc-red); color: #fff; }
.rr-district { font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; margin: 8px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--ncc-red); }
.rr-site { margin-bottom: 1.5rem; }
.rr-site__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
@media print {
  .sidenav, #navbarBlur, .footer, .rr-actions, .ncc-chips, .inspections-tabs-cards { display: none !important; }
  body .main-content { margin: 0 !important; padding: 0 !important; max-height: none !important; overflow: visible !important; }
  .rr-doc .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .rr-site { break-inside: avoid-page; }
  .rr-district { break-before: page; }
  a[href]::after { content: none !important; }
}


/* ---------- Account pages, light layout (Stitch "Modern Light Login") ---------- */
.ncc-auth--light { display: flex; flex-direction: column; min-height: 100vh; background: #f8f9fa; color: var(--ncc-ink); }
.ncc-auth__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px clamp(16px, 4vw, 48px); background: #fff; border-bottom: 1px solid var(--ncc-line); font-size: 0.75rem; color: var(--ncc-text-secondary);
}
.ncc-auth__bar-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ncc-auth__bar-name strong { color: var(--ncc-ink); font-weight: 600; }
.ncc-auth__bar-sep { color: #d1d5db; }
.ncc-auth__bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ncc-red); flex: none; }
.ncc-auth__notice {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 0.6875rem;
  color: #78350f; background: var(--ncc-amber-tint); border: 1px solid var(--ncc-amber-line);
}
.ncc-auth__notice-dot { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }
.ncc-auth__body {
  flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 48px); align-items: center;
}
.ncc-auth__intro { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ncc-auth__identity { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.ncc-auth__identity:hover { color: inherit; }
.ncc-auth__identity img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.ncc-auth__identity > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ncc-auth--light .ncc-auth__eyebrow {
  margin: 0 0 2px; padding: 2px 10px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ncc-red); background: var(--ncc-red-tint); border: 1px solid var(--ncc-red-line);
}
.ncc-auth__org { font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ncc-ink); line-height: 1.2; }
.ncc-auth__org-sub { font-size: 0.75rem; font-weight: 500; color: var(--ncc-muted); }
/* logo and NCC's name first, the portal's title underneath */
.ncc-auth__brandline { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* NCC's full logo (emblem and name), as on ncc.org.zm */
/* (not .ncc-auth__logo: that name belongs to the older dark layout, which rounds the image) */
.ncc-auth__wordmark { display: block; line-height: 0; }
.ncc-auth__wordmark img { display: block; width: auto; height: clamp(56px, 6vw, 76px); max-width: 100%; object-fit: contain; }
.ncc-auth--light .ncc-auth__brandline .ncc-auth__eyebrow { margin: 0; padding: 4px 12px; font-size: 0.75rem; }
/* renewal season, at the top of the sign-in column */
.ncc-auth__season {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--ncc-amber-tint); border: 1px solid var(--ncc-amber-line); color: #78350f; font-size: 0.875rem; line-height: 1.4;
}
.ncc-auth__season .material-symbols-rounded { font-size: 22px; color: #b45309; flex: none; }
.ncc-auth__season strong { display: block; font-weight: 700; color: #78350f; }
.ncc-auth__season-sub { display: block; color: #92400e; font-size: 0.8125rem; }
.ncc-auth__pitch h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ncc-ink); max-width: 18em; }
.ncc-auth__pitch p { margin: 0; max-width: 36em; font-size: 0.9375rem; line-height: 1.6; color: var(--ncc-text-secondary); }
.ncc-auth__hero { position: relative; margin: 0; height: clamp(180px, 22vw, 256px); border-radius: 16px; overflow: hidden; border: 1px solid var(--ncc-line); box-shadow: var(--ncc-shadow-md); }
.ncc-auth__hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ncc-auth__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1) 55%, transparent); pointer-events: none; }
.ncc-auth__hero.is-plain {
  background-color: var(--ncc-ink);
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(700px circle at 100% 0%, rgba(217, 45, 32, 0.45), transparent 60%);
  background-size: 28px 28px, 28px 28px, auto;
}
.ncc-auth__hero.is-plain .ncc-auth__hero-mark { position: absolute; right: 4%; top: 50%; transform: translateY(-58%); font-size: clamp(120px, 14vw, 200px); line-height: 1; color: #fff; opacity: 0.12; }
.ncc-auth__hero figcaption {
  position: absolute; z-index: 1; left: 16px; bottom: 12px; right: 16px; width: fit-content; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12);
}
.ncc-auth__hero figcaption .material-symbols-rounded { font-size: 16px; color: #fbbf24; }
.ncc-auth__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ncc-auth__card-item { padding: 16px; background: #fff; border: 1px solid var(--ncc-line); border-radius: 12px; }
.ncc-auth__card-item h3 { margin: 10px 0 4px; font-size: 0.8125rem; font-weight: 700; color: var(--ncc-ink); }
.ncc-auth__card-item p { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--ncc-muted); }
.ncc-auth__card-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.ncc-auth__card-icon .material-symbols-rounded { font-size: 18px; }
.ncc-auth__card-icon.is-red { background: var(--ncc-red-tint); color: var(--ncc-red); }
.ncc-auth__card-icon.is-amber { background: var(--ncc-amber-tint); color: var(--ncc-amber); }
.ncc-auth__card-icon.is-green { background: var(--ncc-green-tint); color: var(--ncc-green); }
.ncc-auth--light .ncc-auth__main { padding: 0; justify-content: flex-start; border-top: 0; }
.ncc-auth__panel { width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(24px, 3vw, 32px); background: #fff; border: 1px solid var(--ncc-line); border-radius: 16px; box-shadow: var(--ncc-shadow); }
.ncc-auth__panel .ncc-signin { max-width: none; }
.ncc-auth__cyber {
  width: 100%;
  max-width: 480px;
  margin: 14px auto 0;
  padding: 14px 16px;
  background: var(--ncc-blue-tint);
  border: 1px solid var(--ncc-blue-line);
  border-radius: 12px;
  color: #175cd3;
  font-size: 0.75rem;
  line-height: 1.55;
}
.ncc-auth__cyber-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ncc-blue);
}
.ncc-auth__cyber-title .material-symbols-rounded { font-size: 18px; }
.ncc-auth__cyber p { margin: 0 0 8px; }
.ncc-auth__cyber p:last-child { margin-bottom: 0; }
.ncc-auth__cyber a { color: inherit; font-weight: 700; text-decoration: none; }
.ncc-auth__cyber a:hover { text-decoration: underline; }
.ncc-auth__footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 32px;
  padding: 16px clamp(16px, 4vw, 48px); background: #fff; border-top: 1px solid var(--ncc-line); font-size: 0.75rem; color: var(--ncc-text-secondary);
}
.ncc-auth__footer a { display: inline-flex; align-items: center; gap: 6px; color: var(--ncc-text-secondary); text-decoration: none; }
.ncc-auth__footer a:hover { color: var(--ncc-ink); }
.ncc-auth__footer .material-symbols-rounded { font-size: 16px; color: var(--ncc-red); }
@media (max-width: 991.98px) {
  .ncc-auth__body { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ncc-auth__hero, .ncc-auth__cards, .ncc-auth__pitch p { display: none; }
  .ncc-auth__intro { gap: 16px; }
  .ncc-auth__pitch h1 { font-size: 1.375rem; }
}
@media (max-width: 575.98px) {
  .ncc-auth__panel { padding: 20px 16px; border-radius: 12px; }
  .ncc-auth__identity img { width: 48px; height: 48px; }
  .ncc-auth__pitch { display: none; }
}

/* Dedicated success / error outcome screens */
.ncc-feedback--success {
  --ncc-feedback: var(--ncc-green);
  --ncc-feedback-dark: var(--ncc-green-dark);
  --ncc-feedback-tint: var(--ncc-green-tint);
  --ncc-feedback-line: var(--ncc-green-line);
}
.ncc-feedback--danger {
  --ncc-feedback: var(--ncc-red);
  --ncc-feedback-dark: var(--ncc-red-dark);
  --ncc-feedback-tint: var(--ncc-red-tint);
  --ncc-feedback-line: var(--ncc-red-line);
}
.ncc-feedback__icon,
.ncc-feedback--success .text-success,
.ncc-feedback--success .success-icon-wrap i { color: var(--ncc-feedback) !important; }
.ncc-feedback__title,
.ncc-feedback--success .success-title,
.ncc-feedback--success .card-title.text-success { color: var(--ncc-feedback-dark) !important; }
.ncc-feedback__hero,
.ncc-feedback--success .success-hero {
  background: var(--ncc-feedback-tint);
  border: 1px solid var(--ncc-feedback-line) !important;
}
.ncc-feedback__header,
.ncc-feedback--success .successful-card-header,
.ncc-feedback--success .next-steps-header,
.ncc-feedback--success .card-header.bg-success {
  background: var(--ncc-feedback) !important;
  color: #fff !important;
  border-bottom: 0;
}
.ncc-feedback--danger {
  border-left: 5px solid var(--ncc-feedback);
  background: var(--ncc-feedback-tint);
}
.ncc-feedback--danger .ncc-feedback__icon,
.ncc-feedback--danger .material-symbols-rounded { color: var(--ncc-feedback) !important; }
.ncc-feedback--danger h2,
.ncc-feedback--danger h4 { color: var(--ncc-feedback-dark); }

.fee-schedule tr.is-current-month { background: var(--ncc-green-tint); }
.fee-schedule tr.is-current-month td { font-weight: 600; }