/* =============================================================================
   GSCC Design System — cross-app primitives
   Depends on gscc-design-tokens.css. Load after Bootstrap + mystyle, near last.
   Scopes lightly so public, student, and admin share one language without
   rewriting page markup.
   ============================================================================= */

/* ----- Base ----- */
html {
  -webkit-text-size-adjust: 100%;
}

body.home-page,
body.admin-dash-page,
body.GSCC-page,
body.main-body {
  font-family: var(--gscc-font) !important;
  color: var(--gscc-color-text);
  font-size: var(--gscc-fs-base);
  line-height: var(--gscc-lh-normal);
}

body.admin-dash-page {
  background: var(--gscc-color-bg) !important;
  font-size: var(--gscc-fs-md);
}

/* Content links only — exclude branded chrome (footer, logo, side menu CTAs) */
.gscc-main a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]),
#main-content a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]),
.app-content a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]),
.main-content a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]) {
  color: var(--gscc-color-link);
}
.gscc-main a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]):hover,
#main-content a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]):hover,
.app-content a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]):hover,
.main-content a:not(.btn):not(.nav-link):not(.side-menu__item):not(.page-link):not(.gscc-dash-search):not(.gscc-docs-action):not(.text-white):not(.text-light):not(.gscc-contact-card-call):not([class*="gp-"]):not([class*="gh-"]):hover {
  color: var(--gscc-color-link-hover);
}
/* Filled actions are anchors, not .btn. Keep the label and icon white on the green fill. */
#main-content a.gscc-dash-search,
#main-content a.gscc-dash-search:hover,
#main-content a.gscc-dash-search:focus,
.gscc-main a.gscc-dash-search,
.gscc-main a.gscc-dash-search:hover,
.app-content a.gscc-dash-search,
.main-content a.gscc-dash-search,
#main-content .repay-strip > a,
#main-content .repay-strip > a:hover,
#main-content .repay-strip > a:focus,
#main-content a.gscc-docs-action:not(.is-guide),
#main-content a.gscc-docs-action:not(.is-guide):hover,
#main-content a.gscc-docs-action:not(.is-guide):focus,
#main-content a.gscc-docs-action.is-guide:hover,
#main-content a.gscc-docs-action.is-guide:focus,
#main-content .gscc-tool-links a:hover,
#main-content .gscc-tool-links a:focus {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#main-content a.gscc-docs-action:not(.is-guide) .bi,
#main-content a.gscc-dash-search .bi,
#main-content .repay-strip > a .bi,
#main-content .gscc-tool-links a:hover .bi {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Focus ring — WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gscc-color-accent) !important;
  outline-offset: 2px;
  box-shadow: var(--gscc-shadow-focus);
}

/* Skip link (available on all layouts) */
.gscc-skip-link {
  position: absolute;
  left: var(--gscc-space-3);
  top: 0;
  z-index: var(--gscc-z-skip);
  padding: var(--gscc-space-2) var(--gscc-space-4);
  background: var(--gscc-color-primary);
  color: var(--gscc-color-text-inverse) !important;
  font-weight: var(--gscc-fw-semibold);
  font-size: var(--gscc-fs-base);
  border-radius: 0 0 var(--gscc-radius-md) var(--gscc-radius-md);
  text-decoration: none !important;
  transform: translateY(-120%);
  transition: transform var(--gscc-duration-fast) var(--gscc-ease);
}
.gscc-skip-link:focus,
.gscc-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--gscc-color-accent);
  outline-offset: 2px;
  color: var(--gscc-color-text-inverse) !important;
}
#main-content:focus {
  outline: none;
}

/* ----- Typography hierarchy ----- */
.gscc-page-title,
.public-page-title,
h1.gscc-h1 {
  font-family: var(--gscc-font);
  font-size: clamp(var(--gscc-fs-2xl), 2.5vw, var(--gscc-fs-3xl));
  font-weight: var(--gscc-fw-bold);
  line-height: var(--gscc-lh-tight);
  letter-spacing: var(--gscc-ls-tight);
  color: var(--gscc-color-text);
  margin: 0 0 var(--gscc-space-2);
}

.gscc-section-title,
h2.gscc-h2 {
  font-size: clamp(var(--gscc-fs-xl), 2vw, var(--gscc-fs-2xl));
  font-weight: var(--gscc-fw-bold);
  line-height: var(--gscc-lh-snug);
  color: var(--gscc-color-text);
  margin: 0 0 var(--gscc-space-3);
}

.gscc-subsection-title,
h3.gscc-h3 {
  font-size: var(--gscc-fs-lg);
  font-weight: var(--gscc-fw-semibold);
  line-height: var(--gscc-lh-snug);
  color: var(--gscc-color-text);
  margin: 0 0 var(--gscc-space-2);
}

.gscc-label,
.gscc-field-label {
  display: block;
  font-size: var(--gscc-fs-xs);
  font-weight: var(--gscc-fw-bold);
  letter-spacing: var(--gscc-ls-label);
  text-transform: uppercase;
  color: var(--gscc-color-muted);
  margin-bottom: var(--gscc-space-1);
}

.gscc-muted,
.text-muted.gscc-muted {
  color: var(--gscc-color-muted) !important;
}

.gscc-lead {
  font-size: var(--gscc-fs-lg);
  line-height: var(--gscc-lh-relaxed);
  color: var(--gscc-color-text-secondary);
}

/* ----- Layout containers ----- */
.gscc-container {
  width: 100%;
  max-width: var(--gscc-container-max);
  margin-inline: auto;
  padding-inline: var(--gscc-gutter);
}

.gscc-container-wide {
  max-width: var(--gscc-container-wide);
  margin-inline: auto;
  padding-inline: var(--gscc-gutter);
}

.gscc-section {
  padding-block: var(--gscc-section-gap);
}

.gscc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gscc-space-4);
}

.gscc-stack-sm { gap: var(--gscc-space-2); }
.gscc-stack-lg { gap: var(--gscc-space-6); }

.gscc-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gscc-control-gap);
}

.gscc-divider {
  border: 0;
  border-top: 1px solid var(--gscc-color-divider);
  margin: var(--gscc-space-4) 0;
}

/* Page header / breadcrumb shell (auth + public) */
.gscc-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gscc-space-3);
  margin-bottom: var(--gscc-space-4);
  padding-bottom: var(--gscc-space-3);
  border-bottom: 1px solid var(--gscc-color-border-subtle);
}

.gscc-breadcrumb,
.public-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gscc-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--gscc-fs-sm);
}

.public-page-breadcrumb a,
.gscc-breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
.home-page .public-page-breadcrumb a {
  color: inherit;
}
.gscc-breadcrumb a {
  color: var(--gscc-color-link);
}
.gscc-breadcrumb a:hover {
  color: var(--gscc-color-link-hover);
  text-decoration: underline;
}

/* ----- Buttons ----- */
.btn,
.gscc-btn {
  font-family: var(--gscc-font) !important;
  font-size: var(--gscc-fs-md) !important;
  font-weight: var(--gscc-fw-semibold) !important;
  line-height: var(--gscc-lh-tight);
  border-radius: var(--gscc-radius-md) !important;
  padding: var(--gscc-btn-py) var(--gscc-btn-px) !important;
  min-height: var(--gscc-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gscc-space-2);
  transition: background var(--gscc-duration) var(--gscc-ease),
    border-color var(--gscc-duration) var(--gscc-ease),
    color var(--gscc-duration) var(--gscc-ease),
    box-shadow var(--gscc-duration) var(--gscc-ease);
}

.btn-sm,
.gscc-btn-sm {
  min-height: var(--gscc-control-h-sm);
  font-size: var(--gscc-fs-sm) !important;
  padding: 4px 10px !important;
}

.btn-lg,
.gscc-btn-lg {
  min-height: var(--gscc-control-h-lg);
  font-size: var(--gscc-fs-base) !important;
  padding: 10px 18px !important;
}

.btn-primary,
.home-page .btn-primary,
.admin-dash-page .btn-primary,
.GSCC-page .btn-primary,
.bg-green.btn,
.btn.bg-green {
  background: var(--gscc-color-primary) !important;
  border-color: var(--gscc-color-primary) !important;
  color: var(--gscc-color-text-inverse) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.home-page .btn-primary:hover,
.bg-green.btn:hover,
.btn.bg-green:hover {
  background: var(--gscc-color-primary-dark) !important;
  border-color: var(--gscc-color-primary-dark) !important;
  color: var(--gscc-color-text-inverse) !important;
}

.btn-secondary,
.admin-dash-page .btn-secondary {
  background: var(--gscc-color-surface) !important;
  color: var(--gscc-color-text) !important;
  border: 1px solid var(--gscc-color-border) !important;
}
.btn-secondary:hover {
  background: var(--gscc-color-bg) !important;
  border-color: var(--gscc-color-border-strong) !important;
  color: var(--gscc-color-text) !important;
}

.btn-outline-primary {
  color: var(--gscc-color-primary) !important;
  border-color: var(--gscc-color-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--gscc-color-primary-soft) !important;
  color: var(--gscc-color-primary-dark) !important;
}

.btn-success {
  background: var(--gscc-color-success) !important;
  border-color: var(--gscc-color-success) !important;
  color: #fff !important;
}
.btn-danger {
  background: var(--gscc-color-danger) !important;
  border-color: var(--gscc-color-danger) !important;
  color: #fff !important;
}
.btn-warning {
  background: var(--gscc-color-accent-soft) !important;
  color: #8A6210 !important;
  border: 1px solid #E6D3A4 !important;
}
.btn-info {
  background: var(--gscc-color-info) !important;
  border-color: var(--gscc-color-info) !important;
  color: #fff !important;
}

/* Public Registration CTA → navy secondary, Login stays primary green */
.home-page a.btn.registration:not(.bg-green),
.home-page .btn-resit-group .registration.login.btn-primary:first-child {
  background: var(--gscc-color-cta) !important;
  border-color: var(--gscc-color-cta) !important;
}
.home-page a.btn.registration:not(.bg-green):hover {
  background: var(--gscc-color-cta-dark) !important;
  border-color: var(--gscc-color-cta-dark) !important;
}
.home-page a.btn.bg-green.login,
.home-page .login.bg-green {
  background: var(--gscc-color-primary) !important;
  border-color: var(--gscc-color-primary) !important;
}

.bg-green:not(.btn):not(a) {
  background: var(--gscc-color-primary) !important;
}

/* ----- Forms ----- */
.form-control,
.form-select,
select.form-control {
  min-height: var(--gscc-control-h);
  height: auto;
  padding: 0.375rem var(--gscc-control-px);
  font-family: var(--gscc-font);
  font-size: var(--gscc-fs-md);
  color: var(--gscc-color-text);
  background-color: var(--gscc-color-surface);
  border: 1px solid var(--gscc-color-border);
  border-radius: var(--gscc-radius-md);
  transition: border-color var(--gscc-duration), box-shadow var(--gscc-duration);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gscc-color-primary);
  box-shadow: var(--gscc-shadow-focus);
  outline: 0;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--gscc-color-danger);
}
.form-control.is-invalid:focus {
  box-shadow: var(--gscc-shadow-focus-danger);
}

.form-label,
label.control-label {
  font-size: var(--gscc-fs-sm);
  font-weight: var(--gscc-fw-semibold);
  color: var(--gscc-color-text-secondary);
  margin-bottom: var(--gscc-space-1);
}

.form-text,
.help-block {
  font-size: var(--gscc-fs-sm);
  color: var(--gscc-color-muted);
}

.input-group-text {
  background: var(--gscc-color-bg-subtle);
  border-color: var(--gscc-color-border);
  color: var(--gscc-color-muted);
  font-size: var(--gscc-fs-md);
}

/* Select2 bridge */
.select2-container .select2-selection--single {
  min-height: var(--gscc-control-h) !important;
  height: var(--gscc-control-h) !important;
  border-color: var(--gscc-color-border) !important;
  border-radius: var(--gscc-radius-md) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--gscc-control-h) - 2px) !important;
  color: var(--gscc-color-text) !important;
  font-size: var(--gscc-fs-md);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--gscc-color-primary) !important;
  box-shadow: var(--gscc-shadow-focus);
}

/* Filter toolbar (public dashboard + list headers) */
.gscc-filter-bar,
.home-page .filter-sec form,
.px-15 .row.row-sm.pd-20 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gscc-space-3);
}

/* ----- Cards ----- */
.gscc-card,
.al-card,
.card.gscc-card {
  background: var(--gscc-color-surface);
  border: 1px solid var(--gscc-color-border);
  border-radius: var(--gscc-radius-lg);
  box-shadow: var(--gscc-shadow-xs);
  overflow: hidden;
}

.gscc-card-header,
.al-card .card-header {
  padding: var(--gscc-space-3) var(--gscc-space-4);
  background: var(--gscc-color-bg-subtle);
  border-bottom: 1px solid var(--gscc-color-border-subtle);
  font-weight: var(--gscc-fw-semibold);
  font-size: var(--gscc-fs-base);
  color: var(--gscc-color-text);
}

.gscc-card-body {
  padding: var(--gscc-space-4);
}

.gscc-card-footer {
  padding: var(--gscc-space-3) var(--gscc-space-4);
  background: var(--gscc-color-bg-subtle);
  border-top: 1px solid var(--gscc-color-border-subtle);
}

/* ----- Tables ----- */
.table.gscc-table,
.al-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.al-table thead th,
.table.gscc-table thead th {
  background: var(--gscc-color-secondary) !important;
  color: var(--gscc-color-text-inverse) !important;
  font-size: var(--gscc-fs-xs) !important;
  letter-spacing: var(--gscc-ls-wide);
  text-transform: uppercase;
  font-weight: var(--gscc-fw-semibold) !important;
  padding: var(--gscc-space-2) var(--gscc-space-3) !important;
  border: none !important;
  white-space: nowrap !important;
}

.al-table tbody td,
.table.gscc-table tbody td {
  vertical-align: middle !important;
  padding: var(--gscc-space-2) var(--gscc-space-3) !important;
  font-size: var(--gscc-fs-md);
  color: var(--gscc-color-text);
  border-color: var(--gscc-color-border-subtle) !important;
}

.al-table tbody tr:hover,
.table.gscc-table tbody tr:hover {
  background: var(--gscc-color-primary-soft) !important;
}

.table-responsive.al-table-scroll,
.al-table-wrap,
.gscc-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gscc-color-border);
  border-radius: var(--gscc-radius-md);
  background: var(--gscc-color-surface);
}

/* ----- Badges / status pills ----- */
.gscc-badge,
.badge.gscc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gscc-space-1);
  padding: 0.15rem 0.55rem;
  border-radius: var(--gscc-radius-pill);
  font-size: var(--gscc-fs-xs);
  font-weight: var(--gscc-fw-bold);
  line-height: var(--gscc-lh-tight);
  border: 1px solid transparent;
  white-space: nowrap;
}

.gscc-badge-success,
.dhte-sp-approved {
  background: var(--gscc-color-success-soft) !important;
  color: var(--gscc-color-success) !important;
  border-color: #86efac !important;
}
.gscc-badge-warning,
.dhte-sp-draft {
  background: var(--gscc-color-warning-soft) !important;
  color: #854d0e !important;
  border-color: #fde68a !important;
}
.gscc-badge-danger,
.dhte-sp-rejected {
  background: var(--gscc-color-danger-soft) !important;
  color: var(--gscc-color-danger) !important;
  border-color: #fca5a5 !important;
}
.gscc-badge-info,
.dhte-sp-requested {
  background: var(--gscc-color-info-soft) !important;
  color: var(--gscc-color-info) !important;
  border-color: #bfdbfe !important;
}
.gscc-badge-neutral,
.dhte-sp-default {
  background: var(--gscc-color-bg) !important;
  color: var(--gscc-color-muted) !important;
  border-color: var(--gscc-color-border) !important;
}

/* ----- Alerts ----- */
.alert,
.gscc-alert {
  border-radius: var(--gscc-radius-md);
  border-width: 1px;
  font-size: var(--gscc-fs-md);
  padding: var(--gscc-space-3) var(--gscc-space-4);
}
.alert-success {
  background: var(--gscc-color-success-soft);
  border-color: #A7D7C4;
  color: #0F5132;
}
.alert-danger {
  background: var(--gscc-color-danger-soft);
  border-color: #F0B4B4;
  color: #842029;
}
.alert-warning {
  background: var(--gscc-color-warning-soft);
  border-color: #E6D3A4;
  color: #664D03;
}
.alert-info {
  background: var(--gscc-color-info-soft);
  border-color: #B6D0E8;
  color: #084298;
}

/* ----- Tabs ----- */
.nav-tabs {
  border-bottom-color: var(--gscc-color-border);
}
.nav-tabs .nav-link {
  font-size: var(--gscc-fs-md);
  font-weight: var(--gscc-fw-semibold);
  color: var(--gscc-color-muted);
  border-radius: var(--gscc-radius-md) var(--gscc-radius-md) 0 0;
  padding: var(--gscc-space-2) var(--gscc-space-4);
}
.nav-tabs .nav-link:hover {
  color: var(--gscc-color-primary);
  border-color: var(--gscc-color-border-subtle);
}
.nav-tabs .nav-link.active {
  color: var(--gscc-color-primary) !important;
  border-color: var(--gscc-color-border) var(--gscc-color-border) var(--gscc-color-surface) !important;
  background: var(--gscc-color-surface) !important;
}

/* ----- Modals / dialogs ----- */
.modal-content {
  border: 1px solid var(--gscc-color-border);
  border-radius: var(--gscc-radius-lg);
  box-shadow: var(--gscc-shadow-lg);
  font-family: var(--gscc-font);
}
.modal-header {
  background: var(--gscc-color-primary);
  color: var(--gscc-color-text-inverse);
  border-bottom: 0;
  border-radius: var(--gscc-radius-lg) var(--gscc-radius-lg) 0 0;
  padding: var(--gscc-space-3) var(--gscc-space-4);
}
.modal-header .modal-title,
.modal-header .modal-title * {
  color: var(--gscc-color-text-inverse) !important;
  font-size: var(--gscc-fs-lg);
  font-weight: var(--gscc-fw-semibold);
}
.modal-header .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.85;
}
.modal-body {
  padding: var(--gscc-space-4);
  color: var(--gscc-color-text);
}
.modal-footer {
  border-top: 1px solid var(--gscc-color-border-subtle);
  padding: var(--gscc-space-3) var(--gscc-space-4);
  background: var(--gscc-color-bg-subtle);
  border-radius: 0 0 var(--gscc-radius-lg) var(--gscc-radius-lg);
}

/* Closed modals stay out of AT when using Bootstrap .fade:not(.show) */
.modal.fade:not(.show) {
  pointer-events: none;
}

/* ----- Tooltips (Bootstrap) ----- */
.tooltip .tooltip-inner {
  background: var(--gscc-color-secondary);
  font-size: var(--gscc-fs-sm);
  border-radius: var(--gscc-radius-sm);
  padding: var(--gscc-space-1) var(--gscc-space-2);
}

/* ----- Pagination (shared + gp-bar from _Pagination) ----- */
.pagination .page-link {
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gscc-fs-sm);
  font-weight: var(--gscc-fw-medium);
  color: var(--gscc-color-text);
  border-color: var(--gscc-color-border);
  border-radius: var(--gscc-radius-sm) !important;
  margin: 0 2px;
}
.pagination .page-item.active .page-link {
  background: var(--gscc-color-primary);
  border-color: var(--gscc-color-primary);
  color: #fff;
}
.pagination .page-link:hover {
  background: var(--gscc-color-primary-soft);
  color: var(--gscc-color-primary);
  border-color: var(--gscc-color-primary-muted);
}

.gp-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gscc-space-2);
  padding: var(--gscc-space-3) var(--gscc-space-4);
  background: var(--gscc-color-bg-subtle);
  border-top: 1px solid var(--gscc-color-border-subtle);
  font-size: var(--gscc-fs-sm);
}
.gp-info { color: var(--gscc-color-muted); white-space: nowrap; }
.gp-info strong { color: var(--gscc-color-text); }
.gp-counter {
  background: var(--gscc-color-success-soft);
  color: var(--gscc-color-success);
  border: 1px solid #a7f3d0;
  border-radius: var(--gscc-radius-pill);
  padding: 0.12rem 0.6rem;
  font-weight: var(--gscc-fw-bold);
  font-size: var(--gscc-fs-xs);
  white-space: nowrap;
}
.gp-spacer { flex: 1 1 auto; }
.gp-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.gp-pages a,
.gp-pages span.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border-radius: var(--gscc-radius-sm);
  border: 1px solid var(--gscc-color-border);
  background: var(--gscc-color-surface);
  color: var(--gscc-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--gscc-fs-sm);
  font-weight: var(--gscc-fw-medium);
  line-height: 1;
  transition: background var(--gscc-duration-fast), color var(--gscc-duration-fast),
    border-color var(--gscc-duration-fast), box-shadow var(--gscc-duration-fast);
}
.gp-pages a:hover {
  background: var(--gscc-color-primary-soft);
  border-color: var(--gscc-color-primary-muted);
  color: var(--gscc-color-primary);
  box-shadow: var(--gscc-shadow-sm);
}
.gp-pages a.gp-active,
.gp-pages .gp-active {
  background: var(--gscc-color-primary) !important;
  border-color: var(--gscc-color-primary) !important;
  color: #fff !important;
}
.gp-pages span.gp-disabled,
.gp-pages .disabled {
  opacity: 0.38;
  pointer-events: none;
  cursor: default;
}
.gp-pages span.gp-btn.active,
.gp-pages .gp-btn.active,
.gp-pages .active {
  background: var(--gscc-color-primary) !important;
  border-color: var(--gscc-color-primary) !important;
  color: #fff !important;
  font-weight: var(--gscc-fw-bold) !important;
  pointer-events: none;
}
.gp-pages .nav { padding: 0 0.45rem; font-size: var(--gscc-fs-xs); }
.gp-pages .nav-text { display: inline; }
.gp-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  height: 2rem;
  padding: 0 0.2rem;
  color: var(--gscc-color-muted);
  font-size: var(--gscc-fs-base);
  letter-spacing: var(--gscc-ls-wide);
  user-select: none;
}
.gp-goto {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
}
.gp-goto label {
  color: var(--gscc-color-muted);
  white-space: nowrap;
  margin: 0;
  font-size: var(--gscc-fs-sm);
}
.gp-goto-input {
  width: 3rem;
  height: 2rem;
  text-align: center;
  border: 1px solid var(--gscc-color-border);
  border-radius: var(--gscc-radius-sm);
  font-size: var(--gscc-fs-sm);
  font-weight: var(--gscc-fw-semibold);
  color: var(--gscc-color-text);
  padding: 0 0.2rem;
}
.gp-goto-input:focus {
  outline: none;
  border-color: var(--gscc-color-primary);
  box-shadow: var(--gscc-shadow-focus);
}
.gp-goto-btn {
  height: 2rem;
  padding: 0 0.6rem;
  border-radius: var(--gscc-radius-sm);
  border: 1px solid var(--gscc-color-primary);
  background: var(--gscc-color-primary);
  color: #fff;
  font-size: var(--gscc-fs-xs);
  font-weight: var(--gscc-fw-semibold);
  cursor: pointer;
}
.gp-goto-btn:hover { opacity: 0.9; }

@media (max-width: 767px) {
  .gp-pages .nav-text { display: none; }
  .gp-goto label { display: none; }
}
@media (max-width: 575px) {
  .gp-bar { flex-direction: column; align-items: flex-start; }
  .gp-spacer { display: none; }
}

/* ----- Icons ----- */
.gscc-icon,
.gscc-icon-sm,
.gscc-icon-md,
.gscc-icon-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.gscc-icon-sm { font-size: var(--gscc-icon-sm); width: var(--gscc-icon-sm); height: var(--gscc-icon-sm); }
.gscc-icon-md,
.gscc-icon { font-size: var(--gscc-icon-md); width: var(--gscc-icon-md); height: var(--gscc-icon-md); }
.gscc-icon-lg { font-size: var(--gscc-icon-lg); width: var(--gscc-icon-lg); height: var(--gscc-icon-lg); }

.btn i,
.btn .fa,
.btn .bi {
  font-size: var(--gscc-icon-sm);
  line-height: 1;
}

/* ----- Public nav brand green bridge ----- */
.home-page .navbar,
.home-page .main-navbar,
.home-page .header-nav-wrap,
.home-page nav.navbar.bg-green,
.home-page .bg-green.navbar {
  background-color: var(--gscc-color-primary) !important;
}

/* Public footer branding lives in mystyle.css — do not flatten it here. */

/* ----- Auth shell footer strip ----- */
.admin-dash-page .main-footer,
.admin-dash-page footer.footer {
  background: var(--gscc-color-bg) !important;
  border-top: 1px solid var(--gscc-color-border);
  color: var(--gscc-color-muted);
  font-size: var(--gscc-fs-sm);
}

/* ----- Login / register shells ----- */
.login-form .form-control,
.auth-card .form-control,
.card-login .form-control {
  min-height: var(--gscc-control-h-lg);
}

/* ----- Responsive type / spacing ----- */
@media (max-width: 767.98px) {
  body.home-page,
  body.admin-dash-page {
    font-size: var(--gscc-fs-md);
  }
  .gscc-section {
    padding-block: var(--gscc-space-6);
  }
  .btn,
  .gscc-btn {
    min-height: var(--gscc-control-h-lg);
  }
  .form-control,
  .form-select {
    min-height: var(--gscc-control-h-lg);
    font-size: var(--gscc-fs-base);
  }
  /* Ensure primary CTAs stay reachable in mobile header */
  .home-page .btn-resit-group,
  .home-page .mobile-sec .registration,
  .home-page .mobile-sec .login {
    display: inline-flex !important;
    visibility: visible !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .gscc-container {
    padding-inline: var(--gscc-space-5);
  }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}