/* 
 * Tailwind v4 configuration with Nuxt UI v3
 * Using scoped selectors to prevent breaking Unraid WebGUI
 */

/* Define custom layers with controlled cascade */
@layer theme, unapi-base, components, utilities;

/* Import theme and utilities only - no global preflight */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
/* @import "@nuxt/ui"; temporarily disabled */
@import 'tw-animate-css';
@import '../../../@tailwind-shared/index.css';

/* Scan for Tailwind classes in all source files */
@source "../**/*.{vue,ts,js,tsx,jsx}";
@source "../../../unraid-ui/src/**/*.{vue,ts,js,tsx,jsx}";

/* 
 * Scoped base styles for .unapi elements only
 * Import Tailwind's preflight into our custom layer and scope it
 */

@layer unapi-base {
  /* Scope all Tailwind preflight styles to .unapi */
  .unapi {
    @import "tailwindcss/preflight.css";
  }

  /* Override Unraid's button styles for Nuxt UI components */
  .unapi button {
    /* Reset Unraid's button styles */
    margin: 0 !important;
    padding: 0;
    border: none;
    background: none;
  }

  /* Accessible focus styles for keyboard navigation */
  .unapi button:focus-visible {
    outline: 2px solid #ff8c2f;
    outline-offset: 2px;
  }

  /* Restore button functionality while removing Unraid's forced styles */
  .unapi button:not([role="switch"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }

  /* Ensure Nuxt UI modal/slideover close buttons work properly */
  .unapi [role="dialog"] button,
  .unapi [data-radix-collection-item] button {
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Focus styles for dialog buttons */
  .unapi [role="dialog"] button:focus-visible,
  .unapi [data-radix-collection-item] button:focus-visible {
    outline: 2px solid #ff8c2f;
    outline-offset: 2px;
  }

  /* Reset figure element for logo */
  .unapi figure {
    margin: 0;
    padding: 0;
  }

  /* Reset heading elements - only margin/padding */
  .unapi h1,
  .unapi h2,
  .unapi h3,
  .unapi h4,
  .unapi h5 {
    margin: 0;
    padding: 0;
  }

  /* Reset paragraph element */
  .unapi p {
    margin: 0;
    padding: 0;
    text-align: unset;
  }

  /* Reset UL styles to prevent default browser styling */
  .unapi ul {
    padding-inline-start: 0;
    list-style-type: none;
  }

  /* Reset toggle/switch button backgrounds */
  .unapi button[role="switch"],
  .unapi button[role="switch"][data-state="checked"],
  .unapi button[role="switch"][data-state="unchecked"] {
    background-color: transparent;
    background: transparent;
    border: 1px solid #ccc;
  }

  /* Style for checked state */
  .unapi button[role="switch"][data-state="checked"] {
    background-color: #ff8c2f; /* Unraid orange */
  }

  /* Style for unchecked state */
  .unapi button[role="switch"][data-state="unchecked"] {
    background-color: #e5e5e5;
  }

  /* Dark mode toggle styles */
  .unapi.dark button[role="switch"][data-state="unchecked"],
  .dark .unapi button[role="switch"][data-state="unchecked"] {
    background-color: #333;
    border-color: #555;
  }

  /* Toggle thumb/handle */
  .unapi button[role="switch"] span {
    background-color: white;
  }
}

/* Override link styles inside .unapi */
.unapi a,
.unapi a:link,
.unapi a:visited {
  color: inherit;
  text-decoration: none;
}

.unapi a:hover,
.unapi a:focus {
  text-decoration: underline;
  color: inherit;
}

/* Note: Tailwind utilities will apply globally but should be used with .unapi prefix in HTML */

/* Ensure unraid-modals container has extremely high z-index */
unraid-modals.unapi {
  position: relative;
  z-index: 999999;
  isolation: isolate;
}

/* Style for Unraid progress frame */
iframe#progressFrame {
  background-color: var(--background-color);
  color-scheme: light;
}
