/**
 * Shared App Shell Stylesheet
 *
 * All product app shells should import this as their base stylesheet:
 *
 *   @import "tailwindcss";
 *   @import '@burdenoff/fe-libs/shared/tokens/tokens.css';
 *   @import '@burdenoff/fe-libs/shared/styles/app-shell.css';
 *
 * Then add product-specific overrides below.
 */

/* Installed-app (Capacitor / PWA / Electron) look & feel rules. */
@import './native.css';

/* ============================================
 * @theme — Tailwind v4 theme configuration
 * Maps fe-libs design tokens to Tailwind utilities
 * ============================================ */
@theme {
  /* Background colors */
  --color-bg-canvas: var(--color-bg-canvas);
  --color-bg-surface: var(--color-bg-surface);
  --color-bg-elevated: var(--color-bg-elevated);
  --color-bg-sunken: var(--color-bg-sunken);
  --color-bg-inverse: var(--color-bg-inverse);
  --color-bg-overlay: var(--color-bg-overlay);
  --color-bg-accent: var(--color-bg-accent);
  --color-bg-accentSubtle: var(--color-bg-accentSubtle);
  --color-bg-disabled: var(--color-bg-disabled);

  /* Text colors */
  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-muted: var(--color-text-muted);
  --color-text-inverse: var(--color-text-inverse);
  --color-text-link: var(--color-text-link);
  --color-text-linkHover: var(--color-text-linkHover);
  --color-text-placeholder: var(--color-text-placeholder);
  --color-text-disabled: var(--color-text-disabled);

  /* Border colors */
  --color-border-subtle: #E5E7EB;
  --color-border-default: #D1D5DB;
  --color-border-strong: #9CA3AF;
  --color-border-focus: #2563EB;
  --color-border-error: #DC2626;
  --color-border: #D1D5DB;

  /* Action colors */
  --color-action-primary-bg: var(--color-action-primary-bg);
  --color-action-primary-bgHover: var(--color-action-primary-bgHover);
  --color-action-primary-bgActive: var(--color-action-primary-bgActive);
  --color-action-primary-text: var(--color-action-primary-text);
  --color-action-secondary-bg: var(--color-action-secondary-bg);
  --color-action-secondary-bgHover: var(--color-action-secondary-bgHover);
  --color-action-secondary-text: var(--color-action-secondary-text);
  --color-action-ghost-bgHover: var(--color-action-ghost-bgHover);
  --color-action-ghost-text: var(--color-action-ghost-text);
  --color-action-danger-bg: var(--color-action-danger-bg);
  --color-action-danger-bgHover: var(--color-action-danger-bgHover);
  --color-action-danger-text: var(--color-action-danger-text);

  /* Backward-compat aliases: legacy `-fg`/`-bg-hover` token names.
     Many call-sites (tunnels, agent banner, etc.) referenced these
     before round 2's `-text`/`-bgHover` standardisation. Keep the
     aliases so old class names like `text-action-primary-fg` and
     `bg-action-primary-bg-hover` resolve to the canonical colour. */
  --color-action-primary-fg: var(--color-action-primary-text);
  --color-action-primary-bg-hover: var(--color-action-primary-bgHover);
  --color-action-primary-bg-active: var(--color-action-primary-bgActive);
  --color-action-secondary-fg: var(--color-action-secondary-text);
  --color-action-secondary-bg-hover: var(--color-action-secondary-bgHover);
  --color-action-ghost-fg: var(--color-action-ghost-text);
  --color-action-ghost-bg-hover: var(--color-action-ghost-bgHover);
  --color-action-danger-fg: var(--color-action-danger-text);
  --color-action-danger-bg-hover: var(--color-action-danger-bgHover);

  /* Status colors */
  --color-status-success-bg: var(--color-status-success-bg);
  --color-status-success-bgSubtle: var(--color-status-success-bgSubtle);
  --color-status-success-text: var(--color-status-success-text);
  --color-status-error-bg: var(--color-status-error-bg);
  --color-status-error-text: var(--color-status-error-text);
  --color-status-warning-bg: var(--color-status-warning-bg);
  --color-status-info-bg: var(--color-status-info-bg);

  /* Semantic surface aliases */
  --color-surface: var(--color-bg-surface);
  --color-surface-elevated: var(--color-bg-elevated);
  --color-surface-sunken: var(--color-bg-sunken);
  --color-surface-canvas: var(--color-bg-canvas);
  --color-surface-hover: var(--color-bg-sunken);
  --color-surface-inverse: var(--color-bg-inverse);

  /* Semantic content aliases */
  --color-content-primary: var(--color-text-primary);
  --color-content-secondary: var(--color-text-secondary);
  --color-content-tertiary: var(--color-text-muted);
  --color-content-muted: var(--color-text-muted);
  --color-content-inverse: var(--color-text-inverse);
  --color-content-placeholder: var(--color-text-placeholder);
  --color-content-disabled: var(--color-text-disabled);

  /* Semantic accent aliases */
  --color-accent-primary: var(--color-action-primary-bg);
  --color-accent-hover: var(--color-action-primary-bgHover);
  --color-accent-active: var(--color-action-primary-bgActive);
  --color-accent-muted: var(--color-bg-accent);

  /* Accent color tokens */
  --color-accent-blue: var(--color-accent-blue);
  --color-accent-blue-hover: var(--color-accent-blue-hover);
  --color-accent-blue-subtle: var(--color-accent-blue-subtle);
  --color-accent-purple: var(--color-accent-purple);
  --color-accent-purple-hover: var(--color-accent-purple-hover);
  --color-accent-purple-subtle: var(--color-accent-purple-subtle);
  --color-accent-teal: var(--color-accent-teal);
  --color-accent-teal-hover: var(--color-accent-teal-hover);
  --color-accent-teal-subtle: var(--color-accent-teal-subtle);
  --color-accent-indigo: var(--color-accent-indigo);
  --color-accent-indigo-hover: var(--color-accent-indigo-hover);
  --color-accent-indigo-subtle: var(--color-accent-indigo-subtle);

  /* Semantic aliases */
  --color-bg-muted: var(--color-bg-muted);
  --color-border-hover: var(--color-border-hover);

  /* Status hover tokens */
  --color-status-success-text-hover: var(--color-status-success-text-hover);
  --color-status-warning-text-hover: var(--color-status-warning-text-hover);
  --color-status-error-text-hover: var(--color-status-error-text-hover);

  /* Status shortcuts */
  --color-success: var(--color-status-success-bg);
  --color-success-subtle: var(--color-status-success-bgSubtle);
  --color-error: var(--color-status-error-bg);
  --color-warning: var(--color-status-warning-bg);
  --color-info: var(--color-status-info-bg);

  /* Spacing */
  --spacing-card-padding: var(--space-cardPadding);
  --spacing-section-gap: var(--space-sectionGap);
  --spacing-form-gap: var(--space-formGap);
  --spacing-control-gap: var(--space-controlGap);
  --spacing-list-gap: var(--space-listGap);
  --spacing-icon-gap: var(--space-iconGap);

  /* Control heights */
  --height-control-sm: var(--size-controlHeight-sm);
  --height-control-md: var(--size-controlHeight-md);
  --height-control-lg: var(--size-controlHeight-lg);

  /* Icon sizes */
  --width-icon-sm: var(--size-icon-sm);
  --height-icon-sm: var(--size-icon-sm);
  --width-icon-md: var(--size-icon-md);
  --height-icon-md: var(--size-icon-md);
  --width-icon-lg: var(--size-icon-lg);
  --height-icon-lg: var(--size-icon-lg);

  /* Typography */
  --font-size-body-sm: var(--font-size-body-sm);
  --font-size-body-md: var(--font-size-body-md);
  --font-size-body-lg: var(--font-size-body-lg);
  --font-size-heading-h1: var(--font-size-heading-h1);
  --font-size-heading-h2: var(--font-size-heading-h2);
  --font-size-heading-h3: var(--font-size-heading-h3);
  --font-size-heading-h4: var(--font-size-heading-h4);
  --font-family-body: var(--font-family-body);
  --font-family-heading: var(--font-family-heading);
  --font-family-mono: var(--font-family-mono);
  --font-weight-regular: var(--font-weight-regular);
  --font-weight-medium: var(--font-weight-medium);
  --font-weight-semibold: var(--font-weight-semibold);
  --font-weight-bold: var(--font-weight-bold);

  /* Border radius */
  --radius-button: var(--radius-button);
  --radius-input: var(--radius-input);
  --radius-card: var(--radius-card);
  --radius-pill: 9999px;

  /* shadcn/ui compatible colors */
  --color-background: var(--color-bg-surface);
  --color-foreground: var(--color-text-primary);
  --color-muted: var(--color-bg-sunken);
  --color-muted-foreground: var(--color-text-muted);
  --color-accent: var(--color-bg-accent);
  --color-primary: var(--color-action-primary-bg);
  --color-primary-foreground: var(--color-action-primary-text);
  --color-destructive: var(--color-status-error-bg);
  --color-card: var(--color-bg-surface);
  --color-card-foreground: var(--color-text-primary);
  --color-popover: var(--color-bg-elevated);
  --color-popover-foreground: var(--color-text-primary);

  /* Legacy kebab-case status aliases */
  --color-status-success-bg-subtle: var(--color-status-success-bgSubtle);
  --color-status-success-border: var(--color-status-success-border, #6EE7B7);
  --color-status-error-bg-subtle: var(--color-status-error-bgSubtle);
  --color-status-error-border: var(--color-status-error-border, #FCA5A5);
  --color-status-warning-bg-subtle: var(--color-status-warning-bgSubtle);
  --color-status-warning-border: var(--color-status-warning-border, #FDE047);
  --color-status-info-bg-subtle: var(--color-status-info-bgSubtle);
  --color-status-info-border: var(--color-status-info-border, #93C5FD);
}

/* ============================================
 * Base styles using semantic tokens
 * ============================================ */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    border-color: var(--color-border-default);
  }

  html {
    width: 100%;
    height: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--color-text-primary);
    background: var(--color-bg-surface);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    line-height: var(--font-lineHeight-normal);
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  #root {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
  }

  img,
  video,
  canvas,
  svg:not(.react-flow svg):not(.react-flow__background):not(.react-flow__marker) {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* React Flow edge overrides */
  .react-flow__edges {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none;
  }

  .react-flow__edges svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    overflow: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  .react-flow__marker {
    max-width: none !important;
    overflow: visible !important;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100%;
    min-width: 0;
  }

  div,
  section,
  article,
  aside,
  header,
  footer,
  main,
  nav {
    min-width: 0;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
  }

  table {
    max-width: 100%;
    table-layout: fixed;
  }
}