/* ==========================================================================
   ARTESP Theme - Variables
   Contains color definitions and other CSS variables
   ========================================================================== */

:root {
  /* Paleta Principal */
  --primary: #FF161F; /* Vermelho (Pantone 485 C) */
  --secondary: #034EA2; /* Azul (Pantone 2955 C) */
  --accent: #0B9247; /* Verde (Pantone 347 C) */
  --highlight: #FBB900; /* Amarelo (Pantone 123 C) */
  --light-red: #ffeeee;
  --artesp-red: #bf0411;

  /* Neutros / Supporting */
  --gray-darkest: #000000; /* Preto (Pantone Black) */
  --gray-darker: #333333;
  --gray-dark: #808080; /* Cinza Escuro */
  --gray-medium: #808080; /* Cinza Escuro */
  --gray-light: #BFBFBF; /* Cinza Claro */
  --gray-lighter: #BFBFBF; /* Cinza Claro */
  --gray-lightest: #FFFFFF; /* Branco */

  /* Cool gray variations */
  --cool-gray-darkest: #2d3033;
  --cool-gray-darker: #3d4348;
  --cool-gray-dark: #4e5359;
  --cool-gray-medium: #6c7279;
  --cool-gray-light: #9ca3af;
  --cool-gray-lighter: #d1d5db;
  --cool-gray-lightest: #f3f4f6;

  /* Warm gray variations */
  --warm-gray-darkest: #292524;
  --warm-gray-darker: #44403c;
  --warm-gray-dark: #57534e;
  --warm-gray-medium: #78716c;
  --warm-gray-light: #a8a29e;
  --warm-gray-lighter: #d6d3d1;
  --warm-gray-lightest: #f5f5f4;

  /* Tailwind-style badge colors - Updated with brand colors */
  --tw-gray-50: #f9fafb;
  --tw-gray-100: #f3f4f6;
  --tw-gray-200: #e5e7eb;
  --tw-gray-300: #d1d5db;
  --tw-gray-400: #BFBFBF; /* Cinza Claro */
  --tw-gray-500: #808080; /* Cinza Escuro */
  --tw-gray-600: #4b5563;
  --tw-gray-700: #374151;
  --tw-gray-800: #1f2937;
  --tw-gray-900: #000000; /* Preto */

  /* Red - Vermelho (Pantone 485 C) */
  --tw-red-50: #fff5f5;
  --tw-red-100: #ffe0e0;
  --tw-red-200: #ffc1c1;
  --tw-red-300: #ffa3a3;
  --tw-red-400: #ff8484;
  --tw-red-500: #ff6565;
  --tw-red-600: #FF161F; /* Primary - Vermelho */
  --tw-red-700: #e60000;
  --tw-red-800: #cc0000;
  --tw-red-900: #990000;

  /* Yellow - Amarelo (Pantone 123 C) */
  --tw-yellow-50: #fffdf5;
  --tw-yellow-100: #fff9e0;
  --tw-yellow-200: #fff3c1;
  --tw-yellow-300: #ffeda3;
  --tw-yellow-400: #ffe784;
  --tw-yellow-500: #ffd165;
  --tw-yellow-600: #FBB900; /* Highlight - Amarelo */
  --tw-yellow-700: #e6a800;
  --tw-yellow-800: #cc9600;
  --tw-yellow-900: #997000;

  /* Green - Verde (Pantone 347 C) */
  --tw-green-50: #f0fdf4;
  --tw-green-100: #dcfce7;
  --tw-green-200: #bbf7d0;
  --tw-green-300: #86efac;
  --tw-green-400: #4ade80;
  --tw-green-500: #22c55e;
  --tw-green-600: #0B9247; /* Accent - Verde */
  --tw-green-700: #047857;
  --tw-green-800: #065f46;
  --tw-green-900: #064e3b;

  /* Blue - Azul (Pantone 2955 C) */
  --tw-blue-50: #eff6ff;
  --tw-blue-100: #dbeafe;
  --tw-blue-200: #bfdbfe;
  --tw-blue-300: #93c5fd;
  --tw-blue-400: #60a5fa;
  --tw-blue-500: #3b82f6;
  --tw-blue-600: #034EA2; /* Secondary - Azul */
  --tw-blue-700: #0244a1;
  --tw-blue-800: #01397f;
  --tw-blue-900: #002e5e;
}

/* ==========================================================================
   ARTESP Theme - Base Styles
   Contains base styles, typography, and general elements
   ========================================================================== */

/* Fix search input and button height */
.input-group.search-input-group {
  display: flex;
  align-items: stretch;
}

.input-group.search-input-group .form-control.input-lg {
  height: 46px;
  line-height: 46px;
}

.input-group.search-input-group .input-group-btn .btn.btn-default.btn-lg {
  height: 46px;
  line-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: white;
  color: #333;
  font-weight: 400;
}

/* Font weight classes for Rawline */
.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* Apply Rawline font to all form elements and common UI components */
input,
button,
select,
textarea,
.btn,
.nav-link,
.dropdown-item,
.form-control,
.page-link,
.badge,
.alert,
.card-title,
.card-text,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   ARTESP Theme - Layout Components
   Contains layout components (header, footer, containers, grid)
   ========================================================================== */

/* Static Pages Styles */
.static-page {
  padding: 2rem 0;
}

/* Breadcrumb Styles */
.toolbar {
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: 0.9rem;
  text-transform: lowercase;
}

.breadcrumb > li + li:before {
  content: '›';
  color: #999;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.5rem;
}

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

.breadcrumb > li > a:hover {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb > .active {
  color: #333;
  font-weight: 600;
}

.page-heading {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #333333; /* Dark gray instead of blue */
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 1rem;
  width: fit-content;
}

.page-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary);
}

.static-content {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #444;
}

.static-content h2 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333333; /* Dark gray instead of blue */
  margin: 2rem 0 1rem;
}

.static-content p {
  margin-bottom: 1.2rem;
}

.static-content ul {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.static-content li {
  margin-bottom: 0.5rem;
}

/* Contact Page Styles */
.contact-info, .contact-map {
  margin-bottom: 2rem;
}

.map-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Minimal Header Styles */
.minimal-header {
  padding: 0;
  background: none;
}

.header-top {
  display: flex;
  justify-content: flex-end;
  padding: 0 0;
}

.user-actions {
  display: flex;
  align-items: center;
}

.user-nav {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-info {
  position: relative;
}

.user-info > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #555;
  font-weight: 500;
  transition: color 0.2s ease;
}

.user-info > a:hover {
  color: var(--primary);
  text-decoration: none;
}

.user-info img {
  border-radius: 50%;
  margin-right: 0.25rem;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  min-width: 200px;
  z-index: 1000;
}

.user-info:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu li a,
.dropdown-menu li button {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  color: #444;
  text-decoration: none;
  transition: background-color 0.2s ease;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-size: 0.9rem;
}

.dropdown-menu li a:hover,
.dropdown-menu li button:hover {
  background-color: #f5f5f5;
  color: var(--primary);
}

.dropdown-menu li a i,
.dropdown-menu li button i {
  margin-right: 0.5rem;
  width: 1rem;
  text-align: center;
}

.user-login,
.user-register {
  color: #555;
  transition: color 0.2s ease;
}

.user-login:hover,
.user-register:hover {
  color: var(--primary);
  text-decoration: none;
}

.user-register {
  position: relative;
  padding-left: 1rem;
}

.user-register:before {
  content: '|';
  position: absolute;
  left: 0.25rem;
  color: #ccc;
}

/* Main Navigation */
.main-navigation {
  background: none;
  padding: 0;
  margin-top: 0.5rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}

.nav-menu li {
  position: relative;
}

.nav-menu li a {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  display: block;
  color: #444 !important;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.95rem;
}

.nav-menu li a:hover,
.nav-menu li.active a {
  background: none;
  text-decoration: none;
  color: var(--primary) !important;
}

/* ==========================================================================
   ARTESP Theme - UI Components
   Contains UI components (buttons, forms, cards, alerts, badges)
   ========================================================================== */

/* Override CKAN default greenish colors with brand colors */
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
a.btn-success[data-module="api-info"], a.btn-success[data-module="api-info"]:hover, a.btn-success[data-module="api-info"]:focus, a.btn-success[data-module="api-info"]:active {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #ffffff !important;
}

/* Fix delete button styling */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
a.btn-danger,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active,
.btn-danger[data-module="confirm-action"],
.btn-danger[data-module="confirm-action"]:hover,
.btn-danger[data-module="confirm-action"]:focus,
.btn-danger[data-module="confirm-action"]:active {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.btn-danger:hover,
a.btn-danger:hover,
.btn-danger[data-module="confirm-action"]:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Fix for resource buttons text - with high specificity */
.btn.btn-primary.resource-url-analytics,
.resource-actions .btn.btn-primary,
.resource-actions .btn.btn-danger,
.resource-actions .btn.btn-success,
.btn.btn-primary,
.btn-group .btn.btn-primary,
body .btn.btn-primary,
body .primary .btn.btn-primary,
body .module-resource .actions .btn.btn-primary,
body .resource-actions .btn.btn-primary,
body .resource-item .btn.btn-primary,
body .resource-item .btn.btn-primary.resource-url-analytics,
.d-flex.flex-wrap.gap-1.justify-content-end .btn.btn-success,
.d-flex.flex-wrap.gap-1.justify-content-end a[data-module="api-info"] {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: none;
}

.resource-actions .btn {
  margin-right: 5px;
  margin-bottom: 5px;
}

/* Specific override for resource-url-analytics button */
.resource-url-analytics,
.btn.resource-url-analytics,
.btn.btn-primary.resource-url-analytics,
body .btn.btn-primary.resource-url-analytics,
body .resource-item .btn.btn-primary.resource-url-analytics,
a[data-module="api-info"],
a.btn.btn-success[data-module="api-info"] {
  color: var(--gray-dark) !important;
}

/* Fix dropdown-item styling */
.dropdown-item.resource-url-analytics {
  color: var(--gray-dark) !important;
  background-color: transparent !important;
}

.dropdown-item.resource-url-analytics:hover,
.dropdown-item.resource-url-analytics:focus {
  color: var(--primary) !important;
  background-color: var(--tw-gray-100) !important;
}

/* Override default link styles - aggressive override for #206b82 */
a.tag, a.pill, a.label,
.popular-tags a.tag,
.module-narrow .nav-facet .nav-item a,
.module-narrow .nav-facet .nav-item > a,
.module-narrow .nav-facet .nav-aside li a,
.module-narrow .nav-facet .nav-aside li > a,
.tag, .pill, .label,
.popular-tags .tag,
.module-narrow .nav-item a,
.module-narrow .nav-aside li a,
[data-module="autocomplete"] .tag,
.primary .tag,
.secondary .tag,
.module-shallow .tag,
.module-narrow .tag,
.package-search-form .tag,
.dataset-list .tag,
.dataset-item .tag,
.context-info .tag,
.flash-messages .tag {
  color: #444 !important;
  background-color: white !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 1px !important;
  margin-bottom: 0px !important;
}

/* Direct override for #206b82 color */
[style*="color: #206b82"],
[style*="color:#206b82"],
[style*="color: rgb(32, 107, 130)"],
[style*="color:rgb(32, 107, 130)"] {
  color: #444 !important;
}

/* Override tag hover styles */
a.tag:hover, a.tag:focus, a.tag:active,
a.tag.active, a.tag.selected,
a.pill:hover, a.pill:focus, a.pill:active,
a.pill.active, a.pill.selected,
a.label:hover, a.label:focus, a.label:active,
a.label.active, a.label.selected,
.popular-tags a.tag:hover, .popular-tags a.tag:focus, .popular-tags a.tag:active,
.popular-tags a.tag.active, .popular-tags a.tag.selected,
.module-narrow .nav-item.active > a,
.module-narrow .nav-aside li.active a,
.tag:hover, .tag:focus, .tag:active,
.tag.active, .tag.selected,
.pill:hover, .pill:focus, .pill:active,
.pill.active, .pill.selected,
.label:hover, .label:focus, .label:active,
.label.active, .label.selected {
  /* background-color: #f0f0f0 !important; */
  color: #444 !important;
  border-color: var(--primary) !important;
  border-width: 1px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 5px rgba(192, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* Override all links with a beautiful dark gray color */
a {
  color: var(--gray-dark);
  transition: color 0.2s ease;
}

a:hover, a:focus {
  color: var(--primary);
  text-decoration: none;
}

/* Ensure links in main content have the dark gray color */
.primary a,
.secondary a,
.module a,
.dataset-item a,
.resource-item a,
.nav-item a,
.breadcrumb a,
.pagination a,
.dataset-resources a,
.dataset-info a,
.page-header a,
.module-content.page-header a,
.module-content.page-header.hug a,
.dashboard .page-header a,
.dashboard .nav-tabs a,
.dashboard .nav-tabs li a,
.dashboard .nav-tabs > li > a,
.admin a,
.admin-page a,
.ckan-admin a,
.admin .page-header a,
.admin-page .page-header a,
.ckan-admin .page-header a,
.user a,
.user-list a,
.user-edit a,
.account a,
.account-masthead a,
.user-profile a,
.user-dashboard a,
.user-admin a,
.user-settings a,
.user-profile .page-header a,
.user-dashboard .page-header a,
.user-admin .page-header a,
.user-settings .page-header a {
  color: var(--gray-dark);
}

.primary a:hover,
.secondary a:hover,
.module a:hover,
.dataset-item a:hover,
.resource-item a:hover,
.nav-item a:hover,
.breadcrumb a:hover,
.pagination a:hover,
.dataset-resources a:hover,
.dataset-info a:hover,
.page-header a:hover,
.module-content.page-header a:hover,
.module-content.page-header.hug a:hover,
.dashboard .page-header a:hover,
.dashboard .nav-tabs a:hover,
.dashboard .nav-tabs li a:hover,
.dashboard .nav-tabs > li > a:hover,
.admin a:hover,
.admin-page a:hover,
.ckan-admin a:hover,
.admin .page-header a:hover,
.admin-page .page-header a:hover,
.ckan-admin .page-header a:hover,
.user a:hover,
.user-list a:hover,
.user-edit a:hover,
.account a:hover,
.account-masthead a:hover,
.user-profile a:hover,
.user-dashboard a:hover,
.user-admin a:hover,
.user-settings a:hover,
.user-profile .page-header a:hover,
.user-dashboard .page-header a:hover,
.user-admin .page-header a:hover,
.user-settings .page-header a:hover {
  color: var(--gray-darker);
}

/* ==========================================================================
   ARTESP Theme - Additional UI Components
   Contains additional UI components
   ========================================================================== */

/* Specific override for dashboard, admin and user links */
.dashboard .nav-tabs > li > a,
.dashboard .page-header .nav-tabs > li > a,
.dashboard .module-content.page-header.hug .nav-tabs > li > a,
.admin .nav-tabs > li > a,
.admin .page-header .nav-tabs > li > a,
.admin .module-content.page-header.hug .nav-tabs > li > a,
.ckan-admin .nav-tabs > li > a,
.ckan-admin .page-header .nav-tabs > li > a,
.ckan-admin .module-content.page-header.hug .nav-tabs > li > a,
.admin-page .nav-tabs > li > a,
.admin-page .page-header .nav-tabs > li > a,
.admin-page .module-content.page-header.hug .nav-tabs > li > a,
.user .nav-tabs > li > a,
.user .page-header .nav-tabs > li > a,
.user .module-content.page-header.hug .nav-tabs > li > a,
.user-profile .nav-tabs > li > a,
.user-profile .page-header .nav-tabs > li > a,
.user-profile .module-content.page-header.hug .nav-tabs > li > a,
.user-dashboard .nav-tabs > li > a,
.user-dashboard .page-header .nav-tabs > li > a,
.user-dashboard .module-content.page-header.hug .nav-tabs > li > a,
.user-admin .nav-tabs > li > a,
.user-admin .page-header .nav-tabs > li > a,
.user-admin .module-content.page-header.hug .nav-tabs > li > a,
.user-settings .nav-tabs > li > a,
.user-settings .page-header .nav-tabs > li > a,
.user-settings .module-content.page-header.hug .nav-tabs > li > a {
  color: var(--gray-dark) !important;
}

.dashboard .nav-tabs > li > a:hover,
.dashboard .page-header .nav-tabs > li > a:hover,
.dashboard .module-content.page-header.hug .nav-tabs > li > a:hover,
.admin .nav-tabs > li > a:hover,
.admin .page-header .nav-tabs > li > a:hover,
.admin .module-content.page-header.hug .nav-tabs > li > a:hover,
.ckan-admin .nav-tabs > li > a:hover,
.ckan-admin .page-header .nav-tabs > li > a:hover,
.ckan-admin .module-content.page-header.hug .nav-tabs > li > a:hover,
.admin-page .nav-tabs > li > a:hover,
.admin-page .page-header .nav-tabs > li > a:hover,
.admin-page .module-content.page-header.hug .nav-tabs > li > a:hover,
.user .nav-tabs > li > a:hover,
.user .page-header .nav-tabs > li > a:hover,
.user .module-content.page-header.hug .nav-tabs > li > a:hover,
.user-profile .nav-tabs > li > a:hover,
.user-profile .page-header .nav-tabs > li > a:hover,
.user-profile .module-content.page-header.hug .nav-tabs > li > a:hover,
.user-dashboard .nav-tabs > li > a:hover,
.user-dashboard .page-header .nav-tabs > li > a:hover,
.user-dashboard .module-content.page-header.hug .nav-tabs > li > a:hover,
.user-admin .nav-tabs > li > a:hover,
.user-admin .page-header .nav-tabs > li > a:hover,
.user-admin .module-content.page-header.hug .nav-tabs > li > a:hover,
.user-settings .nav-tabs > li > a:hover,
.user-settings .page-header .nav-tabs > li > a:hover,
.user-settings .module-content.page-header.hug .nav-tabs > li > a:hover {
  color: var(--primary) !important;
}

.dashboard .nav-tabs > li.active > a,
.dashboard .page-header .nav-tabs > li.active > a,
.dashboard .module-content.page-header.hug .nav-tabs > li.active > a,
.admin .nav-tabs > li.active > a,
.admin .page-header .nav-tabs > li.active > a,
.admin .module-content.page-header.hug .nav-tabs > li.active > a,
.ckan-admin .nav-tabs > li.active > a,
.ckan-admin .page-header .nav-tabs > li.active > a,
.ckan-admin .module-content.page-header.hug .nav-tabs > li.active > a,
.admin-page .nav-tabs > li.active > a,
.admin-page .page-header .nav-tabs > li.active > a,
.admin-page .module-content.page-header.hug .nav-tabs > li.active > a,
.user .nav-tabs > li.active > a,
.user .page-header .nav-tabs > li.active > a,
.user .module-content.page-header.hug .nav-tabs > li.active > a,
.user-profile .nav-tabs > li.active > a,
.user-profile .page-header .nav-tabs > li.active > a,
.user-profile .module-content.page-header.hug .nav-tabs > li.active > a,
.user-dashboard .nav-tabs > li.active > a,
.user-dashboard .page-header .nav-tabs > li.active > a,
.user-dashboard .module-content.page-header.hug .nav-tabs > li.active > a,
.user-admin .nav-tabs > li.active > a,
.user-admin .page-header .nav-tabs > li.active > a,
.user-admin .module-content.page-header.hug .nav-tabs > li.active > a,
.user-settings .nav-tabs > li.active > a,
.user-settings .page-header .nav-tabs > li.active > a,
.user-settings .module-content.page-header.hug .nav-tabs > li.active > a {
  color: var(--primary) !important;
}

/* Specific override for user/admin page header links */
.user-admin .module-content.page-header a,
.user-admin .module-content.page-header a:link,
.user-admin .module-content.page-header a:visited,
.user-admin .module-content.page-header.hug a,
.user-admin .module-content.page-header.hug a:link,
.user-admin .module-content.page-header.hug a:visited,
.user-admin .module-content.page-header .page-heading a,
.user-admin .module-content.page-header .page-heading a:link,
.user-admin .module-content.page-header .page-heading a:visited {
  color: var(--gray-dark) !important;
}

.user-admin .module-content.page-header a:hover,
.user-admin .module-content.page-header a:focus,
.user-admin .module-content.page-header a:active,
.user-admin .module-content.page-header.hug a:hover,
.user-admin .module-content.page-header.hug a:focus,
.user-admin .module-content.page-header.hug a:active,
.user-admin .module-content.page-header .page-heading a:hover,
.user-admin .module-content.page-header .page-heading a:focus,
.user-admin .module-content.page-header .page-heading a:active {
  color: var(--gray-dark) !important;
}

/* Override greenish color for nav links */
.nav-link, .page-header .nav-tabs li a {
  color: var(--gray-dark) !important;
}

/* Override greenish hover color for nav links */
.nav-link:hover, .page-header .nav-tabs li a:hover,
.nav-link:focus, .page-header .nav-tabs li a:focus,
.nav-link:active, .page-header .nav-tabs li a:active,
.page-header .nav-tabs li.active a,
.page-header .nav-tabs li.active a:hover,
.page-header .nav-tabs li.active a:focus {
  color: var(--gray-dark) !important;
  text-decoration: none !important;
}

/* Custom styling for select elements */
.form-inline.form-select,
.form-inline.form-select select,
.form-inline.form-select .form-control,
.form-select,
.form-select select,
.form-select .form-control,
select.form-control.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
}

/* Style for control-order-by container */
.control-order-by {
  position: relative;
}

.control-order-by select {
  cursor: pointer;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.control-order-by select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(192, 0, 0, 0.25);
  outline: 0;
}

/* Override form-select padding for language selector */
.lang-select.form-select,
.form-inline.form-select.lang-select,
form.lang-select,
form.form-select.lang-select,
.language-selector .form-select,
.language-selector form.form-select {
  padding: 0 !important;
  background-position: center !important;
  background-image: none !important;
}

/* Override specific rgb(32, 107, 130) color */
/* Target the parent a tag with color #206b82 */
a[href*="/dataset/"], a[href*="/organization/"], a[href*="/group/"],
a.tag, a.pill, a.label,
.popular-tags a.tag,
.module-narrow .nav-item > a,
.module-narrow .nav-aside li > a,
.nav-item a.tag,
.context-info a.tag,
.tags a.tag,
.tag-list a.tag {
  color: #444 !important;
}

/* Override greenish links in user/admin pages */
.user-admin a[style*="color: #206b82"],
.user-admin a[style*="color:#206b82"],
.user-admin a[style*="color: rgb(32, 107, 130)"],
.user-admin a[style*="color:rgb(32, 107, 130)"],
.user-admin .module-content.page-header a[href*="/user/"],
.user-admin .module-content.page-header.hug a[href*="/user/"],
.user-admin .nav.nav-tabs li a,
.user-admin .nav.nav-tabs li a:link,
.user-admin .nav.nav-tabs li a:visited,
.user-admin .nav.nav-tabs > li > a,
.user-admin .nav.nav-tabs > li > a:link,
.user-admin .nav.nav-tabs > li > a:visited,
.user-admin .nav-link,
.user-admin .page-header .nav-tabs li a,
.user-admin .nav-link:link,
.user-admin .page-header .nav-tabs li a:link,
.user-admin .nav-link:visited,
.user-admin .page-header .nav-tabs li a:visited {
  color: var(--gray-dark) !important;
}

.user-admin .nav.nav-tabs li a:hover,
.user-admin .nav.nav-tabs li a:focus,
.user-admin .nav.nav-tabs li a:active,
.user-admin .nav.nav-tabs > li > a:hover,
.user-admin .nav.nav-tabs > li > a:focus,
.user-admin .nav.nav-tabs > li > a:active,
.user-admin .nav.nav-tabs > li.active > a,
.user-admin .nav.nav-tabs > li.active > a:hover,
.user-admin .nav.nav-tabs > li.active > a:focus,
.user-admin .nav-link:hover,
.user-admin .page-header .nav-tabs li a:hover,
.user-admin .nav-link:focus,
.user-admin .page-header .nav-tabs li a:focus,
.user-admin .nav-link:active,
.user-admin .page-header .nav-tabs li a:active,
.user-admin .page-header .nav-tabs li.active a,
.user-admin .page-header .nav-tabs li.active a:hover,
.user-admin .page-header .nav-tabs li.active a:focus {
  color: var(--gray-dark) !important;
  text-decoration: none !important;
}

/* Keep ARTESP red for other elements */
/* [style*="color: rgb(32, 107, 130)"],
[style*="color:rgb(32, 107, 130)"],
[style*="color: rgb(32,107,130)"],
[style*="color:rgb(32,107,130)"],
.context-info h1.heading i,
.media-grid .media-item .media-view:hover,
.media-grid .media-item .media-view:hover i,
.resource-item .heading a,
.resource-item .format-label,
.nav-item a,
.module-resource .actions a,
.page_primary_action .btn-primary,
.add-to-group .btn-primary,
.follow_button {
  color: var(--primary) !important;
} */

/* ==========================================================================
   ARTESP Theme - Badges
   Contains badge and label styling
   ========================================================================== */

/* Improve badge styling - Tailwind style */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.65em;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  letter-spacing: 0.02em;
  margin-right: 0.3rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.badge-default {
  color: var(--tw-gray-600);
  background-color: var(--tw-gray-100);
  box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.1);
}

.badge:hover {
  transform: translateY(-1px);
}

.badge-primary {
  color: #FFFFFF;
  background-color: var(--primary); /* Vermelho */
  box-shadow: inset 0 0 0 1px rgba(255, 22, 31, 0.2);
}

.badge-success {
  color: #FFFFFF;
  background-color: var(--accent); /* Verde */
  box-shadow: inset 0 0 0 1px rgba(11, 146, 71, 0.2);
}

.badge-info {
  color: #FFFFFF;
  background-color: #808080; /* Gray instead of blue */
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2);
}

.badge-warning {
  color: #000000;
  background-color: var(--highlight); /* Amarelo */
  box-shadow: inset 0 0 0 1px rgba(251, 185, 0, 0.2);
}

.badge-danger {
  color: #FFFFFF;
  background-color: var(--primary); /* Vermelho */
  box-shadow: inset 0 0 0 1px rgba(255, 22, 31, 0.2);
}

/* Format badges with brand colors */
.badge[data-format=html],
.badge[data-format*=html] {
  background-color: rgba(128, 128, 128, 0.15) !important; /* Gray */
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2) !important;
}

.badge[data-format=png],
.badge[data-format*=png] {
  background-color: rgba(128, 128, 128, 0.15) !important; /* Gray */
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2) !important;
}

.badge[data-format=json],
.badge[data-format*=json] {
  background-color: rgba(255, 22, 31, 0.15) !important; /* Vermelho */
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 22, 31, 0.2) !important;
}

.badge[data-format=xml],
.badge[data-format*=xml] {
  background-color: rgba(255, 22, 31, 0.15) !important; /* Vermelho */
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 22, 31, 0.2) !important;
}

.badge[data-format=text],
.badge[data-format*=text] {
  background-color: rgba(128, 128, 128, 0.15) !important; /* Gray */
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2) !important;
}

.badge[data-format=csv],
.badge[data-format*=csv] {
  background-color: rgba(251, 185, 0, 0.15) !important; /* Amarelo */
  color: #997000 !important;
  box-shadow: inset 0 0 0 1px rgba(251, 185, 0, 0.2) !important;
}

.badge[data-format=kmz],
.badge[data-format*=kmz] {
  background-color: rgba(68, 68, 68, 0.2) !important;
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.1)  !important;
}

.badge[data-format=kml],
.badge[data-format*=kml] {
  background-color: rgba(68, 68, 68, 0.2) !important;
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.1)  !important;
}

.badge[data-format=xls],
.badge[data-format*=xls] {
  background-color: rgba(11, 146, 71, 0.15) !important; /* Verde */
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(11, 146, 71, 0.2) !important;
}

.badge[data-format=zip],
.badge[data-format*=zip] {
  background-color: rgba(128, 128, 128, 0.15) !important; /* Cinza */
  color: var(--gray-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2) !important;
}

.badge[data-format=api],
.badge[data-format*=api] {
  background-color: rgba(128, 128, 128, 0.15) !important; /* Gray */
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2) !important;
}

.badge[data-format=pdf],
.badge[data-format*=pdf] {
  background-color: rgba(255, 22, 31, 0.15) !important; /* Vermelho */
  color: var(--primary) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 22, 31, 0.2) !important;
}

.badge[data-format=rdf],
.badge[data-format*=rdf],
.badge[data-format*=nquad],
.badge[data-format*=ntriples],
.badge[data-format*=turtle] {
  background-color: rgba(128, 128, 128, 0.15) !important; /* Gray */
  color: #444444 !important;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2) !important;
}

.badge-default[href]:hover,
.badge-default[href]:focus {
  background-color: var(--tw-gray-200) !important;
  color: var(--tw-gray-700) !important;
  text-decoration: none !important;
}

/* Fix for datastore status badge */
.loader-badge {
  margin-left: 10px;
  background: #f8f9fa;
  color: #444;
  border-radius: 4px;
  display: inline-flex;
  font-size: 13px;
  vertical-align: middle;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  overflow: hidden;
}

a.loader-badge {
  text-decoration: none;
  transition: all 0.2s ease;
}

.loader-badge:hover,
.loader-badge:focus {
  color: #444;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.prefix,
.status {
  display: inline-block;
  padding: 3px 8px;
}

.loader-badge .prefix {
  background: #f8f9fa;
  color: #495057;
  font-weight: 600;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.loader-badge .status {
  font-weight: 600;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.loader-badge .status.active {
  background: #d4edda;
  color: #155724;
}

.loader-badge .status.complete {
  background: #cce5ff;
  color: #004085;
}

.loader-badge .status.error {
  background: #f8d7da;
  color: #721c24;
}

.loader-badge .status.inactive {
  background: #fff3cd;
  color: #856404;
}

.loader-badge .status.pending {
  background: #e9ecef;
  color: #495057;
}

.loader-badge .status.running {
  background: #fff3cd;
  color: #856404;
}

.loader-badge .status.unknown {
  background: #e9ecef;
  color: #6c757d;
}

/* ==========================================================================
   ARTESP Theme - Footer Styles
   Contains footer-specific styles
   ========================================================================== */

/* Footer styling */
.site-footer {
  color: #333;
  font-size: 0.95rem;
  background-image: none !important;
  background: none !important;
}

.footer-main {
  background-color: transparent;
  background-image: none !important;
  background: none !important;
  padding: 2rem 0 1rem;
  border-top: none;
}

.footer-bottom {
  background-color: #000;
  color: #f5f5f5;
  padding: 1rem 0;
}

.site-footer a {
  color: #444;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--primary);
  text-decoration: none;
}

.footer-links ul {
  margin-bottom: 2rem;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo-container {
  margin-bottom: 1.2rem;
}

.footer-logo img {
  max-width: 180px;
  height: auto;
}

.footer-brand-text {
  margin-bottom: 1.5rem;
  color: #555;
  line-height: 1.5;
}

.site-footer h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.copyright p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.powered-by {
  text-align: right;
}

.powered-by p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* São Paulo Government Logo in Footer */
.govsp-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.govsp-logo img {
  max-width: 160px;
  height: auto;
  transition: opacity 0.3s ease;
}

.govsp-logo img:hover {
  opacity: 0.85;
}

.ckan-footer-logo {
  background-image: url('/base/images/ckan-logo-footer.png');
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 68px;
  height: 21px;
  vertical-align: middle;
  margin-left: 0.5rem;
  filter: brightness(2);
}

.language-selector {
  margin-top: 0.5rem;
  width: 100%;
}

.lang-select-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 0.5rem;
}

.lang-select {
  margin: 0;
  width: 100%;
  background-image: none !important;
}

.lang-select-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: white;
  border-radius: 4px;
  padding: 0.5rem;
  border: 1px solid #ddd;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.lang-select-inner::after {
  content: '\25BC';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
  font-size: 0.7rem;
}

.lang-select select {
  border: none;
  background: transparent;
  background-image: none !important;
  color: #444;
  font-size: 0.85rem;
  padding: 0;
  padding-right: 0.5rem;
  flex: 1;
  min-width: 0;
  box-shadow: none;
  height: auto;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.lang-select select:focus {
  outline: none;
  box-shadow: none;
}

.lang-select .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  background-color: #444;
  border-color: #444;
  color: white;
  margin: 0;
  min-width: 40px;
}

.lang-select .btn:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}

@media (max-width: 768px) {
  .footer-main {
    padding: 1.5rem 0 1rem;
  }

  .govsp-logo {
    margin: 1.5rem auto;
  }

  .govsp-logo img {
    max-width: 140px;
  }

  .powered-by {
    text-align: center;
    margin-top: 1rem;
  }

  .copyright {
    text-align: center;
    margin-bottom: 1rem;
  }

  .footer-logo-container {
    margin-bottom: 1rem;
  }

  .site-footer h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .footer-links > .row > div:first-child h4 {
    margin-top: 2rem;
  }

  .footer-brand-text {
    margin-bottom: 1rem;
  }

  .lang-select {
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   ARTESP Theme - Homepage Styles
   Contains homepage-specific styles
   ========================================================================== */

/* Modern homepage styles */
.homepage,
.main,
.main.hero,
.main.module-feeds,
.main.content-section {
  background: none;
}

.modern-hero {
  position: relative; /* Crucial for absolute positioning of the SVG */
  /* Example background: a subtle gradient. Replace with your desired background. */
  background-image: linear-gradient(to bottom right, #e0e8f0, #f0f4f8);
  /* background-color: #007bff; */ /* Or a solid color */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#animated-background-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Behind the hero content */
  background-color: transparent; /* SVG drawing area is transparent */
}

/* Ensure content is properly positioned */
.modern-hero .container,
.modern-hero .hero-content {
  position: relative; /* To stack above the SVG */
  z-index: 1;
  /* Optional: Add a very subtle backdrop for text if needed */
  /* background-color: rgba(255, 255, 255, 0.05); */
  /* backdrop-filter: blur(1px); */
  padding: 20px;
  border-radius: 8px;
  max-width: 800px; /* Or your preferred max-width for content */
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.logo-container {
  margin-bottom: 0;
}

.artesp-logo {
  max-width: 360px; /* Increased from 280px to 360px */
  height: auto;
  transition: transform 0.3s ease;
}

.artesp-logo:hover {
  transform: scale(1.02);
}

.search-container {
  width: 100%;
  max-width: 100%;
}

.modern-search-box {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.search-heading {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.9rem; /* Decreased from 2.2rem to 1.9rem */
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
  color: #333333;
  text-align: center;
  line-height: 1.3;
}

.search-emphasis {
  color: var(--primary);
}

.search-form {
  width: 100%;
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.search-input-wrapper {
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 710px; /* Set to 710px as requested */
  margin-left: auto;
  margin-right: auto;
}

.search-input {
  position: relative;
  display: flex;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
}

.search-input input {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  width: 100%;
  padding: 1rem 1.25rem;
  padding-right: 50px; /* Make room for the button */
  font-size: 1.15rem;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 60px;
  box-sizing: border-box;
  flex: 1;
  min-width: 100%;
}

.search-input input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(192, 0, 0, 0.1);
  outline: none;
}

.search-button {
  position: absolute;
  right: 8px;
  top: 8px;
  height: calc(100% - 16px);
  background-color: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  width: 44px;
  min-width: 44px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}

.search-button:hover {
  background-color: var(--accent);
}

/* Fix for homepage search box */
.homepage .search-input-group {
  display: flex;
  align-items: stretch;
}

.homepage .search-input-group .form-control {
  height: 60px;
  line-height: 60px;
  font-size: 1.15rem;
  border: 2px solid #e8e8e8;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: all 0.3s ease;
}

.homepage .search-input-group .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(192, 0, 0, 0.1);
  outline: none;
}

.homepage .search-input-group .input-group-btn .btn {
  height: 60px;
  padding: 0 20px;
  border: 2px solid var(--primary);
  border-left: none;
  background-color: var(--primary);
  color: white;
  font-size: 1.1rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.homepage .search-input-group .input-group-btn .btn:hover {
  background-color: #e60000; /* Darker red */
  border-color: #e60000;
}

.popular-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.tags-label {
  font-weight: 600;
  color: #444444;
  margin-right: 0.5rem;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.section-title {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #333333;
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 2rem;
  padding-left: 15px;
  border-left: 5px solid var(--primary);
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.section-title i {
  margin-right: 0.5rem;
  margin-left: -5px;
}

.featured-groups-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.featured-group-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
}

.featured-group-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--light-red);
}

.featured-group-image {
  height: 160px;
  overflow: hidden;
  position: relative;
}

.featured-group-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.featured-group-card:hover .featured-group-image img {
  transform: scale(1.05);
}

.featured-group-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.featured-group-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.featured-group-title a {
  color: #333333; /* Dark gray instead of blue */
  text-decoration: none;
  transition: color 0.2s ease;
}

.featured-group-title a:hover {
  color: var(--primary);
}

.featured-group-description {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
  line-height: 1.6;
}

.featured-group-meta {
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #777;
}

.dataset-count {
  display: inline-flex;
  align-items: center;
}

.dataset-count i {
  margin-right: 0.4rem;
  color: var(--primary);
}

.btn-view {
  font-family: 'Rawline', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: white;
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: auto;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.btn-view i {
  margin-right: 0.5rem;
}

.btn-view:hover {
  background-color: var(--primary); /* Vermelho */
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.featured-group-empty {
  grid-column: 1 / -1;
  padding: 2.5rem;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  color: #666;
  font-weight: 500;
  border: 2px dashed #e0e0e0;
  margin-top: 1rem;
}

.featured-group-empty i {
  margin-right: 0.5rem;
  font-size: 1.5rem;
  color: var(--primary);
}
.btn-login {
  display: inline-block;
  padding: 4px 12px;
  background-color: #1976d2; /* biru utama */
  color: #fff !important;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-login:hover {
  background-color: #1565c0; /* biru lebih gelap saat hover */
  text-decoration: none;
}


/* ==========================================================================
   ARTESP Theme - Homepage Datasets Section
   Contains styles for the latest datasets section on the homepage
   ========================================================================== */

/* Latest datasets section styling */
.latest-datasets-wrapper {
  margin: 0;
  background-color: #ffffff; /* Changed from #f5f5f5 to white */
  padding: 3rem 0 3rem 0; /* Increased padding to 4rem for top and bottom */
  position: relative;
}

.latest-datasets-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 5px;
  background-color: #ffffff; /* Changed from #f5f5f5 to white */
}

.latest-datasets-section {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  animation: fadeIn 1s ease-out forwards;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333333; /* Dark gray instead of blue */
  margin: 0;
  position: relative;
  display: inline-block;
  padding-left: 15px;
  border-left: 5px solid var(--primary);
  line-height: 1.2;
}

.view-all-link {
  font-size: 0.95rem;
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
  font-weight: normal;
}

.view-all-link .fa {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  margin-left: 0.25rem;
  vertical-align: middle;
  opacity: 0.8;
}

.view-all-link:hover {
  color: var(--primary);
  text-decoration: none;
}

.view-all-link:hover .fa {
  transform: translateX(3px);
  opacity: 1;
}

.latest-datasets-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

/* Dataset card styling based on Crimson Data Beacon */
.dataset-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  border: 1px solid #e5e7eb;
  position: relative;
}

.dataset-card:nth-child(1) {
  animation-delay: 0.1s;
}

.dataset-card:nth-child(2) {
  animation-delay: 0.2s;
}

.dataset-card:nth-child(3) {
  animation-delay: 0.3s;
}

.dataset-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* Removed top border - replaced with horizontal divider between header and body */
/* .dataset-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  opacity: 0.9;
  background-color: var(--secondary);
} */

.dataset-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.dataset-card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Header section containing title and metadata */
.dataset-header {
  position: relative;
  margin-bottom: 1.25rem;
  background-color: #f8fafc;
  margin: -1.5rem -1.5rem 1.25rem -1.5rem;
  padding: 1.5rem;
}

/* Horizontal divider between header and body */
.dataset-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.1875rem;
  background-color: var(--secondary);
  opacity: 0.9;
}

/* Body section containing description and tags */
.dataset-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dataset-title {
  color: #000000;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dataset-title a {
  color: #222222;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  display: inline-block;
}

.dataset-title a:hover {
  color: var(--primary);
  text-decoration: none;
}

.dataset-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  color: #666;
  padding-bottom: 0;
}

.dataset-date, .dataset-org, .dataset-resources, .dataset-groups {
  gap: 0.3rem;
  color: #555;
  font-weight: 500;
  margin-top: 0;
}

.dataset-date .fa, .dataset-org .fa, .dataset-resources .fa, .dataset-groups .fa {
  color: #777;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-right: 2px;
}

/* Truncate dataset groups text when it exceeds ~12 characters */
.dataset-groups {
  max-width: 7rem; /* Approximately 12 characters at 0.8rem font size */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.dataset-description {
  margin-bottom: 1.25rem;
  color: #555;
  line-height: 1.5;
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dataset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.dataset-tags .tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.03);
  color: #555;
  transition: all 0.2s ease;
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 7.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.dataset-tags .tag:hover {
  background-color: rgba(0, 0, 0, 0.06);
  color: #333;
  transform: translateY(-1px);
}

.no-datasets {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #555;
  font-size: 1rem;
  position: relative;
}

.no-datasets::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--gray-light);
  opacity: 0.5;
}

.no-datasets p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
  font-weight: 500;
}

.no-datasets p::before {
  content: "\f119"; /* Font Awesome sad face icon */
  font-family: "Font Awesome 5 Free";
  color: #777;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .latest-datasets-wrapper {
    padding: 1rem 0 1rem 0;
  }

  .latest-datasets-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .dataset-card-content {
    padding: 1.25rem;
  }

  /* Adjust header background and divider for mobile */
  .dataset-header {
    margin: -1.25rem -1.25rem 1.25rem -1.25rem;
    padding: 1.25rem;
  }

  .dataset-header::after {
    left: 0;
    right: 0;
  }

  .dataset-title {
    font-size: 1.1rem;
  }

  .dataset-description {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  /* Adjust dataset groups truncation for mobile */
  .dataset-groups {
    max-width: 6rem; /* Slightly smaller on mobile for better fit */
  }
}

/* ==========================================================================
   ARTESP Theme - Homepage Resources Section
   Contains styles for the latest resources section on the homepage
   ========================================================================== */

/* Latest resources section styling */
.latest-resources-wrapper {
  margin: 0;
  background-color: #ffffff; /* Changed from #f5f5f5 to white */
  padding: 1rem 0 4rem 0; /* Increased padding to 4rem for top and bottom */
  position: relative;
}

.latest-resources-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 3px;
  background-color: #ffffff; /* Changed from #f5f5f5 to white */
}

.latest-resources-section {
  max-width: 1200px;
  margin: 0 auto;
}

/* .section-header, .section-title, .view-all-link are assumed to be shared or defined elsewhere if not here */
/* If they are specific to this section and not shared, they should be prefixed with .latest-resources-section */

/* Re-defining shared-like classes if they are scoped within this section,
   otherwise, if they are globally defined, these can be omitted.
   For this example, I'll assume they might be scoped or need slight variation. */
.latest-resources-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  animation: fadeIn 1s ease-out forwards;
}

.latest-resources-section .view-all-link {
  font-size: 0.95rem;
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
  font-weight: normal;
}

.latest-resources-section .view-all-link .fa {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  margin-left: 0.25rem;
  vertical-align: middle;
  opacity: 0.8;
}

.latest-resources-section .view-all-link:hover {
  color: var(--primary);
  text-decoration: none;
}

.latest-resources-section .view-all-link:hover .fa {
  transform: translateX(3px);
  opacity: 1;
}

.latest-resources-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.75rem;
  max-height: 240px;
}

/* Ticket-style resource card styling */
.resource-card.ticket-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  border: 1px solid #e5e7eb;
  position: relative;
  min-height: 100px;
}

/* Ticket main section */
.ticket-main {
  flex: 1;
  background-color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  align-self: stretch;
}

/* Removed perforated edge from the left side of ticket main */
/* .ticket-main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-image: radial-gradient(circle at 1px 50%, transparent 1.5px, #e5e7eb 1.5px);
  background-size: 2px 12px;
  background-repeat: repeat-y;
  z-index: 2;
} */

/* Date section on the left */
.ticket-date-section {
  width: 80px;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 100%;
  align-self: stretch;
}

/* Green accent stripe on date section - moved to right side */
.ticket-date-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0.1875rem;
  height: 100%;
  background-color: var(--accent);
  z-index: 1;
}

.resource-card.ticket-card:nth-child(1) {
  animation-delay: 0.1s;
}

.resource-card.ticket-card:nth-child(2) {
  animation-delay: 0.2s;
}

.resource-card.ticket-card:nth-child(3) {
  animation-delay: 0.3s;
}

.resource-card.ticket-card:nth-child(4) {
  animation-delay: 0.4s;
}

.resource-card.ticket-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.resource-card.ticket-card:hover .ticket-date-section {
  background-color: #f1f5f9;
}

.resource-card.ticket-card:hover .ticket-date-section::before {
  background-color: var(--tw-green-700);
}

/* Date styling */
.ticket-date {
  text-align: center;
  color: #374151;
  font-weight: 600;
  line-height: 1.1;
}

.date-day {
  font-size: 1.5rem;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 2px;
}

.date-month {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}

.date-year {
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 400;
}

/* Ticket content styling */
.ticket-card .resource-card-content {
  padding: 1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Resource title */
.ticket-card .resource-title {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  font-family: 'Rawline', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: lowercase;
}

.ticket-card .resource-title a {
  color: #1f2937;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ticket-card .resource-title a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Meta row with format tag and dataset info */
.resource-meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Format tag */
.resource-format-tag {
  display: inline-block;
  background-color: #dcfce7;
  color: #166534;
  padding: 0.2rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
  border: 1px solid #bbf7d0;
  flex-shrink: 0;
}

.resource-format-tag span {
  font-size: 0.65rem;
  font-weight: 600;
}

/* Dataset info */
.ticket-card .resource-parent-dataset {
  color: #6b7280;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  flex: 1;
  min-width: 0;
}

.ticket-card .resource-parent-dataset .fa {
  color: var(--gray-dark);
  font-size: 0.8rem;
  opacity: 0.9;
  flex-shrink: 0;
}

.ticket-card .resource-parent-dataset a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.ticket-card .resource-parent-dataset a:hover {
  color: var(--accent);
  text-decoration: underline;
}



.resource-description {
  margin-bottom: 1.25rem;
  color: #555;
  line-height: 1.5;
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Styles for no resources found message */
.no-resources {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #555;
  font-size: 1rem;
  position: relative;
}

.no-resources::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--gray-light);
  opacity: 0.5;
}

.no-resources p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
  font-weight: 500;
}

.no-resources p::before {
  content: "\f119"; /* Font Awesome sad face icon */
  font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome 5 is loaded */
  font-weight: 900; /* Required for solid icons in FA5 Free */
  color: #777;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

/* Animations (fadeIn, fadeInUp) are assumed to be globally defined or can be copied if needed */

/* Responsive design for ticket cards */
@media (max-width: 1200px) {
  .latest-resources-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    max-height: 360px;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .latest-resources-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.25rem;
    max-height: none;
  }

  .latest-resources-section .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Mobile ticket card adjustments */
  .resource-card.ticket-card {
    flex-direction: column;
    min-height: auto;
  }

  /* Removed mobile perforated edge to match desktop changes */
  /* .ticket-main::after {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: radial-gradient(circle at 50% 1px, transparent 1.5px, #e5e7eb 1.5px);
    background-size: 12px 2px;
    background-repeat: repeat-x;
  } */

  .ticket-date-section {
    width: 100%;
    height: 60px;
    border-right: none;
    background-color: #f8fafc;
    order: -1;
  }

  .ticket-date-section::before {
    top: auto;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background-color: var(--accent);
  }

  .ticket-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .date-day {
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  .date-month {
    font-size: 0.7rem;
    margin-bottom: 0;
  }

  .date-year {
    font-size: 0.65rem;
  }

  .ticket-card .resource-card-content {
    padding: 0.875rem 1rem;
  }

  .ticket-card .resource-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .resource-meta-row {
    gap: 0.5rem;
  }

  .resource-format-tag {
    padding: 0.15rem 0.35rem;
    font-size: 0.6rem;
  }

  .ticket-card .resource-parent-dataset {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .latest-resources-container {
    gap: 1rem;
  }

  .ticket-card .resource-card-content {
    padding: 0.75rem 0.875rem;
  }

  .ticket-card .resource-title {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
  }

  .resource-meta-row {
    gap: 0.4rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .resource-format-tag {
    padding: 0.1rem 0.3rem;
    font-size: 0.55rem;
  }

  .ticket-card .resource-parent-dataset {
    font-size: 0.7rem;
  }

  .ticket-date-section {
    height: 50px;
  }

  .date-day {
    font-size: 1rem;
  }

  .date-month {
    font-size: 1rem;
  }

  .date-year {
    font-size: 1rem;
  }
}
/* ==========================================================================
   ARTESP Theme - Homepage Stats Section
   Contains styles for the statistics section on the homepage
   ========================================================================== */

/* Stats section styling */
.stats-section-wrapper {
  margin: 0 0 0;
  padding: 5rem 0 6rem;
  background-color: #f8fafc;
  position: relative;
  overflow: hidden;
}

.stats-section {
  max-width: 1200px;
  margin: 0 auto;
}

.stats-header {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeIn 1s ease-out forwards;
  position: relative;
  z-index: 2;
}

.stats-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #333333; /* Dark gray instead of blue */
  margin-bottom: 1rem;
  display: inline-block;
  position: relative;
  border-bottom: 4px solid var(--primary);
  line-height: 1.2;
}

.stats-subtitle {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}

/* Stats container - using float-based layout */
.stats-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.stat-col {
  float: left;
  width: 33.333%;
  padding: 0 10px;
  box-sizing: border-box;
}

.clearfix {
  clear: both;
}

/* STATS CARDS STYLING */
.stats-row {
  display: table;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-spacing: 20px 0;
  table-layout: fixed;
}

.stats-card {
  display: table-cell;
  width: 33.33%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.5rem;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
  vertical-align: middle;
  text-align: center;
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

/* Staggered entrance animations for cards */
.stats-card-blue {
  animation-delay: 0.1s;
}

.stats-card-green {
  animation-delay: 0.2s;
}

.stats-card-yellow {
  animation-delay: 0.3s;
}

.stats-card-black {
  animation-delay: 0.4s;
}

.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Enhanced hover effects for icon circles */
.stats-card:hover .stats-card-icon-circle {
  animation-play-state: paused;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Color-specific glow effects on hover */
.stats-card-blue:hover .stats-card-icon-circle {
  box-shadow: 0 4px 16px rgba(3, 78, 162, 0.3);
}

.stats-card-green:hover .stats-card-icon-circle {
  box-shadow: 0 4px 16px rgba(11, 146, 71, 0.3);
}

.stats-card-yellow:hover .stats-card-icon-circle {
  box-shadow: 0 4px 16px rgba(251, 185, 0, 0.3);
}

.stats-card-black:hover .stats-card-icon-circle {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Circular icon container */
.stats-card-icon-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Color variations for circular backgrounds */
.stats-card-blue .stats-card-icon-circle {
  background-color: var(--secondary); /* Blue background */
}

.stats-card-green .stats-card-icon-circle {
  background-color: var(--accent); /* Green background */
}

.stats-card-yellow .stats-card-icon-circle {
  background-color: var(--highlight); /* Yellow background */
}

.stats-card-black .stats-card-icon-circle {
  background-color: #000000; /* Black background */
}

/* Icon styling within circular container */
.stats-card-icon-circle .fa {
  font-size: 1.5rem;
  color: white;
}

/* Keyframe animations for statistics cards */
@keyframes gentlePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

@keyframes softGlow {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

@keyframes breathingScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes for different effects */
.stats-card-icon-circle {
  animation: gentlePulse 3s ease-in-out infinite;
}

/* Alternative animations (can be swapped by changing the animation property above) */
.stats-card-icon-circle.glow-effect {
  animation: softGlow 4s ease-in-out infinite;
}

.stats-card-icon-circle.breathing-effect {
  animation: breathingScale 2.5s ease-in-out infinite;
}

/* Staggered animation delays for visual interest */
.stats-card-blue .stats-card-icon-circle {
  animation-delay: 0s;
}

.stats-card-green .stats-card-icon-circle {
  animation-delay: 0.5s;
}

.stats-card-yellow .stats-card-icon-circle {
  animation-delay: 1s;
}

.stats-card-black .stats-card-icon-circle {
  animation-delay: 1.5s;
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .stats-card {
    animation: none;
    opacity: 1;
  }

  .stats-card-icon-circle {
    animation: none;
  }

  .stats-card:hover .stats-card-icon-circle {
    transform: none;
    transition: none;
  }

  .stats-card:hover {
    transform: none;
  }
}

.stats-card-count {
  font-size: 2.5rem;
  font-weight: 700;
  color: #222222;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.stats-card-label {
  font-size: 1rem;
  color: #666;
  font-weight: 500;
  margin: 0;
}





@media (max-width: 768px) {
  .stats-row {
    max-width: 95%;
    border-spacing: 15px 0;
  }

  .stats-card {
    padding: 1.5rem 1rem;
  }

  .stats-card-icon-circle {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
  }

  .stats-card-icon-circle .fa {
    font-size: 1.3rem;
  }

  .stats-card-count {
    font-size: 2rem;
  }

  .stats-card-label {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .stats-row {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .stats-card {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 1.5rem 1rem;
  }

  .stats-card-icon-circle {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
  }

  .stats-card-icon-circle .fa {
    font-size: 1.2rem;
  }

  .stats-card-count {
    font-size: 1.8rem;
  }

  .stats-card-label {
    font-size: 0.85rem;
  }
}

/* Featured Groups Section Styling */
.featured-groups-section {
  margin-bottom: 2rem;
  box-shadow: none !important;
}

.featured-groups-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5625rem; /* 25px -> 1.5625rem */
  padding-bottom: 0.75rem; /* 12px -> 0.75rem */
  /* border-bottom: 0.125rem solid #FBB900; 2px -> 0.125rem */
}

.featured-groups-section .view-all-link {
  font-size: 0.95rem; /* 0.95em -> 0.95rem */
  color: #3498db; /* A clear, professional blue */
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
}

.featured-groups-section .view-all-link:hover {
  color: #FBB900; /* Yellowish hover for the link */
}

.featured-groups-section .view-all-link i {
  margin-left: 0.375rem; /* 6px -> 0.375rem */
}

/* Groups Container */
.featured-groups-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); /* 260px -> 16.25rem */
  gap: 1.5625rem; /* 25px -> 1.5625rem */
}

/* Individual Group Card Styling */
.group-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.group-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.group-card a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.group-card .group-card-image-wrapper {
  width: 100%;
  height: 10rem;
  overflow: hidden;
  background-color: none; 
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0.1875rem solid #FBB900;
  padding: 1rem;
}

.group-card .group-image {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.group-card .group-card-content {
  padding: 0.75rem 0.9375rem 0.9375rem; /* 12px -> 0.75rem, 15px -> 0.9375rem */
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.group-card .group-title {
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 0.5rem 0; /* 8px -> 0.5rem */
  min-height: 2.3rem; /* 2.3em -> 2.3rem (assuming relative to root em for consistency) */
  line-height: 1.15; /* Unitless line-height is generally preferred */
}

.group-card .group-meta {
  font-size: 0.85rem; /* 0.85em -> 0.85rem */
  color: #555;
  margin-bottom: 0.75rem; /* 12px -> 0.75rem */
}

.group-card .dataset-count i {
  margin-right: 0.3125rem; /* 5px -> 0.3125rem */
  color: var(--gray-dark); /* Yellowish icon for dataset count */
}

.group-card .view-group-link {
  display: inline-block;
  padding: 0.4375rem 0.75rem; /* 7px -> 0.4375rem, 12px -> 0.75rem */
  background-color: transparent;
  color: var(--gray-dark); /* Yellowish text */
  /* border: 1px solid #FBB900;  Yellowish border */
  /* border-radius: 0.25rem; 4px -> 0.25rem */
  font-weight: 400;
  font-size: 0.85rem; /* 0.85em -> 0.85rem */
  transition: background-color 0.2s ease, color 0.2s ease;
  margin-top: auto; /* Pushes to bottom */
}

.group-card .view-group-link:hover {
  color: var(--gray-darker);
}

.group-card .view-group-link i {
  margin-left: 0.3125rem; /* 5px -> 0.3125rem */
}

/* Styles for no groups found message */
.no-groups {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #555;
  font-size: 1rem;
  position: relative;
}

.no-groups::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--gray-light);
  opacity: 0.5;
}

.no-groups p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
  font-weight: 500;
}

.no-groups p::before {
  content: "\f119"; /* Font Awesome sad face icon */
  font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome 5 is loaded */
  font-weight: 900; /* Required for solid icons in FA5 Free */
  color: #777;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

@media (max-width: 768px) {
  .featured-groups-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1.25rem;
    max-height: none;
  }

  .featured-groups-section .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .featured-groups-container {
    gap: 1rem;
  }
}
/* ==========================================================================
   ARTESP Theme - Dataset Search Page
   Contains styles for the dataset search page
   ========================================================================== */

/* Module content styling */
.module-content {
  padding: 20px;
  margin-bottom: 20px;
}

/* Primary action button container */
.page_primary_action {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Search form styling */
.search-form {
  margin-bottom: 25px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Search input row - first row */
.search-input-row {
  width: 100%;
  margin-bottom: 20px;
  display: block;
  box-sizing: border-box;
  max-width: 100%;
}

/* Search input group styling */
.input-group.search-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.input-group.search-input-group .form-control.input-lg {
  height: 46px;
  line-height: 46px;
  border-radius: 4px 0 0 4px;
  border: 1px solid #ddd;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Ensure these flex properties override framework defaults */
  flex-grow: 1; /* Allow the input to grow */
  flex-shrink: 1; /* Allow the input to shrink if needed */
  flex-basis: 0% !important; /* Force the initial size to 0 before growing, overriding Bootstrap's 'auto' */
  width: auto !important;    /* Override Bootstrap's 'width: 1%' or 'width: 100%' if they interfere with flex-basis */
  min-width: 0; /* Allows the input to shrink smaller than its content if necessary */
}

.input-group.search-input-group .input-group-btn .btn.btn-default.btn-lg {
  height: 46px;
  line-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 4px 4px 0;
  border: 1px solid #ddd;
  border-left: none;
}

/* Results row - second row */
.search-results-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  width: 100%;
  clear: both;
}

/* Search results title */
.search-results-row h1 {
  font-size: 1.5rem;
  margin: 0;
  font-weight: 600;
  color: #333;
  flex: 1;
  min-width: 200px;
}

/* Order by control styling */
.control-order-by {
  display: flex;
  align-items: center;
  margin: 0;
}

.control-order-by label {
  margin-right: 10px;
  margin-bottom: 0;
  font-weight: 600;
  white-space: nowrap;
}

.control-order-by select {
  width: auto;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.control-order-by .btn {
  margin-left: 5px;
}

/* Filter list styling */
.filter-list {
  margin-bottom: 20px;
  padding: 10px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.filter-list .facet {
  font-weight: 600;
  margin-right: 5px;
}

.filter-list .filtered.pill {
  display: inline-flex;
  align-items: center;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.filter-list .filtered.pill a.remove {
  margin-left: 5px;
  color: #999;
}

.filter-list .filtered.pill a.remove:hover {
  color: var(--primary);
}

/* Show filters button */
.show-filters.btn {
  margin-bottom: 20px;
}

/* Responsive styles */
@media (max-width: 768px) {
  .search-form {
    margin-bottom: 0;
  }

  .search-input-wrapper {
    margin-bottom: 0;
  }

  .search-results-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-results-row h1 {
    margin-bottom: 15px;
  }

  .control-order-by {
    width: 100%;
  }

  .control-order-by select {
    flex: 1;
  }
}

@media (max-width: 576px) {
  .module-content {
    padding: 15px;
  }

  .input-group.search-input-group .form-control.input-lg {
    height: 40px;
    line-height: 40px;
  }

  .input-group.search-input-group .input-group-btn .btn.btn-default.btn-lg {
    height: 40px;
    line-height: 28px;
  }

  .search-results-row h1 {
    font-size: 1.2rem;
  }

  .control-order-by {
    flex-wrap: wrap;
  }

  .control-order-by label {
    margin-bottom: 5px;
    width: 100%;
  }

  .control-order-by select {
    width: 100%;
    margin-bottom: 5px;
  }
}

/* ==========================================================================
   ARTESP Theme - Dataset Creation Workflow Stages
   Contains styling for the dataset creation workflow stages
   ========================================================================== */

/* Target the highlight elements inside the stages list items */
.stages li.active .highlight,
.stages li.complete .highlight {
  /* Change the background color from the default greenish color (rgb(140, 198, 138)) 
     to use the --secondary CSS variable (blue) */
  background-color: var(--secondary) !important;
  color: white !important;
  border-color: var(--secondary) !important;
}

/* Ensure this styling applies to the dataset creation workflow pages */
body.dataset.new .stages li.active .highlight,
body.dataset.new .stages li.complete .highlight {
  background-color: var(--secondary) !important;
  color: white !important;
  border-color: var(--secondary) !important;
}

/* Style for the buttons in the stages */
.stages li.complete .highlight[type="submit"] {
  background-color: var(--secondary) !important;
  color: white !important;
  border-color: var(--secondary) !important;
}

/* ==========================================================================
   ARTESP Theme - Authentication-based Controls
   Contains styles that show/hide elements based on authentication status
   ========================================================================== */

/* Hide Data API button and datastore badge for non-authenticated users */
body:not(.logged-in) a[data-module="api-info"],
body:not(.logged-in) .loader-badge {
  display: none !important;
}

/* ==========================================================================
   ARTESP Theme - Responsive Styles
   Contains responsive media queries
   ========================================================================== */

/* Responsive adjustments */
@media (max-width: 992px) {
  .header-main {
    flex-wrap: wrap;
    padding: 0.75rem 0;
  }

  .header-search {
    order: 3;
    max-width: 100%;
    margin: 1rem 0 0;
    width: 100%;
  }

  .navbar-toggle {
    display: block;
  }

  .nav-menu {
    flex-direction: column;
  }

  .nav-menu li a {
    padding: 0.75rem 1rem;
  }

  .top-utilities {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .quick-links {
    order: 2;
  }
}

@media (max-width: 768px) {
  .featured-groups-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .featured-group-image {
    height: 140px;
  }

  .section-title {
    font-size: 1.5rem;
    padding-left: 12px;
    border-left-width: 4px;
  }

  .modern-hero {
    padding: 4rem 0 3rem; /* Adjusted for tablet */
    background-position: center 20%;
  }

  .artesp-logo {
    max-width: 280px; /* Adjusted for tablet */
  }

  .search-heading {
    font-size: 1.6rem; /* Adjusted for tablet, decreased from 1.8rem */
    margin-bottom: 1.75rem;
  }

  .search-input-wrapper {
    width: 100%;
  }

  .search-input input {
    font-size: 1.05rem;
    height: 55px;
    padding: 0.8rem 1rem;
    padding-right: 45px;
  }

  .search-button {
    right: 6px;
    top: 6px;
    height: calc(100% - 12px);
    width: 40px;
  }

  .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
  }

  .user-nav {
    justify-content: center;
  }
}

/* Fix for medium-small screens */
@media (max-width: 767px) and (min-width: 577px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

@media (max-width: 576px) {
  .featured-groups-container {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 1.3rem;
    padding-left: 10px;
    border-left-width: 3px;
  }

  .latest-datasets-container {
    gap: 1rem;
  }

  .dataset-card-content {
    padding: 1.1rem;
  }

  .dataset-title {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }

  .dataset-meta {
    font-size: 0.75rem;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
  }

  .dataset-description {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
    -webkit-line-clamp: 2;
  }

  .dataset-tags .tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
  }

  .modern-hero {
    padding: 0rem 0 2rem !important; /* Adjusted for mobile */
    background-position: center 30%;
  }

  .hero-content {
    padding: 0 !important; /* Adjusted for mobile */
  }

  .artesp-logo {
    max-width: 240px; /* Adjusted for mobile */
  }

  .search-heading {
    font-size: 1.2rem; /* Adjusted for mobile */
    margin-bottom: 1rem; /* Adjusted for mobile */
  }

  .search-input-wrapper {
    width: 100%;
  }

  .search-input input {
    height: 50px;
    font-size: 1rem;
    padding: 0.7rem 0.9rem;
    padding-right: 40px;
  }

  .search-button {
    width: 36px;
    right: 5px;
    top: 5px;
    height: calc(100% - 10px);
    font-size: 0.9rem;
  }

  .popular-tags {
    flex-direction: column;
    align-items: center;
  }

  .tags-label {
    margin-bottom: 0.5rem;
    margin-right: 0;
  }

  .logo-container {
    flex-grow: 1;
    text-align: center;
  }

  .nav-menu {
    flex-direction: column;
    align-items: center;
  }

  .user-register:before {
    display: none;
  }

  .user-register {
    padding-left: 0;
  }
}

/* Extra small devices */
@media (max-width: 375px) {
  .search-heading {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .search-input input {
    height: 45px;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
    padding-right: 38px;
  }

  .search-button {
    width: 32px;
    right: 4px;
    top: 4px;
    height: calc(100% - 8px);
    font-size: 0.8rem;
  }

  .modern-hero {
    padding: 0 0 1.5rem;
  }

  .artesp-logo {
    max-width: 200px;
  }
}