/* ==========================================================================
   customize.css — site-wide overrides, loaded on every page. Keep every rule scoped to the component it fixes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fluent Support customer portal (/support-portal/) — dark theme

   The portal is a Vue app whose stylesheet (wp-content/plugins/fluent-support/assets/portal/css/app.css) is entirely driven by --fs-* design tokens. It ships a full dark palette, but every dark rule is gated behind `html.dark`, and the plugin only ever adds that class in wp-admin — never on the front end. On our dark site the portal therefore renders its LIGHT text tokens (--fs-text-strong: #0E121B, --fs-black: #000) against a dark background, so the ticket subject, ticket number, thread bodies, author names and the closed-ticket notice come out near-invisible.

   Fix: redefine the tokens on the portal container itself, using the plugin's own dark values. Because every text rule in app.css resolves through these variables, this makes all portal text readable in one place instead of chasing individual selectors with !important.

   The `html` prefix is deliberate. app.css is enqueued from inside the shortcode callback, so WordPress prints it in the footer — after this file. `html .fs_client_portal` (0,1,1) outranks the plugin's `.fs_client_portal` (0,1,0) regardless of load order.
   -------------------------------------------------------------------------- */

html #fluent_support_client_app,
html .fs_client_portal,
html .fs_popover {
  --fs-global-component-bg: #05070b;
  --fs-primary: #e4e4e7;
  --fs-primary-dark: #d4d4d8;
  --fs-primary-hover: #f4f4f5;
  --fs-white: #0e121b;
  --fs-black: #ffffff;
  --fs-text-strong: #f4f4f5;
  --fs-text-sub: #a1a1aa;
  --fs-text-light: #71717a;
  --fs-text-lighter: #52525b;
  --fs-text-muted: #71717a;
  --fs-text-dark: #d4d4d8;
  --fs-text-inactive: #a1a1aa;
  --fs-border-soft: #3f3f46;
  --fs-border-soft-rgb: 63, 63, 70;
  --fs-border-light: #3f3f46;
  --fs-border-lighter: #52525b;
  --fs-border-input: #52525b;
  --fs-border-input-hover: #71717a;
  --fs-border-error: #f87171;
  --fs-border-focus: #e4e4e7;
  --fs-bg-weak: #27272a;
  --fs-bg-light: #18181b;
  --fs-bg-lighter: #3f3f46;
  --fs-bg-white: #18181b;
  --fs-bg-disabled: #3f3f46;
  --fs-bg-hover: #3f3f46;
  --fs-bg-rgb-weak: 39, 39, 42;
  --fs-status-success: #34d399;
  --fs-status-success-bg: #064e3b;
  --fs-status-info: #60a5fa;
  --fs-status-info-bg: #1e3a8a;
  --fs-status-error: #f87171;
  --fs-status-error-bg: #7f1d1d;
  --fs-status-error-hover: #ef4444;
  --fs-status-warning: #f59e0b;
  --fs-status-inactive: var(--fs-text-light);
  --fs-link: #60a5fa;
  --fs-link-hover: #93c5fd;
  --fs-icon: #71717a;
  --fs-icon-light: #52525b;
  --fs-inline-btn-text: #f4f4f5;
  --fs-btn-primary: var(--fs-primary);
  --fs-btn-primary-hover: var(--fs-primary-hover);
  --fs-btn-text: #18181b;
  --fs-btn-disabled-bg: var(--fs-bg-weak);
  --fs-btn-disabled-text: var(--fs-text-sub);
  --fs-pagination-hover: #3f3f46;
  --fs-pagination-text: #a1a1aa;
  --fs-pagination-disabled: #52525b;
  --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fs-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4);
  --fs-shadow-lg: 0 2px 12px rgba(0, 0, 0, 0.5);

  /* Element Plus internals used by the portal's tables, inputs and popovers */
  --el-bg-color-overlay: #18181b;
  --el-popover-bg-color: #18181b;
  --el-popover-border-color: #3f3f46;
  --el-text-color-primary: #f4f4f5;
  --el-text-color-regular: #a1a1aa;
  --el-border-color: #3f3f46;
  --el-border-color-lighter: #3f3f46;
  --el-fill-color-blank: #18181b;
  --el-fill-color-light: #27272a;
  --el-fill-color-lighter: #27272a;
  --el-input-bg-color: #18181b;
  --el-input-text-color: #f4f4f5;
  --el-input-border-color: #3f3f46;
  --el-input-hover-border-color: #52525b;
  --el-input-placeholder-color: #71717a;
  --el-input-focus-border-color: #71717a;
  --el-disabled-bg-color: #3f3f46;
  --el-disabled-text-color: #71717a;
  --el-disabled-border-color: #3f3f46;
  --el-table-bg-color: #18181b;
  --el-table-tr-bg-color: #18181b;
  --el-table-header-bg-color: #27272a;
  --el-table-row-hover-bg-color: #27272a;
  --el-table-border-color: #3f3f46;
  --el-skeleton-color: #27272a;
  --el-skeleton-to-color: #3f3f46;
  --el-mask-color: rgba(24, 24, 27, 0.85);
  --el-mask-color-extra-light: rgba(24, 24, 27, 0.3);
}

html #fluent_support_client_app,
html .fs_client_portal {
  background-color: var(--fs-bg-white);
}

/* Drop the outline around the ticket card / create-ticket form, plus every separator inside it: under the ticket header, actions bar and subject row, above the thread list, and between threads. Selector chains mirror app.css so the `html` prefix is enough to outrank each one. */
html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container,
html .fs_client_portal .fs_ticket_form_container,
html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_ticket_header,
html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_ticket_actions,
html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_tk_subject,
html .fs_client_portal .fs_ticket_threads_container,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread {
  border: none;
}

/* The divider between threads is the one that keeps coming back, so it gets pinned. The rule above already outranks app.css on specificity; if a line is still visible after this, the file being served is a stale cache rather than a losing selector. */
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread:last-child,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread.fs_conversion_starter {
  border: none !important;
}

/* "Loading Customer Portal…" — server-rendered before the Vue app mounts, so it sits outside .fs_client_portal and never sees the tokens above. */
html #fluent_support_client_app .fs_loading_text,
html #fluent_support_client_app .fs_customer_restriction {
  color: #f4f4f5;
}

/* Thread content is stored as HTML and injected with innerHTML, so each paragraph the sender typed is a real <p>. app.css then sets `margin: 0` on them, which flattens every paragraph break and runs the whole message together as one block. Restore the spacing. Both selectors are needed: the long chain outranks the plugin's own (0,6,0) rule on replies, the short one covers the conversation starter, which renders .fs_thread_body outside .fs_ticket_thread_wrap. */
html .fs_client_portal .fs_thread_body p,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_thread_body p {
  margin: 0 0 12px;
}

html .fs_client_portal .fs_thread_body p:last-child,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_thread_body p:last-child {
  margin-bottom: 0;
}

/* The remaining pieces the plugin only fixes under `html.dark` — re-scoped so they apply without the class. Mirrors app.css rule for rule. */
html .fs_client_portal .el-table tr {
  background-color: transparent;
}

html .fs_client_portal .el-skeleton {
  background: var(--fs-white);
}

html .fs_client_portal .el-skeleton__item {
  background: linear-gradient(90deg, #18181b 25%, #27272a, #18181b 75%);
  background-size: 400% 100%;
}

html .fs_client_portal .el-popper.is-light {
  background: var(--fs-bg-white);
  border-color: var(--fs-border-soft);
}

html .fs_client_portal .el-popper.is-light .el-popper__arrow:before {
  background: var(--fs-bg-white);
  border-color: var(--fs-border-soft);
}

html .fs_client_portal .el-popover hr {
  border-color: var(--fs-border-soft);
}

html .fs_client_portal .el-dropdown__popper .el-select-dropdown__item,
html .fs_client_portal .el-select__popper .el-select-dropdown__item {
  color: var(--fs-text-sub);
}

html .fs_client_portal .el-dropdown__popper .el-select-dropdown__item.is-hovering,
html .fs_client_portal .el-select__popper .el-select-dropdown__item.is-hovering {
  background-color: var(--fs-bg-weak);
}

html .fs_client_portal .el-dropdown__popper .el-select-dropdown__item.is-selected,
html .fs_client_portal .el-select__popper .el-select-dropdown__item.is-selected {
  color: var(--fs-text-strong);
}

html .fs_client_portal .el-select__wrapper {
  background-color: var(--fs-bg-white);
  color: var(--fs-text-strong);
}

html .fs_client_portal .el-input .el-input__inner,
html .fs_client_portal .el-input .el-textarea__inner,
html .fs_client_portal .el-textarea .el-input__inner,
html .fs_client_portal .el-textarea .el-textarea__inner {
  color: var(--fs-text-strong);
}

html .fs_client_portal .el-input .el-input__inner::placeholder,
html .fs_client_portal .el-input .el-textarea__inner::placeholder,
html .fs_client_portal .el-textarea .el-input__inner::placeholder,
html .fs_client_portal .el-textarea .el-textarea__inner::placeholder {
  color: var(--fs-text-light);
}

/* Reply box — the WordPress editor chrome around the TinyMCE iframe */
html .fs_client_portal .wp-editor-tabs {
  background-color: var(--fs-bg-weak);
  border-color: var(--fs-border-soft);
}

html .fs_client_portal .wp-editor-tabs .wp-switch-editor {
  background: transparent;
  color: var(--fs-text-sub);
  border: none;
  box-shadow: none;
}

html .fs_client_portal .wp-editor-tabs .wp-switch-editor[aria-pressed="true"] {
  background-color: var(--fs-text-strong);
  color: var(--fs-bg-white);
}

html .fs_client_portal .mce-statusbar {
  background-color: var(--fs-bg-weak) !important;
  border-color: var(--fs-border-soft) !important;
}

html .fs_client_portal .wp_vue_editor_plain {
  background-color: var(--fs-bg-weak);
  color: var(--fs-text-strong);
  border-color: var(--fs-border-soft);
}

html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_tickets_table {
  background: var(--fs-bg-white);
}

html .fs_client_portal .fs_popover_item .fs_switch_button .el-radio-button .el-radio-button__inner {
  background-color: transparent;
  color: var(--fs-text-strong);
  border-color: var(--fs-border-soft);
}

html .fs_client_portal .fs_popover_item .fs_switch_button .el-radio-button.is-active .el-radio-button__inner {
  border-color: var(--fs-text-strong);
  background-color: var(--fs-text-strong);
  color: var(--fs-bg-white);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Portal polish

   With the borders gone the card needs depth and rhythm to hold together, so this section leans on elevation, spacing and type hierarchy instead of lines. Everything here is scoped the same way as above and mirrors app.css chains so the `html` prefix carries the specificity.
   -------------------------------------------------------------------------- */

/* The card ran the full width of a desktop viewport, which pushes message lines past a comfortable reading measure. Cap it and restore the elevation the plugin zeroes out. */
html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container {
  max-width: 1080px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* Header: the subject leads, the ticket id drops back to a quiet meta line. app.css renders #1810 at --fs-text-xl in --fs-black, which competes with the subject. */
html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_tk_subject {
  padding: 24px 28px;
}

html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_ticket_subject {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_ticket_number {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--fs-text-sub);
  margin-top: 2px;
}

html .fs_client_portal .fs_status_badge {
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* Closed notice: app.css pins .fs_ticket_closed_content to a hard `width: 400px`, which is what breaks the sentence mid-clause ("…by Derek If you still have / related issues."). Let it use the space it has. */
html .fs_client_portal .fs_ticket_alert {
  padding: 20px 28px 0;
}

html .fs_client_portal .fs_ticket_alert .fs_ticket_closed_alert {
  padding: 12px 16px;
  gap: 16px;
}

html .fs_client_portal .fs_ticket_alert .fs_ticket_closed_alert .fs_ticket_closed_content {
  width: auto;
  flex: 1 1 auto;
  gap: 8px;
  align-items: flex-start;
}

html .fs_client_portal .fs_ticket_alert .fs_ticket_closed_alert .fs_ticket_reopen {
  color: var(--fs-link);
  white-space: nowrap;
}

html .fs_client_portal .fs_ticket_alert .fs_ticket_closed_alert .fs_ticket_reopen:hover {
  color: var(--fs-link-hover);
}

/* Threads: match the header's 28px gutter and give each message room to breathe, since there are no longer any rules separating them. */
html .fs_client_portal .fs_ticket_threads_container .fs_customer_conversation {
  padding: 24px 28px;
}

html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content {
  gap: 16px;
}

html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_avatar {
  box-shadow: 0 0 0 1px var(--fs-border-soft);
}

/* A barely-there tint marks the opening message without reintroducing a divider. */
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread.fs_conversion_starter {
  background: rgba(255, 255, 255, 0.025);
}

html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_thread_head .fs_thread_name {
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
}

html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_thread_head .fs_thread_name .fs_thread_ribbon {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
}

/* 20px leading on 14px type is tight for prose. Loosen it and let the measure breathe. */
html .fs_client_portal .fs_thread_body,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_thread_body {
  margin: 8px 0 12px;
  max-width: 78ch;
}

html .fs_client_portal .fs_thread_body p,
html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_thread_body p {
  font-size: 15px;
  line-height: 1.65;
}

html .fs_client_portal .fs_ticket_threads_container .fs_ticket_thread .fs_ticket_thread_content .fs_ticket_thread_wrap .fs_actions_head .fs_thread_actions {
  color: var(--fs-text-light);
}

/* Back nav reads as a link, not a button. */
html .fs_client_portal .fs_back_nav {
  margin-bottom: 16px;
}

html .fs_client_portal .fs_back_button {
  background: transparent;
  border: none;
  padding: 0;
  height: auto;
  color: var(--fs-text-sub);
}

html .fs_client_portal .fs_back_button:hover .fs_back_btn,
html .fs_client_portal .fs_back_button:hover .fs_svg_back {
  color: var(--fs-text-strong);
}

html .fs_client_portal .fs_back_btn,
html .fs_client_portal .fs_svg_back {
  color: var(--fs-text-sub);
  transition: color 0.15s ease;
}

/* Pull the gutters back in where 28px would eat the screen. */
@media (max-width: 640px) {
  html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_tk_subject,
  html .fs_client_portal .fs_ticket_threads_container .fs_customer_conversation {
    padding: 20px 16px;
  }

  html .fs_client_portal .fs_ticket_alert {
    padding: 16px 16px 0;
  }

  html .fs_client_portal .fs_ticket_wrapper .fs_tickets_container .fs_ticket_heroarea .fs_ticket_subject {
    font-size: 18px;
    line-height: 26px;
  }
}