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

/* CSS Custom Properties - SAP Color Palette */
:root {
  /* Spacing */
  --spacing-xl: 16px;
  --spacing-5xl: 40px;

  /* 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 ===== */
body,
body * {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !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: 1400px;
}

/* ===== 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: 1400px;
  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.10), 0px 1px 3px rgba(10, 13, 18, 0.10);
  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: 1400px;
  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.10)), 0 1px 2px -1px var(--Colors-Effects-Shadows-shadow-sm_02, rgba(10, 13, 18, 0.10));
  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.10), 0px 8px 12px rgba(10, 13, 18, 0.10);
  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: hidden;
  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: 1400px;
  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.10);
  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 h2 {
  margin: 0 0 30px 0;
  color: var(--sap-text-black);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.metadata-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.metadata-label {
  font-weight: 700;
  font-size: 16px;
  color: var(--sap-text-gray);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  padding-top: 2px;
}

.metadata-value {
  color: var(--sap-text-black);
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

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

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

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

@media (max-width: 576px) {
  .metadata-section h2 {
    font-size: 22px;
  }
}

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

.sap-header {
  width: 100%;
  background: white;
  border-bottom: 1px solid #E9EAEB;
}

/* 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-main {
  width: 100%;
  border-bottom: 1px solid #E9EAEB;
}

.sap-header-container {
  width: 100%;
  height: 72px;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sap-header-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}

.sap-header-logo {
  display: block;
}

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

.sap-header-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
}

.sap-header-nav-item {
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
  color: #414651;
  font-size: 16px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sap-header-nav-item:hover {
  background: #FAFAFA;
  color: #252B37;
  text-decoration: none;
}

.sap-header-nav-item.active {
  background: #FAFAFA;
  color: #252B37;
}

.sap-header-nav-help svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Header Actions */
.sap-header-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.sap-header-btn-login {
  padding: 10px 14px;
  border-radius: 8px;
  color: #535862;
  font-size: 14px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

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

.sap-header-btn-register {
  padding: 10px 14px;
  background: #2F5F9D;
  box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05),
              0px -2px 0px rgba(10, 13, 18, 0.05) inset,
              0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset;
  border-radius: 8px;
  border: 2px solid white;
  color: white;
  font-size: 14px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.sap-header-btn-register:hover {
  background: #1d4a7d;
  text-decoration: none;
  color: white;
}

.sap-header-user-dropdown {
  padding: 10px 14px;
  border-radius: 8px;
  background: white;
  border: 1px solid #D9D9D9;
  color: #535862;
  font-size: 14px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sap-header-user-dropdown:hover {
  background: #F7F8F8;
  border-color: #A9AEB1;
}

/* 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%;
  margin-top: auto;
}

.sap-footer-container {
  width: 100%;
  padding: 40px;
}

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

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

/* 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 - Extended Grid - Title takes 50%, remaining columns equal width */
.sap-metadata-records-header,
.sap-metadata-record-row {
  display: grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 50px;
  gap: 16px;
  align-items: center;
  padding: 12px 8px;
}

.sap-metadata-records-header {
  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;
  color: var(--sap-text-light);
}

/* Sortable column headers */
.sap-sortable-header {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.sap-sortable-header:hover {
  color: #414651;
}

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

.sap-metadata-record-row {
  border-bottom: 1px solid var(--sap-border-light);
}

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

/* 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: #DC3545;
}

.sap-kebab-item-danger:hover {
  background-color: #FFEBEE;
}

.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, no text color, no bold */
.sap-col-upload-status a {
  color: var(--sap-primary-blue);
  text-decoration: underline;
}

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

.sap-col-upload-status span {
  color: var(--sap-text-black);
}

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

  .sap-metadata-records-header,
  .sap-metadata-record-row {
    grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
  }

  .sap-col-upload-status {
    display: none;
  }
}

@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;
  pointer-events: none;
  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 */
.sap-issues-table-header {
  display: grid;
  grid-template-columns: 100px 120px 1fr;
  gap: 16px;
}

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

/* ===== 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"]),
.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"]):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;
}