/* Import Poppins font first */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/**
 * Onnsight Tailwind CSS
 * 
 * Main CSS file with Tailwind utilities and custom components
 * 
 * @package Onnsight
 * @since 1.0.0
 */

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

/* PrimeIcons Font Loading - Highest Priority */
.pi {
  font-family: 'PrimeIcons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  speak: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

[class^="pi-"]:before,
[class*=" pi-"]:before {
  font-family: 'PrimeIcons' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  speak: none !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Global Styles */
html, body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

/* WordPress Admin Reset */
.wp-admin #wpbody {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
}

.wp-admin #wpbody *:not(.pi):not([class*="pi-"]) {
  font-family: inherit !important;
}

/* Admin Layout Overrides */
.wp-admin #wpcontent,
.wp-admin #wpfooter {
  margin-left: 0 !important;
}

.wp-admin #adminmenumain {
  display: none !important;
}

.wp-admin #wpadminbar {
  position: relative !important;
}

.wp-admin #wpbody-content {
  padding: 0 !important;
}

/* Onnsight Brand Colors */
:root {
  --onnsight-primary: #4D6FFF;
  --onnsight-primary-50: #F0F4FF;
  --onnsight-primary-100: #E0E8FF;
  --onnsight-primary-200: #C7D2FF;
  --onnsight-primary-500: #4D6FFF;
  --onnsight-primary-600: #3D5FEF;
  --onnsight-secondary: #F5F7FA;
  --onnsight-text: #374151;
  --onnsight-text-light: #6B7280;
  --onnsight-border: #E5E7EB;
  --onnsight-border-light: #F3F4F6;
}

/* Base styles for Onnsight admin */
@layer base {
  /* Ensure our admin root has proper styling */
  #onnsight-admin-root {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    color: #374151;
  }

  /* Reset box-sizing for all elements within our admin */
  #onnsight-admin-root *,
  #onnsight-admin-root *::before,
  #onnsight-admin-root *::after {
    box-sizing: border-box;
  }

  /* Ensure WordPress admin doesn't interfere but preserve icon fonts */
  .wp-admin #onnsight-admin-root {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif !important;
  }

  .wp-admin #onnsight-admin-root *:not(.pi):not([class*="pi-"]) {
    box-sizing: border-box !important;
  }
}

/* Component-specific utilities */
@layer components {
  /* Enhanced input styling */
  .onnsight-input {
    @apply border border-gray-300 rounded-lg w-full px-3 py-3 font-poppins transition-all duration-200 ease-in-out;
  }

  .onnsight-input:focus {
    @apply border-blue-500 outline-none ring-2 ring-blue-500 ring-opacity-20;
  }

  .onnsight-input:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .onnsight-input::placeholder {
    @apply text-gray-400;
  }

  /* Error state */
  .onnsight-input--error {
    @apply border-red-500;
  }

  .onnsight-input--error:focus {
    @apply border-red-500 ring-red-500 ring-opacity-20;
  }

  /* Success state */
  .onnsight-input--success {
    @apply border-green-500;
  }

  .onnsight-input--success:focus {
    @apply border-green-500 ring-green-500 ring-opacity-20;
  }

  /* Label styling */
  .onnsight-label {
    @apply block text-sm font-medium text-gray-700 mb-1.5 font-poppins;
  }

  .onnsight-label--error {
    @apply text-red-700;
  }

  .onnsight-label--success {
    @apply text-green-700;
  }

  /* Helper text */
  .onnsight-helper {
    @apply block text-xs text-gray-600 mt-1 font-poppins;
  }

  .onnsight-helper--error {
    @apply text-red-600;
  }

  .onnsight-helper--success {
    @apply text-green-600;
  }
}

/* High-specificity overrides to ensure our styles win */
@layer utilities {
  /* Font family utility */
  .font-poppins {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  }

  /* WordPress admin compatibility */
  .wp-admin-override {
    font-family: 'Poppins', sans-serif !important;
  }

  /* Force Tailwind utilities in WordPress admin context */
  .wp-admin .onnsight-force-tw .w-full {
    width: 100% !important;
  }

  .wp-admin .onnsight-force-tw .rounded-lg {
    border-radius: 0.5rem !important;
  }

  .wp-admin .onnsight-force-tw .border-2 {
    border-width: 2px !important;
  }

  .wp-admin .onnsight-force-tw .bg-white {
    background-color: #ffffff !important;
  }

  .wp-admin .onnsight-force-tw .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  }

  .wp-admin .onnsight-force-tw .border-gray-300 {
    border-color: #d1d5db !important;
  }

  .wp-admin .onnsight-force-tw .border-gray-400 {
    border-color: #9ca3af !important;
  }

  .wp-admin .onnsight-force-tw .border-blue-500 {
    border-color: #3b82f6 !important;
  }

  .wp-admin .onnsight-force-tw .ring-2 {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
  }

  .wp-admin .onnsight-force-tw .ring-blue-100 {
    box-shadow: 0 0 0 2px rgba(219, 234, 254, 0.5) !important;
  }
}

/* PrimeReact Component Overrides - Proper styling with borders */
.p-component:not(.pi):not([class*="pi-"]) {
  font-family: 'Poppins', sans-serif !important;
}

/* Ensure PrimeIcons use their own font */
.pi,
[class*="pi-"] {
  font-family: 'PrimeIcons' !important;
}

/* Form Controls - Restore proper borders and styling */
.p-inputtext,
.p-inputtextarea,
.p-dropdown,
.p-dropdown-label,
.p-multiselect,
.p-calendar input {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease-in-out !important;
}

/* Focus states for form controls */
.p-inputtext:focus,
.p-inputtextarea:focus,
.p-dropdown:not(.p-disabled):hover,
.p-dropdown.p-focus,
.p-multiselect:not(.p-disabled):hover,
.p-multiselect.p-focus,
.p-calendar input:focus {
  border-color: #4d6fff !important;
  box-shadow: 0 0 0 2px rgba(77, 111, 255, 0.1) !important;
  outline: none !important;
}

/* Dropdown specific styling */
.p-dropdown {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
}

.p-dropdown .p-dropdown-label {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  font-weight: 400 !important;
  color: #374151 !important;
}

.p-dropdown .p-dropdown-label.p-placeholder {
  color: #9ca3af !important;
}

.p-dropdown .p-dropdown-trigger {
  border: none !important;
  background: transparent !important;
  width: 2rem !important;
  color: #6b7280 !important;
}

.p-dropdown .p-dropdown-trigger:hover {
  color: #374151 !important;
}

/* Dropdown panel */
.p-dropdown-panel {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  padding: 0.25rem !important;
  z-index: 99999999 !important;
}

.p-dropdown-item {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  margin: 0.125rem 0 !important;
}

.p-dropdown-item:hover,
.p-dropdown-item.p-highlight {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

.p-dropdown-item.p-focus {
  background-color: #4d6fff !important;
  color: #ffffff !important;
}

/* Input Textarea specific */
.p-inputtextarea {
  resize: vertical !important;
  min-height: 80px !important;
  line-height: 1.5 !important;
}

/* Error states */
.p-invalid {
  border-color: #ef4444 !important;
}

.p-invalid:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

/* Disabled states */
.p-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: #f9fafb !important;
}

/* Filter dropdown in tables */
.p-column-filter .p-dropdown {
  width: 100% !important;
  min-width: 150px !important;
}

/* DataTable styling */
.p-datatable {
  font-family: 'Poppins', sans-serif !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
}

.p-datatable .p-datatable-header {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 1rem !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.p-datatable .p-datatable-thead > tr > th {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0.75rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.p-datatable .p-datatable-tbody > tr > td {
  padding: 0.75rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.p-datatable .p-datatable-tbody > tr:hover {
  background-color: #f9fafb !important;
}

/* Calendar component */
.p-calendar .p-inputtext {
  padding-right: 2.5rem !important;
}

.p-calendar .p-calendar-button {
  border: none !important;
  background: transparent !important;
  color: #6b7280 !important;
  right: 0.5rem !important;
  width: 2rem !important;
  height: 2rem !important;
}

.p-calendar .p-calendar-button:hover {
  color: #374151 !important;
  background-color: #f3f4f6 !important;
  border-radius: 0.25rem !important;
}

/* Datepicker panel */
.p-datepicker {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  font-family: 'Poppins', sans-serif !important;
  z-index: 99999999 !important;
}

.p-datepicker .p-datepicker-header {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.p-datepicker .p-datepicker-title {
  color: #374151 !important;
  font-weight: 600 !important;
}

.p-datepicker table td {
  padding: 0.25rem !important;
}

.p-datepicker table td > span {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.375rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease-in-out !important;
}

.p-datepicker table td > span:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

.p-datepicker table td.p-highlight > span {
  background: #4d6fff !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Inline datepicker */
.p-datepicker-inline {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.p-datepicker-inline .p-datepicker {
  border: 0 !important;
  box-shadow: none !important;
}

/* Button styling */
.p-button:not(.pi):not([class*="pi-"]) {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease-in-out !important;
}

.p-button.p-button-outlined {
  border: 1px solid #d1d5db !important;
  background-color: transparent !important;
}

.p-button.p-button-outlined:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
}

/* Toast notifications */
.p-toast:not(.pi):not([class*="pi-"]) {
  font-family: 'Poppins', sans-serif !important;
}

.p-toast .p-toast-message {
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Dialog styling */
.p-dialog:not(.pi):not([class*="pi-"]) {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.p-dialog .p-dialog-header {
  background-color: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
  padding: 1.5rem !important;
}

.p-dialog .p-dialog-content {
  padding: 1.5rem !important;
}

.p-dialog .p-dialog-footer {
  background-color: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
  border-radius: 0 0 0.5rem 0.5rem !important;
  padding: 1rem 1.5rem !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
}

/* Checkbox styling */
input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.25rem !important;
  background-color: #ffffff !important;
}

input[type="checkbox"]:checked {
  background-color: #4d6fff !important;
  border-color: #4d6fff !important;
}

/* Small helper text */
small:not(.pi):not([class*="pi-"]) {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
}

small.p-error {
  color: #ef4444 !important;
  font-weight: 500 !important;
}

/* Field spacing */
.field {
  margin-bottom: 1.5rem !important;
}

.field:last-child {
  margin-bottom: 0 !important;
}

/* Grid spacing in dialogs */
.grid.gap-4 > * {
  margin-bottom: 0 !important;
}

/* MultiSelect panel */
.p-multiselect-panel {
  z-index: 99999999 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}