/* Import design tokens for UI sizing and control defaults */
@import './components/ui/tokens.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* WooNooW global theme (shadcn baseline, deduplicated) */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-foreground;
  }

  /* Override WordPress common.css focus/active styles */
  a:focus,
  a:active {
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
  }
}

/* ============================================
   WordPress Admin Override Fixes
   These rules use high specificity + !important 
   to override WordPress admin CSS conflicts
   ============================================ */

/* Fix SVG icon styling - WordPress sets fill:currentColor on all SVGs */
#woonoow-admin-app svg {
  fill: none !important;
}

/* But allow explicit fill-current class to work for filled icons */
#woonoow-admin-app svg.fill-current,
#woonoow-admin-app .fill-current svg,
#woonoow-admin-app [class*="fill-"] svg {
  fill: currentColor !important;
}

/* Fix radio button indicator - WordPress overrides circle fill */
#woonoow-admin-app [data-radix-radio-group-item] svg,
#woonoow-admin-app [role="radio"] svg {
  fill: currentColor !important;
}

/* Fix font-weight inheritance - prevent WordPress bold overrides */
#woonoow-admin-app text,
#woonoow-admin-app tspan {
  font-weight: inherit !important;
}

/* Reset form element styling that WordPress overrides */
#woonoow-admin-app input[type="radio"],
#woonoow-admin-app input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Command palette input: remove native borders/shadows to match shadcn */
.command-palette-search {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------
   Print helpers (hide WP chrome, expand canvas, labels)
   ---------------------------------------------------- */

/* Page defaults for print */
@page {
  size: auto;
  /* let the browser choose */
  margin: 12mm;
  /* comfortable default */
}

@media print {

  /* Hide WordPress admin chrome */
  #adminmenuback,
  #adminmenuwrap,
  #adminmenu,
  #wpadminbar,
  #wpfooter,
  #screen-meta,
  .notice,
  .update-nag {
    display: none !important;
  }

  /* Hide WooNooW app shell - all nav, header, submenu elements */
  #woonoow-admin-app header,
  #woonoow-admin-app nav,
  #woonoow-admin-app [data-mainmenu],
  #woonoow-admin-app [data-submenubar],
  #woonoow-admin-app [data-bottomnav],
  .woonoow-app-header,
  .woonoow-topnav,
  .woonoow-bottom-nav,
  .woonoow-submenu,
  .no-print {
    display: none !important;
  }

  /* Reset layout to full-bleed for our app */
  html,
  body,
  #wpwrap,
  #wpcontent,
  #woonoow-admin-app,
  #woonoow-admin-app>div,
  .woonoow-app {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Ensure print content is visible and takes full page */
  .print-a4 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 15mm !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-a4 * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ensure backgrounds print */
  .print-a4 .bg-gray-50 {
    background-color: #f9fafb !important;
  }

  .print-a4 .bg-gray-900 {
    background-color: #111827 !important;
  }

  .print-a4 .text-white {
    color: white !important;
  }

  /* Hide outer container styling */
  .min-h-screen {
    min-height: auto !important;
    background: white !important;
    padding: 0 !important;
  }

  .print-only {
    display: block !important;
  }

  /* Improve table row density on paper */
  .print-tight tr>* {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* By default, label-only content stays hidden unless in print or label mode */
.print-only {
  display: none;
}

/* Label mode toggled by router (?mode=label) */
.woonoow-label-mode .print-only {
  display: block;
}

.woonoow-label-mode .no-print-label,
.woonoow-label-mode .wp-header-end,
.woonoow-label-mode .wrap {
  display: none !important;
}

/* Optional page presets (opt-in by adding the class to a wrapper before printing) */
.print-a4 {}

.print-letter {}

.print-4x6 {}

@media print {

  /* A4 Invoice layout */
  @page {
    size: A4;
    margin: 0;
  }

  .print-a4 {
    width: 210mm !important;
    min-height: 297mm !important;
    padding: 20mm !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .print-a4 * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Ensure backgrounds print */
  .print-a4 .bg-gray-50 {
    background-color: #f9fafb !important;
  }

  .print-a4 .bg-gray-900 {
    background-color: #111827 !important;
  }

  .print-a4 .text-white {
    color: white !important;
  }

  .print-letter {}

  /* Thermal label (4x6in) with minimal margins */
  .print-4x6 {
    width: 6in;
  }

  .print-4x6 * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* --- WooNooW: Popper menus & fullscreen fixes --- */
[data-radix-popper-content-wrapper] {
  z-index: 2147483647 !important;
}

body.woonoow-fullscreen .woonoow-app {
  overflow: visible;
}

/* --- WooCommerce Admin Notices --- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: relative;
  border-left: 4px solid #00a32a;
  padding: 12px 16px;
  margin: 16px 0;
  background: #f0f6fc;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}

.woocommerce-error {
  border-left-color: #d63638;
  background: #fcf0f1;
}

.woocommerce-info {
  border-left-color: #2271b1;
  background: #f0f6fc;
}

html #wpadminbar {
  position: fixed;
  top: 0;
}

/* WordPress Media Modal z-index fix */
/* Ensure WP media modal appears above Radix UI components (Dialog, Select, etc.) */
.media-modal {
  z-index: 999999 !important;
  pointer-events: auto !important;
}

/* Ensure media modal content is above the backdrop and receives clicks */
.media-modal-content {
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

/* Ensure all interactive elements in WP media can receive clicks */
.media-modal .media-frame,
.media-modal .media-toolbar,
.media-modal .attachments,
.media-modal .attachment {
  pointer-events: auto !important;
}