/*==============================================================================
STATSCALAR ENTERPRISE - SEARCH RESULTS WORKSPACE STYLES
Version: 5.0
Page: Search Results (searchdata.blade.php)
Framework: Laravel Blade + Bootstrap

This page renders its own workspace header + category nav (does not use the
shared front.header), so everything from the topbar down through the demo
CTA strip lives inside one unified card: .ss-search-shell. All rules are
scoped under that single root class — including form controls that share a
class name with the sitewide design system (.ss-select/.ss-input exist
globally in statscalar-core.css) — so nothing here can leak onto, or be
overridden by, any other page that also loads this stylesheet.
==============================================================================*/

/*==============================================================================
01. PAGE BACKDROP + SHELL CARD
==============================================================================*/
body.ss-search-page-body {
  background: var(--ss-bg);
}

.ss-search-shell {
  max-width: 1320px;
  margin: 22px auto 40px;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  /* No `overflow: hidden` here: an ancestor with overflow other than
     visible becomes the "nearest scrolling ancestor" that position:sticky
     measures against. Since nothing ever overflows inside this shell
     itself, that reference container's scroll offset never changes, so
     sticky children would never detect a scroll to react to. The rounded
     corners this used to clip are instead matched on the topbar (top
     corners) and search body (bottom corners) below. */
}

/*==============================================================================
02. WORKSPACE TOPBAR (logo + global search + auth actions)
==============================================================================*/
.ss-search-shell .ss-search-topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--ss-border);
  border-top-left-radius: var(--ss-radius);
  border-top-right-radius: var(--ss-radius);
}

.ss-search-shell .ss-search-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex-shrink: 0;
  cursor: pointer;
}

.ss-search-shell .ss-search-logo:focus-visible {
  outline: 2px solid var(--ss-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.ss-search-shell .ss-search-logo-mark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ss-heading);
}

.ss-search-shell .ss-search-logo-mark span {
  color: var(--ss-primary);
}

.ss-search-shell .ss-search-logo small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ss-muted);
  margin-top: 2px;
}

.ss-search-shell .ss-search-globalbox {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  padding: 0 8px 0 16px;
  background: var(--ss-bg);
  transition: var(--ss-transition);
}

.ss-search-shell .ss-search-globalbox:focus-within {
  border-color: var(--ss-primary);
  background: var(--ss-white);
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}

.ss-search-shell .ss-search-globalbox i {
  color: var(--ss-muted);
  font-size: 15px;
}

.ss-search-shell .ss-search-globalbox input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--ss-heading);
}

.ss-search-shell .ss-search-globalbox input::placeholder {
  color: #94A3B8;
}

.ss-search-shell .ss-search-globalbox button {
  height: 34px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--ss-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--ss-transition);
  flex-shrink: 0;
}

.ss-search-shell .ss-search-globalbox button:hover {
  background: var(--ss-primary-dark);
}

.ss-search-shell .ss-search-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ss-search-shell .ss-search-topbar-actions .ss-btn {
  min-height: 38px;
  height: 38px;
  padding: 0 18px;
  font-size: 12px;
  box-shadow: none;
}

.ss-search-shell .ss-search-help {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ss-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--ss-heading);
  flex-shrink: 0;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-search-help:hover {
  border-color: var(--ss-primary);
  color: var(--ss-primary);
}

/*==============================================================================
03. CATEGORY NAVIGATION
==============================================================================*/
.ss-search-shell .ss-search-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 20px;
  background: var(--ss-heading);
  overflow-x: auto;
  scrollbar-width: none;
}

.ss-search-shell .ss-search-nav::-webkit-scrollbar {
  display: none;
}

.ss-search-shell .ss-search-nav .ss-nav-link {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-search-nav .ss-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ss-search-shell .ss-search-nav .ss-nav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.ss-search-shell .ss-search-nav .ss-nav-link.active {
  color: #fff;
  background: linear-gradient(120deg, var(--ss-primary), var(--ss-primary-dark));
}

/*==============================================================================
04. WORKSPACE BODY WRAPPER
==============================================================================*/
.ss-search-shell .ss-search-body {
  padding: 22px 28px 30px;
  background: var(--ss-bg);
  border-bottom-left-radius: var(--ss-radius);
  border-bottom-right-radius: var(--ss-radius);
}

/*==============================================================================
05. FILTERS TOOLBAR
==============================================================================*/
.ss-search-shell .ss-search-filters {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  padding: 14px 20px;
  margin-bottom: 14px;
}

.ss-search-shell .ss-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ss-search-shell .ss-filters-label {
  font-weight: 700;
  color: var(--ss-heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-right: 2px;
}

.ss-search-shell .ss-filter-select,
.ss-search-shell .ss-filter-input {
  height: 38px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-bg);
  color: var(--ss-heading);
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-filter-select {
  min-width: 140px;
  padding-right: 34px;
  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 14px center;
}

.ss-search-shell .ss-filter-input {
  width: 140px;
}

.ss-search-shell .ss-filter-input::placeholder {
  color: #94A3B8;
}

.ss-search-shell .ss-filter-select:hover,
.ss-search-shell .ss-filter-input:hover {
  border-color: #CBD5E1;
  background-color: var(--ss-white);
}

.ss-search-shell .ss-filter-select:focus,
.ss-search-shell .ss-filter-input:focus {
  outline: none;
  border-color: var(--ss-primary);
  background-color: var(--ss-white);
  box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.12);
}

.ss-search-shell .ss-filters-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  padding-left: 6px;
}

.ss-search-shell .ss-filters-actions .ss-btn {
  min-height: 38px;
  padding: 0 20px;
}

.ss-search-shell .ss-filters-clear {
  font-size: 13px;
  font-weight: 600;
  color: var(--ss-muted);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-filters-clear:hover {
  color: var(--ss-primary);
  border-bottom-color: var(--ss-primary);
}

/*==============================================================================
06. RESULTS SUMMARY
==============================================================================*/
.ss-search-shell .ss-results-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 6px;
  background: var(--ss-bg);
  border-bottom: 1px solid var(--ss-border);
}

.ss-search-shell .ss-results-summary strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-heading);
}

.ss-search-shell .ss-results-summary em {
  color: var(--ss-primary);
  font-style: normal;
  font-weight: 700;
}

.ss-search-shell .ss-results-summary span {
  font-size: 13px;
  color: var(--ss-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ss-search-shell .ss-results-summary span i.fa-check-circle {
  color: var(--ss-primary);
}

.ss-search-shell .ss-refresh {
  color: var(--ss-muted);
  margin-left: 6px;
  display: inline-flex;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-refresh:hover {
  color: var(--ss-primary);
  transform: rotate(90deg);
}

.ss-search-shell .ss-results-summary-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ss-search-shell .ss-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-white);
}

.ss-search-shell .ss-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ss-muted);
  font-size: 13px;
  cursor: pointer;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-view-btn:hover {
  color: var(--ss-primary);
  background: var(--ss-primary-light);
}

.ss-search-shell .ss-view-btn.is-active {
  background: var(--ss-primary);
  color: #fff;
}

/*==============================================================================
06b. STICKY WORKSPACE STACK
The topbar, category nav, filter row and results summary stick to the top
of the shell cumulatively (each stacking directly below the one above it)
as the results scroll underneath. Actual `top` offsets are computed from
real rendered heights by the script at the bottom of searchdata.blade.php
(so wrapping at narrower widths still lines the bars up); the `top: 0`
here is only a pre-JS fallback.
==============================================================================*/
.ss-search-shell .ss-search-topbar,
.ss-search-shell .ss-search-nav,
.ss-search-shell .ss-search-filters,
.ss-search-shell .ss-results-summary {
  position: sticky;
  top: 0;
}

.ss-search-shell .ss-search-topbar { z-index: 34; background: var(--ss-white); }
.ss-search-shell .ss-search-nav { z-index: 33; }
.ss-search-shell .ss-search-filters { z-index: 32; }
.ss-search-shell .ss-results-summary { z-index: 31; }

/*==============================================================================
07. RESULTS TABLE
==============================================================================*/
.ss-search-shell .ss-table-wrap {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  overflow: auto;
  box-shadow: var(--ss-shadow-sm);
}

.ss-search-shell .ss-results-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  /* Fixed layout + explicit widths on every column except Dataset Title
     below: that's the only column that should absorb extra space on wide
     screens. Without this, auto layout stretches Category/Coverage/
     Frequency/Last Updated to fill the container even when their content
     (a short pill, a dash, a date) needs a fraction of that room. */
  table-layout: fixed;
}

.ss-search-shell .ss-results-table thead th {
  text-align: left;
  background: #F8FAFC;
  border-bottom: 1px solid var(--ss-border);
  color: var(--ss-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  white-space: nowrap;
}

.ss-search-shell .ss-results-table tbody td {
  padding: 12px 16px;
  border-top: 1px solid var(--ss-border);
  vertical-align: middle;
  font-size: 13px;
  color: var(--ss-text);
}

.ss-search-shell .ss-results-table tbody tr {
  transition: background-color var(--ss-transition);
}

.ss-search-shell .ss-results-table tbody tr:nth-child(even) td {
  background: #FBFCFD;
}

.ss-search-shell .ss-results-table tbody tr:hover td {
  background: var(--ss-primary-light);
}

.ss-search-shell .ss-col-code {
  width: 115px;
}

/* Dataset Title has no fixed width on purpose: with table-layout:fixed
   above, it's the only column left unconstrained, so it absorbs whatever
   space the fixed-width columns don't use. */

.ss-search-shell .ss-col-category {
  width: 200px;
}

.ss-search-shell .ss-col-coverage {
  width: 110px;
}

.ss-search-shell .ss-col-frequency {
  width: 110px;
}

.ss-search-shell .ss-col-updated {
  width: 130px;
}

.ss-search-shell .ss-col-title b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ss-heading);
  line-height: 1.4;
  /* One line per row keeps the table's row height uniform; the native
     `title` attribute (set in the blade template) shows the full text
     on hover. Reverted back to normal wrapping on the mobile stacked-card
     layout below, where there's vertical room to spare and hover doesn't
     apply on touch anyway. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-search-shell .ss-title-icon {
  width: 14px;
  margin-right: 6px;
  font-size: 12px;
  text-align: center;
  color: var(--ss-primary);
}

/* Category / Coverage / Frequency / Last Updated / Action stay centered
   (header + cells) in the desktop table; the mobile stacked-card layout
   below overrides this back to a label/value row. */
.ss-search-shell .ss-results-table th.ss-col-category,
.ss-search-shell .ss-results-table th.ss-col-coverage,
.ss-search-shell .ss-results-table th.ss-col-frequency,
.ss-search-shell .ss-results-table th.ss-col-updated,
.ss-search-shell .ss-results-table th.ss-col-action,
.ss-search-shell .ss-results-table td.ss-col-category,
.ss-search-shell .ss-results-table td.ss-col-coverage,
.ss-search-shell .ss-results-table td.ss-col-frequency,
.ss-search-shell .ss-results-table td.ss-col-updated,
.ss-search-shell .ss-results-table td.ss-col-action {
  text-align: center;
}

.ss-search-shell .ss-col-action {
  width: 170px;
}

.ss-search-shell .ss-col-action a {
  justify-content: center;
}

.ss-search-shell .ss-code {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ss-heading);
  background: var(--ss-bg);
  border: 1px solid var(--ss-border);
  border-radius: 6px;
  padding: 3px 8px;
}

/*==============================================================================
07b. RESULTS GRID (card view)
==============================================================================*/
.ss-search-shell .ss-grid-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ss-search-shell .ss-card {
  display: flex;
  flex-direction: column;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-sm);
  padding: 18px;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-card:hover {
  border-color: var(--ss-primary);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.ss-search-shell .ss-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ss-search-shell .ss-card-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ss-primary-light);
  color: var(--ss-primary);
  font-size: 13px;
}

.ss-search-shell .ss-card-code {
  margin-left: auto;
}

.ss-search-shell .ss-card-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ss-heading);
}

.ss-search-shell .ss-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--ss-border);
}

.ss-search-shell .ss-card-meta > div {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.ss-search-shell .ss-card-meta i {
  margin-top: 2px;
  color: var(--ss-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.ss-search-shell .ss-card-meta span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ss-muted);
  min-width: 0;
}

.ss-search-shell .ss-card-meta b {
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ss-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-search-shell .ss-card-action {
  margin-top: auto;
  align-self: flex-start;
}

/*==============================================================================
08. CATEGORY PILL
==============================================================================*/
.ss-search-shell .ss-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fixed (not min-) width so every category badge is the same size
     regardless of name length -- "Price Intelligence" and "Commodity
     Intelligence" render identically sized, text centered inside. 180px
     comfortably fits the longest current category name; the ellipsis
     below is just a safety net if a longer name is added later. */
  width: 180px;
  flex-shrink: 0;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The row-hover background below is the exact same color as this pill's
     own background, so without the border above the pill visually
     disappears into the row on hover instead of staying a distinct badge. */
}

.ss-search-shell .ss-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

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

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

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

/*==============================================================================
09. ACTION BUTTONS
==============================================================================*/
.ss-search-shell .ss-btn-sm {
  min-height: 34px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--ss-radius-sm);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  box-shadow: none;
}

.ss-search-shell .ss-btn-sm:hover {
  transform: translateY(-1px);
}

/*==============================================================================
10. PAGINATION
==============================================================================*/
.ss-search-shell .ss-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.ss-search-shell .ss-pagination-wrap .pagination {
  display: flex;
  margin: 0;
  padding-left: 0;
  list-style: none;
  flex-wrap: wrap;
  gap: 6px;
}

.ss-search-shell .ss-pagination-wrap .page-item .page-link {
  border-radius: var(--ss-radius-sm);
  border: 1px solid var(--ss-border);
  color: var(--ss-heading);
  font-size: 13px;
  font-weight: 600;
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  margin: 0;
  transition: var(--ss-transition);
}

.ss-search-shell .ss-pagination-wrap .page-item.active .page-link {
  background: var(--ss-primary);
  border-color: var(--ss-primary);
  color: #fff;
  box-shadow: var(--ss-shadow-sm);
}

.ss-search-shell .ss-pagination-wrap .page-item.disabled .page-link {
  color: #CBD5E1;
  background: var(--ss-bg);
}

.ss-search-shell .ss-pagination-wrap .page-item:not(.active):not(.disabled) .page-link:hover {
  border-color: var(--ss-primary);
  color: var(--ss-primary);
  background: var(--ss-primary-light);
}

/*==============================================================================
11. EMPTY STATE
==============================================================================*/
.ss-search-shell .ss-empty {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  padding: 70px 30px;
  text-align: center;
  color: var(--ss-muted);
  font-size: 14px;
}

/*==============================================================================
12. BENEFITS + DEMO CTA STRIP
==============================================================================*/
.ss-search-shell .ss-search-footer-panel {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.ss-search-shell .ss-search-benefits {
  background: linear-gradient(115deg, #F7FCF9, #F3F8F6);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  padding: 28px 22px;
  gap: 20px;
}

.ss-search-shell .ss-search-benefits article {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 200px;
}

.ss-search-shell .ss-search-benefits article span {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ss-white);
  box-shadow: var(--ss-shadow-sm);
  font-size: 17px;
  color: var(--ss-primary);
}

.ss-search-shell .ss-search-benefits b {
  display: block;
  font-size: 13px;
  color: var(--ss-heading);
}

.ss-search-shell .ss-search-benefits p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ss-muted);
}

.ss-search-shell .ss-search-cta {
  background: linear-gradient(120deg, var(--ss-heading), #1E293B);
  border-radius: var(--ss-radius);
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ss-search-shell .ss-search-cta h2 {
  font-size: 19px;
  margin: 0 0 8px;
  color: #fff;
}

.ss-search-shell .ss-search-cta p {
  margin: 0 0 18px;
  color: #CBD5E1;
  font-size: 13px;
}

.ss-search-shell .ss-search-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ss-search-shell .ss-search-cta .ss-btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.ss-search-shell .ss-search-cta .ss-btn-outline:hover {
  background: #fff;
  color: var(--ss-heading);
  border-color: #fff;
}

/*==============================================================================
13. RESPONSIVE
==============================================================================*/
@media (max-width: 1100px) {
  .ss-search-shell .ss-search-footer-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .ss-search-shell .ss-grid-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .ss-search-shell {
    margin: 0;
    border-radius: 0;
  }

  .ss-search-shell .ss-search-topbar {
    flex-wrap: wrap;
    padding: 14px 18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .ss-search-shell .ss-search-logo {
    order: 1;
  }

  .ss-search-shell .ss-search-topbar-actions {
    order: 2;
  }

  .ss-search-shell .ss-search-globalbox {
    order: 3;
    flex-basis: 100%;
  }

  .ss-search-shell .ss-search-body {
    padding: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .ss-search-shell .ss-filters-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }

  .ss-search-shell .ss-filters-actions {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .ss-search-shell .ss-search-results-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-search-shell .ss-results-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .ss-search-shell .ss-search-benefits {
    justify-content: flex-start;
  }

  .ss-search-shell .ss-grid-wrap {
    grid-template-columns: 1fr;
  }

  .ss-search-shell .ss-card-meta {
    grid-template-columns: 1fr;
  }

  .ss-search-shell .ss-search-cta {
    padding: 24px;
  }

  /* ----- Table -> stacked card list ----- */
  .ss-search-shell .ss-table-wrap {
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .ss-search-shell .ss-results-table,
  .ss-search-shell .ss-results-table tbody,
  .ss-search-shell .ss-results-table tr,
  .ss-search-shell .ss-results-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .ss-search-shell .ss-results-table thead {
    display: none;
  }

  .ss-search-shell .ss-results-table tbody tr {
    background: var(--ss-white);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius-sm);
    box-shadow: var(--ss-shadow-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
  }

  .ss-search-shell .ss-results-table tbody tr:nth-child(even) td {
    background: transparent;
  }

  .ss-search-shell .ss-results-table tbody td {
    border-top: 1px dashed var(--ss-border);
    padding: 9px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
  }

  .ss-search-shell .ss-results-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ss-muted);
    text-align: left;
  }

  .ss-search-shell .ss-col-title {
    border-top: none;
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    display: block;
    text-align: left;
  }

  .ss-search-shell .ss-col-title b {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .ss-search-shell .ss-col-action {
    border-top: none;
    padding-top: 12px !important;
  }

  .ss-search-shell .ss-col-action a {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .ss-search-shell .ss-search-topbar-actions {
    flex-wrap: wrap;
  }

  .ss-search-shell .ss-filter-select,
  .ss-search-shell .ss-filter-input {
    width: 100%;
  }

  .ss-search-shell .ss-filters-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ss-search-shell .ss-filters-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .ss-search-shell .ss-filters-clear {
    text-align: center;
  }

  .ss-search-shell .ss-search-cta-actions .ss-btn {
    width: 100%;
  }
}

/*==============================================================================
14. ACCESSIBILITY
==============================================================================*/
@media (prefers-reduced-motion: reduce) {
  .ss-search-shell .ss-refresh,
  .ss-search-shell .ss-results-table tbody tr,
  .ss-search-shell .ss-btn-sm,
  .ss-search-shell .ss-pagination-wrap .page-link,
  .ss-search-shell .ss-search-nav a {
    transition: none;
  }
}