/* ------------------------------------------------------
   main.css - Global Styles for HassleFreebooks
   ------------------------------------------------------
   This file contains the global CSS styles that are loaded on every page.
   It establishes the design system, typography, and common UI components.

   Design System:
   - Uses CSS variables for consistent theming
   - BEM naming convention for maintainability
   - Mobile-first responsive approach
   - Accessibility-first design patterns
*/

/* ==========================================================================
   Base Styles - CSS Reset and Normalization
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Ensuring base font size of 16px for better readability */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Typography - Global Text Styles
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: -0.02em;
  /* Add smooth font rendering for better appearance */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-3xl));
  letter-spacing: -0.025em;
}
h3 {
  font-size: clamp(var(--font-size-lg), 3vw, var(--font-size-2xl));
}
h4 {
  font-size: var(--font-size-lg);
}
h5 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}
h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* Enhanced paragraph styling */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  /* Improve readability with subtle adjustments */
  letter-spacing: 0.01em;
}

/* Lead paragraph style */
.lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-light);
}

/* Enhanced link styling with modern hover effects */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}

a:hover {
  color: var(--color-primary-dark);
}

/* Fancy underline effect for text links */
a:not(.btn):hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-fast);
}

/* Enhanced focus state for accessibility */
a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Text Utilities */
.text--small {
  font-size: var(--font-size-sm);
}

.text--large {
  font-size: var(--font-size-lg);
}

.text--muted {
  color: var(--color-text-secondary);
}

.text--primary {
  color: var(--color-primary);
}

.text--secondary {
  color: var(--color-secondary);
}

.text--success {
  color: var(--color-success);
}

.text--warning {
  color: var(--color-warning);
}

.text--danger {
  color: var(--color-danger);
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}

.text--left {
  text-align: left;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

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

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .grid--cols-2,
  .grid--cols-3,
  .grid--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex--column {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--center {
  justify-content: center;
  align-items: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--gap-1 { gap: var(--space-1); }
.flex--gap-2 { gap: var(--space-2); }
.flex--gap-3 { gap: var(--space-3); }
.flex--gap-4 { gap: var(--space-4); }

/* ==========================================================================
   Components - Reusable UI Elements
   ========================================================================== */

/* Buttons - Enhanced with modern styling */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-base);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.btn:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn:focus-visible {
  outline: 3px solid rgba(52, 152, 219, 0.4);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Button text elements */
.btn__text {
  position: relative;
  z-index: 2;
}

.btn__icon {
  margin-left: var(--space-2);
  transition: transform var(--transition-fast);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

/* Button Variants */
.btn--secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

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

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

.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.btn--ghost:hover {
  background-color: var(--color-primary-bg);
  color: var(--color-primary-dark);
}

/* Button Sizes */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-md);
}

/* Cards */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-surface-alt);
}

.card__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.card__body {
  color: var(--color-text);
}

.card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-surface-alt);
}

/* Forms */
.form-group {
  margin-bottom: var(--space-5);
}

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

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  background-clip: padding-box;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:disabled {
  background-color: var(--color-surface-alt);
  opacity: 1;
  cursor: not-allowed;
}

/* Form Validation States */
.form-control--error {
  border-color: var(--color-danger);
}

.form-control--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.form-control--success {
  border-color: var(--color-success);
}

.form-control--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.form-text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.form-error {
  color: var(--color-danger);
}

/* Alerts */
.alert {
  position: relative;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
}

.alert--primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert--success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert--warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeaa7;
}

.alert--danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
}

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

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

.badge--warning {
  background-color: var(--color-warning);
}

.badge--danger {
  background-color: var(--color-danger);
}

/* Tables */
.table {
  width: 100%;
  margin-bottom: var(--space-4);
  background-color: transparent;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-3);
  vertical-align: top;
  border-top: 1px solid var(--color-border);
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--color-border-strong);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
}

.table tbody tr:hover {
  background-color: var(--color-surface-alt);
}

.table--striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   Navigation Components
   ========================================================================== */

/* Main Navigation */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav__item {
  margin-right: var(--space-4);
}

.nav__link {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.nav__link--active {
  color: var(--color-primary);
  position: relative;
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-primary);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  list-style: none;
  background-color: transparent;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
}

.breadcrumb__item--active .breadcrumb__link {
  color: var(--color-text);
  cursor: default;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

/* Spacing */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.pr-0 { padding-right: 0; }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

/* Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-danger { background-color: var(--color-danger); }
.bg-light { background-color: var(--color-surface-alt); }
.bg-dark { background-color: var(--color-text); }
.bg-white { background-color: var(--color-surface); }

/* Borders */
.border { border: 1px solid var(--color-border-strong); }
.border-0 { border: 0; }
.border-top { border-top: 1px solid var(--color-border-strong); }
.border-bottom { border-bottom: 1px solid var(--color-border-strong); }
.border-left { border-left: 1px solid var(--color-border-strong); }
.border-right { border-right: 1px solid var(--color-border-strong); }

.rounded { border-radius: var(--radius-base); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-0 { border-radius: 0; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* Width */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* Height */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  border-radius: var(--radius-base);
  z-index: var(--z-tooltip);
}

.skip-link:focus {
  top: var(--space-2);
}

/* Focus Visible Polyfill */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */

/* Enhanced container with fluid sizing */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Improved responsive text sizing */
@media (max-width: 768px) {
  :root {
    --font-size-base: 0.9375rem; /* 15px for better mobile readability */
    --font-size-sm: 0.8125rem;   /* 13px */
    --font-size-xs: 0.75rem;     /* 12px */
  }

  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
  h3 { font-size: clamp(1.25rem, 4vw, 1.75rem); }
}

/* Hide on specific breakpoints */
@media (max-width: 575.98px) {
  .hide-xs { display: none !important; }
  .show-xs { display: block !important; }
  .show-xs-inline { display: inline !important; }
  .show-xs-inline-block { display: inline-block !important; }
  .show-xs-flex { display: flex !important; }

  /* Mobile-specific spacing adjustments */
  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  /* Stack buttons on mobile */
  .btn-group {
    flex-direction: column;
    gap: var(--space-3);
  }

  .btn-group .btn {
    width: 100%;
  }
}

@media (min-width: 576px) {
  .hide-sm-up { display: none !important; }
  .show-sm-up { display: block !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block !important; }
  .show-sm-inline { display: inline !important; }
  .show-sm-inline-block { display: inline-block !important; }
  .show-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
  .hide-md-up { display: none !important; }
  .show-md-up { display: block !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hide-md { display: none !important; }
  .show-md { display: block !important; }
  .show-md-inline { display: inline !important; }
  .show-md-inline-block { display: inline-block !important; }
  .show-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
  .hide-lg-up { display: none !important; }
  .show-lg-up { display: block !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .hide-lg { display: none !important; }
  .show-lg { display: block !important; }
  .show-lg-inline { display: inline !important; }
  .show-lg-inline-block { display: inline-block !important; }
  .show-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
  .hide-xl { display: none !important; }
  .show-xl { display: block !important; }
  .show-xl-inline { display: inline !important; }
  .show-xl-inline-block { display: inline-block !important; }
  .show-xl-flex { display: flex !important; }
}

/* Responsive text alignment */
@media (max-width: 575.98px) {
  .text-xs-left { text-align: left !important; }
  .text-xs-center { text-align: center !important; }
  .text-xs-right { text-align: right !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .text-sm-left { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-right { text-align: right !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .text-md-left { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-right { text-align: right !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .text-lg-left { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right { text-align: right !important; }
}

@media (min-width: 1200px) {
  .text-xl-left { text-align: left !important; }
  .text-xl-center { text-align: center !important; }
  .text-xl-right { text-align: right !important; }
}

/* Responsive spacing */
@media (max-width: 575.98px) {
  .m-xs-0 { margin: 0 !important; }
  .mt-xs-0 { margin-top: 0 !important; }
  .mb-xs-0 { margin-bottom: 0 !important; }
  .p-xs-0 { padding: 0 !important; }
  .pt-xs-0 { padding-top: 0 !important; }
  .pb-xs-0 { padding-bottom: 0 !important; }
}

/* Responsive flexbox */
@media (max-width: 767.98px) {
  .flex-xs-column { flex-direction: column !important; }
  .flex-xs-column-reverse { flex-direction: column-reverse !important; }
}

@media (min-width: 768px) {
  .flex-md-row { flex-direction: row !important; }
  .flex-md-row-reverse { flex-direction: row-reverse !important; }
}

/* Responsive width */
@media (max-width: 767.98px) {
  .w-xs-100 { width: 100% !important; }
  .w-xs-auto { width: auto !important; }
}

@media (min-width: 768px) {
  .w-md-25 { width: 25% !important; }
  .w-md-50 { width: 50% !important; }
  .w-md-75 { width: 75% !important; }
  .w-md-auto { width: auto !important; }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: underline;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid var(--color-text-muted);
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  .navbar,
  .btn,
  .footer {
    display: none;
  }
}

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

/* Fade In */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--transition-base);
}

/* Fade Out */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut var(--transition-base);
}

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp var(--transition-base);
}

/* Fade In Down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-down {
  animation: fadeInDown var(--transition-base);
}

/* Slide In Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft var(--transition-base);
}

/* Slide In Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight var(--transition-base);
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn var(--transition-base);
}

/* Pulse */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Bounce */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}

/* Shake */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 0.5s;
}

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

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

/* Flash */
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation: flash 1.5s;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-border) 25%,
    var(--color-surface-alt) 50%,
    var(--color-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid var(--color-border-strong);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.spinner--sm {
  width: 1rem;
  height: 1rem;
}

.spinner--lg {
  width: 3rem;
  height: 3rem;
}

/* ==========================================================================
   Browser Compatibility
   ========================================================================== */

/* Smooth Scroll Polyfill for Safari */
@supports not (scroll-behavior: smooth) {
  html {
    scroll-behavior: auto;
  }
}

/* Custom Properties Fallback */
@supports not (--css: variables) {
  :root {
    /* Provide fallback values for critical properties */
  }
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Reduce motion for users who prefer it */
@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;
  }
}

/* ==========================================================================
   Additional UI Polish Enhancements (v65.6)
   ========================================================================== */

/* Enhanced Input Focus States */
.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15),
              0 1px 2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Improved Card Depth on Mobile */
@media (max-width: 768px) {
  .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }
}

/* Smooth Page Transitions */
.page-transition {
  animation: pageSlide 0.3s ease-out;
}

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

/* Enhanced Table Hover with Row Highlighting */
.table tbody tr {
  position: relative;
  transition: all 0.2s ease;
}

/* REMOVED: tr::before pseudo-element was creating an invisible extra
   table-cell in body rows, shifting all data columns one position right
   of their headers. Browsers treat ::before on <tr> as an anonymous
   table-cell even with position:absolute. */

/* Improved Badge Styling */
.badge {
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Enhanced Navigation Active State */
.nav__link--active {
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-base);
  font-weight: var(--font-weight-semibold);
}

/* Smooth Loading Skeleton Animation */
.skeleton-enhanced {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 0%,
    var(--color-border) 20%,
    var(--color-surface-alt) 40%,
    var(--color-surface-alt) 100%
  );
  background-size: 1000px 100%;
  animation: skeletonWave 2s linear infinite;
}

@keyframes skeletonWave {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Mobile Touch Feedback */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .card:active,
  .nav__link:active {
    transition-duration: 0.1s;
  }
}

/* Enhanced Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  border: 3px solid var(--color-surface-alt);
  transition: background 0.2s ease;
}

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

/* Firefox Scrollbar */
@supports (scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-muted) var(--color-surface-alt);
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #0066cc;
    --color-secondary: #000000;
    --shadow-sm: 0 0 0 1px;
    --shadow-base: 0 0 0 2px;
    --shadow-md: 0 0 0 3px;
  }

  .btn,
  .form-control,
  .card {
    border-width: 2px;
  }
}

/* ==========================================================================
   Page-Specific Components - Home Page
   ========================================================================== */

/* Hero Section - Enhanced visual styling */
.hero-section {
  padding: var(--space-14) 0 var(--space-20);
  background: linear-gradient(135deg, #e6f2ff 0%, #d6e9ff 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 150%;
  background: radial-gradient(circle, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.hero-container {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  position: relative;
  z-index: 1;
}

@media (max-width: 991.98px) {
  .hero-container {
    flex-direction: column;
    gap: var(--space-12);
  }
}

.hero__content {
  flex: 1;
  max-width: 600px;
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  margin-bottom: var(--space-6);
  color: var(--color-text);
}

.hero__brand {
  color: var(--color-primary);
  display: inline-block;
  position: relative;
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.trust-icon {
  color: var(--color-warning);
}

/* Feature floating cards */
.hero__features {
  flex: 1;
  position: relative;
  min-height: 400px;
}

.features-grid {
  position: relative;
  height: 100%;
}

.feature-float {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  animation: bobFloat 6s ease-in-out infinite;
}

.feature-float:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  background: rgba(255, 255, 255, 1);
}

.feature-float--1 {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.feature-float--2 {
  top: 40%;
  right: 10%;
  animation-delay: 2s;
}

.feature-float--3 {
  bottom: 10%;
  left: 20%;
  animation-delay: 4s;
}

@keyframes bobFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.feature-float__icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.feature-float__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* ==========================================================================
   Enhanced Components - Modern UI Elements
   ========================================================================== */

/* Newsletter Section - Enhanced styling */
.section--newsletter {
  padding: var(--space-16) 0;
  background: linear-gradient(180deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);
  position: relative;
  overflow: hidden;
}

/* Add subtle animated background pattern */
.section--newsletter::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(circle at 20% 80%, rgba(13, 148, 136, 0.05) 0%, transparent 40%),
                    radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 40%);
  animation: floatPattern 30s linear infinite;
  pointer-events: none;
}

@keyframes floatPattern {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-25%, -25%) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

.newsletter--enhanced {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.newsletter__form {
  margin-top: var(--space-8);
}

.newsletter__row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (max-width: 575.98px) {
  .newsletter__row {
    flex-direction: column;
  }
}

.newsletter__input-wrapper {
  flex: 1;
  position: relative;
}

.newsletter__submit {
  flex-shrink: 0;
}

.newsletter__privacy {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* CTA Section - Enhanced styling */
.section--cta {
  padding: var(--space-20) 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
  position: relative;
}

.cta--enhanced {
  max-width: 800px;
  margin: 0 auto;
}

.cta__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin: var(--space-10) 0;
}

@media (max-width: 767.98px) {
  .cta__stats {
    flex-direction: column;
    gap: var(--space-6);
  }
}

.stat {
  text-align: center;
}

.stat__number {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cta__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.btn--cta {
  flex-direction: column;
  padding: var(--space-4) var(--space-8);
}

.btn__subtext {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  opacity: 0.9;
  margin-top: var(--space-1);
}

/* Glass Morphism Effects */
.glass-morphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Gradient Borders */
.gradient-border {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light), var(--color-accent));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.gradient-border:hover::before {
  opacity: 1;
}

/* Enhanced Card Hover Effects */
.card--interactive {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card--interactive::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-base);
}

/* Add a shine effect on hover */
.card--interactive::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 70%
  );
  transform: rotate(45deg) translateY(-100%);
  transition: transform 0.6s;
  pointer-events: none;
}

.card--interactive:hover {
  transform: translateY(-4px) scale(1.02) rotateX(-2deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card--interactive:hover::before {
  opacity: 0.8;
}

.card--interactive:hover::after {
  transform: rotate(45deg) translateY(100%);
}

/* Neumorphism Styles */
.neumorphic {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.08),
    -8px -8px 16px rgba(255, 255, 255, 0.9);
  transition: all var(--transition-base);
}

.neumorphic:hover {
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.1),
    -4px -4px 8px rgba(255, 255, 255, 0.95);
}

.neumorphic--pressed {
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.1),
    inset -4px -4px 8px rgba(255, 255, 255, 0.95);
}

/* Animated Gradient Text */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent) 25%,
    var(--color-primary-light) 50%,
    var(--color-primary) 75%,
    var(--color-accent) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Enhanced Button Styles with Micro-interactions */
.btn--glow {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
  backface-visibility: hidden;
  transform: translateZ(0);
}

.btn--glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

/* Add animated gradient border */
.btn--glow::after {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(
    45deg,
    var(--color-primary),
    var(--color-accent),
    var(--color-primary-light),
    var(--color-primary)
  );
  background-size: 300% 300%;
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-base);
  animation: gradientMove 4s ease infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn--glow:hover::before {
  width: 300px;
  height: 300px;
}

.btn--glow:hover::after {
  opacity: 1;
}

.btn--glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(13, 148, 136, 0.4);
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-fixed);
}

.fab:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
  background: var(--color-primary-dark);
}

.fab:active {
  transform: scale(0.95);
}

/* Enhanced Form Elements */
.form-control--floating-label {
  position: relative;
  margin-top: var(--space-6);
}

.form-control--floating-label .form-control {
  padding-top: var(--space-5);
  padding-bottom: var(--space-2);
}

.form-control--floating-label .form-label {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  transform: translateY(-50%);
  transition: all var(--transition-fast);
  pointer-events: none;
  color: var(--color-text-secondary);
}

.form-control--floating-label .form-control:focus ~ .form-label,
.form-control--floating-label .form-control:not(:placeholder-shown) ~ .form-label {
  top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  transform: translateY(0);
}

/* Parallax Effect Helper */
.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.parallax-content {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
  padding: var(--space-16) 0;
}

/* Button Ripple Effect */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Enhanced Form Styling */
.form-control--email {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Smooth Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal--scale {
  transform: scale(0.9);
}

.reveal--scale.revealed {
  transform: scale(1);
}

.reveal--rotate {
  transform: rotate(-5deg);
}

.reveal--rotate.revealed {
  transform: rotate(0);
}

/* Tooltip Styles */
.tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-white);
  background-color: var(--color-text);
  border-radius: var(--radius-base);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
}

.tooltip::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: var(--color-text) transparent transparent transparent;
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
}

.modal--open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.modal__content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  animation: scaleIn var(--transition-base);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal__close:hover {
  background-color: var(--color-surface-alt);
}

.modal__body {
  padding: var(--space-6);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Dropdown Menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  margin-top: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-md);
  animation: fadeInDown var(--transition-fast);
}

.dropdown__menu--right {
  left: auto;
  right: 0;
}

.dropdown__item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dropdown__item:hover {
  color: var(--color-text);
  background-color: var(--color-surface-alt);
}

.dropdown__divider {
  height: 1px;
  margin: var(--space-2) 0;
  background-color: var(--color-border);
}

/* Notification Styles */
.notification {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-popover);
  max-width: 400px;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-lg);
  animation: slideInRight var(--transition-base);
}

.notification--success {
  border-left: 4px solid var(--color-success);
}

.notification--warning {
  border-left: 4px solid var(--color-warning);
}

.notification--danger {
  border-left: 4px solid var(--color-danger);
}

.notification--info {
  border-left: 4px solid var(--color-info);
}

.notification__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.notification__close:hover {
  color: var(--color-text);
}

/* Progress Bar */
.progress {
  height: 8px;
  background-color: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-base);
}

.progress--striped .progress__bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress--animated .progress__bar {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Tabs */
.tabs {
  display: flex;
  flex-direction: column;
}

.tabs__list {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs__tab {
  position: relative;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.tabs__tab:hover {
  color: var(--color-text);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
}

.tabs__tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
}

.tabs__content {
  padding: var(--space-4) 0;
}

/* Accordion */
.accordion__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.accordion__header {
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.accordion__header:hover {
  background-color: var(--color-surface-alt);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.accordion__item--open .accordion__content {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Responsive Tables */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-4);
}

.table--responsive {
  min-width: 600px;
}

@media (max-width: 767.98px) {
  .table--responsive thead {
    display: none;
  }

  .table--responsive tbody tr {
    display: block;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
  }

  .table--responsive tbody td {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3);
    border-top: none;
  }

  .table--responsive tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-semibold);
    margin-right: var(--space-4);
  }
}

/* Focus Styles for Keyboard Navigation */
.keyboard-nav *:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  position: relative;
}

/* Enhanced focus indicator with glow effect */
.keyboard-nav *:focus::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  opacity: 0.2;
  background: var(--color-primary);
  filter: blur(8px);
  pointer-events: none;
  animation: focusGlow 1.5s ease-in-out infinite;
}

@keyframes focusGlow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

/* Loading Overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: var(--z-modal);
}

.loading-overlay__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Sticky Elements */
.sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sticky--header {
  top: 60px; /* Account for app header */
}

/* Lazy Loading Placeholder */
[data-lazy] {
  background-color: var(--color-surface-alt);
  min-height: 200px;
  position: relative;
}

[data-lazy]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-strong);
  border-top-color: var(--color-text-secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.lazy-loaded {
  animation: fadeIn var(--transition-base);
}