WooNooW/admin-spa/src/index.css

/* 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; }

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

  /* Hide elements flagged as no-print, reveal print-only */
  .no-print { display: none !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 {
  .print-a4 { }
  .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;
}