/* Custom CSS for Wagtail 6 Admin Interface - Affinity Brand Guidelines
 * This file is designed to be injected into the admin interface
 * to customize colors and typography for both light and dark themes.
 * Based on AFFINITY_GUIDELINES.txt brand specifications.
 */

/* Force application of brand styles with higher specificity */
html, body, .w-admin {
    /* Ensure our CSS variables are applied with high specificity */
    --w-color-primary: #1f677a !important;
    --w-color-secondary: #00b0a9 !important;
}

/* Import Brand Fonts - Fallback fonts as per brand guidelines */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap');
/* Note: Fugue and Corporate S BQ are premium fonts - using fallbacks as per guidelines */

/* Font customization for all themes - Brand Guidelines Compliant */
:root {
  /* Brand Typography - Using fallback fonts as per guidelines */
  --w-font-sans: 'Fira Sans', Arial, sans-serif; /* Body copy fallback */
  --w-font-heading: Arial, 'Arial Bold', sans-serif; /* Heading fallback */
  --w-font-mono: 'Fira Sans', monospace;
  
  /* Typography Scale - Brand Guidelines Hierarchy */
  --w-font-size-body: 1rem;
  --w-font-size-subheading: 1.5rem; /* 1.5x body size */
  --w-font-size-heading: 2rem; /* 2x body size */
  
  /* Line Height - Brand Guidelines Leading */
  --w-line-height-body: 1.3; /* 130% for body copy */
  --w-line-height-heading: 1.2; /* 120% for headings */
}

/* Light theme customization */
:root, .w-theme-light {
  /* Primary color customization - Affinity Teal (PMS 315 U) #1f677a */
  --w-color-primary: #1f677a; /* Direct hex color setting */
  --w-color-primary-hue: 193; /* Converted from #1f677a */
  --w-color-primary-saturation: 60%;
  --w-color-primary-lightness: 30%;

  /* Secondary color customization - Turquoise (PMS 362 U) #00b0a9 */
  --w-color-secondary: #00b0a9; /* Direct hex color setting */
  --w-color-secondary-hue: 178;
  --w-color-secondary-saturation: 100%;
  --w-color-secondary-lightness: 35%;

  /* Corporate Palette */
  --w-color-black: #3c3c3b; /* Black (PMS Black U) */
  --w-color-off-white: #f5f5f5; /* Off-White (PMS Cool Grey 1U) */
  --w-color-white: #ffffff; /* White */
  
  /* Extended Palette - Brand Guidelines */
  --w-color-coral: #e25178; /* Coral (PMS 7424 U) - for icons/accents */
  --w-color-red: #e7333f; /* Red (PMS 1797 U) */
  --w-color-blue: #00bdd4; /* Blue (PMS 638 U) */
  --w-color-orange: #ec6739; /* Orange (PMS 1665 U) */
  --w-color-purple: #9184be; /* Purple (PMS 2665 U) */
  --w-color-yellow: #fbb900; /* Yellow (PMS 7406 U) */
  --w-color-light-grey: #828282; /* Light Grey (PMS Cool Grey 10 U) */
  --w-color-mid-grey: #636363; /* Mid Grey (PMS Black 7 U) */
  --w-color-aquamarine: #85cee4; /* Aquamarine (PMS 2905 U) */
  --w-color-pale-purple: #bfbadb; /* Pale Purple (PMS 2635 U) */
  --w-color-sand: #be9e93; /* Sand (PMS 4735 U) */
  --w-color-pale-orange: #fcccaa; /* Pale Orange (PMS 475 U) */
  --w-color-pale-grey: #d0d0cf; /* Pale Grey (50% tint) */
}

/* Dark theme customization */
.w-theme-dark {
  /* Primary color customization for dark theme - Affinity Teal (PMS 315 U) - lighter for dark theme */
  --w-color-primary: #2a7d92; /* Lighter version of Affinity Teal for dark theme */
  --w-color-primary-hue: 193; /* Same hue as Affinity Teal */
  --w-color-primary-saturation: 55%;
  --w-color-primary-lightness: 37%; /* Slightly lighter for dark theme */

  /* Secondary color customization for dark theme - Turquoise (PMS 362 U) - lighter for dark theme */
  --w-color-secondary: #00c6be; /* Lighter version of Turquoise for dark theme */
  --w-color-secondary-hue: 178; /* Same hue as Turquoise */
  --w-color-secondary-saturation: 100%;
  --w-color-secondary-lightness: 39%; /* Slightly lighter for dark theme */

  /* Corporate Palette - adjusted for dark theme */
  --w-color-black: #3c3c3b; /* Black (PMS Black U) */
  --w-color-off-white: #f5f5f5; /* Off-White (PMS Cool Grey 1U) */
  --w-color-white: #ffffff; /* White */
  
  /* Extended Palette - Brand Guidelines (same colors work in dark theme) */
  --w-color-coral: #e25178; /* Coral (PMS 7424 U) - for icons/accents */
  --w-color-red: #e7333f; /* Red (PMS 1797 U) */
  --w-color-blue: #00bdd4; /* Blue (PMS 638 U) */
  --w-color-orange: #ec6739; /* Orange (PMS 1665 U) */
  --w-color-purple: #9184be; /* Purple (PMS 2665 U) */
  --w-color-yellow: #fbb900; /* Yellow (PMS 7406 U) */
  --w-color-light-grey: #828282; /* Light Grey (PMS Cool Grey 10 U) */
  --w-color-mid-grey: #636363; /* Mid Grey (PMS Black 7 U) */
  --w-color-aquamarine: #85cee4; /* Aquamarine (PMS 2905 U) */
  --w-color-pale-purple: #bfbadb; /* Pale Purple (PMS 2635 U) */
  --w-color-sand: #be9e93; /* Sand (PMS 4735 U) */
  --w-color-pale-orange: #fcccaa; /* Pale Orange (PMS 475 U) */
  --w-color-pale-grey: #d0d0cf; /* Pale Grey (50% tint) */
}

/* System preference based theme customization */
@media (prefers-color-scheme: light) {
  .w-theme-system {
    /* Primary color customization for light theme via system settings - Affinity Teal (PMS 315 U) #1f677a */
    --w-color-primary: #1f677a; /* Direct hex color setting */
    --w-color-primary-hue: 193; /* Converted from #1f677a */
    --w-color-primary-saturation: 60%;
    --w-color-primary-lightness: 30%;

    /* Secondary color customization for light theme via system settings - Turquoise (PMS 362 U) #00b0a9 */
    --w-color-secondary: #00b0a9; /* Direct hex color setting */
    --w-color-secondary-hue: 178;
    --w-color-secondary-saturation: 100%;
    --w-color-secondary-lightness: 35%;

    /* Corporate Palette */
    --w-color-black: #3c3c3b; /* Black (PMS Black U) */
    --w-color-off-white: #f5f5f5; /* Off-White (PMS Cool Grey 1U) */
    --w-color-white: #ffffff; /* White */
    
    /* Extended Palette - Brand Guidelines */
    --w-color-coral: #e25178; /* Coral (PMS 7424 U) - for icons/accents */
    --w-color-red: #e7333f; /* Red (PMS 1797 U) */
    --w-color-blue: #00bdd4; /* Blue (PMS 638 U) */
    --w-color-orange: #ec6739; /* Orange (PMS 1665 U) */
    --w-color-purple: #9184be; /* Purple (PMS 2665 U) */
    --w-color-yellow: #fbb900; /* Yellow (PMS 7406 U) */
    --w-color-light-grey: #828282; /* Light Grey (PMS Cool Grey 10 U) */
    --w-color-mid-grey: #636363; /* Mid Grey (PMS Black 7 U) */
    --w-color-aquamarine: #85cee4; /* Aquamarine (PMS 2905 U) */
    --w-color-pale-purple: #bfbadb; /* Pale Purple (PMS 2635 U) */
    --w-color-sand: #be9e93; /* Sand (PMS 4735 U) */
    --w-color-pale-orange: #fcccaa; /* Pale Orange (PMS 475 U) */
    --w-color-pale-grey: #d0d0cf; /* Pale Grey (50% tint) */
  }
}

@media (prefers-color-scheme: dark) {
  .w-theme-system {
    /* Primary color customization for dark theme via system settings - Affinity Teal (PMS 315 U) - lighter for dark theme */
    --w-color-primary: #2a7d92; /* Lighter version of Affinity Teal for dark theme */
    --w-color-primary-hue: 193; /* Same hue as Affinity Teal */
    --w-color-primary-saturation: 55%;
    --w-color-primary-lightness: 37%; /* Slightly lighter for dark theme */

    /* Secondary color customization for dark theme via system settings - Turquoise (PMS 362 U) - lighter for dark theme */
    --w-color-secondary: #00c6be; /* Lighter version of Turquoise for dark theme */
    --w-color-secondary-hue: 178; /* Same hue as Turquoise */
    --w-color-secondary-saturation: 100%;
    --w-color-secondary-lightness: 39%; /* Slightly lighter for dark theme */

    /* Corporate Palette - adjusted for dark theme */
    --w-color-black: #3c3c3b; /* Black (PMS Black U) */
    --w-color-off-white: #f5f5f5; /* Off-White (PMS Cool Grey 1U) */
    --w-color-white: #ffffff; /* White */
    
    /* Extended Palette - Brand Guidelines (same colors work in dark theme) */
    --w-color-coral: #e25178; /* Coral (PMS 7424 U) - for icons/accents */
    --w-color-red: #e7333f; /* Red (PMS 1797 U) */
    --w-color-blue: #00bdd4; /* Blue (PMS 638 U) */
    --w-color-orange: #ec6739; /* Orange (PMS 1665 U) */
    --w-color-purple: #9184be; /* Purple (PMS 2665 U) */
    --w-color-yellow: #fbb900; /* Yellow (PMS 7406 U) */
    --w-color-light-grey: #828282; /* Light Grey (PMS Cool Grey 10 U) */
    --w-color-mid-grey: #636363; /* Mid Grey (PMS Black 7 U) */
    --w-color-aquamarine: #85cee4; /* Aquamarine (PMS 2905 U) */
    --w-color-pale-purple: #bfbadb; /* Pale Purple (PMS 2635 U) */
    --w-color-sand: #be9e93; /* Sand (PMS 4735 U) */
    --w-color-pale-orange: #fcccaa; /* Pale Orange (PMS 475 U) */
    --w-color-pale-grey: #d0d0cf; /* Pale Grey (50% tint) */
  }
}


/* Brand Guidelines Typography Utilities */
.brand-heading {
    font-family: var(--w-font-heading);
    font-weight: bold;
    line-height: var(--w-line-height-heading);
}

.brand-body {
    font-family: var(--w-font-sans);
    line-height: var(--w-line-height-body);
}

.brand-subheading {
    font-family: var(--w-font-heading);
    font-size: var(--w-font-size-subheading);
    line-height: var(--w-line-height-heading);
    font-weight: 600;
}

/* Brand Color Utilities */
.text-coral { color: var(--w-color-coral) !important; }
.bg-coral { background-color: var(--w-color-coral) !important; }
.border-coral { border-color: var(--w-color-coral) !important; }

.text-affinity-teal { color: var(--w-color-primary) !important; }
.bg-affinity-teal { background-color: var(--w-color-primary) !important; }
.border-affinity-teal { border-color: var(--w-color-primary) !important; }

.text-turquoise { color: var(--w-color-secondary) !important; }
.bg-turquoise { background-color: var(--w-color-secondary) !important; }
.border-turquoise { border-color: var(--w-color-secondary) !important; }

/* Brand Guidelines - White Space Utilities */
.brand-spacing-sm { margin: 0.5rem; }
.brand-spacing-md { margin: 1rem; }
.brand-spacing-lg { margin: 2rem; }

/* Brand Guidelines - Line Length Control (8-12 words per line) */
.brand-line-length {
    max-width: 65ch; /* Approximately 8-12 words per line */
    line-height: var(--w-line-height-body);
}

/* Readonly field styling */
input.readonly-field,
textarea.readonly-field,
select.readonly-field {
    background-color: var(--w-color-pale-grey) !important;
    color: var(--w-color-mid-grey) !important;
    cursor: not-allowed;
    border-color: var(--w-color-light-grey);
    opacity: 0.7;
}

/* Dark theme readonly fields */
.w-theme-dark input.readonly-field,
.w-theme-dark textarea.readonly-field,
.w-theme-dark select.readonly-field {
    background-color: #1a1a1a !important;
    color: #999 !important;
    border-color: #333;
}

/* Force Affinity Teal on key admin elements */
.w-button--primary,
.w-button.button-primary,
.button.bicolor.icon.icon-plus,
.w-action--primary {
    background-color: var(--w-color-primary) !important;
    border-color: var(--w-color-primary) !important;
}

.w-button--primary:hover,
.w-button.button-primary:hover,
.button.bicolor.icon.icon-plus:hover,
.w-action--primary:hover {
    background-color: var(--w-color-secondary) !important;
    border-color: var(--w-color-secondary) !important;
}

/* Apply brand colors to links and navigation */
a.w-link,
.w-breadcrumbs a,
.w-menu-item a {
    color: var(--w-color-primary) !important;
}

a.w-link:hover,
.w-breadcrumbs a:hover,
.w-menu-item a:hover {
    color: var(--w-color-secondary) !important;
}

/* Brand typography enforcement */
.w-h1, .w-h2, .w-h3, .w-h4, .w-h5, .w-h6,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--w-font-heading) !important;
    line-height: var(--w-line-height-heading) !important;
}

.w-body-text, .w-help-text, p, .w-field__label {
    font-family: var(--w-font-sans) !important;
    line-height: var(--w-line-height-body) !important;
}

/* Affinity Coral Color - PMS 7424 U */
:root {
    --affinity-coral: #e25178;
    --affinity-coral-hover: #d63f6b;
    --affinity-coral-light: rgba(226, 81, 120, 0.1);
    --affinity-coral-shadow: rgba(226, 81, 120, 0.3);
}

/* Ensure coral color is available for icons */
.icon-coral, .text-coral {
    color: var(--affinity-coral) !important;
}

/* AI Button styling with coral color */
.ai-btn, .universal-ai-widget {
    background: var(--affinity-coral) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 4px var(--affinity-coral-shadow) !important;
}

/* More specific selector to ensure coral background always applies */
.ai-btn.universal-ai-widget {
    background-color: var(--affinity-coral) !important;
}

.ai-btn:hover, .universal-ai-widget:hover {
    background: var(--affinity-coral-hover) !important;
    box-shadow: 0 3px 6px rgba(226, 81, 120, 0.4) !important;
}

.ai-btn.universal-ai-widget:hover {
    background-color: var(--affinity-coral-hover) !important;
}

/* ========================================
 * WAGTAIL LIST VIEW ENHANCEMENTS
 * Subtle improvements for better UX
 * ======================================== */

/* Main content area - full width with proper spacing */
.main-content {
    padding: 2rem !important;
    width: 100% !important;
}

/* Row spacing improvements */
.main-content .row {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    gap: 2rem !important;
}

/* Column spacing - optimize for better space usage */
.main-content .col3 {
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
}

.main-content .col9 {
    padding-left: 0.5rem !important;
    padding-right: 1rem !important;
}

/* Remove extra padding from result list to eliminate wasted space */
.result-list {
    padding-left: 0 !important;
}

/* Align pagination with table */
.pagination {
    padding-left: 0 !important;
}

/* Keep only essential table header styling with Affinity Teal - match filter heading */
.listing thead th,
.listing thead th a,
.listing thead th a:link,
.listing thead th a:visited,
.listing thead th a:hover {
    background: transparent !important;
    color: #1f677a !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Filter sidebar - clean styling with icon */
.changelist-filter h2 {
    color: #1f677a !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Add filter icon using FontAwesome */
.changelist-filter h2:before {
    content: "\f0b0" !important; /* FontAwesome filter icon */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-right: 0.5rem !important;
    color: #1f677a !important;
}

/* Fix responsive overlap issues */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column !important;
    }
    
    .main-content .col3,
    .main-content .col9 {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .changelist-filter {
        margin-bottom: 2rem !important;
        order: 1 !important;
    }
    
    .result-list {
        order: 2 !important;
    }
}

/* Override Wagtail ModelAdmin selected filter styling with coral branding - maximum specificity */
body .modeladmin .changelist-filter li.selected a,
body .changelist-filter li.selected a,
.modeladmin .changelist-filter li.selected a,
.changelist-filter li.selected a {
    background-color: var(--affinity-coral) !important;
    color: white !important;
    font-weight: 500 !important;
    border: 1px solid var(--affinity-coral) !important;
    border-color: var(--affinity-coral) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Force coral color with CSS custom property override */
:root {
    --w-color-text-link-default: var(--affinity-coral) !important;
}

/* Override any default Wagtail selected styling that might add green borders */
.modeladmin .changelist-filter li.selected a:before,
.modeladmin .changelist-filter li.selected a:after,
.changelist-filter li.selected a:before,
.changelist-filter li.selected a:after {
    display: none !important;
}


/* Center-align icon and number columns for better visual hierarchy */
.listing td.field-is_active,
.listing td.field-order,
.listing td.field-status,
.listing td.field-count,
.listing td.field-id,
.listing th.column-is_active,
.listing th.column-order,
.listing th.column-status,
.listing th.column-count,
.listing th.column-id {
    text-align: center !important;
}

/* Basic responsive design */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column !important;
    }
    
    .main-content .col3,
    .main-content .col9 {
        width: 100% !important;
    }
}

/* Page editing form width constraints - use natural width */
.w-form-width {
    max-width: 800px !important;
    margin: 0 !important;
    padding: 0 1rem !important;
}

/* Ensure panels within forms have proper spacing */
.w-form-width .w-panel {
    margin-bottom: 1rem !important;
}

/* Optimize panel content padding - much more compact */
.w-form-width .w-panel .w-panel__content {
    padding: 0.75rem 1rem !important;
}

/* Tighten spacing for field wrappers within panels */
.w-form-width .w-field__wrapper {
    margin-bottom: 0.5rem !important;
}

/* Optimize panel wrapper spacing */
.w-form-width .w-panel__wrapper {
    margin-bottom: 0.5rem !important;
}

/* Reduce space between label and input */
.w-form-width .w-field__label {
    margin-bottom: 0.25rem !important;
}

/* Fix AI button positioning within input fields */
.w-form-width .w-field__input {
    position: relative !important;
}

.w-form-width .ai-btn.universal-ai-widget {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
}

/* Optimize input field widths to reduce right-side space */
.w-form-width input[type="text"],
.w-form-width input[type="email"],
.w-form-width input[type="url"],
.w-form-width textarea,
.w-form-width select {
    max-width: 600px !important;
    width: 100% !important;
}

/* Hide specific empty panels that create blank cards */
.w-panel.publishing,
#panel-child-settings-publishing-section,
#panel-child-settings-comments-section {
    display: none !important;
}

/* Hide panels with minimal or hidden-only content */
.w-panel .w-panel__content:empty {
    display: none !important;
}

/* Responsive adjustments for page editing forms */
@media (max-width: 1000px) {
    .w-form-width {
        max-width: 700px !important;
        padding: 0 1rem !important;
    }
}

@media (max-width: 768px) {
    .w-form-width {
        max-width: 100% !important;
        padding: 0 0.75rem !important;
    }
    
    .w-form-width .w-panel {
        margin-bottom: 1rem !important;
    }
    
    .w-form-width .w-panel .w-panel__content {
        padding: 0.75rem 1rem !important;
    }
    
    .w-form-width .w-field__wrapper {
        margin-bottom: 0.5rem !important;
    }
    
    .w-form-width .w-field__label {
        margin-bottom: 0.25rem !important;
    }
    
    .w-form-width input[type="text"],
    .w-form-width input[type="email"],
    .w-form-width input[type="url"],
    .w-form-width textarea,
    .w-form-width select {
        max-width: 100% !important;
    }
}

/* Edit buttons - use Affinity Teal (coral reserved for selected items and AI widgets) */
.actions li .button-secondary {
    background-color: #1f677a !important;
    border-color: #1f677a !important;
    color: white !important;
}

.actions li .button-secondary:hover {
    background-color: #175862 !important;
    border-color: #175862 !important;
}

/* Remove pagination card styling - keep it clean with proper spacing */
.pagination {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem 0 !important;
    box-shadow: none !important;
    margin-top: 1.5rem !important;
}

/* Keep action buttons minimal - just adjust sizing without color changes */
.listing .actions {
    margin-top: 0.25rem !important;
}

.listing .actions .button {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.6rem !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0.1rem !important;
}

/* Fix list item text size - make it more compact */
.listing tbody td a,
.listing tbody td .title-wrapper a,
.listing tbody td .title a {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
}

/* Also fix general table cell text size */
.listing tbody td {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

/* ========================================
 * WAGTAIL ADMIN FORM CARD STYLING
 * Refined padding and margins for cleaner form appearance
 * ======================================== */

/* Target main Wagtail panels for card styling */
.w-panel {
    margin-bottom: 1.5rem !important;
    padding: 1.25rem !important;
    background: rgba(255, 255, 255, 0.6) !important; /* Subtle off-white background */
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* More prominent but still subtle shadow */
    border: 1px solid rgba(0, 0, 0, 0.06) !important; /* Very light border for definition */
}

/* Subtle hover effect for better interactivity */
.w-panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

/* Dark theme adjustments for the subtle styling */
.w-theme-dark .w-panel {
    background: rgba(255, 255, 255, 0.02) !important; /* Very subtle lightening in dark mode */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.w-theme-dark .w-panel:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure individual field wrappers don't interfere */
.w-panel__wrapper {
    margin-bottom: 1.25rem !important;
}

.w-field {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Form sections and fieldsets - subtle styling only */
.w-panel__heading,
fieldset legend,
.w-panel > h2,
.w-panel > h3 {
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    font-weight: 600 !important;
}

/* Hide the accordion toggle icon completely - it's problematic */
.w-panel__toggle {
    display: none !important;
}

/* Also hide the anchor links */
.w-panel__anchor {
    display: none !important;
}

/* Fix the panel header layout after hiding toggle button */
.w-panel__header {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ensure the heading stays within the card boundaries */
.w-panel__heading {
    margin-left: 0 !important;
    padding-left: 0 !important;
    position: relative !important;
}

/* Individual form fields within panels - minimal spacing */
.w-field__input,
.w-field__wrapper {
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* Keep only essential input styling - no extra backgrounds or borders */
.w-field input:focus,
.w-field textarea:focus,
.w-field select:focus {
    border-color: var(--w-color-primary) !important;
    box-shadow: 0 0 0 2px rgba(31, 103, 122, 0.1) !important;
    outline: none !important;
}

/* Minimal button styling - keep AI generation button colors */
.w-button--primary,
.button-primary,
button[data-content-source] {
    background: var(--w-color-primary) !important;
    border-color: var(--w-color-primary) !important;
    color: white !important;
}

.w-button--primary:hover,
.button-primary:hover,
button[data-content-source]:hover {
    background: var(--w-color-secondary) !important;
    border-color: var(--w-color-secondary) !important;
}

/* Debug indicator - remove this in production */
.w-admin::before {
    content: "Affinity Brand CSS Loaded";
    position: fixed;
    top: 0;
    right: 0;
    background: var(--w-color-coral);
    color: white;
    padding: 2px 8px;
    font-size: 10px;
    z-index: 9999;
    opacity: 0.8;
}