/*==============================================================================
STATSCALAR ENTERPRISE - DATA BLADE STYLES
Version: 3.0
Page: Dataset Library
Framework: Laravel Blade + Bootstrap
Author: Balagali
Description: Comprehensive styling for the enterprise dataset library page --
category sidebar + a single unified, sortable, paginated dataset table.
==============================================================================*/

/*==============================================================================
01. WORKSPACE HEADER - Hero Section with Breadcrumb
==============================================================================*/
/* .ss-data-page prefix + explicit margin-bottom:0 reset: dashboard-blade.css
   also defines .ss-workspace-header with a margin-bottom this file never
   declared, so upping specificity alone doesn't neutralize it -- that
   property needs an explicit competing value here. */
.ss-data-page .ss-workspace-header {
  padding: 16px 0 10px;
  margin-bottom: 0;
  background: #fff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

.ss-workspace-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--ss-muted);
}

.ss-workspace-breadcrumb a {
  color: var(--ss-muted);
  transition: color 0.2s;
  text-decoration: none;
}

.ss-workspace-breadcrumb a:hover {
  color: var(--ss-primary);
}

.ss-workspace-breadcrumb strong {
  color: var(--ss-heading);
  font-weight: 600;
}

.ss-workspace-intro {
  max-width: 760px;
}

.ss-workspace-intro h1 {
  margin: 4px 0 10px;
  font-size: 42px;
  line-height: 1.1;
  color: var(--ss-heading);
  font-weight: 700;
}

.ss-workspace-intro p {
  margin-bottom: 18px;
  max-width: 760px;
  color: var(--ss-text);
  font-size: 16px;
  line-height: 1.6;
}

/* Search Box Styling */
.ss-workspace-search {
  margin: 0 0 14px;
}

.ss-workspace-search .ss-search-box {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Topic Strip */
.ss-topic-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.ss-topic-strip > span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ss-heading);
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ss-topic-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #f8fafb;
  border: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-heading);
  transition: var(--ss-transition);
  text-decoration: none;
  white-space: nowrap;
}

.ss-topic-strip a:hover {
  background: var(--ss-primary-light);
  border-color: rgba(0, 168, 107, 0.18);
  color: var(--ss-primary);
  transform: translateY(-2px);
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .ss-data-page .ss-workspace-header {
    padding: 28px 0 18px;
  }

  .ss-workspace-intro h1 {
    font-size: 38px;
    margin: 10px 0 14px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .ss-data-page .ss-workspace-header {
    padding: 30px 0 20px;
  }

  .ss-workspace-intro h1 {
    font-size: 30px;
  }

  .ss-workspace-search {
    margin: 24px 0;
  }

  .ss-topic-strip {
    gap: 10px;
  }

  .ss-topic-strip a {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/*==============================================================================
02. LIBRARY SECTION - Category Sidebar + Unified Table Layout
==============================================================================*/
.ss-library-section {
  padding: 20px 0 32px;
  background: #fff;
}

.ss-library-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

/*==============================================================================
03. CATEGORY SIDEBAR
==============================================================================*/
.ss-category-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
  align-self: start;
}

.ss-category-sidebar-card {
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  padding: 18px;
  box-shadow: var(--ss-shadow-sm);
}

.ss-category-sidebar-card h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-muted);
}

.ss-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ss-category-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-heading);
  text-decoration: none;
  transition: var(--ss-transition);
}

.ss-category-list a i {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  color: var(--ss-muted);
  transition: var(--ss-transition);
}

.ss-category-list a:hover {
  background: var(--ss-primary-light);
  color: var(--ss-primary);
}

.ss-category-list a:hover i {
  color: var(--ss-primary);
}

.ss-category-list a.active {
  background: var(--ss-primary-light);
  border-left-color: var(--ss-primary);
  color: var(--ss-primary);
}

.ss-category-list a.active i {
  color: var(--ss-primary);
}

/* Sidebar Promo Card */
.ss-sidebar-promo {
  background: var(--ss-primary-light);
  border: 1px solid rgba(0, 168, 107, 0.18);
  border-radius: var(--ss-radius-lg);
  padding: 20px;
}

.ss-sidebar-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: var(--ss-primary);
  font-size: 16px;
  margin-bottom: 12px;
}

.ss-sidebar-promo strong {
  display: block;
  font-size: 15px;
  color: var(--ss-heading);
  margin-bottom: 6px;
}

.ss-sidebar-promo p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ss-text);
}

.ss-sidebar-promo a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-primary);
  text-decoration: none;
}

.ss-sidebar-promo a:hover {
  text-decoration: underline;
}

/* Responsive - Tablet: sidebar card + promo sit side by side above the table */
@media (max-width: 992px) {
  .ss-library-layout {
    grid-template-columns: 1fr;
  }

  .ss-category-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ss-category-sidebar-card,
  .ss-sidebar-promo {
    flex: 1 1 260px;
  }
}

/* Responsive - Mobile: stack sidebar card + promo full width */
@media (max-width: 576px) {
  .ss-category-sidebar {
    flex-direction: column;
  }
}

/*==============================================================================
04. DATASET BROWSER - Table Container
==============================================================================*/
.ss-dataset-browser {
  background: #fff;
  border-radius: var(--ss-radius-lg);
  border: 1px solid var(--ss-border);
  overflow: hidden;
  box-shadow: var(--ss-shadow-sm);
}

.ss-browser-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ss-border);
  background: #fff;
}

.ss-browser-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ss-heading);
  line-height: 1.3;
}

.ss-sort-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ss-sort-form label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-muted);
  white-space: nowrap;
}

.ss-sort-form select {
  height: 38px;
  padding: 0 34px 0 14px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  background: #fff;
  color: var(--ss-heading);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: var(--ss-transition);
}

.ss-sort-form select:hover {
  border-color: #CBD5E1;
}

.ss-sort-form select:focus {
  outline: none;
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}

/* Browser Table */
.ss-browser-table {
  overflow-x: auto;
  scrollbar-width: thin;
}

.ss-browser-table::-webkit-scrollbar {
  height: 8px;
}

.ss-browser-table::-webkit-scrollbar-thumb {
  background: #cfd8dc;
  border-radius: 20px;
}

.ss-browser-table table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  /* Fixed layout + explicit widths on every other column (set inline in
     the blade template) makes Dataset Name the one flexible column that
     absorbs whatever space the rest don't use. Without this, a `<td>`
     with no width of its own just grows to fit an unwrapped title instead
     of clipping it, widening the whole table -- which is exactly the
     horizontal-scroll ("slider") problem this table has hit before. */
  table-layout: fixed;
}

.ss-browser-table thead {
  background: #f8fbfa;
}

.ss-browser-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--ss-border);
  background: #f8fbfa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ss-browser-table tbody tr {
  border-bottom: 1px solid var(--ss-border);
  transition: background 0.25s ease,
              transform 0.25s ease;
}

.ss-browser-table tbody tr:hover {
  background: #fbfdfc;
}

.ss-browser-table tbody tr:hover .ss-dataset-id {
  transform: scale(1.04);
}

.ss-browser-table tbody td {
  padding: 10px 16px;
  color: var(--ss-text);
  vertical-align: middle;
  background: #fff;
}

.ss-dataset-id {
  display: inline-block;
  padding: 6px 12px;
  background: var(--ss-primary-light);
  color: var(--ss-primary);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: transform 0.25s ease;
  white-space: nowrap;
}

/* Clamped to one line so a long title doesn't grow that row taller than
   its neighbors; the `title` attribute set in the blade template shows
   the full text on hover. This is unrelated to the horizontal-scroll
   ("slider") issue fixed earlier -- that came from a rule that forced
   *every* cell in the row onto one line at tablet width, widening the
   whole table. Clamping just this column's own text doesn't affect the
   table's width at all, so it can't reintroduce that. Reverted back to
   normal wrapping on the mobile card layout below, where there's
   vertical room to spare and hover doesn't apply on touch anyway. */
.ss-dataset-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ss-heading);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Last Updated date -- the cell had no font-size of its own, so it was
   silently inheriting the page's 17px base body size, making it look
   oversized and inconsistent next to the rest of the table's smaller,
   denser type. */
.ss-date-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-muted);
  white-space: nowrap;
}

/* Category Pill (table cell) -- color-coded to match the same categories'
   badges on the search results grid view, so the palette is consistent
   site-wide. */
.ss-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ss-primary-light);
  border: 1px solid rgba(0, 168, 107, 0.22);
  color: var(--ss-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ss-cat-pill-purple {
  background: #F3EEFE;
  border-color: rgba(124, 58, 237, 0.22);
  color: #7C3AED;
}

.ss-cat-pill-orange {
  background: #FFF1E0;
  border-color: rgba(194, 101, 12, 0.22);
  color: #C2650C;
}

.ss-cat-pill-blue {
  background: #E9F1FE;
  border-color: rgba(37, 99, 235, 0.22);
  color: #2563EB;
}

/* The global .ss-btn class this button also carries sets min-height:56px
   and padding:0 30px -- min-height wins over a smaller `height` by spec,
   so both have to be overridden here, not just height, to actually get a
   compact button. Freeing up this column's width gives more breathing
   room to the Dataset Name column next to it. */
.ss-table-btn {
  min-width: 100px;
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
}

.ss-table-btn:hover {
  transform: translateY(-2px);
}

.ss-table-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.12);
}

/* Responsive - Large Desktop */
@media (min-width: 1400px) {
  .ss-browser-header {
    padding: 22px 26px;
  }

  .ss-browser-table tbody td {
    padding: 12px 20px;
  }
}

/* Responsive - Tablet */
@media (max-width: 992px) {
  .ss-browser-header {
    padding: 18px;
  }

  .ss-table-btn {
    min-width: 100px;
  }
}

/* Responsive - Mobile - Convert to Cards */
@media (max-width: 767px) {
  .ss-browser-header {
    padding: 16px;
  }

  .ss-sort-form {
    width: 100%;
  }

  .ss-sort-form select {
    flex: 1;
  }

  .ss-browser-table table,
  .ss-browser-table thead,
  .ss-browser-table tbody,
  .ss-browser-table th,
  .ss-browser-table td,
  .ss-browser-table tr {
    display: block;
    width: 100%;
  }

  .ss-browser-table thead {
    display: none;
  }

  .ss-browser-table tr {
    margin-bottom: 16px;
    border: 1px solid var(--ss-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ss-shadow-sm);
  }

  .ss-browser-table td {
    padding: 9px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: middle;
    background: #fff;
  }

  .ss-browser-table td[data-label="Dataset ID"] {
    background: #f8fbfa;
    border-top: none;
  }

  .ss-browser-table td[data-label="Dataset Name"] {
    padding-top: 12px;
  }

  /* Category and Last Updated read as bare, ambiguous values without the
     other columns' visual context (an ID badge, a big title, a button) --
     a small label makes each one self-explanatory on its own line. */
  .ss-browser-table td[data-label="Category"],
  .ss-browser-table td[data-label="Last Updated"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .ss-browser-table td[data-label="Category"]::before,
  .ss-browser-table td[data-label="Last Updated"]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ss-muted);
  }

  .ss-dataset-info h4 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
  }

  .ss-dataset-id {
    font-size: 12px;
  }

  .ss-table-btn {
    width: 100%;
    justify-content: center;
    min-width: auto;
  }
}

/*==============================================================================
04B. PAGINATION - Dataset Browser Table
==============================================================================*/
.ss-dataset-browser .ss-pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 24px;
  border-top: 1px solid var(--ss-border);
  background: #FAFCFB;
}

.ss-dataset-browser .ss-pagination-wrap .pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-dataset-browser .ss-pagination-wrap .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--ss-border);
  background: #fff;
  color: var(--ss-heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--ss-transition);
}

.ss-dataset-browser .ss-pagination-wrap .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--ss-primary-light);
  border-color: rgba(0, 168, 107, 0.25);
  color: var(--ss-primary);
}

.ss-dataset-browser .ss-pagination-wrap .page-item.active .page-link {
  background: var(--ss-primary);
  border-color: var(--ss-primary);
  color: #fff;
}

.ss-dataset-browser .ss-pagination-wrap .page-item.disabled .page-link {
  background: #f8fbfa;
  color: #b7bec8;
  border-color: var(--ss-border);
  cursor: default;
}

.ss-dataset-browser .ss-pagination-wrap .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.12);
}

@media (max-width: 576px) {
  .ss-dataset-browser .ss-pagination-wrap {
    padding: 18px 16px;
  }

  .ss-dataset-browser .ss-pagination-wrap .page-item .page-link {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

/*==============================================================================
05. EMPTY STATE - No Data Available
==============================================================================*/
.ss-empty-category {
  text-align: center;
  padding: 60px 40px;
  background: #f8fbfa;
  border-radius: 16px;
}

.ss-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--ss-primary-light);
  color: var(--ss-primary);
  font-size: 36px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.ss-empty-category h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ss-heading);
}

.ss-empty-category p {
  margin: 0;
  font-size: 15px;
  color: var(--ss-muted);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/*==============================================================================
06. DATA CTA - Call to Action Section
==============================================================================*/
/* .ss-data-cta.ss-section (not bare .ss-data-cta): the shared .ss-section
   utility rule later in this file has equal specificity and would silently
   win the padding property back to 112px on source-order alone otherwise. */
.ss-data-cta.ss-section {
  padding: 48px 0;
  background: linear-gradient(135deg, #00a86b 0%, #008c5a 100%);
  position: relative;
  overflow: hidden;
}

.ss-data-cta::before {
  content: "";
  position: absolute;
  right: -300px;
  top: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  z-index: 0;
}

.ss-data-cta::after {
  content: "";
  position: absolute;
  left: -200px;
  bottom: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  z-index: 0;
}

.ss-data-cta-box {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.ss-data-cta .ss-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: inline-flex;
  margin-bottom: 14px;
}

.ss-data-cta .ss-badge::before {
  background: #fff;
}

.ss-data-cta h2 {
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.ss-data-cta p {
  margin: 0 auto 20px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.9);
}

/* CTA Actions */
.ss-data-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.ss-data-cta .ss-btn-primary {
  background: #fff;
  color: var(--ss-primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.ss-data-cta .ss-btn-primary:hover {
  background: #f0f9f6;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.ss-data-cta .ss-btn-light {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.ss-data-cta .ss-btn-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

/* CTA Stats */
.ss-data-cta-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ss-data-cta-stats > div {
  text-align: center;
}

.ss-data-cta-stats strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}

.ss-data-cta-stats span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

/* Responsive - Tablet */
@media (max-width: 991px) {
  .ss-data-cta.ss-section {
    padding: 38px 0;
  }

  .ss-data-cta h2 {
    font-size: 30px;
  }

  .ss-data-cta p {
    font-size: 15px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .ss-data-cta.ss-section {
    padding: 30px 0;
  }

  .ss-data-cta h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .ss-data-cta p {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .ss-data-cta-actions {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
  }

  .ss-data-cta .ss-btn {
    width: 100%;
  }

  .ss-data-cta-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-top: 18px;
  }

  .ss-data-cta-stats strong {
    font-size: 24px;
  }
}

/*==============================================================================
07. SEARCH BOX - Shared Styling

.ss-data-page prefix: index-blade.css (homepage hero search) also defines
.ss-search-box and loads after this file, so a bare selector here would be
silently overridden site-wide (different height/padding/icon sizing).
==============================================================================*/
.ss-data-page .ss-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 56px;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  transition: 0.3s ease;
}

.ss-data-page .ss-search-box i {
  font-size: 18px;
  color: var(--ss-muted);
}

.ss-data-page .ss-search-box input {
  flex: 1;
  border: none;
  background: transparent;

  font-size: 15px;
}

.ss-data-page .ss-search-box input::placeholder {
  color: var(--ss-muted);
}

.ss-data-page .ss-search-box:focus-within {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.1);
}

.ss-data-page .ss-search-box .ss-btn {
  min-height: 42px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 14px;
}

/* Responsive - Mobile */
@media (max-width: 576px) {
  .ss-data-page .ss-search-box {
    flex-direction: column;
    gap: 12px;
    height: auto;
    padding: 15px;
  }

  .ss-data-page .ss-search-box i {
    display: none;
  }

  .ss-data-page .ss-search-box input {
    width: 100%;
  }

  .ss-data-page .ss-search-box .ss-btn {
    width: 100%;
  }
}

/*==============================================================================
08. UTILITY CLASSES
==============================================================================*/
.ss-section {
  position: relative;
  padding: 112px 0;
}

.ss-section-sm {
  padding: 80px 0;
}

.ss-section-lg {
  padding: 130px 0;
}

/* Smooth transitions for interactive elements */
.ss-table-btn:focus,
.ss-search-box input:focus {
  outline: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .ss-topic-strip a,
  .ss-category-list a,
  .ss-dataset-id,
  .ss-browser-table tbody tr,
  .ss-empty-icon {
    transition: none;
    animation: none;
  }
}