/**
 * Bug tracker — brand styling for the SupportCandy (and account) front-end output.
 *
 * Everything is scoped under `.vsw-tracker`, the wrapper the page-report-a-bug
 * and page-bug-tracker templates put around the shortcode output, so these
 * rules can never leak into the rest of the site. We target standard
 * form/table elements inside the wrapper, which cleanly covers the account forms
 * and SupportCandy's `[wpsc_create_ticket]` form.
 *
 * SupportCandy LIVE-STYLING NOTE: the full `[supportcandy]` portal is a JS app
 * that ships its own CSS using `wpsc-`-prefixed classes (e.g. .wpsc-modal). It
 * renders inside .vsw-tracker so it inherits brand color/font, and the generic
 * rules below give its form fields a reasonable dark look — but its list/filter/
 * modal chrome should be refined against the LIVE markup by adding
 * `.vsw-tracker .wpsc-…` rules once you can inspect it. Don't fight the app's
 * layout (width/display) blind; prefer color/background/border tweaks.
 *
 * Enqueued only on the bug-tracker pages (see vsw_enqueue_assets in functions.php).
 * Tokens mirror build/tailwind.config.js.
 */

.vsw-tracker {
  --vsw-ink-950: #08080A;
  --vsw-ink-900: #0B0B0E;
  --vsw-ink-800: #101015;
  --vsw-ink-700: #16161C;
  --vsw-line:    rgba(255, 255, 255, 0.08);
  --vsw-line2:   rgba(255, 255, 255, 0.14);
  --vsw-fog:     #8A8A92;
  --vsw-chalk:   #ECECEC;
  --vsw-viper:   #4F7CFF;
  --vsw-viper-dim:  rgba(79, 124, 255, 0.16);
  --vsw-viper-glow: rgba(79, 124, 255, 0.35);

  color: #c9c9cf;
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Browse-by-project strip (page-bug-tracker.php) ---------- */
.vsw-tracker .vsw-proj-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.5rem;
}
.vsw-tracker .vsw-proj-label {
  font: 600 .7rem/1.2 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--vsw-fog); margin-right: .25rem;
}
.vsw-tracker a.vsw-proj-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: 9px;
  border: 1px solid var(--vsw-line2); background: rgba(255, 255, 255, 0.03);
  color: var(--vsw-chalk); font-size: .9rem; font-weight: 500; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vsw-tracker a.vsw-proj-btn:hover {
  background: var(--vsw-viper-dim); border-color: rgba(79, 124, 255, 0.4);
  color: #fff; text-decoration: none;
}
.vsw-tracker a.vsw-proj-btn.is-all { color: var(--vsw-fog); }
.vsw-tracker a.vsw-proj-btn.is-all:hover { color: #fff; }
.vsw-tracker .vsw-proj-hint { font-size: .8rem; color: var(--vsw-fog); margin: -.5rem 0 1.5rem; }
.vsw-tracker .vsw-proj-hint code {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: .78rem; color: var(--vsw-viper);
  background: rgba(79, 124, 255, 0.10); padding: .05rem .35rem; border-radius: 5px;
}

/* ---------- Prose ---------- */
.vsw-tracker h2 { font-size: 1.5rem;  font-weight: 600; color: var(--vsw-chalk); letter-spacing: -0.01em; margin: 1.75rem 0 .75rem; }
.vsw-tracker h3 { font-size: 1.15rem; font-weight: 600; color: var(--vsw-chalk); margin: 1.25rem 0 .5rem; }
.vsw-tracker p  { line-height: 1.6; margin: 0 0 1rem; }
.vsw-tracker a  { color: var(--vsw-viper); text-decoration: none; }
.vsw-tracker a:hover { text-decoration: underline; }
.vsw-tracker hr { border: 0; border-top: 1px solid var(--vsw-line); margin: 1.5rem 0; }

/* ---------- Form layout ---------- */
.vsw-tracker label {
  display: inline-block;
  color: var(--vsw-chalk);
  font-weight: 500;
  margin-bottom: .35rem;
}
.vsw-tracker .description,
.vsw-tracker .field-description,
.vsw-tracker small {
  display: block;
  color: var(--vsw-fog);
  font-size: .82rem;
  margin-top: .3rem;
}
.vsw-tracker .required,
.vsw-tracker .sim-required,
.vsw-tracker abbr[title="required"] {
  color: #ff6b6b;
  text-decoration: none;
}
.vsw-tracker p,
.vsw-tracker .form-row,
.vsw-tracker .sim-field { margin-bottom: 1.1rem; }

/* ---------- Inputs / select / textarea ----------
 * The long :not() chain keeps these rules off buttons, checkboxes, radios and
 * file inputs, and gives the selector enough specificity to win over the
 * plugin's default light-theme field styling without resorting to !important. */
.vsw-tracker input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]),
.vsw-tracker textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.vsw-tracker input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]),
.vsw-tracker select,
.vsw-tracker textarea {
  padding: .6rem .75rem;
  background: var(--vsw-ink-800);
  border: 1px solid var(--vsw-line2);
  border-radius: 8px;
  color: var(--vsw-chalk);
  font: .95rem/1.5 'Geist', ui-sans-serif, system-ui, sans-serif;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vsw-tracker select {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
}
.vsw-tracker textarea { min-height: 8rem; resize: vertical; }
.vsw-tracker input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]):focus,
.vsw-tracker select:focus,
.vsw-tracker textarea:focus {
  outline: none;
  border-color: var(--vsw-viper);
  box-shadow: 0 0 0 3px var(--vsw-viper-dim);
}
.vsw-tracker ::placeholder { color: #6a6a72; }

.vsw-tracker input[type=checkbox],
.vsw-tracker input[type=radio] { accent-color: var(--vsw-viper); }
.vsw-tracker input[type=file] { color: var(--vsw-fog); }

/* ---------- Buttons ---------- */
.vsw-tracker button,
.vsw-tracker input[type=submit],
.vsw-tracker input[type=button],
.vsw-tracker .button,
.vsw-tracker .sim-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--vsw-viper);
  color: var(--vsw-ink-950);
  font: 500 .95rem/1 'Geist', ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
}
.vsw-tracker button:hover,
.vsw-tracker input[type=submit]:hover,
.vsw-tracker input[type=button]:hover,
.vsw-tracker .button:hover,
.vsw-tracker .sim-button:hover {
  background: #5d87ff;
  box-shadow: 0 8px 28px -10px var(--vsw-viper-glow);
  text-decoration: none;
}
.vsw-tracker button:active,
.vsw-tracker input[type=submit]:active { transform: translateY(1px); }

/* Secondary / reset buttons render as ghost outlines */
.vsw-tracker input[type=reset],
.vsw-tracker .button-secondary {
  background: transparent;
  color: var(--vsw-chalk);
  border: 1px solid var(--vsw-line2);
}
.vsw-tracker input[type=reset]:hover,
.vsw-tracker .button-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(79, 124, 255, 0.4);
  box-shadow: none;
}

/* ---------- Tables (issue / bug list) ---------- */
.vsw-tracker table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: .92rem;
}
.vsw-tracker table th {
  text-align: left;
  padding: .7rem .8rem;
  color: var(--vsw-fog);
  font: 600 .7rem/1.2 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--vsw-line2);
}
.vsw-tracker table td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--vsw-line);
  color: var(--vsw-chalk);
  vertical-align: top;
}
.vsw-tracker tbody tr { transition: background .15s ease; }
.vsw-tracker tbody tr:hover { background: var(--vsw-viper-dim); }

/* ---------- Status / meta pills ----------
 * Generic pill styling for any element the plugin tags as a label/badge/status.
 * Per-status colours (open / closed / resolved) can't be set blind — adjust the
 * accents below once you can see the plugin's actual status class names. */
.vsw-tracker .label,
.vsw-tracker .badge,
.vsw-tracker .status,
.vsw-tracker [class*="status-"],
.vsw-tracker [class*="priority-"] {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  border: 1px solid var(--vsw-line2);
  border-radius: 9999px;
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--vsw-chalk);
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Notices / messages ---------- */
.vsw-tracker .sim-message,
.vsw-tracker .notice,
.vsw-tracker .updated,
.vsw-tracker .success {
  border: 1px solid rgba(79, 124, 255, 0.4);
  background: var(--vsw-viper-dim);
  color: var(--vsw-chalk);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 1rem 0;
}
.vsw-tracker .error,
.vsw-tracker .sim-error {
  border: 1px solid rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.12);
  color: var(--vsw-chalk);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin: 1rem 0;
}

/* ---------- Pagination ---------- */
.vsw-tracker .page-numbers,
.vsw-tracker .pagination a,
.vsw-tracker .pagination span {
  display: inline-flex;
  padding: .35rem .7rem;
  margin: 0 .15rem;
  border: 1px solid var(--vsw-line2);
  border-radius: 8px;
  color: var(--vsw-chalk);
}
.vsw-tracker .page-numbers.current,
.vsw-tracker .pagination .current {
  background: var(--vsw-viper);
  color: var(--vsw-ink-950);
  border-color: transparent;
}

/* ====================================================================
 * SupportCandy create-ticket form (`[wpsc_create_ticket]`) — Viper dark brand.
 * Written against the plugin's REAL markup, not guessed:
 *  - field rows are `.wpsc-tff`; the Subject is a class-less <input> inside one.
 *  - the Customer / Category dropdowns are select2/selectWoo widgets whose OPEN
 *    option list is appended to <body> (outside any form wrapper) — so the
 *    `.select2-*` rules below are intentionally UNSCOPED. tracker.css only loads
 *    on the bug pages, so that's safe.
 *  - the Description box is a TinyMCE iframe; its typing area can't be themed
 *    from here (needs a TinyMCE content_style), so only its toolbar is darkened.
 * ==================================================================== */
.wpsc-shortcode-container, .wpsc-body, .wpsc-tff { color: var(--vsw-chalk); }
.wpsc-tff-label .name { color: var(--vsw-chalk) !important; font-weight: 500; }
.wpsc-tff .extra-info { color: var(--vsw-fog) !important; font-size: .82rem; }
.wpsc-tff .required-indicator { color: #ff6b6b !important; }

/* Text inputs + textarea (Subject, etc.) */
.wpsc-tff input[type="text"], .wpsc-tff input[type="email"],
.wpsc-tff input[type="number"], .wpsc-tff input[type="url"],
.wpsc-tff input[type="tel"], .wpsc-tff input[type="date"], .wpsc-tff textarea {
  background: var(--vsw-ink-700) !important;
  color: var(--vsw-chalk) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px;
  padding: .6rem .7rem;
  width: 100%;
}
.wpsc-tff input::placeholder { color: #6a6a72 !important; }

/* select2 closed box (Customer, Category) */
.select2-container--default .select2-selection--single {
  background: var(--vsw-ink-700) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--vsw-chalk) !important;
  line-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
.select2-selection__clear { color: var(--vsw-fog) !important; }

/* select2 OPEN option list — appended to <body>, hence unscoped */
.select2-dropdown, .select2-container--default .select2-dropdown {
  background: var(--vsw-ink-900) !important;
  border: 1px solid var(--vsw-line2) !important;
}
.select2-container--default .select2-results__option { background: var(--vsw-ink-900) !important; color: var(--vsw-chalk) !important; }
.select2-container--default .select2-results__option--highlighted { background: var(--vsw-viper) !important; color: var(--vsw-ink-950) !important; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--vsw-viper-dim) !important; color: var(--vsw-chalk) !important; }
.select2-search--dropdown .select2-search__field {
  background: var(--vsw-ink-700) !important; color: var(--vsw-chalk) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Checkbox rows (GDPR / terms / notify) */
.wpsc-tff .checkbox-container { display: flex; align-items: flex-start; gap: .5rem; }
.wpsc-tff .checkbox-container label,
.wpsc-tff .checkbox-container label p { color: var(--vsw-chalk) !important; margin: 0; }
.wpsc-tff input[type="checkbox"], .wpsc-tff input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--vsw-viper);
  -webkit-appearance: auto; appearance: auto; flex: 0 0 auto; margin-top: .15rem;
}

/* Description editor toolbar + action links */
.wpsc-tff .mce-tinymce, .wpsc-tff .mce-panel { background: var(--vsw-ink-700) !important; border-color: rgba(255, 255, 255, 0.22) !important; }
.wpsc-tff .mce-ico { color: var(--vsw-chalk) !important; }
.wpsc-link { color: var(--vsw-viper) !important; cursor: pointer; }

/* Buttons */
.wpsc-button.primary { background: var(--vsw-viper) !important; color: var(--vsw-ink-950) !important; border: 0 !important; border-radius: 8px; padding: .55rem 1.1rem; font-weight: 500; }
.wpsc-button.secondary { background: transparent !important; color: var(--vsw-chalk) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 8px; padding: .55rem 1.1rem; }
.wpsc-error-msg { color: #ff6b6b !important; font-size: .82rem; margin-top: .3rem; }

/* ====================================================================
 * SupportCandy FULL PORTAL (`[supportcandy]`) — Viper dark brand.
 * The portal is a JS app that ships a LIGHT theme via its Appearance CSS
 * (inline, !important: #fff container, #2c3e50 text, #313042 primary). We beat
 * it with html-body specificity + !important and a portal-wide reset, so every
 * view (dashboard, ticket list, single ticket, modals) reads dark regardless of
 * SupportCandy's per-element class names. Verified on the live portal 2026-07-01.
 * (Previously lived in Customizer → Additional CSS; baked into the theme here so
 * it ships with the deliverable — the Customizer copy can be removed.)
 * ==================================================================== */

/* Reset every surface inside the portal → dark bg + readable text */
html body .wpsc-shortcode-container,
html body .wpsc-shortcode-container *,
html body #wpsc-container * {
  background-color: transparent !important;
  color: var(--vsw-chalk) !important;
  border-color: var(--vsw-line) !important;
}

/* Portal shell + header / tab bar */
html body .wpsc-shortcode-container { background-color: var(--vsw-ink-900) !important; border: 1px solid var(--vsw-line) !important; color: var(--vsw-chalk); }
html body .wpsc-header { background-color: var(--vsw-ink-800) !important; }

/* Cards / panels / tables / threads → raised dark surface with border */
html body .wpsc-shortcode-container [class*="widget"],
html body .wpsc-shortcode-container [class*="-container"],
html body .wpsc-shortcode-container [class*="-tbl"],
html body .wpsc-shortcode-container .wpsc-thread {
  background-color: var(--vsw-ink-800) !important;
  border: 1px solid var(--vsw-line) !important;
  border-radius: 8px !important;
}
html body .wpsc-widget-header { background-color: var(--vsw-ink-700) !important; }
html body .wpsc-shortcode-container th { color: var(--vsw-fog) !important; }
html body .wpsc-shortcode-container tbody tr:hover td { background-color: rgba(79, 124, 255, 0.12) !important; }

/* Modals (rendered outside the container) */
html body .wpsc-modal .overlay { background-color: rgba(0, 0, 0, 0.6) !important; }
html body .wpsc-modal .inner-container,
html body .wpsc-modal .inner-container * { background-color: transparent !important; color: var(--vsw-chalk) !important; border-color: var(--vsw-line) !important; }
html body .wpsc-modal .inner-container { background-color: var(--vsw-ink-900) !important; border: 1px solid var(--vsw-line2) !important; }

/* Inputs / selects / textareas (portal + modal) */
html body #wpsc-container input, html body #wpsc-container select, html body #wpsc-container textarea,
html body .wpsc-shortcode-container input, html body .wpsc-shortcode-container select, html body .wpsc-shortcode-container textarea,
html body .wpsc-modal input, html body .wpsc-modal select, html body .wpsc-modal textarea {
  background-color: var(--vsw-ink-700) !important; border: 1px solid var(--vsw-line2) !important; color: var(--vsw-chalk) !important;
}

/* Accents: buttons + links */
html body .wpsc-button.primary { background-color: var(--vsw-viper) !important; border: 1px solid var(--vsw-viper) !important; color: var(--vsw-ink-950) !important; }
html body .wpsc-button.secondary { background-color: transparent !important; border: 1px solid var(--vsw-line2) !important; color: var(--vsw-chalk) !important; }
html body .wpsc-shortcode-container a, html body .wpsc-shortcode-container .wpsc-link,
html body .wpsc-modal a, html body .wpsc-modal .wpsc-link { color: var(--vsw-viper) !important; }

/* Note threads keep amber; tags + active profile/agent tabs use brand */
html body .wpsc-shortcode-container .wpsc-thread.note,
html body .wpsc-shortcode-container .wpsc-thread.note h2 { color: #E8B64C !important; }
html body .wpsc-add-ticket-tag { background-color: var(--vsw-viper) !important; border-color: var(--vsw-viper) !important; color: var(--vsw-ink-950) !important; }
html body .wpsc-up-tab > .active, html body .wpsc-ap-nav.active { border-top: 3px solid var(--vsw-viper) !important; }