/* ================================================================
   app-form-fields.css — centralized form field component
   Loaded globally after app-components.css.
   Consumes --app-* tokens from app-components.css :root.

   VARIANTS
   ────────
   ff-card [ff-card--sm | ff-card--lg]
               Bordered card per field group. Card carries all border
               and state styling; inputs inside have NO border.

   ff-inline-group
               Horizontal bar of fields for row-level editing.
               Inputs inside keep their own border (editing context).

   ff-field    Base building block (label + input stacked).
               Used inside both variants.

   SIZES (card only)
   ─────────────────
   ff-card--sm   Compact — regular data-entry forms, modals
   ff-card       Medium  — default, general purpose
   ff-card--lg   Large   — prominent / hero inputs

   CHANGING THE WHOLE APP'S INPUT LOOK
   ─────────────────────────────────────
   Edit only this file. Component templates apply ff-* classes
   and inherit from here — they own no input appearance themselves.

   ff-search               Search bar: input + optional action button.
   ff-search--collapsible  Wraps search in a toggle trigger / body pair.
================================================================ */

.ff-field,
.ff-field * {
    box-sizing: border-box;
}

/* ── Shared tokens ───────────────────────────────────────── */
/* On :root so every ff-* element (card, btn, icon, inline-group)
   can read them regardless of nesting order. */
:root {
    --ff-surface:       rgba(0, 0, 0, 0.022);
    --ff-surface-alt:   rgba(0, 0, 0, 0.042);
    --ff-border:        rgba(33, 37, 41, 0.14);
    --ff-border-strong: rgba(33, 37, 41, 0.26);
    --ff-text:          var(--app-text,        #212529);
    --ff-muted:         rgba(108, 117, 125, 0.88);
    --ff-accent:        var(--app-accent,      #0a5dc2);
    --ff-success:       var(--app-success,     #198754);
    --ff-error:         var(--app-danger,      #dc3545);
}

.ff-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
    font-family: inherit;

}

/* ── Label ───────────────────────────────────────────────── */
/* Same color and weight as placeholder — no visual hierarchy split */
.ff-label {
    font-weight: 500;
    /*color: var(--ff-muted);*/
    line-height: 1;
    user-select: none;
}

/* ── Input (base — when used outside a card) ─────────────── */
.ff-input,
.ff-select,
.ff-textarea {
    width: 100%;
    min-width: 0;
    border: 1.5px solid var(--ff-border);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: clamp(13px, 2vw, 15px);
    font-weight: 500;
    line-height: 1.5;
    font-family: inherit;
   
    background: transparent;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ff-input:hover,
.ff-select:hover {
    border-color: var(--ff-border-strong);
}
.ff-input:focus,
.ff-select:focus,
.ff-textarea:focus {
    border-color: var(--ff-accent);
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ff-accent) 14%, transparent);
}
.ff-input::placeholder,
.ff-textarea::placeholder {
    /*color: var(--ff-muted);*/
    font-weight: 400;
    opacity: 1;
}

/* ── Status / validation ─────────────────────────────────── */
.ff-status {
    font-weight: 500;
    color: var(--ff-muted);
}
.ff-status--valid { color: var(--ff-success); }
.ff-status--error { color: var(--ff-error); }


/* ================================================================
   VARIANT: Card
   ────────────────────────────────────────────────────────────────
   The card border carries state. Inputs inside are borderless —
   the card shell IS the visual container.

   Skeleton:
     <div class="ff-card [ff-card--sm|ff-card--lg] [ff-card--valid|ff-card--error]">
       <div class="ff-card-header [ff-card-header--pair]">
         <span class="ff-label">Label</span>
         <div class="ff-card-actions">
           <button class="ff-btn ff-btn--text">Half</button>
         </div>
       </div>
       <div class="ff-card-body [ff-card-body--single|ff-card-body--pair]">
         <div class="ff-field">
           <input class="ff-input" …>
         </div>
         <div class="ff-card-actions">
           <button class="ff-btn">
             <span class="ff-icon">●</span>
             <span>ADA</span><span>▾</span>
           </button>
         </div>
       </div>
       <div class="ff-card-footer">
         <span class="ff-status [ff-status--valid|ff-status--error]">…</span>
         <div class="ff-card-actions">…</div>
       </div>
     </div>
================================================================ */

.ff-card {
    padding: clamp(16px, 3.5vw, 24px);
    border: 1px solid var(--ff-border);
    border-radius: clamp(16px, 3.5vw, 24px);
    background: var(--ff-surface);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.15s;
}
.ff-card + .ff-card {
    margin-top: 14px;
}

/* State borders — translucent mix, not harsh solid */
.ff-card--valid {
    border-color: color-mix(in srgb, var(--ff-success) 55%, transparent);
}
.ff-card--error {
    border-color: color-mix(in srgb, var(--ff-error) 62%, transparent);
}

/* ── Size: Small ── */
.ff-card--sm {
    padding: clamp(12px, 2.5vw, 16px);
    border-radius: clamp(12px, 2.5vw, 16px);
}
.ff-card--sm .ff-label {
    font-size: clamp(11px, 1.8vw, 13px);
}
.ff-card--sm .ff-input,
.ff-card--sm .ff-select,
.ff-card--sm .ff-textarea {
    font-size: clamp(13px, 2vw, 16px);
}
.ff-card--sm .ff-status {
    font-size: clamp(11px, 1.6vw, 13px);
}

/* ── Size: Medium (default) ── */
.ff-card .ff-label {
    font-size: clamp(13px, 2.2vw, 16px);
}
.ff-card .ff-input,
.ff-card .ff-select,
.ff-card .ff-textarea {
    font-size: clamp(16px, 2.8vw, 20px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.ff-card .ff-status {
    font-size: clamp(12px, 2vw, 15px);
}

/* ── Size: Large ── */
.ff-card--lg {
    padding: clamp(18px, 4vw, 28px);
    border-radius: clamp(20px, 4vw, 28px);
}
    .ff-card--lg .ff-label {
        font-size: clamp(14px, 2.5vw, 18px);
        font-size: var(--text-md);
    }
.ff-card--lg .ff-input,
.ff-card--lg .ff-select,
.ff-card--lg .ff-textarea {
    
    font-size: var(--text-md);
    letter-spacing: -0.04em;
}
.ff-card--lg .ff-status {
    font-size: clamp(13px, 2.2vw, 16px);
}

/* ── Card inputs have no border — the card IS the container ── */
.ff-card .ff-input,
.ff-card .ff-select,
.ff-card .ff-textarea {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    width: 100%;
}
.ff-card .ff-input::placeholder,
.ff-card .ff-textarea::placeholder {
    color: var(--ff-muted);
    font-weight: 400;
}

/* ── Card header ── */
.ff-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
/*    color: var(--ff-muted);*/
}
.ff-card-header--pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

/* ── Card body ── */
.ff-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 3vw, 22px);
}
.ff-card-body--single { grid-template-columns: 1fr; }
.ff-card-body--pair   {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ── Card footer ── */
.ff-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--ff-muted);
}
.ff-card-footer .ff-status {
    margin-right: auto;
}

/* ── Card / header actions cluster ── */
.ff-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Button (pill, transparent border → border appears on hover) ── */
.ff-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--ff-surface-alt);
    /*color: var(--ff-text);*/
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    font-family: inherit;
    font-size: clamp(13px, 2vw, 15px);
    transition: border-color 0.15s;
}
.ff-btn:hover {
    border-color: var(--ff-border-strong);
}
.ff-btn--text {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    /*color: var(--ff-accent);*/
    font-size: clamp(12px, 2vw, 15px);
    font-weight: 500;
}
.ff-btn--text:hover {
    border: 0;
    opacity: 0.75;
}

/* ── Icon badge (circle inside a button) ── */
.ff-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    /*color: var(--ff-accent);*/
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.ff-card--lg .ff-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
}
.ff-card--sm .ff-icon {
    width: 24px;
    height: 24px;
    font-size: 13px;
}


/* ================================================================
   VARIANT: Inline Group
   ────────────────────────────────────────────────────────────────
   Row-level editor bar. Inputs are borderless — the accent border
   on the group itself is the visual container.

   LAYOUTS
   ───────
   (default)              Flex row — fields stacked side by side,
                          actions at the trailing end.

   ff-inline-group--pair  Grid 1fr 1fr + auto — two equal fields
                          with actions pinned to the right edge.

   ff-inline-group--pair-mid
                          Grid 1fr auto 1fr — actions sit in the
                          centre column between the two fields.

   SIZES  (add alongside any layout modifier)
   ─────
   ff-inline-group--sm    Compact
   ff-inline-group         Medium (default)
   ff-inline-group--lg    Large

   STATE
   ─────
   ff-inline-group--error

   Skeleton (default):
     <div class="ff-inline-group [--sm|--lg] [--error]">
       <div class="ff-field [ff-field--key]">
         <span class="ff-label">Key</span>
         <input class="ff-input" …>
       </div>
       <div class="ff-field [ff-field--val]">
         <span class="ff-label">Value</span>
         <input class="ff-input" …>
       </div>
       <div class="ff-inline-actions"> save / cancel </div>
       <span class="ff-status ff-status--error ff-inline-msg">…</span>
     </div>

   Skeleton (pair — actions end):
     <div class="ff-inline-group ff-inline-group--pair">
       <div class="ff-field">…</div>
       <div class="ff-field">…</div>
       <div class="ff-inline-actions">…</div>
     </div>

   Skeleton (pair — actions middle):
     <div class="ff-inline-group ff-inline-group--pair-mid">
       <div class="ff-field">…</div>
       <div class="ff-inline-actions">…</div>
       <div class="ff-field">…</div>
     </div>
================================================================ */

/* ── Base ── */
.ff-inline-group {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.55rem 0.75rem 0.55rem 0.85rem;
    border-left: 3px solid var(--ff-accent);
    border-top: 1px solid color-mix(in srgb, var(--ff-accent) 30%, transparent);
}
.ff-inline-group--error {
    border-left-color: var(--ff-error);
    border-top-color: color-mix(in srgb, var(--ff-error) 30%, transparent);
}

/* ── Pair layouts ── */
.ff-inline-group--pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: flex-end;
    flex-wrap: unset;
}
.ff-inline-group--pair-mid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: flex-end;
    flex-wrap: unset;
}
/* Trio: 3 fields + trailing actions — name(2fr) · generator(2fr) · type(1fr) · actions */
.ff-inline-group--trio {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: flex-end;
    flex-wrap: unset;
}

/* ── Fields inside the group ── */
.ff-inline-group .ff-field {
    flex: 1;
    min-width: 80px;
}

/* ── Inputs — borderless, transparent (group border is the container) ── */
.ff-inline-group .ff-input,
.ff-inline-group .ff-select,
.ff-inline-group .ff-textarea {
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
}

/* ── Size: Small ── */
.ff-inline-group--sm .ff-label  { font-size: clamp(11px, 1.8vw, 13px); }
.ff-inline-group--sm .ff-input,
.ff-inline-group--sm .ff-select { font-size: clamp(13px, 2vw, 16px); }
.ff-inline-group--sm .ff-status { font-size: clamp(11px, 1.6vw, 13px); }

/* ── Size: Medium (default) ── */
.ff-inline-group .ff-label  { font-size: clamp(13px, 2.2vw, 16px); }
.ff-inline-group .ff-input,
.ff-inline-group .ff-select { font-size: clamp(16px, 2.5vw, 16px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.ff-inline-group .ff-status { font-size: clamp(12px, 2vw, 15px); }

/* ── Size: Large ── */
.ff-inline-group--lg .ff-label  { font-size: clamp(16px, 2.5vw, 18px); }
.ff-inline-group--lg .ff-input,
.ff-inline-group--lg .ff-select { font-size: clamp(16px, 2.5vw, 16px); letter-spacing: -0.04em; }
.ff-inline-group--lg .ff-status { font-size: clamp(16px, 2.2vw, 18px); }

/* ── Width helpers ── */
.ff-field--key { max-width: 200px; }
.ff-field--val { flex: 2; }

/* ── Actions ── */
.ff-inline-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-bottom: 0.05rem;
    flex-shrink: 0;
}

/* ── Validation message — spans full width ── */
.ff-inline-msg {
    width: 100%;
    font-size: clamp(10px, 1.5vw, 12px);
    margin-top: 0.1rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 560px) {
    /* ff-card-body (1fr auto) is intentionally NOT collapsed — the auto column
       must stay beside the input so body-actions never wrap to a new row. */
    .ff-card-body--pair {
        grid-template-columns: 1fr 1fr;
    }
    .ff-btn {
        min-height: 40px;
        padding: 7px 13px;
    }
    /* Trio collapses to flex on narrow screens; fields wrap naturally */
    .ff-inline-group--trio {
        display: flex;
        flex-wrap: wrap;
    }
    .ff-inline-group--trio .ff-field {
        flex: 1 1 110px;
    }
}


/* ================================================================
   VARIANT: Select — multi
   ────────────────────────────────────────────────────────────────
   Applies when <select multiple> or <select size="N"> is used.
   Shows a visible option list instead of a dropdown.

   Inside a card the option list gets a subtle border to frame it
   (card inputs are otherwise borderless).
================================================================ */

.ff-select[multiple],
.ff-select[size] {
    min-height: 88px;
    padding: 0.2rem 0;
    overflow-y: auto;
    font-size: var(--text-sm, 13px);
}

.ff-select[multiple] option,
.ff-select[size] option {
    padding: 0.3rem 0.65rem;
    border-radius: 0;
}

.ff-select[multiple] option:checked,
.ff-select[size] option:checked {
    background: color-mix(in srgb, var(--ff-accent) 12%, transparent);
    color: var(--ff-accent);
}

.ff-card .ff-select[multiple],
.ff-card .ff-select[size] {
    border: 1px solid var(--ff-border);
    border-radius: 6px;
    padding-left: 0;
    min-height: 88px;
}


/* ================================================================
   VARIANT: Checkbox
   ────────────────────────────────────────────────────────────────
   Custom-styled native checkbox. No background on the unchecked
   state — border-only until selected.

   Skeleton:
     <div class="ff-check-group">
       <label class="ff-check-item">
         <input type="checkbox" class="ff-check" />
         <span class="ff-check-label">Label text</span>
       </label>
     </div>
================================================================ */

.ff-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ff-check-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
}

.ff-check {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ff-border-strong);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background 0.12s, border-color 0.12s;
}

.ff-check::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 2px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity 0.12s;
}

.ff-check:checked {
    background: var(--ff-accent);
    border-color: var(--ff-accent);
}

.ff-check:checked::after { opacity: 1; }

.ff-check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ff-accent) 14%, transparent);
}

.ff-check-label {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    line-height: 1.4;
}


/* ================================================================
   VARIANT: Toggle / switch
   ────────────────────────────────────────────────────────────────
   CSS-only pill toggle. Track is border-only when off; fills with
   accent when on. Thumb slides via translateX.

   Skeleton (single):
     <label class="ff-toggle">
       <input type="checkbox" class="ff-toggle-input" />
       <span class="ff-toggle-track"></span>
       <span class="ff-toggle-label">Label text</span>
     </label>

   Skeleton (group):
     <div class="ff-toggle-group">
       <label class="ff-toggle">…</label>
       <label class="ff-toggle">…</label>
     </div>
================================================================ */

.ff-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
}

.ff-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.ff-toggle-track {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    border: 1.5px solid var(--ff-border-strong);
    background: transparent;
    transition: background 0.18s, border-color 0.18s;
}

.ff-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ff-border-strong);
    transition: transform 0.18s, background 0.18s;
}

.ff-toggle-input:checked + .ff-toggle-track {
    background: var(--ff-accent);
    border-color: var(--ff-accent);
}

.ff-toggle-input:checked + .ff-toggle-track::after {
    transform: translateX(14px);
    background: #fff;
}

.ff-toggle-input:focus-visible + .ff-toggle-track {
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ff-accent) 14%, transparent);
}

.ff-toggle-label {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    line-height: 1.4;
}

.ff-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}


/* ================================================================
   BUTTON LIBRARY  —  ff-btn variants
   ────────────────────────────────────────────────────────────────
   All variants consume --ff-* tokens from :root.
   Border-first design: no background fills except ff-btn--solid.
   Active state signals via border-color, not background.

   VARIANTS
   ────────
   ff-btn                Pill; subtle surface bg; border on hover  (existing)
   ff-btn--text          No border, no background                  (existing)
   ff-btn--ghost         Border always visible; accent on hover/active
   ff-btn--outline       Accent-colored border; transparent background
   ff-btn--solid         Accent-filled; white text — primary CTA only
   ff-btn--clay          Claymorphism inset-press on :active
   ff-btn--shadow        Rounded pill with Bootstrap drop-shadow

   SHAPE MODIFIER
   ─────────────
   ff-btn--rounded       Rounded rectangle (~10px) instead of full pill

   SIZES  (combine with any variant)
   ─────
   ff-btn--sm            Compact (32px min-height)
   (default)             Medium  (44px min-height)
   ff-btn--lg            Large   (52px min-height)

   COLOR MODIFIERS  (combine with --ghost / --outline / --solid)
   ──────────────────────────────────────────────────────────────
   ff-btn--primary       --ff-accent   (blue)
   ff-btn--success       --ff-success  (green)
   ff-btn--danger        --ff-error    (red)
   ff-btn--muted         --ff-muted

   STATES
   ──────
   .active / [aria-pressed="true"]   selected / pressed
   :disabled                         disabled

   GROUP  (joined segmented strip)
   ───────────────────────────────
   ff-btn-group          Sharp segmented control  (10px radius)
   ff-btn-group--pill    Pill-shaped joined group (999px radius)
   ff-btn-group--icons   Icon-only cells (32×32)

   CHIPS  (selectable pill tags — like ds-synth-chip)
   ──────
   ff-chip               Pill chip; border only until active
   ff-chip.active        Active chip — accent border + light tint
   ff-chip-group         Flex wrap container

   ICON BUTTON
   ───────────
   ff-btn--icon          Square icon-only (36×36, 8px radius)
   ff-btn--icon--circle  Circular modifier

   Skeleton examples:
     <button class="ff-btn ff-btn--ghost ff-btn--sm">Label</button>
     <button class="ff-btn ff-btn--outline ff-btn--success">Save</button>
     <button class="ff-btn ff-btn--solid">Confirm</button>

     <div class="ff-btn-group ff-btn-group--pill">
       <button class="ff-btn">Chat</button>
       <button class="ff-btn active" aria-pressed="true">Agent</button>
     </div>

     <div class="ff-chip-group">
       <button class="ff-chip">Option A</button>
       <button class="ff-chip active">Option B</button>
     </div>

     <button class="ff-btn ff-btn--icon ff-btn--ghost" title="Settings">⚙</button>
================================================================ */

/* ── Active state (base) ── */
.ff-btn.active,
.ff-btn[aria-pressed="true"] {
    border-color: var(--ff-border-strong);
}

/* ── Disabled (shared) ── */
.ff-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Borderless: no visible border; tint for hover / active ── */
.ff-btn--borderless {
    border-color: transparent;
    background: transparent;
}
.ff-btn--borderless:hover:not(:disabled) {
    background: var(--ff-surface-alt);
    color: inherit;
}
.ff-btn--borderless.active,
.ff-btn--borderless[aria-pressed="true"] {
    background: color-mix(in srgb, var(--ff-accent) 8%, transparent);
    color: var(--ff-accent);
}

/* ── Shape: rounded rectangle instead of full pill ── */
.ff-btn--rounded {
    border-radius: 10px;
}

/* ── Sizes ── */
.ff-btn--sm {
    min-height: 32px;
    padding: 5px 12px;
    font-size: clamp(11px, 1.8vw, 13px);
    gap: 6px;
}
.ff-btn--lg {
    min-height: 52px;
    padding: 10px 22px;
    font-size: clamp(14px, 2.2vw, 16px);
    gap: 12px;
}

/* ── Color token — ghost / outline / solid all read --_c ── */
.ff-btn--ghost,
.ff-btn--outline,
.ff-btn--solid {
    --_c: var(--ff-btn-color, var(--ff-accent));
}
.ff-btn--primary { --ff-btn-color: var(--ff-accent);  }
.ff-btn--success { --ff-btn-color: var(--ff-success); }
.ff-btn--danger  { --ff-btn-color: var(--ff-error);   }
.ff-btn--muted   { --ff-btn-color: var(--ff-muted);   }

/* ── Ghost: border always visible; accent on hover / active ── */
.ff-btn--ghost {
    border-color: var(--ff-border-strong);
    background: transparent;
}
.ff-btn--ghost:hover:not(:disabled) {
    border-color: var(--_c);
    color: var(--_c);
    background: transparent;
}
.ff-btn--ghost.active,
.ff-btn--ghost[aria-pressed="true"] {
    border-color: var(--_c);
    color: var(--_c);
    background: color-mix(in srgb, var(--_c) 6%, transparent);
}

/* ── Outline: accent-colored border, transparent background ── */
.ff-btn--outline {
    border: 1.5px solid var(--_c);
    color: var(--_c);
    background: transparent;
}
.ff-btn--outline:hover:not(:disabled) {
    border-color: var(--_c);
    background: color-mix(in srgb, var(--_c) 8%, transparent);
}
.ff-btn--outline.active,
.ff-btn--outline[aria-pressed="true"] {
    background: color-mix(in srgb, var(--_c) 12%, transparent);
}

/* ── Solid: accent fill — use for primary CTA only ── */
.ff-btn--solid {
    border-color: var(--_c);
    background: var(--_c);
    color: #fff;
}
.ff-btn--solid:hover:not(:disabled) {
    filter: brightness(1.07);
}
.ff-btn--solid.active,
.ff-btn--solid[aria-pressed="true"] {
    filter: brightness(0.92);
}

/* ── Clay: inset-press claymorphism feel ── */
.ff-btn--clay {
    border-color: transparent;
    background: transparent;
    transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
}
.ff-btn--clay:active:not(:disabled) {
    box-shadow: inset 3px 3px 6px var(--clay-dark, rgba(0, 0, 0, 0.18)),
                inset -3px -3px 6px var(--clay-light, rgba(255, 255, 255, 0.9));
    transform: translateY(1px);
}

/* ── Shadow: Bootstrap rounded-shadow pill ── */
.ff-btn--shadow {
    border-radius: var(--bs-border-radius-xl, 2rem) !important;
    box-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) !important;
}


/* ================================================================
   BUTTON GROUP  —  joined segmented control
   ────────────────────────────────────────────────────────────────
   Skeleton (sharp):
     <div class="ff-btn-group">
       <button class="ff-btn">List</button>
       <button class="ff-btn active" aria-pressed="true">Grid</button>
       <button class="ff-btn">Table</button>
     </div>

   Skeleton (pill):
     <div class="ff-btn-group ff-btn-group--pill">
       <button class="ff-btn">Chat</button>
       <button class="ff-btn active" aria-pressed="true">Agent</button>
     </div>

   Skeleton (icon toggle):
     <div class="ff-btn-group ff-btn-group--icons">
       <button class="ff-btn ff-btn--icon active" aria-pressed="true" title="List">☰</button>
       <button class="ff-btn ff-btn--icon" title="Grid">⊞</button>
     </div>
================================================================ */
.ff-btn-group {
    display: inline-flex;
    border: 1px solid var(--ff-border-strong);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.ff-btn-group--pill {
    border-radius: 999px;
}
.ff-btn-group .ff-btn {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--ff-border-strong);
    min-height: 36px;
    padding: 5px 14px;
    font-size: clamp(12px, 1.9vw, 14px);
    background: transparent;
    transition: background 0.12s, color 0.12s;
}
.ff-btn-group .ff-btn:last-child {
    border-right: none;
}
.ff-btn-group .ff-btn:hover:not(:disabled) {
    background: var(--ff-surface-alt);
}
.ff-btn-group .ff-btn.active,
.ff-btn-group .ff-btn[aria-pressed="true"] {
    color: var(--ff-accent);
    border-right-color: var(--ff-border-strong);
}
/* Icon-only group (view toggle) */
.ff-btn-group--icons .ff-btn {
    min-height: 32px;
    width: 32px;
    padding: 0;
    justify-content: center;
}


/* ================================================================
   CHIPS  —  selectable pill tags
   ────────────────────────────────────────────────────────────────
   Skeleton:
     <div class="ff-chip-group">
       <button class="ff-chip">All</button>
       <button class="ff-chip active">Electronics</button>
       <button class="ff-chip" disabled>Archived</button>
     </div>
================================================================ */
.ff-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.ff-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.85rem;
    border: 1.5px solid var(--ff-border-strong);
    border-radius: 999px;
    background: transparent;
    font-size: clamp(12px, 1.9vw, 14px);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    color: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ff-chip:hover:not(:disabled) {
    border-color: var(--ff-accent);
    color: var(--ff-accent);
}
.ff-chip.active,
.ff-chip[aria-pressed="true"] {
    border-color: var(--ff-accent);
    color: var(--ff-accent);
    background: color-mix(in srgb, var(--ff-accent) 7%, transparent);
}
.ff-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}


/* ================================================================
   ICON BUTTON  —  compact square / circle icon-only
   ────────────────────────────────────────────────────────────────
   Skeleton:
     <button class="ff-btn ff-btn--icon ff-btn--ghost" title="Settings">⚙</button>
     <button class="ff-btn ff-btn--icon ff-btn--icon--circle ff-btn--solid" title="Send">→</button>
================================================================ */
.ff-btn--icon {
    width: 36px;
    height: 36px;
    min-height: unset;
    padding: 0;
    border-radius: 8px;
    justify-content: center;
    font-size: 16px;
    gap: 0;
}
.ff-btn--icon.ff-btn--sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    padding: 0;
    min-height: unset;
}
.ff-btn--icon.ff-btn--lg {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    font-size: 20px;
    padding: 0;
    min-height: unset;
}
.ff-btn--icon--circle {
    border-radius: 50% !important;
}


/* ================================================================
   ff-search — reusable search bar
   ────────────────────────────────────────────────────────────────
   Usage (standard):
     <div class="ff-search">
       <div class="ff-search-wrap">
         <i class="bi bi-search ff-search-icon"></i>
         <input class="ff-search-input" type="text" placeholder="Search…" />
         <button class="ff-search-btn">Go</button>      ← optional
       </div>
       <div class="ff-search-meta">…chips / status…</div>   ← optional
     </div>

   Collapsible variant — add ff-search--collapsible to root:
     <div class="ff-search ff-search--collapsible" ng-class="{'ff-search--open': vm.searchOpen}">
       <button class="ff-search-trigger" ng-click="vm.searchOpen = !vm.searchOpen">
         <i class="bi bi-search"></i> Search
         <i class="bi bi-chevron-down ff-search-chevron"></i>
       </button>
       <div class="ff-search-body">…wrap + meta…</div>
     </div>
================================================================ */

.ff-search {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: inherit;
}

/* ── Input row ── */
.ff-search-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--ff-border);
    border-radius: 8px;
    background: var(--ff-surface);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.ff-search-wrap:focus-within {
    border-color: var(--ff-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-accent) 12%, transparent);
}

.ff-search-icon {
    flex-shrink: 0;
    padding: 0 .55rem 0 .75rem;
    color: var(--ff-muted);
    font-size: 13px;
    pointer-events: none;
}

.ff-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: .45rem .5rem .45rem 0;
    font-size: clamp(13px, 2vw, 14px);
    color: var(--ff-text);
    outline: none;
    font-family: inherit;
}

.ff-search-input::placeholder {
    color: var(--ff-muted);
}

/* Count badge inside a button (e.g. "View 3") */
.ff-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    background: color-mix(in srgb, currentColor 15%, transparent);
    color: inherit;
}

/* Optional group dropdown attached to the right of the input */
.ff-search-select {
    flex-shrink: 0;
    align-self: stretch;
    border: none;
    border-left: 1.5px solid var(--ff-border);
    background: var(--ff-surface-alt);
    color: var(--ff-muted);
    font-size: 11px;
    font-weight: 500;
    padding: 0 .55rem 0 .6rem;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    max-width: 100px;
    transition: color .12s, background .12s;
    appearance: auto;
}

.ff-search-select:hover,
.ff-search-select:focus {
    color: var(--ff-text);
    background: color-mix(in srgb, var(--ff-accent) 7%, transparent);
}

/* Optional right-side action button inside the wrap */
.ff-search-btn {
    flex-shrink: 0;
    align-self: stretch;
    border: none;
    border-left: 1.5px solid var(--ff-border);
    background: var(--ff-surface-alt);
    color: var(--ff-text);
    padding: 0 .85rem;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
    font-family: inherit;
}

.ff-search-btn:hover {
    background: color-mix(in srgb, var(--ff-accent) 10%, transparent);
    color: var(--ff-accent);
}

.ff-search-btn:active {
    background: color-mix(in srgb, var(--ff-accent) 18%, transparent);
}

/* Optional meta row (chips, count label, etc.) */
.ff-search-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .45rem .25rem 0;
}

/* ── Collapsible variant ── */
.ff-search--collapsible .ff-search-trigger {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .5rem;
    border: none;
    background: transparent;
    color: var(--ff-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: color .12s, background .12s;
    font-family: inherit;
}

.ff-search--collapsible .ff-search-trigger:hover {
    color: var(--ff-text);
    background: var(--ff-surface-alt);
}

.ff-search-chevron {
    font-size: 10px;
    transition: transform .18s;
    margin-left: auto;
}

.ff-search--open .ff-search-chevron {
    transform: rotate(180deg);
}

.ff-search--collapsible .ff-search-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease, padding .2s ease;
    overflow: hidden;
}

.ff-search--collapsible .ff-search-body > * {
    overflow: hidden;
}

.ff-search--open .ff-search-body {
    grid-template-rows: 1fr;
    padding-top: .5rem;
}

/* Sizes */
.ff-search--sm .ff-search-input  { font-size: 12px; padding-top: .3rem; padding-bottom: .3rem; }
.ff-search--sm .ff-search-btn    { font-size: 11px; padding: 0 .65rem; }
.ff-search--sm .ff-search-wrap   { border-radius: 6px; }

.ff-search--lg .ff-search-input  { font-size: 16px; padding-top: .65rem; padding-bottom: .65rem; }
.ff-search--lg .ff-search-icon   { font-size: 15px; }
.ff-search--lg .ff-search-btn    { font-size: 14px; padding: 0 1.1rem; }
.ff-search--lg .ff-search-wrap   { border-radius: 10px; }