/* ==========================================================================
   99Plugs helpdesk - Fluent Support customer portal theme
   --------------------------------------------------------------------------
   Styles the customer-facing portal (`[fluent_support_portal]`) onto the same
   palette and type scale as the knowledgebase, from
   projects/website-modernization/website-modernization.md
   (Phase 1 typography, Phase 2 colour, Phase 3 surfaces).

   Companion to projects/knowledgebase/betterdocs-theme.css. Same conventions,
   same tokens, deliberately the same look - a customer moving from an article
   to a ticket should not notice a seam.

   WHERE THIS GOES
   Child theme stylesheet, or Appearance -> Customize -> Additional CSS.
   Prefer the child theme so it lives with the rest of the modernization work.

   TOKENS
   Every value reads a modernization token first and falls back to its literal,
   so this works TODAY, before Phase 2 lifts the palette to :root, and follows
   the real tokens automatically once it does. Nothing here needs revisiting.

   Tokens are named `--p9-*`, NOT `--fs-*`. Fluent Support 2.3.2 owns the
   `--fs-*` namespace and defines 80 of its own on `.fs_client_portal` - two of
   which, `--fs-radius-sm` and `--fs-shadow-sm`, this file used to redefine at
   the identical specificity. That was a coin flip decided by load order, and
   when it landed our way it silently repainted seven of the plugin's own rules.
   Never define an `--fs-*` property here.

   WHY EVERY SELECTOR CARRIES `#fluent_support_client_app`
   The original premise - that Element Plus is variable-driven, so remapping
   `--el-*` would retheme the portal without a fight - is only half true, and
   the other half is why an earlier version of this file mostly did nothing.

   Fluent Support ships compiled SCSS with the nesting left in. Real selectors
   from assets/portal/css/app.css run eight to fourteen classes deep:

     .fs_client_portal .fs_ticket_wrapper .fs_tickets_container
     .fs_tickets_table .el-table .el-table__body .fs_ticket_row
     ... .fs_ticket_title                                        -> 0-11-0

   A rule written as `.fs_client_portal .fs_ticket_title` is 0-2-0 and loses.
   Load order never enters into it; specificity is settled first. Roughly forty
   of the declarations here were being discarded for this reason alone.

   The portal mounts inside `<div id="fluent_support_client_app">`, hardcoded in
   the plugin's CustomerPortalHandler.php and used by the plugin's own override
   sheets. One ID beats any number of classes, so prefixing with it puts every
   rule here at 1-2-0 or better and ends the fight permanently - no `!important`
   arms race, no counting selector depth, and no re-tuning when the plugin adds
   another level of nesting.

   That prefix also fixes the `--el-*` remap in section 2. The plugin sets 28
   `--el-*` properties on `.fs_client_portal`, seven of which this file also
   sets; at matching specificity the later sheet won, and the plugin's is later.

   `!important` SURVIVES ON 12 DECLARATIONS, and nowhere else. An ID outranks
   any stack of classes but it does not outrank `!important`, so seven of those
   answer a specific `!important` in app.css: the table header's background and
   colour, the form label's font-weight, the focus ring's box-shadow and
   border-colour, and `.fs_tk_help`'s colour and margin-top. Each names the rule
   it answers. The other five hold the CTA button's fill against theme CSS that
   could not be inspected from here, and say so at the site.

   Nine others were dropped as dead weight - they predated the ID prefix and
   were beating nothing. Before adding a thirteenth, grep app.css for an
   `!important` on that exact property. If there is not one, the rule is losing
   for some other reason and `!important` will only hide it.

   SCOPE
   Customer portal only. The agent admin screens are a heavier Vue app, are seen
   by one person, and are not worth the maintenance. Deliberate - see D27.

   ONE THING TO CONFIRM
   Only the `active` status badge appeared in the captured markup. The `new` and
   `closed` rules in section 4 are inferred from Fluent Support's status list.
   Open one ticket of each state and check the colours land.

   Verified against Fluent Support 2.3.2, 2026-08-30.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal {
  /* modernization token, then literal fallback */
  --p9-ink: var(--ink, #222222);
  --p9-ink-2: var(--ink-2, #3f3f3f);
  --p9-text: var(--text, #2c2c2c);
  --p9-muted: var(--muted, #6b7280);
  --p9-navy: var(--navy, #020e28);
  --p9-blue: var(--blue, #1e73be);
  --p9-blue-dk: var(--blue-dk, #155a94);
  --p9-blue-soft: var(--blue-soft, #e8f1f9);
  --p9-amber: var(--amber, #b45309);
  --p9-amber-soft: var(--amber-soft, #fdf4e7);
  --p9-surface: var(--surface, #f4f7fa);
  --p9-rule: var(--rule, #e2e8f0);
  --p9-cta: var(--cta, #f38d00);
  --p9-cta-dk: var(--cta-dk, #dd6420);

  --p9-radius: var(--radius, 10px);
  --p9-radius-sm: var(--radius-sm, 6px);
  --p9-shadow: var(--shadow, 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08));
  --p9-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);

  --p9-fh: var(--fh, 'Space Grotesk', Tahoma, Geneva, sans-serif);
  --p9-fb: var(--fb, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* --------------------------------------------------------------------------
   2. Element Plus remap — the lever
   Setting Element's own variables here retheme its components wholesale.
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal {
  --el-color-primary: var(--p9-blue);
  --el-color-primary-light-3: var(--p9-blue);
  --el-color-primary-light-5: #6ba3d6;
  --el-color-primary-light-7: #a8c9e6;
  --el-color-primary-light-9: var(--p9-blue-soft);
  --el-color-primary-dark-2: var(--p9-blue-dk);

  --el-text-color-primary: var(--p9-ink);
  --el-text-color-regular: var(--p9-text);
  --el-text-color-secondary: var(--p9-muted);
  --el-text-color-placeholder: var(--p9-muted);

  --el-border-color: var(--p9-rule);
  --el-border-color-light: var(--p9-rule);
  --el-border-color-lighter: var(--p9-rule);
  --el-fill-color-light: var(--p9-surface);
  --el-fill-color-lighter: var(--p9-surface);
  --el-fill-color-blank: #ffffff;

  --el-border-radius-base: var(--p9-radius-sm);
  --el-font-family: var(--p9-fb);
  --el-font-size-base: 15px;
}

/* --------------------------------------------------------------------------
   3. Shared type and shell
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal {
  font-family: var(--p9-fb);
  color: var(--p9-text);
  font-size: 15px;
  line-height: 1.6;
}

#fluent_support_client_app .fs_client_portal h1,
#fluent_support_client_app .fs_client_portal h2,
#fluent_support_client_app .fs_client_portal h3,
#fluent_support_client_app .fs_client_portal .fs_ticket_subject,
#fluent_support_client_app .fs_client_portal .fs_ticket_title {
  font-family: var(--p9-fh);
  color: var(--p9-ink);
  letter-spacing: -0.01em;
  text-transform: none; /* the site-wide uppercase habit stops here */
}

#fluent_support_client_app .fs_client_portal a {
  color: var(--p9-blue);
  text-decoration: none;
}

#fluent_support_client_app .fs_client_portal a:hover {
  color: var(--p9-blue-dk);
  text-decoration: underline;
}

/* The two containers that carry the page. Surfaces, not bare white. */
#fluent_support_client_app .fs_client_portal .fs_tickets_container,
#fluent_support_client_app .fs_client_portal .fs_ticket_form_container {
  background: #ffffff;
  border: 1px solid var(--p9-rule);
  border-radius: var(--p9-radius);
  box-shadow: var(--p9-shadow-sm);
  padding: 24px;
}

/* Back link */
#fluent_support_client_app .fs_client_portal .fs_back_nav {
  margin-bottom: 16px;
}

#fluent_support_client_app .fs_client_portal .fs_back_button,
#fluent_support_client_app .fs_client_portal .fs_back_btn {
  color: var(--p9-muted);
  font-weight: 500;
}

#fluent_support_client_app .fs_client_portal .fs_back_button:hover .fs_back_btn {
  color: var(--p9-blue);
}

/* --------------------------------------------------------------------------
   4. Status badges
   `active` is confirmed from the live markup. `new` and `closed` are inferred.
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal .fs_status_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}

#fluent_support_client_app .fs_client_portal .fs_status_dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

#fluent_support_client_app .fs_client_portal .fs_status_badge.active {
  color: var(--p9-blue-dk);
  background: var(--p9-blue-soft);
  border-color: #cfe1f1;
}

#fluent_support_client_app .fs_client_portal .fs_status_badge.new {
  color: var(--p9-amber);
  background: var(--p9-amber-soft);
  border-color: #f4e2c8;
}

#fluent_support_client_app .fs_client_portal .fs_status_badge.closed {
  color: var(--p9-muted);
  background: var(--p9-surface);
  border-color: var(--p9-rule);
}

/* --------------------------------------------------------------------------
   5. Ticket list
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal .fs_tickets_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* Filter bar sits on surface so it reads as a control strip, not content. */
#fluent_support_client_app .fs_client_portal .fs_filters_section {
  background: var(--p9-surface);
  border: 1px solid var(--p9-rule);
  border-radius: var(--p9-radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
}

#fluent_support_client_app .fs_client_portal .fs_button_groups .status-btn {
  background: transparent;
  border: 1px solid var(--p9-rule);
  color: var(--p9-text);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

#fluent_support_client_app .fs_client_portal .fs_button_groups .status-btn:hover {
  border-color: var(--p9-blue);
  color: var(--p9-blue);
}

#fluent_support_client_app .fs_client_portal .fs_button_groups .status-btn.active {
  background: var(--p9-navy);
  border-color: var(--p9-navy);
  color: #ffffff;
}

/* Table. Element paints the header white by default; surface reads better. */
#fluent_support_client_app .fs_client_portal .fs_tickets_table .el-table__header-wrapper th.el-table__cell {
  background: var(--p9-surface) !important; /* plugin: .el-table__header th { background !important } */
  color: var(--p9-ink-2) !important;         /* same rule sets color !important */
  font-family: var(--p9-fb);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--p9-rule);
}

#fluent_support_client_app .fs_client_portal .fs_ticket_row td.el-table__cell {
  border-bottom: 1px solid var(--p9-rule);
  padding: 14px 0;
  vertical-align: top;
}

#fluent_support_client_app .fs_client_portal .el-table__body tr.fs_ticket_row:hover > td.el-table__cell {
  background: var(--p9-surface); /* the ID prefix now beats el-table--enable-row-hover */
}

#fluent_support_client_app .fs_client_portal .fs_ticket_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--p9-ink);
  margin-bottom: 3px;
}

#fluent_support_client_app .fs_client_portal a.fs_ticket_conversation:hover .fs_ticket_title {
  color: var(--p9-blue);
}

#fluent_support_client_app .fs_client_portal .fs_ticket_preview {
  color: var(--p9-muted);
  font-size: 14px;
  margin: 0;
}

#fluent_support_client_app .fs_client_portal .fs_response_count {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--p9-blue-soft);
  color: var(--p9-blue-dk);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

#fluent_support_client_app .fs_client_portal .date-cell {
  color: var(--p9-muted);
  font-size: 13.5px;
}

#fluent_support_client_app .fs_client_portal .fs_pagination_section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--p9-rule);
}

#fluent_support_client_app .fs_client_portal .fs_page_text {
  color: var(--p9-muted);
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   6. Ticket thread
   The shading that makes a conversation scannable: the customer's own words on
   surface, support replies on white with a blue spine.
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal .fs_ticket_heroarea {
  border-bottom: 1px solid var(--p9-rule);
  padding-bottom: 18px;
  margin-bottom: 22px;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_subject {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 6px;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_meta {
  display:none;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_meta,
#fluent_support_client_app .fs_client_portal .fs_product_name {
  color: var(--p9-muted);
  font-size: 13.5px;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_threads_container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top:none;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_thread {
  background: var(--p9-surface);
  border: 1px solid var(--p9-rule);
  border-radius: var(--p9-radius);
  padding: 16px 18px;
}

/* Support replies: white, with the brand spine. */
#fluent_support_client_app .fs_client_portal .fs_ticket_thread.fs_agent {
  background: #ffffff;
  border-left: 3px solid var(--p9-blue);
}

/* The opening message keeps the customer's surface treatment. */
#fluent_support_client_app .fs_client_portal .fs_ticket_thread.fs_conversion_starter {
  background: var(--p9-surface);
}

#fluent_support_client_app .fs_client_portal .fs_thread_head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#fluent_support_client_app .fs_client_portal .fs_thread_name {
  font-family: var(--p9-fh);
  font-weight: 600;
  color: var(--p9-ink);
}

#fluent_support_client_app .fs_client_portal .fs_thread_ribbon {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--p9-surface);
  color: var(--p9-muted);
  border: 1px solid var(--p9-rule);
}
#fluent_support_client_app .fs_client_portal .fs_thread_ribbon_customer {
  display: none;
}

#fluent_support_client_app .fs_client_portal .fs_thread_body {
  color: var(--p9-text);
}

#fluent_support_client_app .fs_client_portal .fs_thread_body p:last-child {
  margin-bottom: 0;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_avatar img {
  border-radius: 50%;
  border: 1px solid var(--p9-rule);
}

/* Custom fields block under the opening message */
#fluent_support_client_app .fs_client_portal .fs_custom_data_wrap {
  background: none;
  padding: 0;
}

#fluent_support_client_app .fs_client_portal .fs_custom_data_wrap h3 {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p9-muted);
  margin: 0 0 6px;
}

#fluent_support_client_app .fs_client_portal .fs_custom_data_wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#fluent_support_client_app .fs_client_portal .fs_custom_data_wrap li {
  font-size: 14px;
  margin-bottom: 2px;
}

#fluent_support_client_app .fs_client_portal .fs_custom_info_label {
  color: var(--p9-ink-2);
  font-weight: 600;
}

/* Attachments */
#fluent_support_client_app .fs_client_portal .fst_file_lists ul {
  list-style-type: none;
  margin: 0 0 1.5em 0;
}

#fluent_support_client_app .fs_client_portal .fst_file_lists a {
  display: inline-block;
  padding: 4px 10px;
  margin: 4px 6px 0 0;
}

#fluent_support_client_app .fs_client_portal .fst_file_lists a:hover {
  border-color: var(--p9-blue);
  text-decoration: none;
}

/* Reply box */
#fluent_support_client_app .fs_client_portal .fs_ticket_reply_box {
  margin-top: 8px;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_reply_text {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  font-family: var(--p9-fb);
  font-size: 15px;
  color: var(--p9-text);
  background: #ffffff;
  border: 1px solid var(--p9-rule);
  border-radius: var(--p9-radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_reply_text:focus {
  outline: none;
  border-color: var(--p9-blue);
  box-shadow: 0 0 0 3px var(--p9-blue-soft);
}

#fluent_support_client_app .fs_client_portal .fs_ticket_alert {
  display:none;	
}
#fluent_support_client_app .fs_client_portal .fs_ticket_alert .el-alert--info.is-light {
  background: var(--p9-blue-soft);
  color: var(--p9-blue-dk);
  border: 1px solid #cfe1f1;
  border-radius: var(--p9-radius-sm);
}

/* --------------------------------------------------------------------------
   7. New ticket form
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal .fs_ticket_header h2,
#fluent_support_client_app .fs_client_portal .fs_ticket_header h3 {
  margin-top: 0;
}

#fluent_support_client_app .fs_client_portal .el-form-item__label,
#fluent_support_client_app .fs_client_portal .fs_input_label,
#fluent_support_client_app .fs_client_portal .fs_ticket_details_label {
  font-family: var(--p9-fb);
  font-size: 14px;
  font-weight: 600 !important;  /* plugin sets font-weight:500 !important on .el-form-item__label */
  color: var(--p9-ink-2);
  padding-bottom: 6px;
}

#fluent_support_client_app .fs_client_portal .el-input__wrapper,
#fluent_support_client_app .fs_client_portal .el-select__wrapper {
  border-radius: var(--p9-radius-sm);
  box-shadow: 0 0 0 1px var(--p9-rule) inset; /* Element draws borders as inset shadow */
  padding: 4px 12px;
}

#fluent_support_client_app .fs_client_portal .el-input__wrapper.is-focus,
#fluent_support_client_app .fs_client_portal .el-select__wrapper.is-focused {
  /* plugin sets box-shadow + border-color !important on the focus state inside
     .fs_create_ticket_container and .fs_custom_fields_wrap */
  box-shadow: 0 0 0 1px var(--p9-blue) inset, 0 0 0 3px var(--p9-blue-soft) !important;
  border-color: var(--p9-blue) !important;
}

#fluent_support_client_app .fs_client_portal .wp_vue_editor,
#fluent_support_client_app .fs_client_portal .wp_vue_editor_plain {
  border: 1px solid var(--p9-rule);
  border-radius: var(--p9-radius-sm);
}

#fluent_support_client_app .fs_client_portal .fs_tk_help {
  /* plugin sets color, margin-top, width and display !important here */
  color: var(--p9-muted) !important;
  font-size: 13px;
  margin-top: 4px !important;
}

/* BetterDocs suggestions. Load-bearing since D14, so it should look like an
   answer worth reading rather than a dropdown. */
#fluent_support_client_app .fs_client_portal .fs_tk_suggestions {
  background: var(--p9-amber-soft);
  border: 1px solid #f4e2c8;
  border-radius: var(--p9-radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
}

#fluent_support_client_app .fs_client_portal .fs_tk_suggestions a {
  color: var(--p9-amber);
  font-weight: 500;
}

#fluent_support_client_app .fs_client_portal .fs_tk_suggestions a:hover {
  color: var(--p9-ink);
}

/* Uploader */
#fluent_support_client_app .fs_client_portal .fs-file-uploader,
#fluent_support_client_app .fs_client_portal .upload-area {
  padding-top:20px;
}

#fluent_support_client_app .fs_client_portal .fs_upload_instruction,
#fluent_support_client_app .fs_client_portal .fs_upload_info,
#fluent_support_client_app .fs_client_portal .fc-upload-text {
  color: var(--p9-muted);
  font-size: 13.5px;
}

/* Custom field rows */
#fluent_support_client_app .fs_client_portal .fs_custom_fields_wrap {
  margin-top: 4px;
}

#fluent_support_client_app .fs_client_portal .fs_tk_row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#fluent_support_client_app .fs_client_portal .fs_tk_col {
  flex: 1 1 240px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   8. Buttons
   One primary colour, per modernization Phase 2. CTA orange for the action
   that submits, navy outline for everything secondary.
   -------------------------------------------------------------------------- */

#fluent_support_client_app .fs_client_portal .fs_create_ticket_btn,
#fluent_support_client_app .fs_client_portal .fs_create_ticket_button,
#fluent_support_client_app .fs_client_portal .el-button--primary,
#fluent_support_client_app .fs_client_portal .fs_reply_btn {
  /* Kept deliberately. Not needed against Fluent Support - the ID prefix wins
     that on its own - but `button` is the one selector a WordPress theme or a
     Customizer colour setting is most likely to style globally, and neither
     GeneratePress's parent sheet nor the Customizer output was inspectable
     when this was written. Cheap insurance on the one control that must not
     come out the wrong colour. */
  background: var(--p9-cta) !important;
  border-color: var(--p9-cta) !important;
  color: #ffffff !important;
  border-radius: var(--p9-radius-sm);
  font-family: var(--p9-fb);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 20px;
  text-transform: none;
  box-shadow: var(--p9-shadow-sm);
  transition: background .15s ease, border-color .15s ease;
}

#fluent_support_client_app .fs_client_portal .fs_create_ticket_btn:hover,
#fluent_support_client_app .fs_client_portal .fs_create_ticket_button:hover,
#fluent_support_client_app .fs_client_portal .el-button--primary:hover {
  background: var(--p9-cta-dk) !important;
  border-color: var(--p9-cta-dk) !important;
}

#fluent_support_client_app .fs_client_portal .fs_close_ticket,
#fluent_support_client_app .fs_client_portal .fs_ticket_refresh_btn {
  border: 1px solid var(--p9-rule);
  border-radius: var(--p9-radius-sm);
  background: #ffffff;
  color: var(--p9-ink-2);
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

#fluent_support_client_app .fs_client_portal .fs_close_ticket:hover,
#fluent_support_client_app .fs_client_portal .fs_ticket_refresh_btn:hover {
  border-color: var(--p9-navy);
  color: var(--p9-navy);
}

#fluent_support_client_app .fs_client_portal .fs_ticket_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#fluent_support_client_app .fs_client_portal .fs_ticket_actions_btn {
  display: flex;
  gap: 8px;
}

#fluent_support_client_app .fs_client_portal .fs_sorting,
#fluent_support_client_app .fs_client_portal .fs_filter_right {
  align-content:center;
}

/* --------------------------------------------------------------------------
   9. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
  #fluent_support_client_app .fs_client_portal .fs_tickets_container,
  #fluent_support_client_app .fs_client_portal .fs_ticket_form_container,
  #fluent_support_client_app .fs_client_portal .fs_create_ticket_container {
    padding: 16px;
    border-radius: var(--p9-radius-sm);
  }

  #fluent_support_client_app .fs_client_portal .fs_tickets_header,
  #fluent_support_client_app .fs_client_portal .fs_filter_container {
    flex-direction: column;
    align-items: stretch;
  }

  #fluent_support_client_app .fs_client_portal .fs_ticket_subject {
    font-size: 20px;
  }

  #fluent_support_client_app .fs_client_portal .fs_tk_row {
    flex-direction: column;
    gap: 12px;
  }
}