/* SS Table -- Public/Frontend Styles
   All brand colours via CSS custom properties.
   Token block injected here so the table works even without
   a theme that loads brand-styles.css.
*/

/* ============================================================
   SolarShift design tokens (role-separated so dark mode flips
   cleanly). Surfaces, text and "on-colour" pairs are kept
   distinct - never reuse one token for both a fill and the
   text that sits on it. Keep these values in sync with the
   SS Layout copy. See DESIGN_CONTEXT.md "Token contract".
============================================================ */
:root {
  /* Surfaces */
  --ss-page:       #F6F8FB;   /* page / outermost background        */
  --ss-surface:    #FFFFFF;   /* cards, table body, chips           */
  --ss-surface-2:  #EEF2F7;   /* subtle elevated: row hover, tint   */
  /* Foreground text */
  --ss-fg:         #0B1E3F;   /* strong / headings                  */
  --ss-fg-body:    #1F2937;   /* body text                          */
  --ss-fg-muted:   #5B6477;   /* meta / muted                       */
  /* Lines */
  --ss-border:     #E4E8EE;
  /* Brand navy as a FIXED dark fill (+ the text that sits on it) */
  --ss-navy:       #0B1E3F;   /* hero / header / active-chip fill   */
  --ss-navy-700:   #16305C;
  --ss-on-navy:    #FFFFFF;   /* text/icons on navy - always light  */
  /* Table column-header colours: first-class tokens (default to navy).
     A per-table inline style from the Header settings overrides these. */
  --ss-thead-bg:   var(--ss-navy);
  --ss-thead-text: var(--ss-on-navy);
  /* Accent (solar yellow) */
  --ss-accent:     #F5B800;
  --ss-accent-ink: #8A6200;   /* darker yellow for text on light    */
  --ss-on-accent:  #0B1E3F;   /* text on a yellow fill              */
  --ss-accent-soft:#FFF8E1;   /* yellow tint (chip hover)           */
  /* Price movement: text + paired background */
  --ss-down:       #15803D;  --ss-down-bg: #DCFCE7;
  --ss-up:         #B91C1C;  --ss-up-bg:   #FEE2E2;
  --ss-flat:       #6B7280;  --ss-flat-bg: #F3F4F6;
  /* Shape & type */
  --ss-radius:     6px;
  --ss-radius-lg:  12px;
  --ss-shadow:     0 1px 2px rgba(11,30,63,.06), 0 4px 12px rgba(11,30,63,.04);
  --ss-font:       "Inter", -apple-system, system-ui, sans-serif;
  --ss-mono:       "IBM Plex Mono", ui-monospace, monospace;

  /* --- Legacy aliases (older rules + admin inline) --------- */
  --ss-yellow:     var(--ss-accent);
  --ss-yellow-50:  var(--ss-accent-soft);
  --ss-white:      var(--ss-surface);
  --ss-paper:      var(--ss-surface-2);
  --ss-line:       var(--ss-border);
  --ss-ink:        var(--ss-fg);
  --ss-text:       var(--ss-fg-body);
  --ss-muted:      var(--ss-fg-muted);
}

/* ============================================================
   DARK THEME - activates only under html[data-theme="dark"].
   Flips surfaces, text, borders and price colours; navy stays
   a dark fill; on-navy / on-accent text stay light. Values
   chosen for WCAG AA body/heading/meta contrast.
============================================================ */
html[data-theme="dark"] {
  --ss-page:       #0B1626;
  --ss-surface:    #13213A;
  --ss-surface-2:  #1C2C49;
  --ss-fg:         #EDF1F7;
  --ss-fg-body:    #C4CEDD;
  --ss-fg-muted:   #93A0B4;
  --ss-border:     #283850;
  --ss-navy:       #1A3056;
  --ss-navy-700:   #224071;
  --ss-on-navy:    #FFFFFF;
  --ss-thead-bg:   var(--ss-navy);
  --ss-thead-text: var(--ss-on-navy);
  --ss-accent:     #FFC21F;
  --ss-accent-ink: #FFC21F;
  --ss-on-accent:  #0B1E3F;
  --ss-accent-soft:#1E2A46;
  --ss-down:       #4ADE80;  --ss-down-bg: rgba(74,222,128,.15);
  --ss-up:         #F87171;  --ss-up-bg:   rgba(248,113,113,.15);
  --ss-flat:       #9AA6B6;  --ss-flat-bg: rgba(148,163,184,.16);
  --ss-shadow:     0 1px 2px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.4);
}

/* Visually-hidden (screen-reader / crawler only). Used for the table <caption>
   that names the city, currency and date for AI answer engines + a11y. */
.ss-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------
   Compact price table  [ss_price_table]
------------------------------------------------ */

.ss-pt-wrap {
  font-family: var(--ss-font);
  color: var(--ss-ink);
  -webkit-font-smoothing: antialiased;
  background: var(--ss-white);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}

/* Scroll container for the compact widget: when a max-height is set the rows
   scroll inside (with a sticky header) instead of growing the whole page.
   With no cap it is a plain wrapper that changes nothing. */
.ss-pt-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.ss-pt-scroll[style*="max-height"] .ss-pt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ss-pt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ss-line);
  flex-wrap: wrap;
}

.ss-pt-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ss-fg);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.ss-pt-sub {
  font-size: 12px;
  color: var(--ss-muted);
  margin-top: 3px;
}

/* Filter tabs in compact mode */
.ss-pt-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ss-pt-tab {
  padding: 5px 11px;
  font-family: var(--ss-font);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  color: var(--ss-muted);
  background: var(--ss-white);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ss-pt-tab.active {
  background: var(--ss-navy) !important;
  color: var(--ss-on-navy) !important;   /* theme link/button colour bleeds in otherwise */
  border-color: var(--ss-navy) !important;
}
/* Hover is a light tint so it never collides with the solid-navy active state */
.ss-pt-tab:hover:not(.active) {
  background: var(--ss-accent-soft) !important;
  color: var(--ss-fg) !important;
  border-color: var(--ss-navy) !important;
}

/* ------------------------------------------------
   City switcher (markets) bar + chips
------------------------------------------------ */
/* Compact widget: sits inside the card, above the header */
.ss-pt-markets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-paper);
}
/* Full index: sits at the very top, above the hero */
.ss-pi-markets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.ss-mkt-chip {
  padding: 7px 15px;
  font-family: var(--ss-font);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  color: var(--ss-fg-body);
  background: var(--ss-surface);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ss-pt-markets .ss-mkt-chip { padding: 5px 12px; font-size: 12px; }
.ss-mkt-chip.active,
.ss-mkt-chip.active:hover,
.ss-mkt-chip.active:focus {
  background: var(--ss-navy) !important;
  color: var(--ss-on-navy) !important;   /* theme link/button colour bleeds in otherwise */
  border-color: var(--ss-navy) !important;
}
.ss-mkt-chip:hover:not(.active) {
  background: var(--ss-accent-soft) !important;
  border-color: var(--ss-navy) !important;
  color: var(--ss-fg) !important;
}

/* The table itself */
.ss-pt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ss-font);
  font-size: 14px;
}

.ss-pt-table thead th {
  padding: 9px 18px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  /* Header colours are customisable in Settings via these vars; they fall
     back to brand tokens (so theme dark/light modes keep working). */
  color: var(--ss-thead-text, var(--ss-on-navy)) !important;
  background: var(--ss-thead-bg, var(--ss-navy));
  letter-spacing: .06em;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}
/* Sortable tables only: pointer + a faint up/down hint so users
   know the column can be sorted; it fills in once it is sorted. */
.ss-sortable thead th { cursor: pointer; transition: filter .12s; }
.ss-sortable thead th:hover { filter: brightness(0.92); }
.ss-sortable thead th::after {
  content: " \25BC";   /* dim down-triangle = "sortable"; widely supported glyph */
  display: inline-block;
  font-size: 8px;
  opacity: .45;
  margin-left: 4px;
  vertical-align: middle;
}
.ss-sortable thead th.sorted-asc::after  { content: " \25B2"; opacity: 1; }
.ss-sortable thead th.sorted-desc::after { content: " \25BC"; opacity: 1; }

.ss-pt-table tbody tr {
  border-bottom: 1px solid var(--ss-line);
  transition: background .1s;
}
.ss-pt-table tbody tr:last-child { border-bottom: none; }
.ss-pt-table tbody tr:hover { background: var(--ss-paper); }
.ss-pt-table tbody td {
  padding: 11px 18px;
  vertical-align: middle;
}

/* Row hidden by active filter */
.ss-pt-table tbody tr.ss-row-hidden { display: none; }

/* Product / Category */
.ss-pt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-ink);
  line-height: 1.3;
}
.ss-pt-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--ss-yellow);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}
.ss-pt-spec {
  font-size: 12px;
  color: var(--ss-muted);
  margin-top: 2px;
}

/* Price */
.ss-pt-price {
  font-family: var(--ss-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--ss-ink);
}

/* Per-watt rate (Rs/W) */
.ss-pt-ppw {
  font-family: var(--ss-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ss-muted);
}

/* Trend chips */
.ss-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ss-mono);
  white-space: nowrap;
}
.ss-chip.dn { background: var(--ss-down-bg); color: var(--ss-down); }
.ss-chip.up { background: var(--ss-up-bg);   color: var(--ss-up);   }
.ss-chip.fl { background: var(--ss-flat-bg); color: var(--ss-flat); }

/* See all link */
.ss-pt-seeall {
  display: block;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-fg);
  text-decoration: none;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  background: var(--ss-surface);
  transition: border-color .12s, background .12s;
}
.ss-pt-seeall:hover {
  border-color: var(--ss-navy);
  background: var(--ss-surface-2);
  color: var(--ss-fg);
  text-decoration: none;
}

/* ------------------------------------------------
   Full Price Index  [ss_price_index]
------------------------------------------------ */

.ss-pi-wrap {
  font-family: var(--ss-font);
  color: var(--ss-ink);
  -webkit-font-smoothing: antialiased;
}

/* Hero banner */
.ss-pi-hero {
  background: var(--ss-navy);
  color: var(--ss-on-navy);
  border-radius: var(--ss-radius-lg);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ss-eyebrow {
  font-family: var(--ss-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ss-yellow);
}

.ss-pi-hero-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 8px 0 0;
  line-height: 1.08;
  color: var(--ss-on-navy);
}

.ss-pi-hero-meta {
  font-size: 13px;
  opacity: .75;
  margin-top: 8px;
}

/* Stats */
.ss-pi-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.ss-pi-stat-val {
  font-family: var(--ss-mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--ss-on-navy);
  letter-spacing: -.02em;
}
/* Auto avg-change stat: tint by direction (down = good/green for buyers). */
.ss-pi-stat-val.ss-stat-dn { color: var(--ss-down); }
.ss-pi-stat-val.ss-stat-up { color: var(--ss-up); }
.ss-pi-stat-val.ss-stat-fl { color: var(--ss-on-navy); }
.ss-pi-stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
  margin-top: 3px;
}

/* Category filter chips */
.ss-pi-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ss-pi-chip {
  padding: 8px 16px;
  font-family: var(--ss-font);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  color: var(--ss-fg-body);
  background: var(--ss-surface);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ss-pi-chip.active,
.ss-pi-chip.active:hover,
.ss-pi-chip.active:focus {
  background: var(--ss-navy) !important;
  color: var(--ss-on-navy) !important;   /* theme link/button colour bleeds in otherwise */
  border-color: var(--ss-navy) !important;
}
.ss-pi-chip:hover:not(.active) {
  background: var(--ss-accent-soft) !important;
  border-color: var(--ss-navy) !important;
  color: var(--ss-fg) !important;
}

/* Full table wrapper */
.ss-pt-full {
  background: var(--ss-white);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius-lg);
  overflow: hidden;
}

/* Price note */
.ss-pi-note {
  font-size: 12px;
  color: var(--ss-muted);
  padding: 12px 18px;
  margin: 0;
  border-top: 1px solid var(--ss-line);
  line-height: 1.5;
}

/* Compact-widget price note: sits under the "Updated on..." line in the header */
.ss-pt-note {
  font-size: 11.5px;
  color: var(--ss-muted);
  margin-top: 6px;
  line-height: 1.45;
}

/* Generic hide helper (toggled by the JS switcher for the table / message) */
.ss-hidden { display: none !important; }

/* "Prices unavailable for this market" notice (shown when a chip has no rows) */
.ss-pt-unavailable {
  padding: 28px 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ss-muted);
  line-height: 1.5;
}
.ss-pt-unavailable .ss-unavail-city {
  font-weight: 700;
  color: var(--ss-fg);
}

/* Rows with a description are clickable (open the detail modal) */
.ss-pt-table tbody tr.ss-has-desc { cursor: pointer; }
.ss-pt-table tbody tr.ss-has-desc:hover { background: var(--ss-accent-soft); }
.ss-desc-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--ss-navy);
  color: var(--ss-on-navy);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  vertical-align: middle;
}

/* Row detail modal */
.ss-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 30, 63, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 20px;
}
.ss-modal-overlay.ss-hidden { display: none !important; }
.ss-modal-dialog {
  position: relative;
  background: var(--ss-white);
  border-radius: var(--ss-radius-lg);
  box-shadow: 0 24px 70px rgba(11, 30, 63, .35);
  width: 500px;
  height: 500px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ss-modal-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ss-muted);
  z-index: 2;
  padding: 4px 8px;
}
.ss-modal-close:hover { color: var(--ss-fg); }
.ss-modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px 24px;
  color: var(--ss-text);
  font-family: var(--ss-font);
  font-size: 14px;
  line-height: 1.6;
}
.ss-modal-body img { max-width: 100%; height: auto; }
.ss-modal-body :first-child { margin-top: 0; }
body.ss-modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .ss-modal-dialog { width: 92vw !important; height: auto !important; max-height: 85vh; }
}

/* -------------------------------------------------
   Responsive - stack each table row into its own card
   on mobile so all columns stay readable without
   horizontal scrolling. Labels come from data-label.
------------------------------------------------- */
@media (max-width: 640px) {
  .ss-pi-hero {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .ss-pi-hero-title { font-size: 24px; }
  .ss-pi-stats { gap: 18px; }
  .ss-pi-stat-val { font-size: 20px; }

  /* Header row hidden; each cell carries its own label */
  .ss-pt-table thead { display: none; }
  .ss-pt-table,
  .ss-pt-table tbody,
  .ss-pt-table tr,
  .ss-pt-table td { display: block; width: 100%; }

  .ss-pt-table tbody tr {
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    margin: 0 0 10px;
    padding: 2px 14px;
    background: var(--ss-white);
  }
  .ss-pt-table tbody tr:last-child { margin-bottom: 0; }
  .ss-pt-table tbody tr:hover { background: var(--ss-white); }

  .ss-pt-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    text-align: right;
    border-bottom: 1px dashed var(--ss-line);
  }
  .ss-pt-table tbody td:last-child { border-bottom: 0; }

  /* Field label generated from the cell's data-label */
  .ss-pt-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ss-muted);
    text-align: left;
    flex: 0 0 auto;
  }

  /* Product cell becomes the card header (full width, no label) */
  .ss-pt-table tbody td.ss-pt-prod {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    padding-top: 11px;
    border-bottom: 1px solid var(--ss-line);
  }
  .ss-pt-table tbody td.ss-pt-prod::before { content: none; }
}