/* ===== SAP Theme - Colors, Typography, and Base Styles ===== */

/* CSS Custom Properties - SAP Color Palette */
:root {
  /* Spacing */
  --spacing-xl: 16px;
  --spacing-5xl: 40px;
  --bs-body-font-size: 1rem;

  /* Primary Blues */
  --sap-primary-blue: #005ea2;
  --sap-hover-blue: #1a4480;
  --sap-active-blue: #0076d6;
  --sap-link-blue: #173a69;

  /* Text Colors */
  --sap-text-black: #1b1b1b;
  --sap-text-gray: #565c65;
  --sap-text-medium: #333;
  --sap-text-light: #666;
  --sap-text-muted: #999;
  --sap-text-primary-900: #181d27;
  --sap-text-secondary-700: #414651;
  --sap-text-tertiary-600: #535862;
  --sap-text-quaternary-500: #717680;
  --sap-text-brand-primary-900: #04254d;
  --sap-text-brand-secondary-700: #104b90;
  --sap-text-brand-tertiary-600: #2f5f9d;

  /* Background Colors */
  --sap-white: #ffffff;
  --sap-bg-light-gray: #f0f0f0;
  --sap-bg-hover-gray: #f9f9f9;
  --sap-bg-hover-secondary: #f5f5f5;
  --sap-bg-secondary: #fafafa;
  --sap-bg-primary: #ffffff;
  --sap-bg-primary-alt: #ffffff;
  --sap-bg-secondary-subtle: #fdfdfd;
  --sap-bg-active: #fafafa;
  --sap-bg-brand-primary: #edf1f6;
  --sap-bg-brand-solid: #2f5f9d;
  --sap-utility-gray-blue-50: #f8f9fc;
  --sap-utility-gray-blue-400: #717bbc;

  /* Border Colors */
  --sap-border-gray: #d9d9d9;
  --sap-border-light: #ececec;
  --sap-border-primary: #d5d7da;
  --sap-border-secondary: #e9eaeb;

  /* Utility Colors */
  --sap-badge-gray: #6b6b6b;
  --sap-help-icon-gray: #a9aeb1;
  --sap-icon-quaternary: #a4a7ae;

  /* Filter Active States */
  --sap-filter-active-bg: #e7f2ff;
  --sap-filter-active-hover-bg: #d6e9ff;
}

/* ===== Typography ===== */
/* TODO: use --bs-font variables instead */
body,
body * {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}

/* Force force override for FontAwesome icons */
.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

/* ===== Sticky Footer Layout ===== */
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

body > .wrapper,
body > .main,
body > [role="main"] {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

/* ===== CKAN Default Overrides - Remove gray backgrounds ===== */
body,
body.d-flex,
body.flex-column,
.main,
.wrapper,
.row.wrapper,
body .row.wrapper,
#content,
.container-fluid,
.primary,
.toolbar,
.container,
[role="main"] {
  background: var(--sap-white) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Target wrapper pseudo-elements */
.wrapper::before,
.row.wrapper::before {
  border-right: none !important;
  border-left: none !important;
  pointer-events: none !important;
}

.row.wrapper,
.row.wrapper::after {
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.row {
  background: transparent !important;
}

/* Remove module borders and backgrounds */
#content .primary .module,
.primary .module,
.module,
.module-content {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-header {
  background: var(--sap-white);
  border-bottom: none;
  margin-bottom: 30px;
}

.page-header .page-heading {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--sap-text-black);
}

/* Remove CKAN default styling */
.toolbar {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 20px;
}

/* ===== Breadcrumb Styles ===== */
.toolbar .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.toolbar .breadcrumb li {
  display: inline-flex;
  align-items: center;
  color: #717680;
}

/* Remove default CKAN breadcrumb separators */
.toolbar .breadcrumb li::before,
.toolbar .breadcrumb li::after {
  content: none !important;
  display: none !important;
}

.toolbar .breadcrumb li + li::before {
  content: none !important;
  display: none !important;
}

.toolbar .breadcrumb li a {
  color: #717680;
  text-decoration: none;
  transition: color 0.2s ease;
}

.toolbar .breadcrumb li a:hover {
  color: var(--sap-text-black);
  text-decoration: underline;
}

.toolbar .breadcrumb li.active {
  color: var(--sap-text-black);
  font-weight: 400;
  background: #fafafa;
  padding: 4px 8px;
  border-radius: 4px;
}

.toolbar .breadcrumb li.home a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Breadcrumb chevron icon styling */
.toolbar .breadcrumb svg {
  display: inline-flex;
  flex-shrink: 0;
}

/* Landing Page Breadcrumb - Figma specific styling */
.sap-landing-breadcrumb {
  display: flex !important;
  padding: var(--spacing-xl, 16px) 40px !important;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 0 !important;
}

.sap-landing-breadcrumb .breadcrumb {
  width: 100%;
  max-width: 1200px !important;
}

/* ===== Common Button Styles ===== */

/* Primary button - blue background for main call-to-action
   Used for: login, search submit, and other primary actions */
.sap-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 8px 20px !important;
  background: var(--sap-primary-blue) !important;
  border: 1px solid var(--sap-primary-blue) !important;
  border-radius: 4px !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  white-space: nowrap;
}

.sap-btn-primary:hover {
  background: var(--sap-active-blue) !important;
  border-color: var(--sap-active-blue) !important;
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.sap-btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.sap-btn-primary:focus {
  background: var(--sap-primary-blue) !important;
  color: white !important;
  border-color: var(--sap-primary-blue) !important;
  outline: none;
}

.sap-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.sap-btn-primary:disabled:hover {
  background: var(--sap-primary-blue) !important;
  border-color: var(--sap-primary-blue) !important;
  color: white !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.sap-btn-primary svg {
  flex-shrink: 0;
}

/* Secondary button - white background with gray border
   Used for: downloads, exports, filters, and other secondary actions */
.sap-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 10px 20px !important;
  background: white !important;
  border: 1px solid var(--sap-border-gray) !important;
  border-radius: 8px !important;
  color: var(--sap-text-medium) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sap-btn-secondary:hover {
  background: var(--sap-bg-hover-secondary) !important;
  border-color: var(--sap-help-icon-gray) !important;
  color: var(--sap-text-black) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.sap-btn-secondary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sap-btn-secondary:focus {
  background: white !important;
  color: var(--sap-text-medium) !important;
  border-color: var(--sap-border-gray) !important;
  outline: none;
}

.sap-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.sap-btn-secondary:disabled:hover {
  background: white !important;
  border-color: var(--sap-border-gray) !important;
  color: var(--sap-text-medium) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sap-btn-secondary svg {
  flex-shrink: 0;
}

/* ===== Utility Classes ===== */

/* Layout utilities */
.sap-flex-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sap-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sap-text-center {
  text-align: center;
}

.sap-text-left {
  text-align: left;
}

/* Spacing utilities */
.sap-mt-sm {
  margin-top: 20px;
}
.sap-mt-md {
  margin-top: 30px;
}
.sap-mb-sm {
  margin-bottom: 20px;
}
.sap-mb-md {
  margin-bottom: 30px;
}
.sap-mb-lg {
  margin-bottom: 50px;
}

/* Container utilities */
.sap-container-sm {
  max-width: 600px;
  margin: 0 auto;
}

.sap-container-md {
  max-width: 800px;
  margin: 0 auto;
}

.sap-container-lg {
  max-width: 1168px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Link utilities */
.sap-link-primary {
  color: var(--sap-primary-blue);
  text-decoration: underline;
  font-size: 16px;
  text-align: left;
}

.sap-link-primary:hover {
  color: var(--sap-active-blue);
  text-decoration: underline;
}

/* Text utilities */
.sap-text-muted {
  color: var(--sap-text-light);
}

.sap-text-gray {
  color: var(--sap-text-gray);
}

.sap-text-italic {
  font-style: italic;
  color: var(--sap-text-muted);
}

/* Grid utilities */
.sap-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 80px;
  max-width: 800px;
  margin: 0 auto;
}

/* When grid is inside browse tab content, make it wider to match stats band */
.sap-text-center .sap-grid-2col {
  max-width: calc(100vw - 120px);
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

/* Agencies tab content - match topics styling */
.sap-tab-content.sap-grid-2col a {
  color: var(--sap-text-brand-primary-900);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-decoration: underline;
}

.sap-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 160px 10px 160px;
  column-gap: 25px;
  row-gap: 24px;
}

/* Topics Container - New row-based layout */
.sap-topics-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sap-topics-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 25px;
  padding: 20px 80px 10px 80px;
}

.sap-topic-group {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sap-topic-group-title {
  color: var(--sap-text-brand-primary-900);
  font-family: "Public Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-align: left;
}

.sap-topic-group a {
  color: var(--sap-text-brand-primary-900);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
  text-decoration: underline;
}

/* List utilities */
.sap-list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===== Search Bar Component ===== */
.sap-search-container {
  width: 100%;
}

.sap-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--sap-border-gray);
  border-radius: 6px;
  background: var(--sap-white);
  padding: 4px;
}

.sap-search-icon {
  position: absolute;
  left: 14px;
  color: var(--sap-text-gray);
}

.sap-search-input {
  flex: 1;
  height: 36px;
  padding: 0 12px 0 40px;
  border: none;
  font-size: 16px;
  color: var(--sap-text-gray);
  background: transparent;
  outline: none;
}

.sap-search-submit {
  height: 32px;
}

/* =========================
   NOTIFICATION BANNER
   Displays important announcements on the landing page
   ========================= */

.sap-notification-wrapper {
  padding: 16px 40px;
}

.sap-notification-banner {
  position: relative;
  width: 100%;
  max-width: 1200px !important;
  margin: 0 auto 8px auto;
  padding: 16px;
  background: var(--sap-utility-gray-blue-50);
  border-radius: 12px;
  outline: 1px solid var(--sap-utility-gray-blue-400);
  outline-offset: -1px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}

.sap-notification-close {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #717680 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  font-weight: normal !important;
  box-shadow: none !important;
}

.sap-notification-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #414651 !important;
  box-shadow: none !important;
}

.sap-notification-close:active {
  background: rgba(0, 0, 0, 0.1) !important;
}

.sap-notification-close svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
  fill: none !important;
}

.sap-notification-close svg path {
  stroke: #717680 !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

.sap-notification-close:hover svg path {
  stroke: #414651 !important;
}

.sap-notification-icon {
  width: 36px;
  height: 36px;
  position: relative;
  flex-shrink: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sap-notification-icon svg {
  width: 36px;
  height: 36px;
}

.sap-notification-content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding-right: 32px;
}

.sap-notification-text {
  color: var(--sap-text-secondary-700);
  font-size: 14px;
  font-family: "Public Sans", sans-serif;
  font-weight: 500;
  line-height: 20px;
  word-wrap: break-word;
}

.sap-notification-text strong {
  font-weight: 600;
}

/* =========================
   HERO / DESCRIPTION SECTION
   Light blue background section with SAP portal description
   ========================= */

.sap-hero-section {
  width: 100%;
  background: var(--sap-bg-brand-primary);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.sap-hero-content {
  width: 100%;
  max-width: 1168px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.sap-hero-text {
  align-self: stretch;
  text-align: justify;
  color: var(--sap-text-black);
  font-size: 20px;
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  line-height: 30px;
  word-wrap: break-word;
}

.sap-hero-text a {
  color: var(--sap-text-brand-tertiary-600);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.sap-hero-text a:hover {
  color: var(--sap-text-brand-secondary-700);
}

/* ===== Browse Page Tab System ===== */
.sap-page-title {
  font-size: 36px;
  margin-bottom: 40px;
}

.sap-browse-search-section {
  text-align: center;
  margin-bottom: 50px;
  padding: 32px 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.sap-browse-search-label {
  display: block;
  margin-bottom: 16px;
  font-size: 20px;
  line-height: 30px;
  color: var(--sap-text-tertiary-600);
}

.sap-browse-tabs-section {
  margin-top: 40px;
}

.sap-browse-label {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: var(--sap-text-tertiary-600);
  margin-bottom: 8px;
}

.sap-tab-group {
  display: inline-flex;
  width: 448px;
  border: 1px solid var(--sap-border-secondary);
  border-radius: 12px;
  background: var(--sap-border-secondary);
  margin-bottom: 32px;
  padding: 6px;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.sap-tab-button {
  flex: 1 1 0;
  height: 44px;
  padding: 8px 12px;
  font-size: 16px;
  background: transparent !important;
  border: none;
  color: var(--sap-text-quaternary-500) !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px;
  outline: none;
}

.sap-tab-button:hover,
.sap-tab-button:focus,
.sap-tab-button:active {
  outline: none !important;
}

.sap-tab-button.active {
  background: var(--sap-bg-primary-alt) !important;
  box-shadow:
    0px 1px 2px -1px rgba(10, 13, 18, 0.1),
    0px 1px 3px rgba(10, 13, 18, 0.1);
  color: var(--sap-text-secondary-700) !important;
  font-weight: 600;
}

.sap-tab-content {
  display: none;
}

.sap-tab-content.active {
  display: block;
}

.sap-tab-content.sap-grid-2col.active {
  display: grid;
}

.sap-tab-content.sap-grid-3col.active {
  display: grid;
}

.sap-empty-message {
  grid-column: 1 / -1;
  color: var(--sap-text-gray);
}

/* ===== Header Navigation Styles ===== */
.navbar-nav .sap-nav-item {
  margin-right: 8px;
}

.navbar-nav .sap-nav-item:last-child {
  margin-right: 0;
}

.navbar-nav .sap-nav-item .nav-link {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 12px;
  border-radius: 6px;
  color: #252b37;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.navbar-nav .sap-nav-item .nav-link:hover {
  background: #fafafa;
  color: #252b37;
  text-decoration: none;
}

.navbar-nav .sap-nav-item .nav-link.active {
  background: #fafafa;
  color: #252b37;
}

/* Help icon in header navigation */
.navbar-nav .sap-nav-item .nav-link svg {
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

/* =========================
   DATASET SEARCH / BROWSE PAGE STYLES
   ========================= */

/* Browse mode: center main column when there is no sidebar */
.row.wrapper.no-nav .primary[class*="col-"] {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.row.wrapper.no-nav .primary {
  width: 100%;
}

.sap-browse-mode {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   STATS BAND (Public users only)
   ========================= */

.sap-stats-band {
  width: 100%;
  padding: 40px;
  background: var(--Colors-Background-bg-brand-primary, #edf1f6);
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
}

.sap-stats-band-inner {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  display: inline-flex;
  max-width: 1168px;
  margin: 0 auto;
  width: 100%;
}

.sap-stats-item {
  flex: 1 1 0;
  min-width: 320px;
  background: var(--Colors-Background-bg-secondary_subtle, #fdfdfd);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  overflow: hidden;
  border-radius: 12px;
  outline: 1px var(--Colors-Border-border-secondary, #e9eaeb) solid;
  outline-offset: -1px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: inline-flex;
}

.sap-stats-item > div {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  display: flex;
}

.sap-stats-label-wrapper {
  align-self: stretch;
  padding: 12px 20px 8px 20px;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  display: inline-flex;
}

.sap-stats-label {
  flex: 1 1 0;
  margin: 0;
  padding: 0;
  color: var(--Colors-Text-text-primary-(900), #181d27);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  word-wrap: break-word;
}

.sap-stats-value-wrapper {
  align-self: stretch;
  padding: 20px;
  background: var(--Colors-Background-bg-primary, white);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  border-radius: 12px;
  outline: 1px solid var(--Colors-Border-border-secondary, #e9eaeb);
  outline-offset: -1px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  display: flex;
}

.sap-stats-value-inner {
  align-self: stretch;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  align-content: center;
}

.sap-stats-value {
  color: var(--Colors-Text-text-primary-(900), #181d27);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 38px;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .sap-stats-band-inner {
    flex-direction: column;
  }
}

/* =========================
   AGENCIES SECTION (Public users only)
   ========================= */

.sap-agencies-header {
  width: 100%;
  max-width: 1200px !important;
  padding: 40px 40px 0 40px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.sap-agencies-title {
  color: var(--Colors-Text-text-primary-(900), #181d27);
  font-size: 36px;
  font-family: Public Sans;
  font-weight: 600;
  line-height: 44px;
  margin: 0;
}

.sap-agencies-section {
  width: 100%;
  padding: 40px 40px 96px 40px;
  background: var(--Colors-Background-bg-primary, white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.sap-agencies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
  width: 100%;
  max-width: 1168px;
  gap: 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sap-agencies-row {
  display: contents;
}

.sap-agency-card {
  box-sizing: border-box;
  border-radius: var(--radius-2xl, 16px);
  border: 1px solid var(--Colors-Border-border-secondary, #e9eaeb);
  background: var(--Colors-Background-bg-primary_alt, #fff);
  box-shadow:
    0 1px 3px 0
      var(--Colors-Effects-Shadows-shadow-sm_01, rgba(10, 13, 18, 0.1)),
    0 1px 2px -1px
      var(--Colors-Effects-Shadows-shadow-sm_02, rgba(10, 13, 18, 0.1));
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 20px;
  height: 176px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.sap-agency-card:hover {
  box-shadow:
    0px 4px 6px -2px rgba(10, 13, 18, 0.1),
    0px 8px 12px rgba(10, 13, 18, 0.1);
  transform: translateY(-2px);
}

.sap-agency-logo {
  width: 120px;
  max-height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  align-self: center;
}

.sap-agency-info {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}

.sap-agency-acronym {
  align-self: stretch;
  color: var(--Colors-Text-text-brand-secondary-(700), #104b90);
  font-size: 14px;
  font-family: Public Sans;
  font-weight: 600;
  line-height: 20px;
}

.sap-agency-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sap-agency-name,
.sap-agency-acronym {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Search mode only: side-by-side layout */
.row.wrapper.sap-search-layout {
  display: flex !important;
  max-width: 1500px;
  margin: 0 auto;
  align-items: flex-start;
  gap: 32px;
}

.row.wrapper.sap-search-layout .secondary,
.row.wrapper.sap-search-layout .secondary[class*="col-"] {
  flex: 0 0 320px;
  width: 320px !important;
  float: none !important;
}

.row.wrapper.sap-search-layout .primary,
.row.wrapper.sap-search-layout .primary[class*="col-"] {
  flex: 1;
  width: auto !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================
   SEARCH PAGE HEADER
   ========================= */

.sap-search-page-header {
  width: 100%;
  margin: 0 0 20px 0;
}

.sap-search-header-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.sap-search-header-row {
  width: 100%;
  max-width: 720px;
}

/* =========================
   SEARCH RESULTS MODE
   ========================= */

.sap-search-results-mode {
  padding-top: 0;
}

.sap-search-results-mode select {
  height: 40px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 8px;
  background: var(--sap-white);
  font-size: 14px;
}

/* =========================
   PAGINATION
   ========================= */

.sap-search-results-mode .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--sap-border-light);
  background: var(--sap-white);
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.sap-search-results-mode .pagination li {
  list-style: none;
  display: inline-block;
}

.sap-search-results-mode .pagination a,
.sap-search-results-mode .pagination span {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--sap-link-blue);
}

.sap-search-results-mode .pagination .active span {
  background: var(--sap-primary-blue);
  color: var(--sap-white);
}

.sap-search-results-mode .pagination .disabled span {
  color: var(--sap-text-muted);
}

/* =========================
   FILTER SIDEBAR
   ========================= */

.sap-filter-group {
  display: flex;
  width: 320px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  background: var(--sap-bg-secondary);
  border: none;
  overflow: hidden;
  margin-bottom: 8px;
}

.sap-filter-group:last-child {
  margin-bottom: 0;
}

.sap-filter-toggle {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sap-text-black);
  cursor: pointer;
  text-align: left;
}

.sap-filter-toggle:hover,
.sap-filter-toggle:focus,
.sap-filter-toggle:active {
  background: transparent;
  color: var(--sap-text-black);
}

.sap-filter-icon {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  color: var(--sap-icon-quaternary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sap-filter-icon svg {
  width: 100%;
  height: 100%;
}

.sap-filter-body {
  display: none;
  padding: 0;
  padding-top: 16px;
  background: transparent;
  border-top: none;
  width: 100%;
}

.sap-filter-body.is-open {
  display: block;
}

.sap-filter-body .module-heading,
.sap-filter-body h3,
.sap-filter-body h2 {
  display: none;
}

/* Keep the first filter row from riding up into the blue header area */
.sap-filter-body > ul,
.sap-filter-body > .nav,
.sap-filter-body > .nav-simple {
  margin-top: 2px;
}

/* Facet rows */
.sap-search-filters .nav-item > a {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 12px;
  text-decoration: none;
  color: var(--sap-text-primary-900);
  box-sizing: border-box;
  border-radius: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
  white-space: normal !important;
  min-height: 56px;
  position: relative;
}

/* Checkbox box to the left of each option */
.sap-search-filters .nav-item > a::before,
.sap-search-filters li > a::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  border: 1.5px solid var(--sap-border-primary) !important;
  border-radius: 4px !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  order: -1 !important;
  position: static !important;
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.sap-search-filters .nav-item > a:hover {
  background-color: var(--sap-bg-hover-gray);
}

/* Active/Selected filter item */
.sap-search-filters .nav-item.active > a,
.sap-search-filters .nav-item > a.active,
.sap-search-filters .nav-item > a[aria-selected="true"],
.sap-search-filters li.active > a,
.sap-search-filters a.selected {
  background-color: var(--sap-bg-brand-primary) !important;
  color: var(--sap-text-brand-primary-900) !important;
  font-weight: 600 !important;
}

/* Checkbox for selected items - filled with checkmark */
.sap-search-filters .nav-item.active > a::before,
.sap-search-filters li.active > a::before {
  display: block !important;
  content: "" !important;
  background-color: var(--sap-primary-blue) !important;
  border-color: var(--sap-primary-blue) !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.6666 3.5L5.24998 9.91667L2.33331 7" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.sap-search-filters .nav-item.active > a:hover,
.sap-search-filters .nav-item > a.active:hover,
.sap-search-filters .nav-item > a[aria-selected="true"]:hover,
.sap-search-filters li.active > a:hover,
.sap-search-filters a.selected:hover {
  background-color: var(--sap-bg-brand-primary) !important;
}

/* Hide close button and ::after on filter items (but keep ::before for checkbox) */
.sap-search-filters .nav-item .facet-close,
.sap-search-filters li .facet-close {
  display: none !important;
}

.sap-search-filters .nav-item > a::after,
.sap-search-filters li > a::after {
  content: none !important;
  display: none !important;
}

/* Ensure close icon doesn't prevent wrapping if shown */
.sap-search-filters .facet-close {
  flex-shrink: 0;
  margin-left: 8px;
}

.sap-search-filters .item-label {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 0;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  text-overflow: clip;
  font-size: 14px;
  font-weight: 500;
}

/* Hide count badges completely */
.sap-search-filters .item-count,
.sap-search-filters .item-count.badge,
.sap-search-filters .badge {
  display: none !important;
}

.sap-search-filters li {
  padding: 0;
  border-bottom: 1px solid var(--sap-border-secondary);
  display: block;
}

.sap-search-filters li:last-child {
  border-bottom: 1px solid var(--sap-border-secondary);
}

.sap-search-filters .hidden.separator,
.sap-search-filters .separator {
  display: none !important;
}

.read-more {
  font-size: 12px !important;
  color: var(--sap-text-light) !important;
}

/* =========================
   RESULTS TABLE SHELL
   ========================= */

.sap-results-table-shell {
  border: 1px solid var(--sap-border-light);
  border-radius: 12px;
  overflow: visible;
  background: var(--sap-white);
  margin-top: 4px;
}

.sap-results-table-header {
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sap-border-light);
  font-size: 12px;
  font-weight: 600;
  color: var(--sap-text-light);
}

.sap-results-table-body {
  margin: 0;
  padding: 0;
}

.sap-results-table-body .dataset-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

.sap-results-table-body .dataset-item,
.sap-results-table-body .dataset-list li {
  padding: 16px 24px;
  border: none;
  border-bottom: 1px solid var(--sap-border-gray);
  margin: 0;
  background: #fdfdfd;
  list-style: none;
}

.sap-results-table-body .dataset-item:last-child,
.sap-results-table-body .dataset-list li:last-child {
  border-bottom: none;
}

/* =========================
   RESULT ROW CONTENT
   ========================= */

.sap-result-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Hover effect for search results rows */
.sap-result-row:hover {
  background-color: var(--sap-bg-hover-gray);
}

.sap-result-main {
  min-width: 0;
}

.sap-result-row .dataset-heading,
.sap-result-row h3.dataset-heading {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-family: "Public Sans", sans-serif;
}

.sap-result-row .dataset-heading a {
  color: #04254d;
  text-decoration: none;
}

.sap-result-row .dataset-heading a:hover {
  text-decoration: underline;
}

.sap-result-row .dataset-id,
.sap-result-row .dataset-source {
  font-size: 13px;
  line-height: 1.4;
  color: var(--sap-text-light);
}

.sap-result-date {
  font-size: 13px;
  line-height: 1.4;
  color: var(--sap-text-light);
  text-align: right;
  white-space: nowrap;
  padding-top: 2px;
}

/* =========================
   RESULTS TOOLBAR
   ========================= */

.sap-search-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 0;
  padding: 14px 18px;
  border-bottom: 1px solid #ececec;
}

.sap-search-toolbar-left {
  display: flex;
  align-items: center;
  color: #252b37;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.sap-search-toolbar-middle,
.sap-search-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sap-search-toolbar label {
  color: #252b37;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  margin: 0;
}

.sap-search-toolbar label::after,
.sap-filter-pill label::after {
  content: none !important;
  display: none !important;
}

.sap-search-toolbar select {
  height: 36px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  background: var(--sap-white);
}

.sap-search-toolbar select::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 991px) {
  .sap-search-toolbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sap-results-table-header,
  .sap-result-row {
    grid-template-columns: 1fr;
  }

  .sap-results-col-date,
  .sap-result-date {
    text-align: left;
  }
}

/* =========================
   METADATA PAGES - LAYOUT AND COMPONENTS
   ========================= */

/* Metadata-specific CKAN overrides */
/* Only apply when .sap-metadata-container exists (metadata pages) */
.primary:has(.sap-metadata-container) {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hide sidebar on metadata pages only - using parent wrapper context */
.wrapper:has(.sap-metadata-container) .secondary.col-md-3,
.wrapper:has(.sap-metadata-container) .secondary {
  display: none !important;
}

.wrapper:has(.sap-metadata-container) .container-fluid,
.wrapper:has(.sap-metadata-container) div[role="main"] {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Main Container */
.sap-metadata-container {
  max-width: 1200px !important;
  margin: 0 auto 0 -15px;
  padding: 20px 15px;
  background: var(--sap-white);
}

/* Dataset Description - plain text in search results (override box styling) */
.sap-result-row .dataset-description,
.sap-result-row p.dataset-description {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #535862;
  font-size: 14px;
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
}

/* Agency name styling */
.sap-result-row .dataset-agency {
  color: #535862;
  font-size: 14px;
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  line-height: 20px;
  margin: 0;
}

/* Dataset metadata fields (Access Modality, Fees, Topics) */
.sap-result-row .dataset-field {
  color: #535862;
  font-size: 14px;
  font-family: "Public Sans", sans-serif;
  line-height: 20px;
  margin: 0;
}

.sap-result-row .dataset-field-label {
  font-weight: 600;
}

.sap-result-row .dataset-field-value {
  font-weight: 400;
}

/* Legacy - Dataset metadata row below description */
.sap-result-row .dataset-metadata,
.sap-result-row p.dataset-metadata {
  display: block;
  margin: 0;
  color: var(--sap-text-gray);
  font-size: 13px;
}

/* Dataset Description Box for detail pages */
.dataset-description {
  background: #edf1f6;
  padding: 25px 30px;
  margin-bottom: 30px;
  border-radius: 4px;
  border: 1px solid var(--sap-border-gray);
}

.dataset-description .dataset-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 15px;
}

.dataset-description .dataset-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sap-text-black);
  margin: 0;
  line-height: 1.3;
  flex: 1;
}

.sap-btn-basket {
  display: flex;
  padding: 10px 14px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: #2f5f9d;
  box-shadow:
    0 0 0 1px rgba(10, 13, 18, 0.18) inset,
    0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
    0 1px 2px 0 rgba(10, 13, 18, 0.05);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  white-space: nowrap;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.sap-btn-basket:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.sap-btn-basket:not(:disabled):hover {
  background: #1d4a7d;
  box-shadow:
    0 0 0 1px rgba(10, 13, 18, 0.18) inset,
    0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
    0 2px 4px 0 rgba(10, 13, 18, 0.1);
  color: white;
  text-decoration: none;
}

.dataset-description h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--sap-text-black);
  line-height: 1.3;
}

.dataset-description .prose {
  line-height: 1.5;
  color: #181d27;
  font-size: 16px;
}

/* Description collapse functionality */
.dataset-description .description-content.collapsed {
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

.dataset-description .description-content.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #edf1f6);
  pointer-events: none;
}

.dataset-description .description-content:not(.collapsed)::after {
  display: none;
}

.dataset-description .show-more-description {
  color: #104b90;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.dataset-description .show-more-description:hover {
  text-decoration: underline;
}

/* Download Button */
.dataset-download {
  margin-bottom: 20px;
}

/* Metadata Layout (Sidebar + Content) */
.sap-metadata-layout {
  display: flex;
  gap: 30px;
  margin-top: 30px;
  align-items: flex-start;
}

/* Sidebar Navigation */
.sap-metadata-sidebar {
  flex: 0 0 250px;
  background: var(--sap-bg-light-gray);
  border: 1px solid var(--sap-border-gray);
  border-radius: 4px;
  height: fit-content;
  position: sticky;
  top: 20px;
  padding: 20px;
  z-index: 10;
}

.sap-metadata-sidebar h3 {
  margin: 0 0 15px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--sap-text-black);
  line-height: 1.3;
}

.sap-metadata-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sap-metadata-nav li {
  margin: 0 0 0 0;
  display: block;
}

.sap-metadata-nav li:last-child {
  margin-bottom: 0;
}

.sap-metadata-nav a {
  display: block;
  height: 100%;
  padding: 10px 12px;
  color: var(--sap-text-gray);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  border-left: 3px solid var(--sap-border-gray);
  border-radius: 2px;
  cursor: pointer;
  pointer-events: auto;
  box-sizing: border-box;
}

.sap-metadata-nav a:hover {
  background: var(--sap-border-gray);
  color: var(--sap-text-black);
  text-decoration: none;
}

.sap-metadata-nav li.active a {
  color: #104b90;
  font-weight: 600;
  border-left-color: #104b90;
}

/* Content Area */
.sap-metadata-content {
  flex: 1;
  min-height: 400px;
}

/* Metadata Display Fields */
.metadata-section {
  padding-bottom: 96px;
  padding-left: 40px;
}

.metadata-section h2 {
  margin: 0 0 32px 0;
  color: var(--Colors-Text-text-primary-(900), #181d27);
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
}

.metadata-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  max-width: 1280px;
}

.metadata-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metadata-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--Colors-Text-text-primary-(900), #181d27);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 20px;
}

.metadata-value {
  color: var(--Colors-Text-text-primary-(900), #181d27);
  font-size: 16px;
  line-height: 24px;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metadata-value a {
  color: var(--sap-primary-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.metadata-value a:hover {
  color: var(--sap-active-blue);
  border-bottom-color: var(--sap-active-blue);
  text-decoration: none;
}

.metadata-value ul {
  margin: 8px 0 0 0;
  padding-left: 24px;
  list-style-type: disc;
}

.metadata-value ul.sap-list-reset {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}

.metadata-value ul li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.help-icon {
  color: var(--sap-help-icon-gray);
  cursor: help;
  font-size: 16px;
  transition: color 0.2s ease;
}

.help-icon:hover {
  color: var(--sap-primary-blue);
}

/* Utility classes for metadata templates */
.sap-text-not-specified {
  color: var(--sap-text-muted);
  font-style: italic;
}

.sap-mb-xs {
  margin-bottom: 4px;
}

/* Metadata Responsive Design */
@media (max-width: 992px) {
  .sap-metadata-layout {
    flex-direction: column;
  }

  .sap-metadata-sidebar {
    position: relative;
    top: 0;
    width: 100%;
  }

  .metadata-field {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .metadata-section {
    padding-left: 20px;
  }
}

@media (max-width: 768px) {
  .dataset-description .dataset-header {
    flex-direction: column;
    align-items: stretch;
  }

  .sap-btn-basket {
    width: 100%;
  }

  .metadata-section {
    padding-left: 16px;
    padding-bottom: 48px;
  }

  .metadata-section h2 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 576px) {
  .metadata-section {
    padding-left: 0;
  }

  .metadata-section h2 {
    font-size: 24px;
    line-height: 32px;
  }
}

/* =========================
   HEADER STYLES
   ========================= */

.sap-header {
  width: 100%;
  height: 72px;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px !important;
  margin: 0 auto;
}

.sap-header-break {
  border-top: 1px solid #d6d7d9;
  margin: 0;
  opacity: 100%;
}

/* Government Banner */
.sap-gov-banner {
  width: 100%;
  padding: 4px 32px;
  background: #f7f8f8;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.sap-gov-banner-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.sap-gov-banner-flag {
  width: 16px;
  height: 11px;
  flex-shrink: 0;
}

.sap-gov-banner-text-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sap-gov-banner-text {
  color: #1b1b1b;
  font-size: 12px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.sap-gov-banner-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.sap-gov-banner-button:hover {
  opacity: 0.8;
}

.sap-gov-banner-button svg {
  flex-shrink: 0;
}

.sap-gov-banner-link {
  color: #2f5f9d;
  font-size: 12px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  text-decoration: underline;
  word-wrap: break-word;
}

/* Main Header */
.sap-header-container {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}

.sap-header-logo {
  margin-right: 0;
  float: left;
  line-height: 4rem;
  margin-left: 1.5rem;
}

@media screen and (min-width: 951px) {
  .sap-header-logo {
    line-height: normal;
    margin-left: 0;
  }
}

.sap-header-logo a {
  display: inline-block;
  color: #212121;
  text-decoration: none;
}

.sap-header-logo img {
  width: 280px;
  height: 52px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  vertical-align: top;
}

.sap-header-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  font-size: 16px; /* to get the line height right */
}

.sap-header-nav ul {
  display: inline-flex;
  flex-direction: row;
  list-style: none;
  margin-top: 0;
}

.sap-header-nav-item {
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
  font-size: 16px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5em; /* FIXME: Drupal specifies this for all li, makes the top menu off-center */
}

.sap-header-nav-item a {
  color: rgb(65, 70, 81) !important;
}

.sap-header-nav-item a:hover {
  text-decoration: none !important;
}

/* Header Actions (My Account button) */
.sap-header-actions {
  margin: 0 20px 0 auto;
}

.sap-header-btn-login {
  padding: 10px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  color: #333;
  background: white;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sap-header-btn-login:hover {
  background: #f7f8f8;
  text-decoration: none;
}

/* Sub-header line */
.sap-subheader-container {
  margin-top: 0;
  width: 100%;
}

.sap-subheader-user-links {
  max-width: 1200px !important;
  margin: 0 auto;
}

.sap-subheader {
  list-style: none;
  display: flex;
  flex-direction: row;
  margin-top: 8px;
  margin-bottom: 8px;
  align-items: center;
  height: 40px;
  padding: 0 12px;
}

.sap-user-link {
  margin-right: 20px;
}

.sap-header-user-link {
  margin-right: 0 !important;
}

.sap-user-link a {
  text-decoration: none !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: #414651;
}

.sap-header-user-link a {
  line-height: 21px !important; /* Drupal uses default document value here so it does not match the style of the New Application button */
}

.sap-user-link a:hover {
  text-decoration: none !important;
}

.sap-user-link--new-application {
  margin-left: auto;
}

.sap-user-link--new-application a {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .sap-header-container {
    padding: 0 20px;
  }

  .sap-header-logo img {
    width: 200px;
    height: auto;
  }

  .sap-header-nav {
    gap: 0;
  }

  .sap-header-nav-item {
    padding: 8px 10px;
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .sap-header-container {
    height: auto;
    padding: 12px 20px;
    flex-direction: column;
    gap: 16px;
  }

  .sap-header-left {
    width: 100%;
    flex-direction: column;
    gap: 16px;
  }

  .sap-header-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sap-header-actions {
    width: 100%;
    justify-content: center;
  }

  .sap-gov-banner {
    padding: 8px 20px;
  }
}

@media (max-width: 576px) {
  .sap-header-logo img {
    width: 150px;
  }

  .sap-header-nav {
    flex-direction: column;
    gap: 8px;
  }

  .sap-header-nav-item {
    width: 100%;
    justify-content: center;
  }

  .sap-gov-banner-text-group {
    flex-direction: column;
    gap: 4px;
  }
}

/* =========================
   FOOTER STYLES
   ========================= */

.sap-footer {
  background: #162e51;
  width: 100%;
}

.sap-footer-container {
  width: 100%;
  padding: 40px;
  margin: 0 auto;
  max-width: 1200px !important;
}

.sap-footer-main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 35px;
}

.sap-footer-logo {
  width: 473px;
  overflow: hidden;
  flex-shrink: 0;
}

.sap-footer-logo img {
  width: 100%;
  height: auto;
  max-height: 90px;
  object-fit: contain;
}

.sap-footer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.sap-footer-nav-primary {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.sap-footer-nav-primary a {
  color: white;
  font-size: 15px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  text-decoration: underline;
  word-wrap: break-word;
  transition: opacity 0.2s ease;
}

.sap-footer-nav-primary a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.sap-footer-usagov {
  padding-top: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sap-footer-usagov-text {
  color: white;
  font-size: 12px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}

.sap-footer-usagov-link {
  color: white;
  font-size: 12px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600;
  text-decoration: underline;
  word-wrap: break-word;
  transition: opacity 0.2s ease;
}

.sap-footer-usagov-link:hover {
  color: white !important;
  opacity: 0.8;
  text-decoration: underline;
}

.sap-footer-attribution {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
}

.sap-footer-attribution-text {
  color: #dcdee0;
  font-size: 12px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 500;
  line-height: 18px;
  word-wrap: break-word;
}

.sap-footer-attribution-link {
  color: #dcdee0;
  font-size: 12px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600;
  text-decoration: underline;
  line-height: 18px;
  word-wrap: break-word;
  transition: opacity 0.2s ease;
}

.sap-footer-attribution-link:hover {
  color: white !important;
  opacity: 0.8;
  text-decoration: underline;
}

.sap-footer-nav-secondary {
  padding-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.sap-footer-nav-secondary a {
  color: white;
  font-size: 13px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  text-decoration: underline;
  word-wrap: break-word;
  transition: opacity 0.2s ease;
}

.sap-footer-nav-secondary a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Responsive design for footer */
@media (max-width: 991px) {
  .sap-footer-main {
    flex-direction: column;
    gap: 24px;
  }

  .sap-footer-logo {
    width: 100%;
    max-width: 350px;
  }

  .sap-footer-container {
    padding: 30px 20px;
  }
}

@media (max-width: 576px) {
  .sap-footer-nav-primary,
  .sap-footer-nav-secondary {
    flex-direction: column;
    gap: 12px;
  }

  .sap-footer-container {
    padding: 20px 15px;
  }
}

.omb-number {
  margin-right: 12px;
  position: relative;
}

.omb-expiration::before {
  content: "|";
  display: inline-block;
  margin-right: 12px;
  margin-left: 0;
}

.omb-expiration {
  margin-left: 0;
}

/* ============================================================================
   METADATA RECORDS PAGE
   ============================================================================ */

/* Page Description */
.sap-page-description {
  font-size: 16px;
  color: var(--sap-text-black);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Alert Banner */
.sap-alert {
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sap-alert-success {
  background-color: #d1f4e0;
  color: #0a5f2f;
  border: 1px solid #7fd9a7;
}

.sap-alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffe69c;
}

.sap-alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.sap-alert-info {
  background-color: #d1e7f8;
  color: #084298;
  border: 1px solid #9ecaed;
}

/* In-progress upload banner with spinner */
.sap-alert-upload-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sap-alert-upload-progress .sap-upload-spinner-small {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(8, 66, 152, 0.2);
  border-top-color: #084298;
  border-radius: 50%;
  animation: sap-spin 1s linear infinite;
  flex-shrink: 0;
}

/* Action Cards */
.sap-action-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.sap-action-card {
  padding: 24px;
  border-radius: 8px;
  border: 1px solid var(--sap-border-gray);
  height: 100%; /* fill the row */
}

.sap-action-card-blue {
  background-color: #e7f2ff;
}

.sap-action-card-green {
  background-color: #d1f4e0;
}

.sap-action-card-text {
  font-size: 16px;
  color: var(--sap-text-black);
  margin-bottom: 16px;
}

.sap-action-card-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Search Form */
.sap-metadata-search-form {
  margin-bottom: 24px;
}

/* Filter Pills */
.sap-filter-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.sap-filter-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 20px;
  background-color: var(--sap-white);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.sap-filter-pill:hover {
  background-color: var(--sap-bg-light-gray);
}

.sap-filter-pill.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.sap-filter-pill input[type="checkbox"],
.sap-filter-pill input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--sap-primary-blue);
}

.sap-filter-pill.disabled input[type="checkbox"],
.sap-filter-pill.disabled input[type="radio"] {
  cursor: not-allowed;
}

.sap-filter-pill input[type="checkbox"]:checked + span,
.sap-filter-pill input[type="radio"]:checked + span {
  font-weight: 600;
  color: var(--sap-primary-blue);
}

.sap-filter-pill span {
  color: #414651;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.sap-filter-pill::after,
.sap-filter-pill label::after,
.sap-filter-pill span::after {
  content: none !important;
  display: none !important;
}

/* Records Table - Semantic HTML Table Structure */
/* Force proper table display (override any conflicting styles) */
.sap-metadata-records-table {
  display: table !important;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sap-metadata-records-table thead {
  display: table-header-group !important;
}

.sap-metadata-records-table tbody {
  display: table-row-group !important;
}

.sap-metadata-records-table tr {
  display: table-row !important;
}

.sap-metadata-records-table th,
.sap-metadata-records-table td {
  display: table-cell !important;
  vertical-align: middle;
  padding: 12px 8px;
  text-align: left;
}

/* Header styling */
.sap-metadata-records-header {
  display: table-header-group !important;
  color: #717680;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  border-bottom: 1px solid var(--sap-border-light);
  background-color: transparent;
}

.sap-metadata-records-header th {
  color: var(--sap-text-light);
  font-weight: 600;
}

/* Column widths using <col> elements */
.sap-metadata-records-table col.sap-col-title {
  width: 42%;
}

.sap-metadata-records-table col.sap-col-id {
  width: 12%;
}

.sap-metadata-records-table col.sap-col-date {
  width: 14%;
}

.sap-metadata-records-table col.sap-col-upload-status {
  width: 14%;
}

.sap-metadata-records-table col.sap-col-status {
  width: 13%;
}

.sap-metadata-records-table col.sap-col-action {
  width: 40px;
}

.sap-metadata-records-table col.sap-col-row {
  width: 10%;
  min-width: 64px;
}

.sap-metadata-records-table col.sap-col-column {
  width: 25%;
}

.sap-metadata-records-table col.sap-col-issue {
  width: 100%;
}

/* Row styling */
.sap-metadata-record-row {
  display: table-row !important;
  border-bottom: 1px solid var(--sap-border-light);
}

.sap-metadata-record-row:hover {
  background-color: var(--sap-bg-hover-gray);
}

/* Ensure tbody doesn't have conflicting display (scoped to metadata records tables only) */
.sap-metadata-records-table .sap-results-table-body {
  display: table-row-group !important;
}

/* Sortable column headers - now using button elements for keyboard accessibility */
.sap-sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  /* Button-specific styles - force transparent background */
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  box-shadow: none !important;
}

.sap-sortable-header:hover {
  color: #414651;
  background: none !important;
  background-color: transparent !important;
}

.sap-sortable-header:active {
  background: none !important;
  background-color: transparent !important;
}

.sap-sortable-header:focus {
  outline: 2px solid var(--sap-primary-blue, #005ea2);
  outline-offset: 2px;
  border-radius: 2px;
  background: none !important;
  background-color: transparent !important;
}

.sap-sortable-header:focus-visible {
  outline: 2px solid var(--sap-primary-blue, #005ea2);
  outline-offset: 2px;
  border-radius: 2px;
  background: none !important;
  background-color: transparent !important;
}

.sap-sort-icon {
  flex-shrink: 0;
}

/* Record Title & Subtitle */
.sap-record-title {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #104b90;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-underline-position: from-font;
  display: block;
  margin-bottom: 4px;
}

.sap-record-title:hover {
  color: #0a3a6e;
  text-decoration: underline;
}

.sap-record-subtitle {
  font-size: 14px;
  color: var(--sap-text-gray);
}

/* Status Badges */
.sap-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.sap-badge-blue {
  background-color: #d0e7f9;
  color: #005ea2;
  border: 1px solid #73b3e7;
}

.sap-badge-green {
  background-color: #d1f4e0;
  color: #0a5f2f;
  border: 1px solid #7fd9a7;
}

.sap-badge-yellow {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ddb455;
}

.sap-badge-orange {
  background-color: #ffe5d0;
  color: #c65102;
  border: 1px solid #ffa866;
}

.sap-badge-red {
  background-color: #fee4e2;
  color: #d92d20;
  border: 1px solid #fda29b;
}

.sap-badge-gray {
  background-color: #e5e5e5;
  color: var(--sap-badge-gray);
  border: 1px solid #cccccc;
}

/* Kebab Menu */
.sap-kebab-menu-wrapper {
  position: relative;
}

/* Highly specific selectors to override CKAN's default button styles */
.sap-metadata-record-row
  .sap-col-action
  .sap-kebab-menu-wrapper
  .sap-kebab-button,
.sap-results-table-body .sap-kebab-menu-wrapper .sap-kebab-button,
.sap-kebab-menu-wrapper button.sap-kebab-button,
button.sap-kebab-button {
  background-color: var(--sap-white) !important;
  background: var(--sap-white) !important;
  border: none !important;
  cursor: pointer;
  padding: 8px;
  color: #999999 !important;
  transition:
    color 0.2s,
    background-color 0.2s;
  box-shadow: none !important;
}

.sap-metadata-record-row
  .sap-col-action
  .sap-kebab-menu-wrapper
  .sap-kebab-button:hover,
.sap-results-table-body .sap-kebab-menu-wrapper .sap-kebab-button:hover,
.sap-kebab-menu-wrapper button.sap-kebab-button:hover,
button.sap-kebab-button:hover {
  color: #666666 !important;
  background-color: var(--sap-bg-light-gray) !important;
  background: var(--sap-bg-light-gray) !important;
}

.sap-metadata-record-row
  .sap-col-action
  .sap-kebab-menu-wrapper
  .sap-kebab-button:focus,
.sap-results-table-body .sap-kebab-menu-wrapper .sap-kebab-button:focus,
.sap-kebab-menu-wrapper button.sap-kebab-button:focus,
button.sap-kebab-button:focus {
  outline: none;
  background-color: var(--sap-white) !important;
  background: var(--sap-white) !important;
}

.sap-metadata-record-row
  .sap-col-action
  .sap-kebab-menu-wrapper
  .sap-kebab-button:active,
.sap-results-table-body .sap-kebab-menu-wrapper .sap-kebab-button:active,
.sap-kebab-menu-wrapper button.sap-kebab-button:active,
button.sap-kebab-button:active {
  background-color: var(--sap-white) !important;
  background: var(--sap-white) !important;
}

.sap-kebab-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--sap-white);
  border: 1px solid var(--sap-border-gray);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  display: none;
  z-index: 1000;
  margin-top: 4px;
}

.sap-kebab-menu-wrapper.open .sap-kebab-dropdown {
  display: block;
}

.sap-kebab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--sap-text-black);
  text-decoration: none;
  font-size: 14px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sap-kebab-item:hover {
  background-color: var(--sap-bg-light-gray);
}

.sap-kebab-item-danger {
  color: #d92d20 !important;
}

.sap-kebab-item-danger:hover {
  background-color: #fee4e2 !important;
}

.sap-kebab-divider {
  height: 1px;
  background-color: var(--sap-border-light);
  margin: 4px 0;
}

/* Pagination Footer */
.sap-pagination-footer {
  padding: 24px 16px;
  border-top: 1px solid var(--sap-border-light);
}

.sap-pagination-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

/* Previous button - left aligned */
.sap-pagination-controls > :first-child {
  justify-self: start;
}

/* Page numbers - center aligned */
.sap-pagination-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: center;
}

/* Next button - right aligned */
.sap-pagination-controls > :last-child {
  justify-self: end;
}

.sap-pagination-button {
  padding: 8px 16px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 4px;
  background-color: var(--sap-white);
  color: var(--sap-text-black);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
}

.sap-pagination-button:hover:not(.disabled) {
  background-color: var(--sap-bg-light-gray);
  border-color: var(--sap-primary-blue);
}

.sap-pagination-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.sap-pagination-number {
  padding: 8px 12px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 4px;
  background-color: var(--sap-white);
  color: var(--sap-text-black);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  min-width: 40px;
  text-align: center;
}

.sap-pagination-number:hover {
  background-color: var(--sap-bg-light-gray);
  border-color: var(--sap-primary-blue);
}

.sap-pagination-number.active {
  background-color: var(--sap-primary-blue);
  color: var(--sap-white);
  border-color: var(--sap-primary-blue);
}

.sap-pagination-ellipsis {
  padding: 8px 12px;
  color: var(--sap-text-gray);
  font-size: 14px;
  user-select: none;
}

.sap-pagination-info {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: var(--sap-text-gray);
}

.sap-pagination-info label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sap-pagination-info select {
  padding: 6px 12px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 4px;
  font-size: 14px;
}

/* Empty State */
.sap-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--sap-text-gray);
}

.sap-empty-state p {
  font-size: 16px;
  margin: 0;
}

/* Upload Status Styling - Links only */
.sap-col-upload-status a {
  color: var(--sap-primary-blue);
  text-decoration: underline;
}

.sap-col-upload-status a:hover {
  color: var(--sap-hover-blue);
}

/* Batch Upload - Row Background Colors by Status */
.sap-batch-row-issues {
  background-color: #fef3f2;
  border-left: 3px solid #f04438;
}

.sap-batch-row-success {
  background-color: #dcfae6;
  border-left: 3px solid #0e7837;
}

.sap-batch-row-no-changes {
  background-color: #fffaeb;
  border-left: 3px solid #f79009;
}

.sap-batch-row-unpublished {
  background-color: #f0f9ff;
  border-left: 3px solid var(--sap-primary-blue);
}

/* Utility Classes */
.sap-text-muted {
  color: var(--sap-text-muted);
}

.sap-link-primary {
  color: var(--sap-primary-blue);
  text-decoration: none;
}

.sap-link-primary:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .sap-action-cards {
    grid-template-columns: 1fr;
  }

  /* Adjust column widths for tablets */
  .sap-metadata-records-table col.sap-col-title {
    width: 38%;
  }

  .sap-metadata-records-table col.sap-col-id {
    width: 17%;
  }

  .sap-metadata-records-table col.sap-col-date {
    width: 22%;
  }

  .sap-metadata-records-table col.sap-col-status {
    width: 18%;
  }

  .sap-metadata-records-table col.sap-col-action {
    width: 40px;
  }

  /* Hide upload status column on tablets */
  .sap-metadata-records-table col.sap-col-upload-status {
    display: none;
  }

  .sap-metadata-records-table .sap-col-upload-status,
  .sap-metadata-records-table th.sap-col-upload-status,
  .sap-metadata-records-table td.sap-col-upload-status {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .sap-filter-pills {
    flex-direction: column;
  }

  .sap-pagination-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .sap-pagination-controls {
    justify-content: center;
  }

  .sap-pagination-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ===== Upload Modal Styles (Vanilla JS Implementation) ===== */

/* Modal Container - Hidden by default */
.sap-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow-y: auto;
}

/* Show modal when active */
.sap-modal.sap-modal-show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Modal Backdrop */
.sap-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* Modal Dialog */
.sap-modal-dialog {
  position: relative;
  width: 540px;
  max-width: 100%;
  margin: auto;
  z-index: 1;
}

/* Modal Content - SAP styling */
.sap-modal-content {
  position: relative;
  background: var(--sap-white);
  border-radius: 8px;
  border: 1px solid var(--sap-border-gray);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Modal Header */
.sap-modal-header {
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid var(--sap-border-gray);
  background: var(--sap-white);
}

.sap-modal-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--sap-text-black);
  margin: 0;
}

.sap-modal-header .close {
  opacity: 0.6;
  font-size: 28px;
  font-weight: 400;
  color: var(--sap-text-black);
  margin-top: -4px;
}

.sap-modal-header .close:hover {
  opacity: 1;
}

/* Modal Body */
.sap-modal-body {
  padding: 24px;
}

.sap-modal-instructions {
  font-size: 16px;
  color: var(--sap-text-gray);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

/* File Upload Section */
.sap-file-upload-section {
  margin-bottom: 24px;
}

.sap-file-input-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--sap-text-black);
  margin-bottom: 8px;
}

.sap-file-input-wrapper {
  position: relative;
}

.sap-file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.sap-file-input-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--sap-white);
  border: 1px solid var(--sap-border-gray);
  border-radius: 4px;
  min-height: 48px;
}

.sap-file-input-text {
  font-size: 14px;
  color: var(--sap-text-gray);
  flex: 1;
}

.sap-file-input-button {
  margin-left: 12px;
  flex-shrink: 0;
}

.sap-file-input-note {
  font-size: 14px;
  color: var(--sap-text-gray);
  margin: 8px 0 0 0;
}

/* Template Download Section */
.sap-template-download-section {
  padding: 16px;
  background: var(--sap-bg-light-gray);
  border-radius: 4px;
  margin-bottom: 0;
}

.sap-template-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--sap-text-gray);
  margin: 0;
  line-height: 1.5;
}

.sap-template-text svg {
  flex-shrink: 0;
  color: var(--sap-primary-blue);
}

.sap-template-link {
  color: var(--sap-primary-blue);
  text-decoration: underline;
  font-weight: 600;
}

.sap-template-link:hover {
  color: var(--sap-hover-blue);
}

/* Modal Footer */
.sap-modal-footer {
  padding: 16px 24px 24px 24px;
  border-top: 1px solid var(--sap-border-gray);
  background: var(--sap-white);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.sap-modal-footer .sap-btn-primary,
.sap-modal-footer .sap-btn-secondary {
  margin: 0;
}

.sap-modal-footer .sap-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Upload Processing State */
.sap-upload-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.sap-upload-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--sap-bg-light-gray);
  border-top-color: var(--sap-primary-blue);
  border-radius: 50%;
  animation: sap-spin 1s linear infinite;
  margin-bottom: 24px;
}

@keyframes sap-spin {
  to {
    transform: rotate(360deg);
  }
}

.sap-upload-processing-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--sap-text-black);
  margin: 0 0 12px 0;
}

.sap-upload-processing-message {
  font-size: 16px;
  color: var(--sap-text-gray);
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.sap-upload-processing-filename {
  font-size: 14px;
  color: var(--sap-text-gray);
  font-weight: 600;
  margin: 0;
}

/* Hide modal controls during processing */
.sap-modal.sap-modal-processing .sap-modal-header .close,
.sap-modal.sap-modal-processing .sap-modal-footer {
  display: none;
}

/* Responsive Modal */
@media (max-width: 768px) {
  .sap-modal-dialog {
    width: auto;
    margin: 20px;
  }

  .sap-modal-header,
  .sap-modal-body,
  .sap-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sap-file-input-display {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sap-file-input-button {
    margin-left: 0;
    width: 100%;
  }
}

/* ===== Issue Details Page Styles ===== */

/* Page Header with Badge - Figma design alignment */
.sap-page-header-with-badge {
  background: #edf1f6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.sap-page-header-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.sap-page-header-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sap-page-header-with-badge .sap-page-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #181d27;
  margin: 0;
}

.sap-page-agency-id {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #181d27;
}

.sap-page-subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #181d27;
}

/* Update badge styling within this header */
.sap-page-header-with-badge .sap-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.sap-page-header-with-badge .sap-badge-red {
  background-color: #fef3f2;
  color: #d92d20;
  border: 1px solid #f04438;
}

/* Issues Table Header - extends results table header */

/* Issues Table Row - extends result row */
.sap-issue-row {
  display: grid;
  grid-template-columns: 100px 120px 1fr;
  gap: 16px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--sap-border-light);
}

.sap-issue-row:hover {
  background-color: var(--sap-bg-hover-gray);
}

/* Issues Columns */
.sap-col-row,
.sap-col-column {
  font-size: 14px;
  font-weight: 400;
  color: var(--sap-text-black);
  text-align: center;
}

.sap-col-issue {
  font-size: 14px;
  color: var(--sap-text-gray);
  line-height: 1.5;
}

/* Empty State */
.sap-empty-state {
  padding: 40px 24px;
  text-align: center;
}

.sap-empty-state p {
  font-size: 14px;
  color: var(--sap-text-gray);
  margin: 0;
}

/* Responsive Issues Table */
@media (max-width: 768px) {
  .sap-page-header-with-badge {
    padding: 16px;
  }

  .sap-page-header-title-row {
    flex-direction: column;
    gap: 4px;
  }

  .sap-page-header-with-badge .sap-page-title,
  .sap-page-agency-id {
    font-size: 20px;
    line-height: 28px;
  }

  .sap-page-subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .sap-issues-table-header,
  .sap-issue-row {
    grid-template-columns: 80px 100px 1fr;
    gap: 12px;
  }
}

/* ===== Utility Classes for Section Headers ===== */

.sap-section-header {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.sap-section-description {
  margin-bottom: 16px;
  color: #666;
}

.sap-section-spacing {
  margin-bottom: 30px;
}

/* ===== Table Loading Overlay ===== */

/* Wrapper for table sections to enable relative positioning */
.sap-table-loading-container {
  position: relative;
}

/* Semi-transparent overlay that covers the table */
.sap-table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  gap: 16px;
  pointer-events: none; /* Allow clicks to pass through if needed */
}

/* Spinner for the overlay - smaller than upload spinner */
.sap-table-loading-overlay .sap-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--sap-bg-light-gray);
  border-top-color: var(--sap-primary-blue);
  border-radius: 50%;
  animation: sap-spin 0.8s linear infinite;
}

/* Loading text */
.sap-table-loading-overlay .sap-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--sap-text-gray);
  margin: 0;
}

/* ============================================
   DOCUMENT UPLOAD WORKFLOW STYLES
   ============================================ */

/* Document upload pages now use standard .sap-metadata-container layout */
/* Only adding document-specific styles below */

/* Info box */
.sap-info-box {
  padding: 32px;
  background: var(--Colors-Background-bg-secondary, #fafafa);
  border-radius: 16px;
  margin-bottom: 24px;
  max-width: 720px;
}

.sap-info-box p {
  color: var(--Colors-Text-text-tertiary-(600), #535862);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

/* Document upload section */
.sap-document-upload-section {
  margin-bottom: 32px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sap-section-heading {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--Colors-Text-text-primary-(900), #181d27);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.sap-required-indicator {
  color: var(--Colors-Text-text-error-primary_hover, #b42318);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.sap-section-divider {
  height: 1px;
  background: var(--Colors-Border-border-secondary, #e9eaeb);
  border: none;
  margin: 0;
}

/* File upload zone */
.sap-file-upload-zone {
  border: 2px dashed var(--sap-border-gray, #d5d7da);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  background: var(--sap-white);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 24px;
}

.sap-file-upload-zone:hover {
  border-color: var(--sap-primary-blue);
  background: var(--sap-bg-light-gray);
}

.sap-file-upload-zone.dragover {
  border-color: var(--sap-primary-blue);
  background: #edf1f6;
  border-width: 3px;
}

.sap-file-upload-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.sap-file-upload-icon svg {
  width: 48px;
  height: 48px;
}

.sap-file-upload-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--Colors-Text-text-primary-(900), #181d27);
  margin: 0;
}

.sap-file-upload-text strong {
  font-weight: 600;
}

.sap-file-browse-btn {
  background: none;
  border: none;
  color: var(--sap-primary-blue);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.sap-file-browse-btn:hover {
  color: var(--sap-hover-blue);
}

.sap-file-input {
  display: none !important;
}

/* Upload button wrapper */
.sap-file-upload-button-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sap-upload-btn {
  padding: 10px 14px;
  background: var(--Colors-Background-bg-brand-solid, #2f5f9d);
  box-shadow:
    0px 1px 2px rgba(10, 12.67, 18, 0.05),
    0px -2px 0px rgba(10, 12.67, 18, 0.05) inset,
    0px 0px 0px 1px rgba(10, 12.67, 18, 0.18) inset;
  border-radius: 8px;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--Colors-Text-text-white, white);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  width: fit-content;
}

.sap-upload-btn:hover {
  background: var(--sap-hover-blue, #1e4a7a);
}

.sap-upload-btn:active {
  background: var(--sap-active-blue, #104b90);
}

/* File list */
.sap-file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.sap-file-list:empty {
  display: none;
}

.sap-file-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--sap-bg-light-gray);
  border: 1px solid var(--sap-border-gray);
  border-radius: 8px;
}

.sap-file-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sap-file-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--Colors-Text-text-primary-(900), #181d27);
}

.sap-file-item-size {
  font-size: 12px;
  color: var(--Colors-Text-text-tertiary-(600), #535862);
}

.sap-file-remove-btn {
  background: none;
  border: none;
  color: var(--Colors-Text-text-error-primary_hover, #b42318);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.sap-file-remove-btn:hover {
  background: var(--Colors-Error-50, #fef3f2);
}

/* File upload help text */
.sap-file-upload-help-text {
  color: var(--Colors-Text-text-tertiary-(600), #535862);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

/* Navigation buttons */
.sap-nav-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}

.sap-complete-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Sidebar active state with warning background */
.sap-metadata-nav li.active.warning {
  background: var(--Colors-Warning-100, #fef0c7);
  border-left: 4px solid var(--Colors-Foreground-fg-brand-primary_alt, #2f5f9d);
}

.sap-metadata-nav li.active.warning a {
  color: var(--Colors-Text-text-brand-secondary-(700), #104b90);
}

/* Upload progress (for future use) */
.sap-upload-progress {
  margin-top: 16px;
  padding: 12px;
  background: var(--sap-bg-light-gray);
  border-radius: 8px;
}

.sap-upload-progress-bar {
  height: 4px;
  background: var(--sap-border-gray);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.sap-upload-progress-fill {
  height: 100%;
  background: var(--sap-primary-blue);
  transition: width 0.3s ease;
}

.sap-upload-progress-text {
  font-size: 12px;
  color: var(--sap-text-gray);
  text-align: center;
}

/* Warning link style for missing documents */
.sap-link-warning {
  color: var(--Colors-Text-text-warning-primary-(600), #dc6803);
  font-weight: 600;
  text-decoration: none;
}

.sap-link-warning:hover {
  text-decoration: underline;
}

/* Responsive adjustments for document upload */
@media (max-width: 768px) {
  .sap-file-upload-zone {
    padding: 32px 16px;
  }

  .sap-nav-buttons {
    flex-direction: column;
    width: 100%;
  }

  .sap-nav-buttons a,
  .sap-nav-buttons button {
    width: 100%;
    justify-content: center;
  }
}

/* ===== SAP Components - Reusable UI Components ===== */

/* ===== Form Controls ===== */
input[type="text"],
input.search,
select {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid var(--sap-border-gray);
  border-radius: 4px;
  background: var(--sap-white);
}

select {
  font-size: 14px;
  padding: 5px 10px;
}

/* ===== Buttons ===== */
/* Note: Only applies to buttons without specific SAP classes */
button:not([class*="sap-btn"]):not([class*="sap-tab"]):not([class*="sap-filter"]):not(.sap-kebab-item):not(.sap-sortable-header),
.btn-primary {
  background: var(--sap-primary-blue) !important;
  border: none !important;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 4px;
  color: var(--sap-white) !important;
}

button:not([class*="sap-btn"]):not([class*="sap-tab"]):not([class*="sap-filter"]):not(.sap-kebab-item):not(.sap-sortable-header):hover,
.btn-primary:hover {
  background: var(--sap-hover-blue) !important;
}

/* ===== Pagination ===== */
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.pagination li a,
.pagination li span {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 8px 12px;
  border: 1px solid var(--sap-border-gray);
  background: var(--sap-white);
  color: var(--sap-primary-blue);
  text-decoration: none;
  border-radius: 4px;
}

.pagination li.active a,
.pagination li.active span {
  background: var(--sap-primary-blue);
  color: var(--sap-white);
  border-color: var(--sap-primary-blue);
}

.pagination li a:hover {
  background: var(--sap-bg-light-gray);
}

.pagination li.disabled a,
.pagination li.disabled span {
  color: var(--sap-border-gray);
  cursor: not-allowed;
}

/* ===== Labels ===== */
label {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--sap-text-gray);
}

/* ===== Item Count / Badges ===== */
.item-count {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  color: var(--sap-text-black);
  font-weight: 600;
}

/* ===== Upload Timestamp Styling ===== */
.sap-upload-timestamp-text {
  font-size: 0.8125rem;
  font-weight: 500;
}