/*
 * TR365 Component Library
 * Reusable UI component classes using design tokens from theme.css.
 * See: docs/superpowers/specs/2026-04-06-tr365-components-button-system-design.md
 *
 * Naming: .tr-{component}[-{variant}[-{modifier}]]
 * Usage:  class="tr-btn tr-btn-primary tr-btn-md"
 */

/* FlexiDatepicker theme lives in its own file so it can be the single source
   of truth. Legacy pages that don't load this stylesheet inject the same file
   directly via Controls/ReCalculateTC.ascx.cs. Per the CSS spec an @import must
   precede all style rules, so it stays at the very top here. */
@import url('flexiDatepicker/flexidatepicker-tr365-theme.css');

/* ============================================================
   UNIVERSAL BOX-SIZING (redesigned pages only)
   Tailwind Preflight sets box-sizing: border-box globally, but
   Preflight is disabled to avoid bleeding into legacy pages.
   This stylesheet is loaded only by redesigned pages, so this
   rule is scoped to them and does not affect legacy layouts.
   ============================================================ */
*, ::before, ::after {
  box-sizing: border-box;
}

/* ============================================================
   TAILWIND PREFLIGHT FIX
   reset.css sets border:0 on specific elements (nav, div, etc.),
   removing border-style. Tailwind's border utility only sets
   border-width — it needs border-style:solid to render.
   This matches reset.css specificity with the same element list.
   ============================================================ */
*, ::before, ::after,
html, body, div, span, nav, section, article, aside, header, footer,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, img, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
figure, hgroup, menu, mark, audio, video {
    border-style: solid;
    border-width: 0;
}

/* ============================================================
   BUTTONS
   Three composable layers: base + type/style + size
   ============================================================ */

/* --- Base --- */
.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border-radius: var(--tr-radius-radius-8, 8px);
  gap: var(--tr-spacing-spacing-4, 4px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1;
  box-sizing: border-box;
}

/* --- Sizes --- */
.tr-btn-md {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
}
.tr-btn-md svg { width: 20px; height: 20px; flex-shrink: 0; }

.tr-btn-sm {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 20px;
}
.tr-btn-sm svg { width: 20px; height: 20px; flex-shrink: 0; }

.tr-btn-xs {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 16px;
}
.tr-btn-xs svg { width: 16px; height: 16px; flex-shrink: 0; }

.tr-btn-xxs {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 16px;
}
.tr-btn-xxs svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Icon-only modifier --- */
.tr-btn-icon { padding: 0; }
.tr-btn-icon.tr-btn-md  { width: 40px; }
.tr-btn-icon.tr-btn-sm  { width: 36px; }
.tr-btn-icon.tr-btn-xs  { width: 32px; }
.tr-btn-icon.tr-btn-xxs { width: 28px; }

/* --- Disabled state (shared) --- */
.tr-btn[disabled],
.tr-btn.tr-btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   BUTTON TYPE + STYLE VARIANTS
   Each class includes: default, hover, disabled, focus-visible
   ============================================================ */

/* --- Primary (Filled) --- */
.tr-btn-primary {
  background-color: var(--tr-color-foundation-brand-primary-500, #19765F);
  color: var(--tr-color-static-static-white, '#ffffff');
}
.tr-btn-primary:hover {
  background-color: var(--tr-color-foundation-brand-primary-700, #125443);
}
.tr-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-primary-200, #95C0B5);
}

/* --- Primary (Stroke) --- */
.tr-btn-primary-stroke {
  background-color: var(--tr-color-bg-white-0, #FFF);
  border-color: var(--tr-color-foundation-brand-primary-500, #19765F);
  color: var(--tr-color-foundation-brand-primary-500, #19765F);
}
.tr-btn-primary-stroke:hover {
  background-color: rgba(25, 118, 95, 0.08);
}
.tr-btn-primary-stroke:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-primary-200, #95C0B5);
}

/* --- Primary (Lighter) --- */
.tr-btn-primary-lighter {
  background-color: rgba(25, 118, 95, 0.08);
  color: var(--tr-color-foundation-brand-primary-500, #19765F);
}
.tr-btn-primary-lighter:hover {
  background-color: rgba(25, 118, 95, 0.12);
}
.tr-btn-primary-lighter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-primary-200, #95C0B5);
}

/* --- Primary (Ghost) --- */
.tr-btn-primary-ghost {
  background-color: var(--tr-color-bg-white-0, #FFF);
  color: var(--tr-color-foundation-brand-primary-500, #19765F);
}
.tr-btn-primary-ghost:hover {
  background-color: rgba(25, 118, 95, 0.08);
}
.tr-btn-primary-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-primary-200, #95C0B5);
}

/* --- Error (Filled) --- */
.tr-btn-error {
  background-color: var(--tr-color-foundation-status-red-700, #D02533);
  color: #fff;
}
.tr-btn-error:hover {
  background-color: var(--tr-color-foundation-status-red-800, #AD1F2B);
}
.tr-btn-error:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-status-red-200, #FFC0C5);
}

/* --- Error (Stroke) --- */
.tr-btn-error-stroke {
  background-color: var(--tr-color-bg-white-0, #FFF);
  border-color: var(--tr-color-foundation-status-red-700, #D02533);
  color: var(--tr-color-foundation-status-red-700, #D02533);
}
.tr-btn-error-stroke:hover {
  background-color: rgba(208, 37, 51, 0.08);
}
.tr-btn-error-stroke:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-status-red-200, #FFC0C5);
}

/* --- Error (Lighter) --- */
.tr-btn-error-lighter {
  background-color: rgba(208, 37, 51, 0.08);
  color: var(--tr-color-foundation-status-red-700, #D02533);
}
.tr-btn-error-lighter:hover {
  background-color: rgba(208, 37, 51, 0.12);
}
.tr-btn-error-lighter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-status-red-200, #FFC0C5);
}

/* --- Error (Ghost) --- */
.tr-btn-error-ghost {
  background-color: var(--tr-color-bg-white-0, #FFF);
  color: var(--tr-color-foundation-status-red-700, #D02533);
}
.tr-btn-error-ghost:hover {
  background-color: rgba(208, 37, 51, 0.08);
}
.tr-btn-error-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-status-red-200, #FFC0C5);
}

/* --- Neutral (Filled) --- */
.tr-btn-neutral {
  background-color: var(--tr-color-foundation-brand-neutral-800, #2E3947);
  color: #fff;
}
.tr-btn-neutral:hover {
  background-color: var(--tr-color-foundation-brand-neutral-900, #232C36);
}
.tr-btn-neutral:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-neutral-200, #B0BAC5);
}

/* --- Neutral (Stroke) --- */
.tr-btn-neutral-stroke {
  background-color: var(--tr-color-bg-white-0, #FFF);
  border-color: var(--tr-color-foundation-brand-neutral-800, #2E3947);
  color: var(--tr-color-text-secondary, #B0BAC5);
}
.tr-btn-neutral-stroke:hover {
  background-color: rgba(46, 57, 71, 0.08);
}
.tr-btn-neutral-stroke:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-neutral-200, #B0BAC5);
}

/* --- Neutral (Lighter) --- */
.tr-btn-neutral-lighter {
  background-color: rgba(46, 57, 71, 0.08);
  color: var(--tr-color-foundation-brand-neutral-800, #2E3947);
}
.tr-btn-neutral-lighter:hover {
  background-color: rgba(46, 57, 71, 0.12);
}
.tr-btn-neutral-lighter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-neutral-200, #B0BAC5);
}

/* --- Neutral (Ghost) --- */
.tr-btn-neutral-ghost {
  background-color: var(--tr-color-bg-white-0, #FFF);
  color: var(--tr-color-foundation-brand-neutral-800, #2E3947);
}
.tr-btn-neutral-ghost:hover {
  background-color: rgba(46, 57, 71, 0.08);
}
.tr-btn-neutral-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-neutral-200, #B0BAC5);
}


/* ============================================================
   INPUT FIELDS
   Composable layers: base + size, with state pseudo-classes
   Also includes: .tr-label, .tr-hint
   ============================================================ */

/* --- Input Base --- */
.tr-input {
  display: block;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: var(--tr-color-text-primary, #171C22);
  background-color: var(--tr-color-bg-white-0, #FFFFFF);
  border: 1px solid var(--tr-color-stroke-softer-100, #CAD0D8);
  border-radius: var(--tr-radius-radius-8, 8px);
  box-shadow: 0px 1px 2px 0px rgba(10, 13, 20, 0.03);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  outline: none;
}
.tr-input::placeholder {
  color: var(--tr-color-text-tertiary, #76869A);
}
.tr-input:hover {
  background-color: var(--tr-color-bg-weak-50, #EEF0F2);
  border-color: transparent;
  box-shadow: none;
}
.tr-input:focus {
  border-color: var(--tr-color-stroke-stronger-950, #171C22);
  box-shadow: 0 0 0 2px var(--tr-color-bg-white-0, #FFFFFF), 0 0 0 4px rgba(84, 104, 129, 0.16);
}

/* --- Input Sizes --- */
.tr-input-md {
  height: 36px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 11px;
  padding-right: 11px;
  font-size: 13px;
  line-height: 18px;
}
.tr-input-sm {
  height: 32px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 11px;
  padding-right: 11px;
  font-size: 13px;
  line-height: 18px;
}
.tr-input-xs {
  height: 29px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 7px;
  padding-right: 7px;
  font-size: 13px;
  line-height: 18px;
}

/* --- Input with left icon (calendar, search, etc.) --- */
.tr-input-icon-left {
  padding-left: 2.5rem !important;
}

/* --- Input Error State --- */
.tr-input-error {
  border-color: var(--tr-color-stroke-brand-error-700, #D02533);
  box-shadow: none;
}
.tr-input-error:hover {
  background-color: var(--tr-color-bg-white-0, #FFFFFF);
  border-color: var(--tr-color-stroke-brand-error-700, #D02533);
}
.tr-input-error:focus {
  border-color: var(--tr-color-stroke-brand-error-700, #D02533);
  box-shadow: 0 0 0 2px var(--tr-color-bg-white-0, #FFFFFF), 0 0 0 4px rgba(208, 37, 51, 0.16);
}

/* --- Input Disabled State --- */
.tr-input[disabled],
.tr-input.tr-input-disabled {
  background-color: var(--tr-color-bg-weak-50, #EEF0F2);
  color: var(--tr-color-text-disabled, #8C9AAB);
  cursor: default;
  box-shadow: none;
}
.tr-input[disabled]::placeholder {
  color: var(--tr-color-text-disabled, #8C9AAB);
}
.tr-input[disabled]:hover {
  background-color: var(--tr-color-bg-weak-50, #EEF0F2);
  border-color: var(--tr-color-stroke-softer-100, #CAD0D8);
}

/* --- Label --- */
.tr-label {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.078px;
  color: var(--tr-color-text-primary, #171C22);
}
.tr-label-required {
  color: var(--tr-color-text-error, #AD1F2B);
}
.tr-label-sublabel {
  font-weight: 400;
  color: var(--tr-color-text-secondary, #4C5F75);
}
.tr-label-disabled {
  color: var(--tr-color-text-disabled, #8C9AAB);
}

/* --- Hint Text --- */
.tr-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  color: var(--tr-color-text-secondary, #4C5F75);
}
.tr-hint-error {
  color: var(--tr-color-text-error, #AD1F2B);
}
.tr-hint-disabled {
  color: var(--tr-color-text-disabled, #8C9AAB);
}


/* ============================================================
   TYPOGRAPHY
   Titles, Labels, Paragraphs, Sub-headings, Docs
   Colors use theme tokens for automatic dark mode support.
   Requires: Inter + Inter Display from Google Fonts.
   ============================================================ */

/* --- Shared font feature settings --- */
.tr-h1, .tr-h2, .tr-h3, .tr-h4, .tr-h5, .tr-h6,
.tr-label-xl, .tr-label-lg, .tr-label-md, .tr-label-sm, .tr-label-xs,
.tr-p-xl, .tr-p-lg, .tr-p-md, .tr-p-sm, .tr-p-xs,
.tr-subheading-md, .tr-subheading-sm, .tr-subheading-xs, .tr-subheading-xxs,
.tr-doc-label, .tr-doc-p {
  font-style: normal;
  color: var(--tr-color-text-primary, #171C22);
  font-feature-settings: 'ss11' 1, 'calt' 0, 'liga' 0;
}

/* --- Titles (Inter Display, SemiBold 600) --- */
.tr-h1 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -0.56px;
}
.tr-h2 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.48px;
}
.tr-h3 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.4px;
}
.tr-h4 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.16px;
}
.tr-h5 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
}
.tr-h6 {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0;
}

/* --- Labels (Inter, Medium 500) --- */
.tr-label-xl {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.36px;
}
.tr-label-lg {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.27px;
}
.tr-label-md {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.176px;
}
.tr-label-sm {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.084px;
}
.tr-label-xs {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

/* --- Paragraphs (Inter, Regular 400) --- */
.tr-p-xl {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.36px;
}
.tr-p-lg {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.27px;
}
.tr-p-md {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.176px;
}
.tr-p-sm {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.084px;
}
.tr-p-xs {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

/* --- Sub-headings (Inter, Medium 500, UPPERCASE) --- */
.tr-subheading-md {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
}
.tr-subheading-sm {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
}
.tr-subheading-xs {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}
.tr-subheading-xxs {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.22px;
  text-transform: uppercase;
}

/* --- Docs (Inter, special font-feature-settings) --- */
.tr-doc-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 32px;
  letter-spacing: -0.27px;
  font-feature-settings: 'ss11' 1, 'calt' 0, 'liga' 0, 'cv09' 1;
}
.tr-doc-p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.24px;
  font-feature-settings: 'ss11' 1, 'calt' 0, 'liga' 0, 'cv09' 1;
}

/* ============================================================
   SWITCH / TOGGLE
   Uses easy-toggle-state library. The .is-active class is
   toggled by the library on click.
   ============================================================ */
.tr-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background-color: var(--tr-color-foundation-brand-neutral-300, #8C9AAB);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
  padding: 0;
  flex-shrink: 0;
  outline: none;
}
.tr-switch.is-active {
  background-color: var(--tr-color-foundation-brand-primary-500, #19765F);
}
.tr-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--tr-color-static-static-white, #FFFFFF);
  border-radius: 9999px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.tr-switch.is-active .tr-switch-knob {
  transform: translateX(16px);
}
.tr-switch:focus-visible {
  outline: 2px solid var(--tr-color-foundation-brand-primary-500, #19765F);
  outline-offset: 2px;
}

/* --- Text color utilities (for dark mode support) --- */
.tr-text-primary   { color: var(--tr-color-text-primary, #171C22); }
.tr-text-secondary { color: var(--tr-color-text-secondary, #4C5F75); }
.tr-text-tertiary  { color: var(--tr-color-text-tertiary, #76869A); }
.tr-text-disabled  { color: var(--tr-color-text-disabled, #8C9AAB); }
.tr-text-error     { color: var(--tr-color-text-error, #AD1F2B); }


/* ============================================================
   SLIMSELECT TR365 THEME
   Styles SlimSelect dropdowns to match TR365 design system.
   Uses CSS variables for automatic dark mode support.
   SlimSelect v2 uses CSS borders for the arrow, not SVG.
   ============================================================ */

/* --- Reset: prevent .tr-input styles from leaking into SlimSelect elements --- */
.ss-main.tr-input,
.ss-content.tr-input,
.ss-content.tr-input-md,
.ss-content.tr-input-sm {
    box-shadow: none !important;
    appearance: unset !important;
    -webkit-appearance: unset !important;
    padding: 0;
}
.ss-content.tr-input,
.ss-content.tr-input-md,
.ss-content.tr-input-sm {
  height: auto !important;
  min-height: auto !important;
}

.select-has-prefix-icon.ss-main.tr-input {
  padding-left: 24px;
}

/* --- Main container --- */
.ss-main {
    display: flex;
    border: 1px solid var(--tr-color-stroke-softer-100, #CAD0D8) !important;
    border-radius: var(--tr-radius-radius-8, 8px) !important;
    background-color: var(--tr-color-bg-white-0, #FFFFFF) !important;
    font-size: 13px !important;
    color: var(--tr-color-text-primary, #171C22) !important;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 20, 0.03) !important;
    padding: 0!important;
    min-height: auto;
}
.ss-main:focus-within {
    border-color: var(--tr-color-stroke-stronger-950, #171C22) !important;
    box-shadow: 0 0 0 2px var(--tr-color-bg-white-0, #FFFFFF), 0 0 0 4px rgba(84, 104, 129, 0.16) !important;
}

/* --- Selected value text --- */
.ss-main .ss-values {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.ss-main .ss-values .ss-single {
    color: var(--tr-color-text-primary, #171C22) !important;
    padding: 7px 11px !important;
    margin: 0 !important;
    line-height: 16px;
}

/* --- Arrow (CSS-based chevron in SlimSelect v2) --- */
.ss-main .ss-arrow {
    margin-right: 12px !important;
}
.ss-main .ss-arrow span {
    border-color: var(--tr-color-text-secondary, #4C5F75) !important;
}

/* --- Dropdown content panel --- */
.ss-content {
    border: 1px solid var(--tr-color-stroke-softer-100, #CAD0D8) !important;
    border-radius: var(--tr-radius-radius-8, 8px) !important;
    background-color: var(--tr-color-bg-white-0, #FFFFFF) !important;
    box-shadow: 0 4px 12px rgba(10, 13, 20, 0.12) !important;
}
/* Scope the 4px gap to "below" only — for "above" SlimSelect sets a large
   negative inline margin-top to lift the panel over the input; an !important
   margin-top here would clobber it and keep the panel stuck below. */
.ss-content.ss-dir-below {
    margin-top: 4px !important;
}

/* --- Search input inside dropdown --- */
.ss-content .ss-search {
    padding: 8px !important;
}
.ss-content .ss-search input {
    background-color: var(--tr-color-bg-white-0, #FFFFFF) !important;
    color: var(--tr-color-text-primary, #171C22) !important;
    border: 1px solid var(--tr-color-stroke-softer-100, #CAD0D8) !important;
    border-radius: var(--tr-radius-radius-8, 8px) !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
    outline: none !important;
}
.ss-content .ss-search input:focus {
    border-color: var(--tr-color-stroke-stronger-950, #171C22) !important;
}
.ss-content .ss-search input::placeholder {
    color: var(--tr-color-text-tertiary, #76869A) !important;
}

/* --- Options list --- */
.ss-content .ss-list {
    max-height: 250px !important;
}
.ss-content .ss-list .ss-option {
    color: var(--tr-color-text-primary, #171C22) !important;
    padding: 7px 11px !important;
    font-size: 13px !important;
    line-height: 18px !important;
}
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
    background-color: var(--tr-color-bg-weak-50, #EEF0F2) !important;
}
.ss-content .ss-list .ss-option.ss-selected {
    background-color: var(--tr-color-foundation-brand-primary-50, #E0F2EF) !important;
    color: var(--tr-color-foundation-brand-primary-700, #125443) !important;
}

/* ---------- Folder tabs ----------
   Horizontal tab strip used as in-page section navigation.
   Tabs have rounded top corners and sit on a shared baseline border;
   the active tab fills with brand-primary and visually joins the
   content area below. Theme-token driven for light + dark modes. */
.tr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--tr-color-stroke-weak-50, #EEF0F2);
}

.tr-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid var(--tr-color-stroke-weak-50, #EEF0F2);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--tr-color-bg-weak-50, #EEF0F2);
    color: var(--tr-color-text-secondary, #4C5F75);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: -1px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tr-tab:hover {
    background: var(--tr-color-bg-softer-100, #CAD0D8);
    color: var(--tr-color-text-primary, #171C22);
    text-decoration: none;
}

.tr-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-primary-200, rgba(25, 118, 95, 0.24));
}

.tr-tab.is-active,
.tr-tab[aria-current="page"] {
    background: var(--tr-color-bg-brand-primary-strong-700, #125443);
    color: var(--tr-color-static-static-white, #FFFFFF);
    border-color: var(--tr-color-bg-brand-primary-strong-700, #125443);
}

.tr-tab.is-active:hover,
.tr-tab[aria-current="page"]:hover {
    background: var(--tr-color-bg-brand-primary-strong-700, #125443);
    color: var(--tr-color-static-static-white, #FFFFFF);
}