/**
 * Scope admin consolidated stylesheet
 * Source: tokens.css, utilities.css, components.css, admin.client.css
 * Generated as a single-file version for easier editing.
 */

 @charset "UTF-8";

 a,
 a:hover { color: var(--link); }

 code {
  background-color: lightblue;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
  border-radius: var(--r-xs);
  padding: .15em .5em;
}

  pre {
    background: rgba(0, 0, 0, .4);
    padding: .75em 1em;
    border-radius: var(--r-xs);
    line-height: 1.5em;
    font-size: 1rem;
  }

  pre code { background: transparent; color: #fff; }

 /* ===========================================================================
   REPORT ITEMS (Metric Tiles) - Consolidated
=========================================================================== */

/* .report-item consolidated above */

 .site-card:hover .sitesite-card-hover-content {
  background: rgba(0,0,0,0.5);
 }

 .report-label {
   color: var(--muted);
   display: flex;
   gap: 5px;
   align-items: baseline;
   padding-right: 20px;
   flex-wrap: wrap;
 }

 .report-value {
   font-weight: 700;
   color: #fff;
   display: flex;
   gap: .75em;
   margin: .5em 0 0;
   font-size: 14px;
   flex-wrap: wrap;
 }

    .site-theme-thumb {
        width: 130px;
        height: auto;
        border-radius: var(--r-xs);
        object-fit: cover;
        margin: 10px 0 0 !important;
    }

   canvas { z-index: 100000 !important; }

   .report-item.state-good   { border-left-color: var(--good); }
   .report-item.state-warn   { border-left-color: var(--warn); }
   .report-item.state-bad    { border-left-color: var(--bad); }
   .report-item.state-neutral{ border-left-color: #ccd0d4; }
   .report-item.state-unknown{ border-left-color: var(--unknown); }

   .report-item.state-good[data-metric-clickable="1"]:hover { color: #fff; background: var(--good); outline-color: var(--good); border-color: var(--good); }
    .report-item.state-good[data-metric-clickable="1"]:hover .report-label,
    .report-item.state-good[data-metric-clickable="1"]:hover .report-value { color: #fff !important; }
   .report-item.state-warn[data-metric-clickable="1"]:hover { color: #fff; background: var(--warn); outline-color: var(--warn); border-color: var(--warn); }
    .report-item.state-warn[data-metric-clickable="1"]:hover .report-label,
    .report-item.state-warn[data-metric-clickable="1"]:hover .report-value { color: #fff !important; }
   .report-item.state-bad[data-metric-clickable="1"]:hover { color: #fff; background: var(--bad); outline-color: var(--bad); border-color: var(--bad); }
    .report-item.state-bad[data-metric-clickable="1"]:hover .report-label,
    .report-item.state-bad[data-metric-clickable="1"]:hover .report-value { color: #fff !important; }
   .report-item.state-neutral[data-metric-clickable="1"]:hover { color: #fff; background: rgba(255,255,255,.4); }
   .report-item.state-unknown[data-metric-clickable="1"]:hover { color: #fff; background: var(--unknown); outline-color: var(--unknown); border-color: var(--unknown); }
    .report-item.state-unknown[data-metric-clickable="1"]:hover .report-label,
    .report-item.state-unknown[data-metric-clickable="1"]:hover .report-value { color: #fff !important; }

   .report-item[data-metric-clickable="1"]:hover { color: #1d2327; background: #fff; outline-color: #fff; border-color: #fff; }
   .report-item.state-neutral:hover { color: #1d2327 !important; background: #fff !important; outline-color: #fff; border-color: #fff; }
    .report-item.state-neutral:hover .ss-confidence-badge {
      background: rgba(0, 0, 0, 0.1);
      color: var(--ink);
    }
   .report-item[data-metric-clickable="1"]:hover .report-label,
   .report-item[data-metric-clickable="1"]:hover .report-value { color: #1d2327; }

/* ---------------------------------------------------------------------------
   Network card visibility - CSS-driven filtering
   Two modes: preview (opacity fade, layout stable) and committed (display:none)
   - data-ss-filter-preview: hover preview, uses opacity for smooth UX
   - data-ss-filter: committed filter, uses display:none for clean layout
   Search uses .ss-search-hidden class on individual cards
--------------------------------------------------------------------------- */

/* site-card transition moved to main definition */

.site-card.ss-search-preview-hidden { opacity: 0.15; pointer-events: none; }
.site-card.ss-search-hidden { display: none; }

/* ---------------------------------------------------------------------------
   PREVIEW MODE (hover) - opacity-based, layout stays stable
--------------------------------------------------------------------------- */
[data-ss-filter-preview="updates"] .site-card:not([data-issue-updates="1"]),
[data-ss-filter-preview="critical"] .site-card:not([data-issue-critical="1"]),
[data-ss-filter-preview="unreachable"] .site-card:not([data-site-filter="unreachable"]):not([data-site-filter="auth_failed"]),
[data-ss-filter-preview="stale"] .site-card:not([data-issue-stale="1"]) {
  opacity: 0.15;
  pointer-events: none;
}

[data-ss-filter-preview="ok"] .site-card[data-issue-critical="1"],
[data-ss-filter-preview="ok"] .site-card[data-issue-updates="1"],
[data-ss-filter-preview="ok"] .site-card[data-issue-stale="1"],
[data-ss-filter-preview="ok"] .site-card[data-site-filter="unreachable"],
[data-ss-filter-preview="ok"] .site-card[data-site-filter="auth_failed"] {
  opacity: 0.15;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   COMMITTED MODE (click) - display:none, clean layout
--------------------------------------------------------------------------- */
[data-ss-filter="updates"] .site-card:not([data-issue-updates="1"]) { display: none; }
[data-ss-filter="critical"] .site-card:not([data-issue-critical="1"]) { display: none; }
[data-ss-filter="unreachable"] .site-card:not([data-site-filter="unreachable"]):not([data-site-filter="auth_failed"]) { display: none; }
[data-ss-filter="stale"] .site-card:not([data-issue-stale="1"]) { display: none; }

[data-ss-filter="ok"] .site-card[data-issue-critical="1"],
[data-ss-filter="ok"] .site-card[data-issue-updates="1"],
[data-ss-filter="ok"] .site-card[data-issue-stale="1"],
[data-ss-filter="ok"] .site-card[data-site-filter="unreachable"],
[data-ss-filter="ok"] .site-card[data-site-filter="auth_failed"] { display: none; }

.site-card--add { display: flex; }
.site-card--add-hidden { display: none !important; }

/* ---------------------------------------------------------------------------
   Grid height animation (FLIP-assisted)
   JS sets --ss-grid-height during transitions
--------------------------------------------------------------------------- */
.ss-sites-grid.ss-animating {
  height: var(--ss-grid-height);
  transition: height 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ss-sites-grid.ss-animating { transition: none; }
}

 .scope-network-sites-actions {
   flex-shrink: 0;
 }

 .scope-network-sites .sites-list > div {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 15px;
   flex-basis: 100%;
   margin: 5px 0 0;
 }

 @media (min-width: 900px) {
   .scope-network-sites .sites-list > div {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

 @media (min-width: 1400px) {
   .scope-network-sites .sites-list > div {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }

 .stat-card {
     background: #1e2327;
     padding: 0.75rem;
     border-radius: 5px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     transition: all 0.2s ease;
     display: flex;
     gap: 0.5rem;
 }

  .site-card-flags {
      margin-top: 6px;
    }

    .site-card--add:hover .site-card-add-label,
    .site-card--add:hover .site-card-add-plus { color: #fff; }

   .site-card h3 {
     color: #fff;
     margin: 0;
     padding: 0;
     line-height: 1.25em;
     font-size: 1.75em;
   }

   .stat-number {
      font-weight: bold;
      color: #fff;
      line-height: 1em;
      background: #1d2327;
      padding: .25em .5em;
      border-radius: 2px;
   }

    .stat-number[data-count="0"] {
      display: none;
    }

   .stat-label {
     color: #ccc;
     font-size: 1rem;
     margin-top: 0;
     padding: 4px 3px;
   }

   .report-section {
     border-radius: var(--r-sm);
     padding: 0 0 10px;
     margin-bottom: 25px;
     border-bottom: none;
   }
   .report-section:last-of-type { margin-bottom: 0; }
   .report-section-title {
     margin: .25em 0 1em;
     font-size: 1.25rem;
     font-weight: 300;
     color: var(--ink);
   }

 /* -----------------------------------------------------------------------------
    Page chrome / local layout tweaks
 ----------------------------------------------------------------------------- */
 #wpwrap { background: #111; position: relative; z-index: 10; }
 #wpcontent {

 }

 .report-plus-inspector {
    margin: 0 auto;
    padding: 10px 0;
    max-width: 2000px;
 }

@media screen and (max-width: 782px) {
  .wrap { margin: 0 10px 0 0 !important; }
}

.wrap h1 {
  font-size: 1.75rem;
  font-weight: 300;
  padding-bottom: .25em;
  color: #fff;
  display: flex;
  align-items: center;
  margin-left: 7px;
}

  @media screen and (max-width: 767px) {
    .wrap h1 {
      font-size: 1.75em;
    }
    .ss-active-site-label {
      font-size: 2em !important;
    }
  }

 .wrap h1 em {
   font-style: normal;
   color: #C2C3A3;
 }

 .ss-version {
   font-size: .94rem;
   font-weight: 400;
   text-transform: uppercase;
   background: transparent;
   color: #555;
   padding: 0 5px;
   border-radius: var(--r-xs);
   white-space: nowrap;
   margin-top: 10px;
   display: inline-block;
 }

 /* code consolidated above */

 .wrap p code {
   padding: 3px 5px 2px;
   white-space: normal;
 }

 .wrap .form-table td p {
   margin-bottom: .35rem;
 }

 .form-table th {
    padding-right: 15px;
    width: 130px;
    font-weight: normal;
 }

 /* -----------------------------------------------------------------------------
    Group wrappers / API config blocks
 ----------------------------------------------------------------------------- */

 .group-silo {
   padding: 0;
   border-radius: 20px;
   max-width: 2000px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
 }

 .group-silo:last-of-type {
   padding-bottom: 0;
 }

 .group-silo h3 {
   padding-left: 1px;
 }

 .group-silo.section-failed-attempts .group-silo-liner {
   padding: 15px;
 }

  .group-silo-liner table {
   border-radius: var(--r-sm);
   border: none;
   width: 100%;
 }

 .group-silo-liner thead tr th {
   font-weight: 600;
   background: rgba(0,0,0,.2)
 }

 .group-silo-liner p.submit {
   margin-top: 0;
   padding-top: 0;
 }

 /* -----------------------------------------------------------------------------
    Report actions / header logo / notices / inputs
 ----------------------------------------------------------------------------- */

 .report-actions {
   display: flex;
   align-items: center;
   overflow: auto;
 }

 .header-actions {
   text-align: right;
   padding-top: 7px;
   margin-right: 5px;
   float: right;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row-reverse;
 }

  #error,
  .notice {
   background: #1e2327;
   color: #fff;
   border: none;
   border-left: 10px solid transparent;
   border-radius: var(--r-sm);
   padding: .5em 1em;
   margin-bottom: 10px !important;
   outline: 1px solid rgba(255, 255, 255, 0.1);
 }

  .notice.notice-warning { border-color: var(--warn) }

 .input-token-field {
   width: calc(100% - 70px);
 }

 .group-silo textarea.large-text {
   background: #f1f1f1;
   border: none;
   padding: 1em;
   border-top: 1px solid #ccc;
   width: 100%;
 }

 .wrap input[readonly] {
   background: #d9fcdb;
   border: none;
   padding: .25em 1em;
   margin: 0;
   border-radius: 3px 0 0 3px;
 }

 .wp-core-ui .group-silo .button,
 .wp-core-ui .group-silo .button-secondary {
   color: #fff;
   background-color: #2271b1;
   font-size: .94rem;
 }

 #ss-copy-connection-code-btn {
  margin: 0;
  background: var(--good);
  border: 2px solid var(--good);
  border-radius: 0 3px 3px 0;
 }
 #ss-regenerate-token { background-color: var(--warn); border-color: var(--warn); color: #fff; }

 #ss-open-settings { padding: 0 5px 0 10px; }
 .dashicons-admin-plugins:before { position: relative; top: -1px; }

 #ss-open-settings,
 #ss-network-sites-toggle,
 #ss-open-plugin-settings {
   padding: 0 10px;

   background: transparent;
   border: none;
   margin-left: auto;
   border-radius: 5px;
 }

 #ss-network-sites-toggle { margin: 0 0 0 5px; position: relative; }

  #ss-network-sites-toggle span::before { color: #1b2025; }
  #ss-open-plugin-settings span::before {
    color: #fff;
    font-size: 1.325em;
  }

 #ss-open-settings:focus,
 #ss-open-settings:focus-visible,
 #ss-network-sites-toggle:focus,
 #ss-network-sites-toggle:focus-visible {
   outline: none;
   box-shadow: none;
 }

 body[data-ss-overage="1"] .ss-site-limits { color: var(--warn); }
 body.ss-fleet-overage #ss-network-sites-toggle::before {
  display: block;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: var(--warn);
  top: 6px;
  position: absolute;
  right: 6px;
 }

 .dashicons-admin-settings,
 .dashicons-admin-plugins,
 .dashicons-excerpt-view {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 100;
   width: 25px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }

 .dashicons-excerpt-view::before { color: #fff; }

 .site-list-connection-buttons { margin-left: auto; display: flex; gap: 10px; }

 .dashicon-in-notice {
   display: inline-block;
   line-height: 1em;
   height: auto;
   width: 25px;
   position: relative;
   top: -3px;
   color: #00a32a;
   opacity: 1;
 }

 .footer-info {
   display: flex;
   gap: 15px;
   font-size: .9rem;
   order: -1;
   padding: 1em 0;
 }

 .footer-info .description {
   font-style: italic;
   margin: .5rem 0 1rem;
 }

 .footer-info > p {
    margin: 15px 0;
    color: #666;
    padding: 0;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    gap: 15px;
 }

 .footer-info > p a { line-height: .75em; }

 .footer-info > p img {
  height: 25px;
  width: auto;
 }

#ss-run-report-status {
    color: rgb(194 195 163);
    padding: .35em .85em;
    display: inline-block;
    line-height: 1em;
    background: #1d2327;
    border-radius: 12px;
    margin-left: .5em;
 }

  body.ss-report-loading #ss-run-report-status { display: none; }

 @media screen and (max-width: 782px) {
  #ss-run-report-status {
    background: none;
    padding: 0;
    width: 100%;
    display: block;
    margin: .5em .3em 0 0;
  }
 }

 #ss-run-report {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-size: 1.35em;
   justify-content: center;
   padding: .35em 1em .35em .75em;
   line-height: 1em;
   background: green;
   border: none;
 }

  /* body[data-ss-report-cached="1"] #ss-run-report-status {
    background: var(--accuracy-experimental);
    color: #fff;
    opacity: 1;
  } */
  body[data-ss-report-cached="1"] #ss-run-report-status::before {
    content: 'Cached: '
  }

 #ss-run-report span {
   margin-right: .15em;
   font-size: 1.5em;
   width: auto;
   height: auto;
 }

 #ping-result {
   margin-top: 10px;
   display: inline-block;
   padding: .5rem 1rem;
 }

 /* -----------------------------------------------------------------------------
    Settings Modal: local skin tweaks (on top of base modal)
 ----------------------------------------------------------------------------- */

 .ss-help-state {
   margin-bottom: 12px;
   padding: 10px 12px;
   border-left: 4px solid var(--info);
   border-radius: 4px;
   background: var(--info-soft);
   color: #1d4f7a;
 }

 /* -----------------------------------------------------------------------------
    Report: page-only niceties / layout overrides
 ----------------------------------------------------------------------------- */

 .ss-report-wrap h4 {
   text-transform: uppercase;

   color: rgba(255,255,255,.5);
 }

 .section-security-headers { margin-top: .5em; }
 .section-security-headers h4 {
    color: #fff;
    padding: .5em 1em;
    display: inline-block;
    line-height: 1em;
    border-radius: var(--r-xs);
    margin-bottom: .75em;
    margin-top: .25em;
    font-weight: 100;
    text-transform: capitalize;
    font-size: 16px;
    padding: .5em .5em .5em 1em;
 }

 .ss-cache-badge {
   margin-left: .5em;
   color: #666;
   font-size: .9em;
 }

 .ss-priority-list {
   list-style: disc;
 }

 .ss-priority-list button {
   display: none;
 }

 .section-priorities {
   margin-bottom: var(--space-4, 16px);
 }

 body[data-ss-view="monitor"] .section-priorities { display: none; }

 .section-priorities h2 {
   margin-bottom: 4px;
 }

 .ss-checklist-progress {
   font-size: var(--fs-13, 13px);
   color: var(--muted, #888);
   margin: 0 0 12px 0;
   opacity: .7;
   color: #ccc;
   padding: 5px 20px 5px 15px;
   display: inline-block;
   background: #1d2327;
   line-height: 1em;
   border-radius: 0 10px 10px 0;
   border-left: 1px solid #ccc;
   margin-bottom: .75em;
 }

 .ss-checklist {
   list-style: none;
   margin: 10px 0 0 15px;
   padding: 0;
 }

 .ss-checklist li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   padding: 6px 0;
   font-size: var(--fs-13, 13px);
 }

 .ss-checklist li:last-child {
   border-bottom: none;
 }

 .ss-check-icon {
   flex-shrink: 0;
   width: 16px;
   text-align: center;
   font-weight: 600;
   font-size: 18px;
 }

 .ss-check-done {
   color: var(--good, #22c55e);
 }

 .ss-check-issue {
   color: var(--bad, #ef4444);
 }

 .ss-check-warn {
   color: var(--warn, #f59e0b);
 }

 .ss-check-unknown {
   color: var(--muted, #888);
 }

 .ss-check-pending {
   color: var(--muted, #888);
 }

 .ss-check-manual {
   cursor: pointer;
   user-select: none;
 }

 .ss-check-manual:hover {
   background: rgba(255,255,255,.04);
   border-radius: 4px;
   margin-left: -4px;
   padding-left: 4px;
   margin-right: -4px;
   padding-right: 4px;
 }

 .ss-check-link {
   color: inherit;
   text-decoration: none;
   border-bottom: 1px dotted currentColor;
   transition: border-color 0.15s ease;
 }

 .ss-check-link:hover {
   border-bottom-style: solid;
   opacity: 0.85;
 }

 .ss-check-link:focus {
   outline: none;
   border-bottom-style: solid;
 }

 .ss-external-icon {
   font-size: 0.75em;
   opacity: 0.7;
   margin-left: 0.15em;
   vertical-align: super;
 }

 .ss-checklist-empty {
   color: var(--muted, #888);
   font-size: var(--fs-13, 13px);
   padding: 12px 0;
 }

 .report-layout {
   display: block;
 }

 .ss-report-wrap {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas:
     "aside"
     "main";
   gap: 20px;
   align-items: start;
   margin-top: 1.25em;
 }

 @media screen and (max-width: 767px) {
  .ss-report-wrap {
    gap: 0;
    margin-top: 1.25em;
  }
 }

 .report-aside {
   grid-area: aside;
 }

 .report-main {
   grid-area: main;
   min-width: 0;
 }

 @media (min-width: 990px) {
   .ss-report-wrap {
     grid-template-columns: 1fr 334px;
     grid-template-areas: "main aside";
   }

   .report-aside {
     position: sticky;
     top: 84px;
   }
 }

 .report-aside {
   top: 60px;
   align-self: start;
   border-radius: 8px;
   z-index: 5;
 }

 .ss-network-sites-header h2,
 .report-section h2 {
   font-size: 1.75em;
   margin-top: 0;
   letter-spacing: .5px;
   font-weight: 100;
   margin-bottom: .5em;
   color: #fff;
   padding: .65em .5em .25em 5px;
 }

 .ss-section-header h2 { margin-bottom: 0; font-size: 1em !important; }

 @media screen and (max-width: 767px) {
   .ss-network-sites-header h2,
    .report-section h2 {
      font-size: 1.75em;
    }
    .ss-network-sites-header .ss-site-count {
      font-size: 12px;
    }
 }
  .ss-network-sites-header h2 {
    padding: 0 0 0 2px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    border-left: none;
    color: #1b2025;
    font-weight: 400;
  }
  .ss-network-sites-header .network-stats {
    display: flex;
    align-items: center;
    gap: 10px;
  }

    .ss-sites-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-left: auto;
    }
    .ss-sites-actions button {
      background: var(--good);
      border-radius: 20px;
      border: none;
      color: #fff;
      font-size: 1em !important;
      line-height: 1em;
      padding: .75em 1.25em;
      cursor: pointer;
      box-shadow: var(--shadow-elevation-low);
    }

    .ss-sites-actions button[disabled] {

      cursor: not-allowed;
      opacity: .8;
    }

  .ss-network-sites-header .ss-site-count {
    font-size: 14px;
    color: #d9dac2;
    font-weight: 400;
    padding: 4px 10px 4px 12px;
    background: rgb(41 50 56);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    border-radius: 15px;
    cursor: initial;
    box-shadow: 0 3px 0 rgba(0,0,0,.25);
  }
  .ss-site-count:empty {
    display: none;
  }

  .ss-memory--ok .ss-capacity-bar-fill { background: rgba(34, 197, 94, 0.8); }
  .ss-memory--warn .ss-capacity-bar-fill { background: rgba(234, 179, 8, 0.8); }
  .ss-memory--critical .ss-capacity-bar-fill { background: rgba(239, 68, 68, 0.8); }
  .ss-network-sites-header {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    box-shadow: 0 10px 0 rgba(0,0,0,.25);
    border-radius: 5px;
    width: 100%;
    position: relative;
    z-index: 10;;
  }

    .ss-drawer-open .ss-network-sites-header {
      border-radius: 5px 5px 0 0;
    }

    @media screen and (max-width: 767px) {
      .ss-upgrade-link,
      .ss-memory-meter { display: none; }
    }

    .ss-sites-search-wrap {
      display: flex;
      align-items: center;
      gap: 0;
      max-width: 280px;
      margin: 0 8px 0 5px;
      position: relative;
    }

  input[type=search].ss-sites-search {
    flex: 1;
    background: #1d2327;
    border: none;
    border-radius: 2px;
    font-size: 1.25em;
    color: #fff;
    width: 100%;
    padding: 10px 32px 10px 14px;
    line-height: 1.4em;
    border-left: 2px solid transparent;
  }
  input[type=search].ss-sites-search:hover,
  input[type=search].ss-sites-search:focus {
    border-left: 2px solid #666 !important;
    outline: none !important;
    box-shadow: none;
    background: rgba(255, 255, 255, .05);
  }
    .ss-sites-search::-webkit-search-cancel-button,
  .ss-sites-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
  .ss-sites-search::placeholder {
    color: rgba(255,255,255,1);
  }
  .ss-sites-search:focus {
    outline: none;
    border-color: none;
    box-shadow: none;
    border-left: none !important;
    outline: 1px solid rgba(var(--brand-400), 1) !important;
  }

  .ss-sites-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
  }
  .ss-sites-search-clear:hover {
    color: #fff;
  }

  .site-card[hidden] {
    display: none !important;
  }

  .ss-sites-grid {
    overflow: auto;
    max-height: 30vw;
    padding: 8px 10px 10px;
    min-height: 30px;
    position: relative;
    margin-top: 0 !important;
  }
.ss-sites-grid:before {
    display: block;
    content: 'No results';
    position: absolute;
    color: #fff;
    left: 15px;
    top: 15px;
    font-size: 1.25em;
}

@media screen and (max-width: 480px) {
  .ss-sites-grid { max-height: 95vw; overflow-y: scroll; }
  .mobile .site-card-flags,
  .mobile .site-card-versions { display: none; }
}

.sites-list[data-ss-search-active] .site-card--add { display: none; }

 /* -----------------------------------------------------------------------------
    Plugins Table (local; base table styles live in ss-components.css)
 ----------------------------------------------------------------------------- */

 .report-plugins-wrapper { display: grid; gap: 15px; }
 @media (min-width: 1550px) {
   .report-plugins-wrapper {
     grid-template-columns: 1fr 3fr;
     align-items: start;
   }
 }

 .report-plugins-wrapper .report-grid { margin-bottom: 15px; }

 .report-table-wrapper {
   display: block;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   contain: inline-size layout;
 }

 .report-table {
   width: max-content;
   min-width: 100%;
   border-collapse: collapse;
   background: #1d2327;
   margin: 0;
   color: #fff;
   border: none;
   box-shadow: none;
 }

 .report-table th {
   padding: 14px 16px;
   text-align: left;
   font-weight: 600;
   color: #fff;
   font-size: 14px;
 }

 .report-table td {
   padding: 10px 15px;
   border-bottom: 1px solid rgba(0,0,0,.5);
   font-size: 14px;
   color: #fff;
 }

 .report-table tbody tr:hover {
   background-color: rgba(0,0,0,.2);
 }

 .report-table tbody tr:last-child td {
   border-bottom: none;
 }

 .report-table-wrapper .ss-activate-plugin,
 .report-table-wrapper .ss-deactivate-plugin {
   display: flex;
   width: 100%;
   padding: 2px 10px 0;
   margin: 0;
   align-items: center;
   justify-content: center;
   line-height: 1em;
   background-color: rgba(0,0,0,.2) !important;
   border: none;
   font-size: .84em !important;
   color: #999 !important;
 }

 table .wp-core-ui .button:disabled,
 .wp-core-ui .button[disabled] {
   background-color: rgba(255,255,255,.1) !important;
 }

    .site-card .button[disabled] {
      background-color: transparent !important;
    }

 .report-table-wrapper .ss-update-plugin {
   color: #fff !important;
   background-color: #2271b1 !important;
   border-color: #2271b1 !important;
   font-size: .84em !important;
   width: 100%;
 }

 .report-table-wrapper .button[disabled] {
   pointer-events: none;
   font-style: italic;
 }

 .report-table-wrapper .ss-activate-plugin:focus,
 .report-table-wrapper .ss-deactivate-plugin:focus {
   border-color: #888;
   box-shadow: 0 0 0 1px #666;
 }

 .report-table-wrapper .ss-activate-plugin {
   background-color: #2271b1 !important;
   border-color: #2271b1;
   color: #fff !important;
 }

 @media (max-width: 768px) {
   .report-table-wrapper {
     font-size: 13px;
   }

   .report-table th,
   .report-table td {
     padding: 10px 12px;
   }
 }

 /* -----------------------------------------------------------------------------
    “Add Headers” block
 ----------------------------------------------------------------------------- */

 .section-add-headers {
   border: 1px solid #ccd0d4;
   background: #eee;
   border-radius: 6px;
   padding: 15px;
   margin-top: 10px;
 }

 .section-add-headers pre {
   background: #333;
   padding: 10px;
   border-radius: 6px;
   overflow-x: auto;
 }

 .section-add-headers pre code {
   background: transparent;
   color: #fff;
 }

 /* -----------------------------------------------------------------------------
    Indexing toggle switch
 ----------------------------------------------------------------------------- */

 .ss-switch {
   position: relative;
   display: inline-block;
   width: 44px;
   height: 24px;
   vertical-align: middle;
   margin: 5px 10px 5px 0;
 }

 .ss-switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }

 .ss-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #4c575f;
   transition: .2s;
   border-radius: 999px;
 }

 .ss-slider:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 3px;
   top: 3px;
   background: #fff;
   transition: .2s;
   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }

 .ss-indexing-row input#ss-indexing-toggle[type=checkbox] {
   border: none;
 }
 .ss-indexing-row input[type=checkbox]:checked::before { display: none; }

 .ss-switch input:checked + .ss-slider {
   background: #22c55e;
 }

 .ss-switch input:checked + .ss-slider:before {
   transform: translateX(20px);
 }

 .ss-switch input:disabled + .ss-slider {
   background: var(--scrim-40);
   cursor: not-allowed;
 }

 .ss-switch input:disabled + .ss-slider:before { background: #fff; }

.ss-switch--sm {
  width: 36px;
  height: 20px;
  margin: 0 10px 0 0;
}

.ss-switch--sm .ss-slider:before {
  height: 14px;
  width: 14px;
  left: 3px;
  top: 3px;
}

.ss-switch--sm input:checked + .ss-slider:before {
  transform: translateX(16px);
}

.ss-toggle-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.ss-toggle-label {
  font-size: 15px;
  color: #f1f5f9;
  cursor: default;
}

 .ss-indexing-row .report-label {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
 }

 .report-subtext {
   color: #fff
 }

 .ss-indexing-status {
   display: none;
   font-size: 12px;
   color: #666;
   margin-top: 5px;
   margin-left: 8px;
 }

 .ss-timezone-status {
    font-size: 1em;
    margin: 10px 0 0;
    display: block;
 }

 .ss-timezone-status:hover {
   color: #fff;
 }

 /* -----------------------------------------------------------------------------
    Reorder mode
 ----------------------------------------------------------------------------- */

 body.ss-reorder-mode .ss-report__main > [data-section] {
   outline: 1px dashed #d0d0d0;
 }

 body.ss-reorder-mode .ss-report__main > [data-section].ss-reorder-ghost {
   opacity: .6;
 }

 #ss-reorder-reset,
 #ss-reorder-toggle {
   display: none;
 }

 /* -----------------------------------------------------------------------------
    Skeleton loader
 ----------------------------------------------------------------------------- */

 .ss-skeleton-root {
   display: grid;
   grid-template-columns: 1fr 334px;
   gap: 20px;
   align-items: flex-start;
   padding: 10px 0;
   width: 100%;
 }

  .ss-skeleton-root.skeleton-drawer {
    grid-template-columns: 100%;
  }

    .license--pro .hide-free-pro,
    .license--free .hide-free-pro {
      display: none;
    }

  .ss-skeleton-drawer .ss-skeleton-title { min-height: 150px; width: 100% !important; }

 @media (max-width: 1024px) {
   .ss-skeleton-root {
     grid-template-columns: 1fr;
   }
 }

 .ss-skeleton-header-row {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 6px;
 }

 .ss-skeleton-pill {
   width: 10%;
   height: 1.5em;
   border-radius: var(--r-xs);
   background: #d0d0d4;
   position: relative;
   overflow: hidden;
 }

 .ss-skeleton-header-text {
   font-size: 13px;
   color: #50575e;
 }

 .ss-skeleton-main,
 .ss-skeleton-aside {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

.ss-skeleton-col .ss-skeleton-card {
    display: flex;
    gap: 15px;
    opacity: .8;
    margin-bottom: 15px;
}

@media screen and (max-width: 550px) {
  .ss-skeleton-col .ss-skeleton-card {

  }
  .ss-skeleton-root { gap: 10px; }
  .ss-skeleton-root:nth-child(2) .ss-skeleton-main {
    display: none;
  }
  .ss-skeleton-aside .ss-skeleton-col .ss-skeleton-title {
    width: 100% !important;
  }
}

  .ss-skeleton-aside .ss-skeleton-col .ss-skeleton-card { flex-direction: column; }

    .ss-skeleton-aside .ss-skeleton-col .ss-skeleton-title {
        width: 100% !important;
        margin-bottom: 0;
    }

  .ss-skeleton-col .ss-skeleton-card:first-of-type
  .ss-skeleton-aside .ss-skeleton-title:first-of-type { opacity: .8; }

 .ss-skeleton-title,
 .ss-skeleton-line {
   position: relative;
   overflow: hidden;
   background: #1d2327;
   width: 100% !important;
 }

 .ss-skeleton-title {
    height: min(40px, 5.5vw);
    width: 40% !important;
    opacity: .8;
    outline: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-elevation-medium);
    border-radius: var(--r-xs);
 }

 .ss-skeleton-title-small { width: 60% !important; }

 .ss-skeleton-line {
   height: 2.5vw;
   width: 100%;
   margin-bottom: 1vw;
 }

 .ss-skeleton-line-short { width: 60%; }

  .ss-skeleton-inline {
   display: inline-block;
   width: 220px;
   height: 2rem;
   background: #1d2327;
   position: relative;
   overflow: hidden;
   vertical-align: middle;
   outline: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-elevation-medium);
    border-radius: var(--r-xs);
    position: relative;
    left: -.15em;
 }
  .ss-skeleton-inline::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.035) 25%,rgba(255,255,255,0) 40%);
    animation: ss-skeleton-shimmer 3.2s infinite;
  }
  @media screen and (max-width: 767px) {
      .ss-skeleton-inline {
        height: 1.5rem;
      }
  }

 .ss-skeleton-title::before,
 .ss-skeleton-line::before,
 .ss-skeleton-pill::before {
   content: "";
   position: absolute;
   inset: 0;
   transform: translateX(-100%);
   background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.025) 25%,rgba(255,255,255,0) 40%);
   animation: ss-skeleton-shimmer 3.2s infinite;
 }

 @keyframes ss-skeleton-shimmer {
   100% {
     transform: translateX(100%);
   }
 }

 .ss-report-wrap.ss-report-loading-state {
   opacity: 0.7;
   display: flex;
   flex-direction: column;
 }

 .ss-report-wrap.ss-report-loading-state .ss-skeleton-aside { width: 100%; }

 /* -----------------------------------------------------------------------------
    WP body / license section / inspector
 ----------------------------------------------------------------------------- */

 #wpbody-content { padding-bottom: 0; }

 .section-license {
   background: #ff9800;
   box-shadow: none;
 }

 .ss-license-callout {
   background: rgba(255, 255, 255, .5);
   box-shadow: none;
   border: 1px solid #fff;
 }

 .ss-license-panel code {
  background: rgba(255,255,255,.8);
 }

 .section-license .report-grid { overflow: scroll; }

 .wrap.inspector-open {
   margin: 0;
   display: grid;
   grid-template-columns: 1fr 445px;
   gap: 30px;
 }

 aside.ss-inspector { display: none; }
 aside.ss-inspector code { color: #333; }

 .ss-inspector.is-open {
   display: block;
   background: #333;
   color: #fff;
   padding: 0;
   box-shadow: inset 30px 0px 0px -20px rgba(0,0,0,0.4);
 }

 .ss-inspector.is-open h2 {
   color: #fff;
   font-size: 2em;
   margin: 0 0 .75em;
   line-height: 1.2em;
 }

 .ss-inspector-inner { position: fixed; padding: 80px 45px 30px; }

 .ss-inspector-close {
   position: absolute;
   right: 25px;
   background: transparent;
   border: none;
   color: #fff;
   font-size: 3em;
   font-weight: 100;
   height: 40px;
   line-height: 1em;
   top: 10px;
 }

 .ss-inspector-meta {
   background: rgba(255, 255, 255, .25);
   display: inline-block;
   line-height: 1em;
   padding: .5em 1.35em;
   border-radius: 15px;
   text-shadow: 0 -1px 0 #000;
 }

 @media screen and (min-width: 2180px) {
   .wrap.inspector-open { grid-template-columns: 1500px 1fr; }
 }

 body .button.ss-inspect-button {
   display: inline-block;
   line-height: 1em;
   padding: .25em 1em;
   border-radius: 15px;
   text-decoration: none;
 }

 /* -----------------------------------------------------------------------------
    License UI
 ----------------------------------------------------------------------------- */

 body .report-plus-inspector button.ss-license-open,
 body .report-plus-inspector button.ss-license-open:hover,
 body .report-plus-inspector button.ss-license-open:active,
 body .report-plus-inspector button.ss-license-open:focus {
    vertical-align: middle;
    background: rgba(255,208,0,.05);
    border: none;
    color: #fff;
    font-weight: 500;
    border-radius: var(--r-xs);
    padding: 0.75em 1em 0.75em 1em;
    outline: none;
    box-shadow: none;
    border-left: 3px solid;
    line-height: 1em !important;
    min-height: inherit;
    margin: 0 0 0 15px;
 }
    /* Fleet plugin controls priorities visibility when license is restricted */
    body.license--free button.ss-license-open { overflow: hidden; position: relative; border-color: var(--warn); color: var(--warn); }
    body.license--free button.ss-license-open::before {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background-image: linear-gradient( 90deg,rgba(var(--warn-rgb),0) 0%, rgba(var(--warn-rgb),.4) 40%, rgba(var(--warn-rgb), 0) 80% );
      animation: ss-skeleton-shimmer 20s infinite;
    }

    body.license--network button.ss-license-open,
    body.license--pro button.ss-license-open,
    body.license--network button.ss-license-open:active,
    body.license--pro button.ss-license-open:active,
    body.license--network button.ss-license-open:focus,
    body.license--pro button.ss-license-open:focus {
      background-image: none;
      animation: none;
      color: #fff !important;
      border: none;
      border-radius: var(--r-xs);
      background-color: rgba(var(--brand-fleet-rgb),.2);
    }

    body.license--network button.ss-license-open:hover,
    body.license--pro button.ss-license-open:hover {
      background-color: var(--glass-15);
      border: none;
    }

    @media screen and (max-width: 550px) {
      #ss-license-open { display: none !important; }
    }

 .ss-expired-badge {
   background: #ccc;
   font-size: .475em;
   display: inline-block;
   border-radius: 15px;
   padding: 2px .85em;
   position: relative;
   top: -.35em;
   color: #fff;
 }

 html[data-ss-status="expired"] .ss-remote-action,
 html[data-ss-tier="free"] .ss-network-only { opacity: .4; }

 /* -----------------------------------------------------------------------------
    Metric tiles: clickability affordance
 ----------------------------------------------------------------------------- */

 .report-item.ss-metric-clickable,
 .ss-metric-clickable { cursor: pointer; }

 .report-item.ss-metric-static,
 .ss-metric-static { cursor: default; }

 .report-item[data-metric-clickable="1"] {
   overflow: hidden;
   box-shadow: 0 3px 0px #ccc;
   position: relative;
 }

 .report-item[data-metric-clickable="1"]:hover {
   cursor: pointer;
   box-shadow: 0 3px 0px #999;
 }

 .ss-metric-clickable {
   position: relative;
   overflow: hidden;
 }
  .report-item[data-metric-clickable="1"]::after,
  .ss-metric-clickable::after {
    content: "\2197"; /* ↗ */
    display: block;
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: var(--glass-15);
    border-radius: 10px;
    height: 18px;
    width: 18px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    line-height: 1.5em;
  }

  .report-item[data-metric-clickable="1"]:hover::after,
  .ss-metric-clickable:hover::after {
    background-color: rgba(255, 255, 255, 1);
    color: #fff;
  }

    .report-item[data-metric-clickable="1"]:hover::after,
    .report-item.ss-metric-clickable:hover::after { color: #131517; }

    .report-item.state-good[data-metric-clickable="1"]:hover::after,
    .report-item.state-good.ss-metric-clickable:hover::after { color: var(--good); }

    .report-item.state-warn[data-metric-clickable="1"]:hover::after,
    .report-item.state-warn.ss-metric-clickable:hover::after { color: var(--warn); }

    .report-item.state-bad[data-metric-clickable="1"]:hover::after,
    .report-item.state-bad.ss-metric-clickable:hover::after { color: var(--bad); }

 /* -----------------------------------------------------------------------------
    Modal System (responsive / robust)
    (Base modal implementation + size variants)
 ----------------------------------------------------------------------------- */

 .target-detected-status {
   display: block;
   background: var(--info);
   border-radius: 25px;
   padding: 10px;
   color: var(--ink) !important;
   text-align: center;
   font-size: 16px;
   margin-bottom: 1.25em;
   margin-top: 0;
   font-family: 'Jetbrains Mono', sans-serif;
   font-size: 1.25em !important;
 }

 #ss-xmlrpc-status { margin: 0 !important; }

 .ss-xmlrpc-actions {

   border-radius: 5px;
   padding: 5px 20px 15px;
   color: #fff;
   /* border-bottom: 1px solid #666;
   border-top: 1px solid #222; */
 }

  .ss-how-to,
  .ss-body { padding: 0px 15px 5px; }

 .ss-xmlrpc-actions button {
   font-size: 1.45em !important;
   padding: .25em 1.5em !important;
 }
 .ss-xmlrpc-actions a { color: #fff; }

  .ss-xmlrpc-actions h3 { border-color: var(--warn) !important; }

 .action-instructions {
   background: #131517;
   padding: 5px 20px 10px;
   border-radius: 5px;
 }
 .action-instructions h3 { font-size: 1.5em; }
 .action-instructions li { margin-bottom: .75em; }
 .ss-action { display: flex; gap: 30px; }

body { background: rgba(0,0,0,1); }

 #ss-headers-ui summary { color: #fff; margin-bottom: .5em; }
 .headers-detected {
   margin-top:6px;
   color:#ccc;
   font-size:12px;
 }

 #adminmenuback { box-shadow: 15px 5px 15px -10px rgba(0,0,0,.3); }

 .ss-network-tabs {
   margin: 1rem 0;
   display: flex;
   gap: 0.5rem;
 }

 .ss-network-tab.ss-network-tab--active { border-bottom: 2px solid #2271b1; }

 .ss-network-sites-drawer { border: none; background: #1d2327; }

 #ss-network-sites-drawer {
   --drawer-max: min(60vh, 48rem);
   display: block;
   max-height: 0;
   overflow: hidden;
   margin-top: 0;
   transition: max-height 0.3s ease-out, margin-bottom 0.3s ease-out, opacity 0.2s ease-out;
   opacity: 0;
   pointer-events: none;
 }

 #ss-network-sites-drawer.is-open {
   max-height: var(--drawer-max);
   margin-bottom: 20px;
   outline: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
   border-radius: 0 0 5px 5px;
   overflow-y: auto;
   opacity: 1;
   pointer-events: auto;
 }

 @media (max-width: 782px) {
   #ss-network-sites-drawer {
     --drawer-max: min(50vh, 24rem);
   }
 }

 .ss-bulk-bar {
   flex-shrink: 0;
 }

 .ss-network-scroll {
   overflow-y: auto;
 }

 .scope-network-sites {
   display: block;
 }

 .sites-list {
   display: block;
   margin-top: 0;
 }

 .ss-active-site-label {
  margin: 0;
  color: #fff;
  font-size: 2.5em;
  line-height: 1em;
  border-radius: 5px;
  display: flex;
  position: relative;
  overflow: hidden;
  gap: .25em;
  align-items: baseline;
  flex-wrap: wrap;
  overflow: visible;
  padding-left: 15px;
 }

  @media screen and (max-width: 782px) {
    .ss-active-site-label {
      padding-left: 0;
    }
  }

  #ss-active-site-label .ss-badge { display: none; }

   .stat-card.warning .stat-number { color: #dba617; }
   .stat-card.warning.active { background-color: #dba617; color: #fff !important; }
   .stat-card.active .stat-number { color: #fff !important; }
   .stat-card.critical .stat-number { color: #d63638; }
   .stat-card.critical.active { background-color: #d63638; }
   .stat-card.unreachable .stat-number { color: #646970; }
   .stat-card.unreachable.active { background: #646970; }

  .site-card.site-card--add {
    box-shadow: none !important;
    outline: none !important;
    background: rgba(255, 255, 255, .05);
  }
   .site-card.site-card--add:hover {
    box-shadow: none !important;
    outline: none !important;
    background: var(--good);
  }

 .site-card-add-inner {
   background: transparent;
   border: 0;
   width: 100%;
   height: 100%;
   padding: 30px 30px 40px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 .site-card.site-card--active,
 .site-card.site-card--active:hover,
 .site-card.site-card--active[data-ss-refreshing="1"] {
  outline: 2px solid #72F2EB;
  cursor: pointer;
}

.site-card.site-card--active.unreachable {
  outline: 2px solid var(--bad, #dc3232) !important;
}

 .site-card:hover {
  outline: 2px solid rgba(100,116, 139,.5);
 }

 .site-card-add-plus {
   font-size: 32px;
   line-height: 1;
   margin-bottom: 4px;
   color: #fff;
 }

 .site-card-add-label { font-weight: 600; color: #fff; }

 .site-card-actions .button .dashicons {
   font-size: 16px;
   line-height: 1;
   width: 24px;
   height: 24px;
 }

 .ss-refresh-spinner { display: inline-block; animation: ss-refresh-spin 0.8s linear infinite; }

 @keyframes ss-refresh-spin {
    0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

 .ss-refresh-spinning .dashicons,
 .ss-refresh-spinning .dashicons-update {
   animation: ss-refresh-spin 0.8s linear infinite;
 }
 .ss-refresh-spinning {
   pointer-events: none;
   opacity: 0.7;
 }

 .site-card[data-ss-refreshing="1"] [data-ss-network-action="refresh"] .dashicons {
   animation: ss-refresh-spin 0.8s linear infinite;
 }
 .site-card[data-ss-refreshing="1"] [data-ss-network-action="refresh"] {
   pointer-events: none;
   color: #fff !important;
   opacity: 1;
 }

 .ss-refresh-check { color: #00a32a; }

 .button .dashicons,
 .button .ss-refresh-label { vertical-align: middle; }

 #ss-open-settings .dashicons-admin-plugins,
 #ss-network-sites-toggle .dashicons-admin-plugins{ color: #fff; transition: color .25s ease; }

 #ss-open-settings .dashicons-admin-plugins.ss-connected { color: #00a32a; border-radius: var(--r-xs); }

 .dashicons-admin-plugins.dashicon-in-notice {
   color: #00a32a;
   display: inline-block;
   opacity: 1;
   height: 20px;
   width: 25px;
   position: relative;
   top: -3px;
 }

 #ss-open-settings:hover .dashicons-admin-plugins:not(.ss-connected) { color: #fff; }

 #ss-open-settings .dashicons.ss-connected,
 #ss-open-settings [class*="dashicons-"].ss-connected,
 #ss-open-settings.ss-connected { color: #00a32a; opacity: 1; }

 .ss-settings-group { margin-bottom: 45px; }

 .ss-locked {
   opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
   position: relative;
   display: none !important;
 }

 .ss-locked::after {
   content: "Upgrade to Fleet";
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   position: absolute;
   bottom: -1.2em;
   left: 0;
 }

.ss-metric-hidden { display: none !important; }

.report-section:has(.report-item[data-ss-metric-key]):not(:has(.report-item[data-ss-metric-key]:not(.ss-metric-hidden))) { display: none; }

.section-security-headers:has(.report-item[data-ss-metric-key]):not(:has(.report-item[data-ss-metric-key]:not(.ss-metric-hidden))) { display: none; }

.ss-metric-tile.confidence-low { opacity: 0.7; }
.ss-metric-tile.confidence-medium { opacity: 0.85; }
.ss-metric-tile.confidence-high { opacity: 1; }

/* ============================================
   SITE CARD COMPONENTS (Network Tab)
   These styles are unique to Scope admin.
   ============================================ */

.site-card[hidden] { opacity: .4; filter: grayscale(1); }
.site-card--active .site-card-actions .button .dashicons {  color: #fff; }
.site-card a:hover { color: #fff; }

.site-card-thumb {
  width: 105px;
  height: auto;
  border-radius: var(--r-xs);
  object-fit: cover;
  border: 1px solid #fff;
  margin-top: 5px;
  filter: grayscale(1);
  opacity: .5
}
.site-card--active .site-card-thumb,
.site-card:hover .site-card-thumb { filter: none; opacity: 1 }

.site-title-wrap { width: 100%; }
.site-title-wrap h3 {
    font-size: 1.75em;
    line-height: 1em;
    margin: 0 0 .15em;
    position: relative;
    display: flex;
    align-items: center;
    gap: .25em;
}
.site-title .ss-badge {
  padding: .15em .65em;
  border-radius: var(--r-sm);
}
.site-title { margin: 0; font-size: var(--fs-13); }

.site-url a {
  font-size: var(--fs-12);
  color: var(--muted);
  text-decoration: none;
  word-break: break-all;
}

.site-url a:hover { color: #fff; text-decoration: underline; }
.site-card-meta .meta-value--fetching { font-style: italic; opacity: 0.8; }

.site-card-flags,
.site-card-versions {
  display: flex;
  flex-wrap: wrap;
  gap: .75em;
  margin-top: 6px;
  padding: 0 15px 0 0;
  margin-bottom: 1em;
}

.site-card-versions { margin-bottom: 0; }
.site-card-versions .version-chip {
  padding: 3px 10px;
  border-radius: 2px;
  font-size: var(--fs-11);
  color: #fff;
  background: var(--glass-10);
  border-left: 3px solid var(--info);
}

.site-card-versions .version-chip--pending {
  background: var(--glass-06);
  color: var(--muted);
  font-style: italic;
}

.site-card-versions .version-chip--unreachable,
.site-card-versions .version-chip--auth-failed  {
  background: var(--bad);
  color: #fff;
  font-weight: 500;
  border-color: var(--bad);
}

.site-card-flag {

  align-items: center;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.6;
  background: var(--glass-06);
  color: #e5e7eb;
  font-weight: 300;
  border-radius: 2px;
}

.site-card.is-stale > div { opacity: .25 }
.site-card.is-stale::before {
    content: 'Stale';
    display: block;
    position: absolute;
    right: 5px;
    font-size: 11px;
    padding: 15px 30px;
    border-radius: 15px;
    background: var(--warn);
    color: #ccc;
    display: flex;
    align-items: center;
    line-height: 1em;
    padding: 7px 15px;
    margin: 3px 1em 3px;
    top: 15px;
    background: #1d2327;
    text-transform: uppercase;
}

.site-card-flag--warn,
.site-card-flag--bad,
.site-card-flag--info {
  background: var(--glass-10);
  color: var(--ink-inverse);
  border-left: 3px solid var(--flag-color);
}

.site-card-flag--warn { --flag-color: var(--warn); }
.site-card-flag--bad  { --flag-color: var(--bad); }
.site-card-flag--info { --flag-color: var(--info); }

   .site-card {
     position: relative;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     gap: 5px;
     background: rgb(18 23 25);
     color: #fff;
     z-index: 10;
    transition: opacity 0.15s ease-out;
     outline: 1px solid rgba(114, 242, 235, 0.25);
   }

    .site-card.ss-withheld {
      background: rgb(18 23 25);
      box-shadow: none;
    }

    .site-card.ss-withheld .site-card-actions > *:not(.button-link-delete) {
      opacity: .25;
    }
    .site-card.ss-withheld .site-card-actions > .button-link-delete {
      opacity: 1;
    }

   .site-card--highlight {
     outline: 2px solid var(--good) !important;
     animation: site-card-highlight-fade 3s ease-out forwards;
   }

   @keyframes site-card-highlight-fade {
     0% { outline-color: var(--good); }
     70% { outline-color: var(--good); }
     100% { outline-color: transparent; }
   }

   .site-card[hidden] { opacity: .4; filter: grayscale(1) }
  .site-card--active .site-card-actions .button .dashicons { color: #fff; }
  .site-card a:hover { color: #fff; }

   .site-card-header {
     display: flex;
     justify-content: space-between;
     gap: 15px;
     padding: 15px 15px 5px 22px;
    align-items: flex-start;
    flex-direction: row-reverse;
   }

   body.site-card-sm .site-card-header { padding: 15px 10px 0px 15px; }
   body.site-card-sm .site-card-flag { font-size: 11px; }

   .site-title { margin: 0; font-size: var(--fs-13); }

   .site-url a {
     font-size: var(--fs-12);
     color: var(--muted);
     text-decoration: none;
     word-break: break-all;
   }

   .site-card-meta {
      margin-top: auto;
      text-align: right;
      display: flex;
      justify-content: center;
      font-size: var(--fs-12);
      color: var(--muted);
      flex-wrap: wrap;
      gap: 5px 5px;
      padding: 0px 17px 5px;
      opacity: 0;
      line-height: 1em;
    }

   .site-card-meta .meta-label { font-weight: 500; }

   .site-card-actions {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     border-top: 1px solid var(--scrim-40);
     gap: 5px;
     border: none;
   }

      body.site-card-sm .site-card-actions {
        margin-top: auto;
      }
    .site-card-actions a,
    .site-card-actions button {
     opacity: 0;
    }
    .site-card:hover .site-card-actions a,
    .site-card:hover .site-card-actions button {
     opacity: 1;
    }

    @media screen and (max-width: 767px) {
      .site-card-actions a,
      .site-card-actions button {
        opacity: 1;
      }
    }

    .site-card.site-card--active .site-card-actions a,
    .site-card.site-card--active .site-card-actions button,
    .site-card:hover .site-card-meta { opacity: 1 !important; }

      .site-card[data-ss-refreshing="1"] button[data-ss-network-action="refresh"] { opacity: 1; }

      .site-card .site-card-header {
        transition: filter 200ms ease;
      }

      .site-card .site-card-header {
        opacity: 1;
        transition: opacity 220ms ease-in-out !important;
        will-change: opacity !important; /* optional, but if you keep it, track opacity not filter */
      }

      .site-card[data-ss-refreshing="1"] .site-card-header {
        opacity: 0.3 !important;
      }

        div[data-site-filter="unreachable"],

        .meta-value--error {
          color: var(--bad, #dc3232) !important;
          font-weight: 600;
        }
        div[data-site-filter="auth_failed"],
        div[data-site-filter="unreachable"],
        .site-card--error {
          outline: 2px solid rgba(var(--bad-rgb), .5) !important;
        }
        .site-card-status.status-error {
          background: var(--bad, #dc3232);
          color: #fff;
        }
        .site-card-status.status-error {
          background: var(--bad, #dc3232);
          color: #fff;
        }

     .site-card-actions a,
     .site-card-actions button {
       padding: .5em 1em !important;
       font-size: 14px;
       border-radius: 0;
       display: block;
       width: 45px;
       background: transparent !important;
       border: none !important;
       flex: 1;
       text-align: center;
       justify-content: center;
       align-items: center;
       display: flex !important;
       color: #999 !important;
     }
     .site-card-actions a:hover,
     .site-card-actions button:hover { color: #fff !important; }
     .site-card-actions .dashicons { font-size: 24px !important; }

   .site-card--add {
     align-items: center;
     justify-content: center;
     text-align: center;
     cursor: pointer;
     background: transparent;
   }
   .site-card--add:hover .site-card-add-label,
   .site-card--add:hover .site-card-add-plus { color: #fff; }

  .network-actions button { background: transparent; padding: 0; margin: 0; }

  .ss-view-toggle,
  .ss-view-toggle span {
    padding: 0;
    background: none;
    height: 25px;
    border: none;
    width: 42px;
    cursor: pointer;
  }

    .ss-view-toggle span {
      display: flex;
      align-items: center;
      justify-content: center;
    }

  .ss-refresh-badge {
    position: absolute;
    top: 0;
    right: -.5em;
    padding: .25em .5em;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    color: #fff;
    background: var(--good);
    border-radius: 10px;
    text-align: center;
    display: flex
;
    align-items: center;

    justify-content: center;
  }
  .ss-refresh-badge:empty {
    display: none !important;
  }
  .ss-refresh-badge--error {
    background: var(--bad, #dc3232);
    padding: .25em .65em !important;
  }
  .ss-refresh-all-btn {
    position: relative;
  }

    .ss-refresh-all-btn[data-ss-refreshing="1"] .dashicons {
    display: inline-block;
    animation: ss-refresh-spin 0.8s linear infinite;
    transform-origin: center center;
  }
  .ss-refresh-all-btn[data-ss-refreshing="1"] {
    pointer-events: none;
  }

  .ss-view-toggle-wrap {
    display: flex;
    align-items: center;
    gap: .5em;
    margin: 0 0 0 auto;
  }
    .ss-view-toggle-wrap button[data-ss-view="lg"] { display: none; }
    .site-card-sm .ss-view-toggle-wrap button[data-ss-view="lg"] {
      display: block;
    }
    .site-card-lg .ss-view-toggle-wrap button[data-ss-view="lg"],
    .site-card-sm .ss-view-toggle-wrap button[data-ss-view="sm"] {
      display: none;
    }

  .ss-list-controls {
    background: #1d2327;
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: .25em;
    padding: 10px 10px 5px 5px;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .ss-list-controls .ss-view-toggle { margin-left: auto; margin-right: 1px; }
  .ss-list-controls .ss-view-toggle span::before {
    font-size: 25px;
    position: relative;
    color: #fff;
  }
    .list-control-wrap-tl {
      display: flex;
      overflow-x: scroll;
      gap: 5px;
    }
    .list-control-wrap-br {
      display: flex;
    }

    @media screen and (max-width: 989px) {
      .list-control-wrap-tl {
        order: 2;
      }
      .list-control-wrap-br {
        flex-basis: 100%;
        display: none;
      }
      .ss-sites-search-wrap {
        width: 100%;
        max-width: initial;
      }

    }
    @media screen and (min-width: 990px) {
      .ss-list-controls {
        justify-content: space-between;
      }
    }

.ss-network-filter-row {
  display: flex;
  gap: 1em;
  align-items: center;
  overflow-x: scroll;
}

.ss-network-filter-row--primary {
  flex: 1;
  min-width: 0;
}

.ss-network-filter-row .ss-filter-pill {
  padding: 4px 10px;
  font-size: var(--fs-12, 12px);
  font-weight: 500;
  border: 1px solid var(--glass-25, rgba(255,255,255,0.25));
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all 0.12s ease-out;
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
}

.ss-network-filter-row .ss-filter-pill:hover {
  border-color: var(--glass-50, rgba(255,255,255,0.5));
  color: #fff;
}

.ss-network-filter-row .ss-filter-pill:active {
  transform: translateY(1px);
}

.ss-network-filter-row .ss-filter-pill.ss-filter-pill--active {
  background: #fff;
  border-color: #fff;
  color: #1d2327;
}

.ss-network-filter-row .ss-filter-pill.ss-filter-pill--active:hover {
  background: #fff;
  border-color: #fff;
  color: #1d2327;
}

.ss-filter-count {
  opacity: 0.7;
  font-weight: 400;
  margin-left: 2px;
}

.ss-filter-pill--active .ss-filter-count {
  opacity: 0.6;
}

  .ss-view-toggle-wrap .ss-refresh-all-btn {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
  }
  .ss-view-toggle-wrap .ss-refresh-all-btn span:first-of-type {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 100;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  body.site-card-sm .site-card-thumb { width: 90px; }

  body.mobile .site-url,
  body.site-card-sm .site-url,
  body.mobile .site-card-meta,
  body.site-card-sm .site-card-meta,
  body.mobile .site-title .ss-badge.ss-badge--good,
  body.site-card-sm .site-title .ss-badge.ss-badge--good,
  body.mobile .site-card-thumb,
  body.site-card-sm .site-card-thumb,
  body.mobile .site-card-versions,
  body.site-card-sm .site-card-versions{ display: none; }

  @media screen and (max-width: 550px) {
      .site-card .site-title .ss-badge.ss-badge--good,
      .stat-number { display: none !important; }
  }

.report-item {
    transition: opacity 0.1s ease;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .1) !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-3) 15px;
    background: #1d2327;
    border-radius: 5px;
    border-left: 6px solid transparent;
    font-size: var(--fs-13);
    color: #fff;
}

body.filter-confidence-high  .report-item:not([data-confidence-level="high"]),
body.filter-confidence-medium .report-item:not([data-confidence-level="medium"]),
body.filter-confidence-low   .report-item:not([data-confidence-level="low"]) {
    opacity: 0.25;
}

body.filter-confidence-high  .report-table-wrapper,
body.filter-confidence-high  #ss-headers-ui,
body.filter-confidence-high  .headers-detected,
body.filter-confidence-medium .report-table-wrapper,
body.filter-confidence-medium #ss-headers-ui,
body.filter-confidence-medium .headers-detected,
body.filter-confidence-low   .report-table-wrapper,
body.filter-confidence-low   #ss-headers-ui,
body.filter-confidence-low   .headers-detected {
    opacity: 0.25;
}

.confidence-filter-list {
    margin-left: auto;
}

@media screen and (max-width: 767px) {
  .confidence-filter-list { display: none !important; }
}

.confidence-filter-list .ss-badge {
    top: 0;
}

body[data-state-filter="good"] .report-item:not(.state-good),
body[data-state-filter="warn"] .report-item:not(.state-warn),
body[data-state-filter="bad"] .report-item:not(.state-bad) {
    opacity: .5;
}

@media screen and (max-width: 767px) {
  body[data-state-filter="good"] .report-item:not(.state-good),
  body[data-state-filter="warn"] .report-item:not(.state-warn),
  body[data-state-filter="bad"] .report-item:not(.state-bad) {
    display: none;
  }
}

body[data-state-filter="good"] .report-table-wrapper,
body[data-state-filter="good"] #ss-headers-ui,
body[data-state-filter="good"] .headers-detected,
body[data-state-filter="warn"] .report-table-wrapper,
body[data-state-filter="warn"] #ss-headers-ui,
body[data-state-filter="warn"] .headers-detected,
body[data-state-filter="bad"] .report-table-wrapper,
body[data-state-filter="bad"] #ss-headers-ui,
body[data-state-filter="bad"] .headers-detectedm {
    opacity: .5;
}

body[data-state-filter="good"] .ss-timezone-status,
body[data-state-filter="warn"] .ss-timezone-status,
body[data-state-filter="bad"] .ss-timezone-status {
  display: none;
}

@media screen and (max-width: 767px) {
  body[data-state-filter="good"] .report-item:not(.state-good),
  body[data-state-filter="warn"] .report-item:not(.state-warn),
  body[data-state-filter="bad"] .report-item:not(.state-bad),
  body[data-state-filter="good"] .report-table-wrapper,
  body[data-state-filter="good"] #ss-headers-ui,
  body[data-state-filter="good"] .headers-detected,
  body[data-state-filter="warn"] .report-table-wrapper,
  body[data-state-filter="warn"] #ss-headers-ui,
  body[data-state-filter="warn"] .headers-detected,
  body[data-state-filter="bad"] .report-table-wrapper,
  body[data-state-filter="bad"] #ss-headers-ui,
  body[data-state-filter="bad"] .headers-detected {
    display: none;
  }

  body[data-state-filter="good"] .report-section:has(.report-item):not(:has(.report-item.state-good)),
  body[data-state-filter="warn"] .report-section:has(.report-item):not(:has(.report-item.state-warn)),
  body[data-state-filter="bad"] .report-section:has(.report-item):not(:has(.report-item.state-bad)) {
    display: none;
  }
  .report-grid { display: flex; flex-direction: column; gap: 5px; }
  .report-section { margin-bottom: 15px; }
}

/* -------------------------------
    Confidence-kind filters
    ------------------------------- */

body.filter-conf-exact .report-item:not(.confidence-kind-exact),
body.filter-conf-strong .report-item:not(.confidence-kind-strong),
body.filter-conf-heuristic .report-item:not(.confidence-kind-heuristic),
body.filter-conf-experimental .report-item:not(.confidence-kind-experimental) {
    opacity: .5;
}

body.filter-conf-exact .report-table-wrapper,
body.filter-conf-exact #ss-headers-ui,
body.filter-conf-exact .headers-detected,
body.filter-conf-strong .report-table-wrapper,
body.filter-conf-strong #ss-headers-ui,
body.filter-conf-strong .headers-detected,
body.filter-conf-heuristic .report-table-wrapper,
body.filter-conf-heuristic #ss-headers-ui,
body.filter-conf-heuristic .headers-detected,
body.filter-conf-experimental .report-table-wrapper,
body.filter-conf-experimental #ss-headers-ui,
body.filter-conf-experimental .headers-detected {
    opacity: .5;
}

/* -------------------------------
    Filter bar styling
    ------------------------------- */

.state-filters { display: flex; margin-top: 5px; flex-wrap: wrap; align-items: center; gap: 5px; margin-left: 5px; }

.state-filter-list {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    align-items: center;
    background: #1d2327;
    padding: .5em;
    border-radius: 20px;
}

.state-filter-list li {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0;
    /* box-shadow: 0 3px 3px rgba(0, 0, 0, 1) !important; */
    /* border-top: 1px solid rgba(255,255,255,.3); */
}

.state-filter-list li.is-active {
    position: relative;
    padding-left: 30px;
}

.state-filter-list li.is-active::after {
    content: "\2713"; /* ✓ */
    display: block;
    color: #fff;
    position: absolute;
    top: 0.25em;
    font-size: 17px;
    left: 0.5em;
}

.state-filters #ss-refresh-report {
  background: transparent;
  border: none;
  color: #fff;
  padding: 0;
}
  /* body.ss-report-cached .state-filters #ss-refresh-report {
    background: var(--accuracy-experimental);
  } */

  body.ss-report-loading #ss-refresh-report,
  .state-filters #ss-refresh-report[disabled] {
    border: none;
    background: transparent !important;
  }
.state-filters #ss-refresh-report .dashicons {
    line-height: 1em;
    width: inherit;
    height: inherit;
    line-height: 1em;
    font-size: 24px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 100;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.state-filters .button.updating-message:before { display: none; }

body.ss-report-loading #ss-refresh-report .dashicons,
.state-filters #ss-refresh-report.updating-message .dashicons {
    animation: ss-spin 1s linear infinite;
}
@keyframes ss-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.state-filter-list .filter-all {
    padding: 5px 10px;
    border-radius: var(--r-pill);
    color: #fff !important;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.5em;
}

.state-filter-list .ss-badge { top: 0; }

    #state-filter-list { margin-left: 0; }

body[data-state-filter="bad"] .report-item.state-bad {
    color: #fff !important;
    background: var(--bad);
    border-color: var(--bad);
}

body[data-state-filter="warn"] .report-item.state-warn {
    color: #fff !important;
    background: var(--warn);
    border-color: var(--warn);
}

body[data-state-filter="good"] .report-item.state-good {
    color: #fff !important;
    background: var(--good);
    border-color: var(--good);
}

body[data-state-filter="bad"] .report-item .report-label,
body[data-state-filter="warn"] .report-item .report-label,
body[data-state-filter="good"] .report-item .report-label {
    color: #fff;
}

/* --------------------------------
New: view selector + hiding
-------------------------------- */

.ss-view-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0 3px auto;
    flex-wrap: wrap;
    width: 334px;
}

@media screen and (max-width: 767px) {
    .ss-view-mode { width: 100%; margin-top: .75em; }
    .ss-view-select { width: 100% !important; max-width: inherit !important; background-color: #1d2327 !important; }
}

.title-refresh {
  display: flex;
  flex: auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  flex-direction: row;
  justify-content: left;
  padding-bottom: 1em;
  margin-bottom: .75em;
  margin-top: 1.5em;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.wp-core-ui select.ss-view-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: none;
    border-radius: var(--r-xs);
    padding: 10px 32px 10px 14px;
    font-size: 1.25em;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    min-width: 160px;
    max-width: 334px;
    width: 334px;
    line-height: 1.4em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white' stroke='%232c3338' 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");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    border: none;
    background-color: #1d2327;
}

.wp-core-ui select.ss-view-select {
  outline: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-elevation-medium);
}

.wp-core-ui select.ss-view-select:hover { background-color: #1d2327; }

.wp-core-ui select.ss-view-select:hover {
    border-color: rgb(var(--brand));
}

.wp-core-ui select.ss-view-select:focus {
    outline: none;
    border-color: rgb(var(--brand));
}

.wp-core-ui select.ss-view-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--ui-1);
}

.wp-core-ui select.ss-view-select option {
    padding: 8px 12px;
    font-size: 12px;
}

.wp-core-ui select.ss-view-select option:disabled {
    color: var(--muted);
    font-style: italic;
}

.ss-view-mode-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--info-soft);
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    white-space: nowrap;
}

.ss-view-mode-label[data-ss-view="go_live"] {
    background: var(--good-soft);
    color: #166534;
}

.ss-view-mode-label[data-ss-view="security"] {
    background: var(--bad-soft);
    color: #b91c1c;
}

.ss-view-mode-label[data-ss-view="performance"] {
    background: var(--warn-soft);
    color: #92400e;
}

.ss-view-mode-label[data-ss-view="seo"] {
    background: #f0fdf4;
    color: #15803d;
}

.ss-view-mode-label[data-ss-view="weekly"] {
    background: #faf5ff;
    color: #7e22ce;
}

.ss-view-mode-label[data-ss-view="server_ops"] {
    background: var(--ui-1);
    color: var(--ink-2);
}

.ss-view-upsell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--warn-soft);
    color: #92400e;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ss-view-upsell::before {
    content: '★';
    font-size: 9px;
}

.section-site-overview .report-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
  .section-site-overview .report-item {
    border-radius: 0;
  }
  .section-site-overview .report-item:first-of-type {
    border-radius: 5px 5px 0 0;
  }
  .section-site-overview .report-item:last-of-type {
    border-radius: 0 0 5px 5px;
  }

.section-site-overview p,
.section-site-overview ul,
.section-priorities {
  display: none !important;
}

body[data-ss-view="monitor"] .section-site-overview {
  display: block !important;
  margin-bottom: 15px;
}
.section-site-overview .report-item {
  display: flex;
  padding: var(--space-3);
}
.section-site-overview .report-item .report-value {
  margin-top: 0;
}

.section-priorities h2 {
  margin-bottom: 0 !important;
  font-size: 2em !important;
}

body[data-server-category="all"] {}
body[data-server-category="all"] {}

body[data-server-category="runtime"] [data-section="server"] .report-item:not([data-server-category="runtime"]),
body[data-server-category="limits"] [data-section="server"] .report-item:not([data-server-category="limits"]),
body[data-server-category="storage"] [data-section="server"] .report-item:not([data-server-category="storage"]),
body[data-server-category="tooling"] [data-section="server"] .report-item:not([data-server-category="tooling"]) {
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

/* ---------------------------------------------------------------------------
   BULK ACTIONS BAR - Selection management and overage handling
--------------------------------------------------------------------------- */

.ss-bulk-bar {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px !important;
  padding: 10px 0 0;
  margin: 0 !important;
  transition: background 0.15s ease, border-color 0.15s ease;
  justify-content: right;
}
.ss-bulk-bar[hidden] { display: none; }

.ss-bulk-bar-overage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--warn);
  color: #fff;
  font-size: 1.25em;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--r-xs);
  width: 100%;
  margin: 0 10px;
}
.ss-bulk-bar-overage[hidden] { display: none; }
.ss-bulk-bar-overage .dashicons {
  color: #fff;
  flex-shrink: 0;
}
.ss-bulk-bar-overage a {
  color: #fff;
  text-decoration: underline;
  font-weight: 500;
}
.ss-bulk-bar-overage a:hover {
  color: #fff;
}

.ss-bulk-bar-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-height: 100px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 3px;
}
.ss-bulk-bar-selection[hidden] {
  max-height: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}

.ss-bulk-bar-count {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--good);
  border-radius: 3px;
  color: var(--c-text, #fff);
}

.ss-bulk-bar-actions {
  display: flex;
  gap: 8px;
}

.ss-bulk-bar-btn {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-sm, 6px);
  background: transparent;
  color: var(--c-text, #fff);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ss-bulk-bar-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
}

.ss-bulk-bar-btn--delete {
  background: var(--bad, #dc3232);
  border-color: transparent;
  color: var(--c-text, #fff);
}
.ss-bulk-bar-btn--delete:hover {
  background: var(--bad, #dc3232);
  border-color: var(--bad, #dc3232);
  color: var(--c-text, #fff);
}
.ss-bulk-bar-btn--clear {
  border: none;
  text-decoration: underline;
}
.ss-bulk-clear {
  border: none;
  background: transparent;
  text-decoration: underline;
}

.ss-site-checkbox {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.site-card:hover .ss-site-checkbox,
.ss-site-checkbox:focus-within {
  opacity: 1;
}

.ss-site-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ss-site-checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  transition: all 0.15s ease;
  position: relative;
  z-index: 1000;
}

.ss-site-checkbox:hover .ss-site-checkbox-box {
  border-color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.7);
}

.ss-site-checkbox input:checked + .ss-site-checkbox-box {
  background: var(--good);
  border-color: var(--good);
  opacity: 1;
}
.ss-site-checkbox input:checked + .ss-site-checkbox-box::after {
  content: '\2713';
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.site-card:has(.ss-site-checkbox input:checked) .ss-site-checkbox {
  opacity: 1;
}

.site-card.ss-selected .ss-site-checkbox {
  opacity: 1;
}

.site-card.ss-selected {

  box-shadow: 0 0 2px 0 var(--accuracy-experimental), 0 0 3px 0 var(--accuracy-experimental), 0 0 5px 0 var(--accuracy-experimental), 0 0 2px 0 var(--accuracy-experimental), 0 0 3px 0 var(--accuracy-experimental), 0 0 5px 0 var(--accuracy-experimental);
}

.site-card.ss-withheld .site-card-header,
.site-card.ss-withheld .site-card-meta {
  opacity: 0.6;
  filter: grayscale(0.5);
}
.site-card.ss-withheld::after {
  content: 'PAUSED';
  position: absolute;
  top: 12px;
  right: 48px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--warn, #dba617);
  color: #fff;
  border-radius: var(--r-sm, 4px);
  z-index: 5;
  pointer-events: none;
}
.site-card.ss-withheld .site-card-actions button[data-ss-network-action="refresh-site"] {
  opacity: 0.4;
  pointer-events: none;
}

.site-card.self-card .ss-site-checkbox,
.site-card--add .ss-site-checkbox {
  display: none;
}

.site-card.self-card .site-title::before {
  content: '';
  display: block;
  height: 7px;
  width: 7px;
  border-radius: 5px;
  background: #72F2EB;
  position: absolute;
  left: -10px;
  top: -5px;
}

.ss-cleanup-checkbox { display: none; }
body.ss-cleanup-mode .site-card.ss-keep-selected {
  opacity: 1;
}

body.ss-cleanup-mode .site-card.self-card {
  opacity: 1;
}

body.ss-cleanup-mode .site-card--add {
  display: none !important;
}

body.ss-cleanup-mode .site-card-actions {
  display: none;
}

.site-card {
  position: relative;
}

.ss-at-limit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-right: 8px;
}

.ss-manage-fleet-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--warn, #dba617);
  border: none;
  border-radius: var(--r-sm, 4px);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ss-manage-fleet-btn:hover {
  background: #c99a14;
}

.ss-upgrade-link {
  color: var(--good) !important;
  text-decoration: underline;
  display: block;
  margin-right: .5em;
}

.layout-network {
  overflow: hidden;
  margin-bottom: 45px;
}

.ss-advanced-details > div {
  padding: 15px 25px;
}
.ss-advanced-details { border-radius: 10px; }

/* ===========================================================================
   CLIENT-ONLY MODE - Hide Fleet UI when Fleet plugin not active
   Fleet plugin adds .scope-fleet-active class to body
=========================================================================== */
body:not(.scope-fleet-active) .ss-network-sites-header,
body:not(.scope-fleet-active) #ss-network-root,
body:not(.scope-fleet-active) #ss-network-sites-toggle,
body:not(.scope-fleet-active) #ss-network-sites-drawer,
body:not(.scope-fleet-active) .ss-sites-grid,
body:not(.scope-fleet-active) .ss-sites-search-wrap,
body:not(.scope-fleet-active) .ss-bulk-bar,
body:not(.scope-fleet-active) .ss-network-tabs,
body:not(.scope-fleet-active) .scope-network-sites,
body:not(.scope-fleet-active) [data-license-gate="network"],
body:not(.scope-fleet-active) .ss-manage-fleet-btn,
body:not(.scope-fleet-active) .ss-at-limit-actions {
  display: none !important;
}

/* ===========================================================================
   FLEET ACTIVE MODE - Show Fleet UI when Fleet plugin is active
   Overrides inline style="display:none" added by PHP for unlicensed users
=========================================================================== */
.ss-back-to-top {
  display: none;
  float: right;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0 var(--space-2);
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  opacity: 0;
  transition: opacity .2s ease;
}
.ss-back-to-top .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.ss-back-to-top:hover {
  color: var(--fg);
}
.ss-show-top-arrows .ss-back-to-top {
  display: inline-block;
  opacity: 1;
}

body.scope-fleet-active .ss-network-sites-header {
  display: flex !important;
}
body.scope-fleet-active #ss-network-root {
  display: block !important;
}
body.scope-fleet-active #ss-network-sites-toggle {
  display: inline-flex !important;
}