/*
  ComplaintPortal - Main Theme File
  
  This file imports and organizes all theme-related CSS files.
  Include this single file in your application to enable the complete theming system.
  
  Usage:
  1. Include this file after Bootstrap CSS in App.razor
  2. The theme is automatically applied to all Bootstrap components
  
  Customization:
  - Edit _variables.css to customize colors, spacing, typography, and effects
  - Edit _components.css for component-specific styling
  - Edit _responsive.css for responsive design adjustments
*/

/* Import base variables and component styles */
@import url('./_variables.css');
@import url('./_components.css');
@import url('./_responsive.css');

/* ========================================
   COMPONENT OVERRIDES
   ======================================== */

/* Card header text color */
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5 {
    color: white;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure proper contrast ratios */
@media (prefers-contrast: high) {
    :root {
        --cp-card-border: #000000;
        --cp-form-control-border: #000000;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }

    :root {
        --cp-hover-transform: none;
        --cp-transition-fast: 0s;
        --cp-transition-normal: 0s;
        --cp-transition-slow: 0s;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    .sidebar,
    .top-row,
    .btn,
    .modal,
    .dropdown-menu {
        display: none !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    * {
        background: white !important;
        color: black !important;
    }
}