/**
 * components.css - Minimal Global Component Helpers
 * ==================================================
 * LEGACY FILE: Most component styles migrated to WebC components.
 *
 * This file contains minimal global CSS that can't be encapsulated in WebC components.
 * Most component styles are now in WebC components (frontend/_components/ - .webc files)
 * with webc:scoped for proper encapsulation.
 *
 * Migration Status:
 * - BEFORE: 369 lines (buttons, inputs, forms, import/export, etc.)
 * - AFTER:  143 lines (61% reduction)
 * - Migrated to WebC:
 *   * ui-button → frontend/_components/controls/ui-button.webc
 *   * ui-input → frontend/_components/primitives/ui-input.webc
 *   * form-group → frontend/_components/forms/form-group.webc
 * - Removed: Dead code (.import-drop-zone, .import-preview)
 *
 * Uses native CSS nesting (baseline 2023, 96%+ support).
 */

@layer components {

  /* ========================================================================
     FORM COMPONENTS - Now use WebC components instead of global classes
     ======================================================================== */
  /* Removed: .form-field, .form-label, .form-input classes
     Migration: Use <form-field>, <ui-input>, <ui-textarea> WebC components instead
     See: frontend/_components/forms/form-field.webc
          frontend/_components/primitives/ui-input.webc
          frontend/_components/primitives/ui-textarea.webc */

  /* ========================================================================
     UI-INPUT CUSTOM ELEMENT - MOVED TO ui-input.webc
     ======================================================================== */
  /* All ui-input styles moved to frontend/_components/primitives/ui-input.webc
     with webc:scoped for proper encapsulation.

     The component uses :host selector to target the custom element and includes
     all size modifiers, validation states, and focus handling.

     See: frontend/_components/primitives/ui-input.webc (lines 57-162) */

  /* ========================================================================
     HELP TEXT - MOVED TO utilities.css
     ======================================================================== */
  /* All .help-text styles moved to app/static/css/utilities.css (@layer utilities)

     Why: .help-text is a utility class used across many components, not a component itself.
     Utilities should be in a higher cascade layer to ensure they always override component defaults.

     See: app/static/css/utilities.css (lines 84-107) */

  /* ========================================================================
     TOGGLE COMPONENTS - Now use WebC <settings-toggle> component instead
     ======================================================================== */
  /* Removed: .toggle-row, .toggle-switch classes
     Migration: Use <settings-toggle> WebC component instead
     See: frontend/_components/forms/settings-toggle.webc
     Note: HTMX partials can define their own custom toggle styles if needed */

  /* ========================================================================
     BUTTONS - MIGRATED TO ui-button.webc
     ======================================================================== */
  /* All button styles migrated to frontend/_components/controls/ui-button.webc
     with webc:scoped for proper encapsulation.

     Migration complete:
     - error-modal.webc: 2 buttons → ui-button
     - 404.webc: renamed .btn to .error-cta (scoped)
     - css3-button-scoped-vars.spec.mjs: updated to test ui-button

     NEW CODE: Use <ui-button variant="primary|ghost|danger|secondary" size="small|large">

     See: frontend/_components/controls/ui-button.webc */

  /* ========================================================================
     PANEL SECTION - Now use WebC <panel-section> component instead
     ======================================================================== */
  /* Removed: .panel-section class
     Migration: Use <panel-section> WebC component instead
     See: frontend/_components/surfaces/panel-section.webc */

  /* ========================================================================
     FORM GROUP - MOVED TO form-group.webc
     ======================================================================== */
  /* All form-group styles moved to frontend/_components/forms/form-group.webc
     with webc:scoped for proper encapsulation.

     The component provides a consistent wrapper for label + input + help text
     with proper spacing and layout.

     Usage: <form-group label="Email" help="Help text"><ui-input type="email" /></form-group>

     See: frontend/_components/forms/form-group.webc */

  /* ========================================================================
     SHARE MODAL - MOVED TO share-modal.webc
     ======================================================================== */
  /* Share modal specific styles (.share-link-input, .share-buttons)
     moved to share-modal.webc with webc:keep for proper encapsulation.

     See: frontend/_components/modals/share-modal.webc (lines 280-307) */

  /* ========================================================================
     IMPORT/EXPORT COMPONENTS - REMOVED (UNUSED)
     ======================================================================== */
  /* The .import-drop-zone and .import-preview classes were not used anywhere
     in the codebase. Archive modal uses file input + window.chatComponent.importLocal()
     instead of drag-and-drop zone.

     DELETED: 45 lines of dead CSS code. */

  /* ========================================================================
     UTILITY CLASSES - MOVED TO utilities.css
     ======================================================================== */
  /* All utility classes (.flex-row, .gap-*, .mt-*, .text-center, etc.)
     have been moved to utilities.css (@layer utilities).

     Why: Utilities should be in a higher cascade layer than components
     to ensure they always override component defaults.

     See: app/static/css/utilities.css */

  /* ========================================================================
     HEADER STATUS INDICATORS - MOVED TO room-status-bar.webc
     ======================================================================== */
  /* All room status indicator CSS (.header-status-group, .header-status-item,
     .status-clickable, .peer-count-badge, .error-count-badge, .voice-active-pulse)
     has been moved to frontend/_components/layout/room-status-bar.webc with
     webc:scoped styles.

     Why: Room-specific UI belongs in the room-status-bar component that lives
     INSIDE the room view pane, not in global CSS. The universal app-header
     component handles top-level navigation.

     See: frontend/_components/layout/room-status-bar.webc
          frontend/_components/layout/app-header.webc */
}