/**
 * Global CSS - Dimus Reports
 * Sistema de Design Responsivo Centralizado
 *
 * Principios: DRY, Consistencia, Mobile-First
 * Theme: Light/Dark mode com cores Dimus
 */

/* ==========================================================================
   CSS VARIABLES - Design Tokens
   ========================================================================== */

:root {
  /* ---- Dimus Brand Colors ---- */
  --dimus-primary: #8A1B74;        /* Magenta Dimus */
  --dimus-primary-light: #A82D8E;
  --dimus-primary-dark: #6D1560;
  --dimus-accent: #4C003E;         /* Roxo escuro */
  --dimus-accent-light: #6A1858;

  /* ---- Theme Colors (Light Mode Default) ---- */
  /* Primary - Dimus Magenta */
  --color-primary: var(--dimus-primary);
  --color-primary-50: #FDF2FA;
  --color-primary-100: #FCE7F6;
  --color-primary-200: #FBCFED;
  --color-primary-300: #F8A8DD;
  --color-primary-400: #F06EC5;
  --color-primary-500: var(--dimus-primary);
  --color-primary-600: var(--dimus-primary-dark);
  --color-primary-700: #5B1150;
  --color-primary-800: #4A0E41;
  --color-primary-900: #3D0B36;

  /* Secondary (Green - Mantido para status) */
  --color-secondary: #42B72A;
  --color-secondary-50: #F0FDF4;
  --color-secondary-100: #DCFCE7;
  --color-secondary-500: #42B72A;
  --color-secondary-600: #16A34A;
  --color-secondary-700: #15803D;

  /* ---- Surface Colors (Light) ---- */
  --color-bg-primary: #F9FAFB;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #F3F4F6;
  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-text-muted: #9CA3AF;
  --color-border: #E5E7EB;

  /* WhatsApp Green */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C7E;
  --color-whatsapp-light: #DCF8C6;

  /* Telegram Blue */
  --color-telegram: #0088CC;
  --color-telegram-dark: #006699;
  --color-telegram-light: #E3F2FD;

  /* Status Colors */
  --color-success: #10B981;
  --color-success-bg: #D1FAE5;
  --color-success-text: #065F46;

  --color-warning: #F59E0B;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #92400E;

  --color-error: #EF4444;
  --color-error-bg: #FEE2E2;
  --color-error-text: #991B1B;

  --color-info: #3B82F6;
  --color-info-bg: #DBEAFE;
  --color-info-text: #1E40AF;

  /* Neutral/Gray Scale */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* ---- Typography ---- */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font Sizes - Mobile First (base) */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Spacing ---- */
  --spacing-unit: 0.25rem;     /* 4px base unit */
  --spacing-0: 0;
  --spacing-1: 0.25rem;        /* 4px */
  --spacing-2: 0.5rem;         /* 8px */
  --spacing-3: 0.75rem;        /* 12px */
  --spacing-4: 1rem;           /* 16px */
  --spacing-5: 1.25rem;        /* 20px */
  --spacing-6: 1.5rem;         /* 24px */
  --spacing-8: 2rem;           /* 32px */
  --spacing-10: 2.5rem;        /* 40px */
  --spacing-12: 3rem;          /* 48px */
  --spacing-16: 4rem;          /* 64px */
  --spacing-20: 5rem;          /* 80px */
  --spacing-24: 6rem;          /* 96px */

  /* ---- Layout ---- */
  --sidebar-width: 260px;
  --header-height-mobile: 4rem;    /* 64px */
  --header-height-desktop: 0;
  --container-max-width: 1280px;
  --container-padding: var(--spacing-4);

  /* ---- Borders ---- */
  --border-radius-sm: 0.25rem;     /* 4px */
  --border-radius-md: 0.375rem;    /* 6px */
  --border-radius-lg: 0.5rem;      /* 8px */
  --border-radius-xl: 0.75rem;     /* 12px */
  --border-radius-2xl: 1rem;       /* 16px */
  --border-radius-full: 9999px;

  --border-width: 1px;
  --border-color: var(--color-gray-200);

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ---- Z-Index Scale ---- */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINT ADJUSTMENTS
   ========================================================================== */

/* Tablet (md: 768px) */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--spacing-6);
  }
}

/* Desktop (lg: 1024px) */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--spacing-8);
    --header-height-mobile: 0;
  }
}

/* Large Desktop (xl: 1280px) */
@media (min-width: 1280px) {
  :root {
    --container-max-width: 1440px;
  }
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */

[data-theme="dark"] {
  /* Surface Colors */
  --color-bg-primary: #0F0F12;
  --color-bg-secondary: #1A1A1F;
  --color-bg-tertiary: #232428;
  --color-text-primary: #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-muted: #6B7280;
  --color-border: #374151;

  /* Primary adjusted for dark */
  --color-primary: #B84D9E;
  --color-primary-50: #2D1528;
  --color-primary-100: #3D1B36;
  --color-primary-200: #4D2244;
  --color-primary-600: #C76AB3;
  --color-primary-700: #D687C5;

  /* Gray scale inverted */
  --color-gray-50: #1F2937;
  --color-gray-100: #374151;
  --color-gray-200: #4B5563;
  --color-gray-300: #6B7280;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #D1D5DB;
  --color-gray-600: #E5E7EB;
  --color-gray-700: #F3F4F6;
  --color-gray-800: #F9FAFB;
  --color-gray-900: #FFFFFF;

  /* Status colors adjusted for dark */
  --color-success-bg: rgba(16, 185, 129, 0.15);
  --color-success-text: #34D399;
  --color-warning-bg: rgba(245, 158, 11, 0.15);
  --color-warning-text: #FBBF24;
  --color-error-bg: rgba(239, 68, 68, 0.15);
  --color-error-text: #F87171;
  --color-info-bg: rgba(59, 130, 246, 0.15);
  --color-info-text: #60A5FA;

  /* Shadows for dark mode */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #0F0F12;
    --color-bg-secondary: #1A1A1F;
    --color-bg-tertiary: #232428;
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-text-muted: #6B7280;
    --color-border: #374151;
    --color-primary: #B84D9E;
    --color-gray-50: #1F2937;
    --color-gray-100: #374151;
    --color-gray-200: #4B5563;
    --color-gray-700: #F3F4F6;
    --color-gray-800: #F9FAFB;
  }
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* ==========================================================================
   LAYOUT - MAIN CONTENT
   ========================================================================== */

.main-content {
  margin-left: 0;
  padding-top: var(--header-height-mobile);
  min-height: 100vh;
  transition: margin-left var(--transition-base);
}

@media (min-width: 1024px) {
  .main-content {
    margin-left: var(--sidebar-width);
    padding-top: 0;
  }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes pulseGreen {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Animation Classes */
.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-green {
  animation: pulseGreen 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* ==========================================================================
   COMPONENTS - SPINNER
   ========================================================================== */

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}

.spinner-whatsapp {
  border-top-color: var(--color-whatsapp);
}

.spinner-telegram {
  border-top-color: var(--color-telegram);
}

/* ==========================================================================
   COMPONENTS - STATUS BADGES
   ========================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: capitalize;
}

.status-completed,
.status-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-processing,
.status-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.status-error,
.status-failed {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
}

.status-pending,
.status-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

/* ==========================================================================
   COMPONENTS - BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  border-radius: var(--border-radius-lg);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px; /* Touch target */
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-600);
}

.btn-secondary {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-gray-200);
}

.btn-success {
  background-color: var(--color-success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: var(--color-secondary-600);
}

.btn-danger {
  background-color: var(--color-error);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #DC2626;
}

/* Button Sizes */
.btn-sm {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--font-size-xs);
  min-height: 32px;
}

.btn-lg {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-base);
  min-height: 52px;
}

/* ==========================================================================
   COMPONENTS - CARDS
   ========================================================================== */

.card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: background-color var(--transition-base);
}

.card-header {
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--spacing-4) var(--spacing-6);
}

@media (min-width: 768px) {
  .card-body {
    padding: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .card-body {
    padding: var(--spacing-6) var(--spacing-8);
  }
}

/* ==========================================================================
   COMPONENTS - FORMS
   ========================================================================== */

.form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-base);
  min-height: 44px; /* Touch target */
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

/* ==========================================================================
   COMPONENTS - TABLES (Responsive)
   ========================================================================== */

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table th,
.table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .table th,
  .table td {
    padding: var(--spacing-4) var(--spacing-6);
  }
}

/* Hide columns on mobile */
.table .hide-mobile {
  display: none;
}

@media (min-width: 640px) {
  .table .hide-mobile {
    display: table-cell;
  }
}

/* Hide columns on tablet and below */
.table .hide-tablet {
  display: none;
}

@media (min-width: 1024px) {
  .table .hide-tablet {
    display: table-cell;
  }
}

/* ==========================================================================
   COMPONENTS - MODALS (Responsive)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
}

.modal {
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius-2xl);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  z-index: var(--z-modal);
  transition: background-color var(--transition-base);

  /* Responsive max-width */
  max-width: calc(100vw - var(--spacing-8));
}

@media (min-width: 640px) {
  .modal {
    max-width: 28rem; /* 448px */
  }
}

@media (min-width: 768px) {
  .modal {
    max-width: 32rem; /* 512px */
  }
}

@media (min-width: 1024px) {
  .modal {
    max-width: 42rem; /* 672px */
  }
}

@media (min-width: 1280px) {
  .modal {
    max-width: 56rem; /* 896px */
  }
}

.modal-lg {
  max-width: calc(100vw - var(--spacing-8));
}

@media (min-width: 1024px) {
  .modal-lg {
    max-width: 64rem; /* 1024px */
  }
}

/* ==========================================================================
   UTILITIES - RESPONSIVE TYPOGRAPHY
   ========================================================================== */

/* Headings with responsive scaling */
.heading-1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

@media (min-width: 640px) {
  .heading-1 {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 1024px) {
  .heading-1 {
    font-size: var(--font-size-4xl);
  }
}

.heading-2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

@media (min-width: 640px) {
  .heading-2 {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1024px) {
  .heading-2 {
    font-size: var(--font-size-3xl);
  }
}

.heading-3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

@media (min-width: 640px) {
  .heading-3 {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 1024px) {
  .heading-3 {
    font-size: var(--font-size-2xl);
  }
}

/* Body text responsive */
.text-responsive {
  font-size: var(--font-size-sm);
}

@media (min-width: 640px) {
  .text-responsive {
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   UTILITIES - RESPONSIVE CONTAINERS
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

/* ==========================================================================
   UTILITIES - RESPONSIVE SPACING
   ========================================================================== */

/* Responsive padding */
.p-responsive {
  padding: var(--spacing-4);
}

@media (min-width: 640px) {
  .p-responsive {
    padding: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .p-responsive {
    padding: var(--spacing-8);
  }
}

/* Responsive gap */
.gap-responsive {
  gap: var(--spacing-4);
}

@media (min-width: 640px) {
  .gap-responsive {
    gap: var(--spacing-6);
  }
}

@media (min-width: 1024px) {
  .gap-responsive {
    gap: var(--spacing-8);
  }
}

/* ==========================================================================
   UTILITIES - VISIBILITY
   ========================================================================== */

/* Hide on mobile (< 640px) */
.hidden-mobile {
  display: none !important;
}

@media (min-width: 640px) {
  .hidden-mobile {
    display: initial !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: initial !important;
}

@media (min-width: 640px) {
  .show-mobile {
    display: none !important;
  }
}

/* Hide on tablet and below (< 1024px) */
.hidden-tablet {
  display: none !important;
}

@media (min-width: 1024px) {
  .hidden-tablet {
    display: initial !important;
  }
}

/* ==========================================================================
   QR CODE CONTAINER (WhatsApp/Telegram)
   ========================================================================== */

.qr-container {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-tertiary);
  border-radius: var(--border-radius-lg);
  border: 2px dashed var(--color-border);
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ==========================================================================
   FOCUS STYLES (Accessibility)
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .main-content {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  .no-print {
    display: none !important;
  }
}