/**
 * GlobalDental Theme - Modern Healthcare Aesthetic
 * ================================================
 * A distinctive dental laboratory management system theme
 * featuring teal/emerald palette, glassmorphism, and smooth animations.
 */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
  /* Primary Colors - Teal Healthcare Palette */
  --gd-primary: #0D9488;
  --gd-primary-light: #14B8A6;
  --gd-primary-dark: #0F766E;
  --gd-primary-rgb: 13, 148, 136;

  /* Override Bootstrap Primary Colors */
  --bs-primary: #0D9488;
  --bs-primary-rgb: 13, 148, 136;
  --bs-primary-active: #0F766E;
  --bs-primary-light: #E6F4F3;
  --bs-primary-inverse: #ffffff;
  --bs-link-color: #0D9488;
  --bs-link-hover-color: #0F766E;

  /* Success - Emerald */
  --gd-success: #10B981;
  --gd-success-light: #34D399;
  --gd-success-dark: #059669;
  --gd-success-rgb: 16, 185, 129;

  /* Info - Ocean Blue */
  --gd-info: #0EA5E9;
  --gd-info-light: #38BDF8;
  --gd-info-dark: #0284C7;
  --gd-info-rgb: 14, 165, 233;

  /* Warning - Coral/Amber */
  --gd-warning: #F59E0B;
  --gd-warning-light: #FBBF24;
  --gd-warning-dark: #D97706;
  --gd-warning-rgb: 245, 158, 11;

  /* Danger - Rose */
  --gd-danger: #F43F5E;
  --gd-danger-light: #FB7185;
  --gd-danger-dark: #E11D48;
  --gd-danger-rgb: 244, 63, 94;

  /* Workflow Stage Colors */
  --gd-stage-cad: #6366F1;
  --gd-stage-cad-rgb: 99, 102, 241;
  --gd-stage-cam: #F59E0B;
  --gd-stage-cam-rgb: 245, 158, 11;
  --gd-stage-ceramic: #EC4899;
  --gd-stage-ceramic-rgb: 236, 72, 153;
  --gd-stage-finished: #10B981;
  --gd-stage-finished-rgb: 16, 185, 129;

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

  /* Gradients */
  --gd-gradient-primary: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
  --gd-gradient-hero: linear-gradient(135deg, #0D9488 0%, #0EA5E9 100%);
  --gd-gradient-auth: linear-gradient(135deg, #0D9488 0%, #0284C7 100%);
  --gd-gradient-sidebar: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);

  /* Shadows */
  --gd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --gd-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --gd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --gd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --gd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --gd-shadow-lift: 0 12px 24px -8px rgba(13, 148, 136, 0.25);
  --gd-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* Border Radius */
  --gd-radius-sm: 0.375rem;
  --gd-radius: 0.5rem;
  --gd-radius-md: 0.75rem;
  --gd-radius-lg: 1rem;
  --gd-radius-xl: 1.5rem;
  --gd-radius-full: 9999px;

  /* Transitions */
  --gd-transition-fast: 150ms ease;
  --gd-transition: 200ms ease;
  --gd-transition-slow: 300ms ease;
  --gd-transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. GLASSMORPHISM UTILITIES
   ========================================================================== */

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-teal {
  background: rgba(13, 148, 136, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(13, 148, 136, 0.2);
}

/* ==========================================================================
   3. CARD ENHANCEMENTS
   ========================================================================== */

/* Glassmorphism Card */
.card-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--gd-shadow-glass);
  transition: transform var(--gd-transition-smooth), box-shadow var(--gd-transition-smooth);
}

.card-glass:hover {
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-xl);
}

/* Statistic Card with Accent Border */
.card-stat {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: var(--gd-radius-lg);
  box-shadow: var(--gd-shadow-md);
  transition: transform var(--gd-transition-smooth), box-shadow var(--gd-transition-smooth);
}

.card-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gd-primary);
}

.card-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--gd-shadow-lift);
}

.card-stat.card-stat-success::before {
  background: var(--gd-success);
}

.card-stat.card-stat-info::before {
  background: var(--gd-info);
}

.card-stat.card-stat-warning::before {
  background: var(--gd-warning);
}

.card-stat.card-stat-danger::before {
  background: var(--gd-danger);
}

/* Icon pulse animation on card-stat hover */
.card-stat:hover .symbol-label {
  animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* Card Hover Lift Effect */
.card-lift {
  transition: transform var(--gd-transition-smooth), box-shadow var(--gd-transition-smooth);
}

.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--gd-shadow-xl);
}

/* Hero Card */
.card-hero {
  background: var(--gd-gradient-hero);
  border: none;
  border-radius: var(--gd-radius-xl);
  box-shadow: var(--gd-shadow-lg);
}

.card-hero .card-title,
.card-hero .card-label {
  color: white !important;
}

/* ==========================================================================
   4. BUTTON ENHANCEMENTS
   ========================================================================== */

/* Primary Button with Gradient */
.btn-gd-primary {
  background: var(--gd-gradient-primary);
  border: none;
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--gd-radius-md);
  position: relative;
  overflow: hidden;
  transition: transform var(--gd-transition-smooth), box-shadow var(--gd-transition-smooth);
}

.btn-gd-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-gd-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-lift);
  color: white;
}

.btn-gd-primary:hover::before {
  left: 100%;
}

.btn-gd-primary:active {
  transform: translateY(0);
}

/* Ensure text visibility in all button states */
.btn-gd-primary .indicator-label,
.btn-gd-primary .indicator-progress,
.btn-gd-primary span,
.btn-gd-primary i {
  color: white !important;
}

.btn-gd-primary[data-kt-indicator="on"] {
  background: var(--gd-gradient-primary);
  color: white !important;
}

.btn-gd-primary[data-kt-indicator="on"] .indicator-progress {
  color: white !important;
}

.btn-gd-primary[data-kt-indicator="on"] .spinner-border {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-right-color: white !important;
}

/* Override Bootstrap primary button */
.btn-primary {
  background: var(--gd-gradient-primary) !important;
  border-color: var(--gd-primary) !important;
  transition: transform var(--gd-transition-smooth), box-shadow var(--gd-transition-smooth);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-lift) !important;
  background: var(--gd-gradient-primary) !important;
  border-color: var(--gd-primary-dark) !important;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary.show {
  background: var(--gd-primary-dark) !important;
  border-color: var(--gd-primary-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--gd-primary-rgb), 0.4) !important;
  transform: translateY(0);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background: var(--gd-primary-dark) !important;
  border-color: var(--gd-primary-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--gd-primary-rgb), 0.4) !important;
}

/* Remove blue focus ring from Bootstrap */
.btn-primary:focus:not(:focus-visible) {
  box-shadow: none !important;
}

.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
  background: var(--gd-primary-dark) !important;
  border-color: var(--gd-primary-dark) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--gd-primary-rgb), 0.4) !important;
}

/* Light Primary Button */
.btn-light-primary {
  background-color: rgba(var(--gd-primary-rgb), 0.1) !important;
  color: var(--gd-primary) !important;
  border: 1px solid transparent !important;
  transition: all var(--gd-transition-smooth);
}

.btn-light-primary:hover,
.btn-light-primary.active {
  background-color: var(--gd-primary) !important;
  color: white !important;
}

.btn-light-primary:active,
.btn-light-primary:focus,
.btn-light-primary:active:focus {
  background-color: var(--gd-primary-dark) !important;
  color: white !important;
}

.btn-light-primary:active span,
.btn-light-primary:active i,
.btn-light-primary:focus span,
.btn-light-primary:focus i {
  color: white !important;
}

/* Button with Ripple Effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

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

/* ==========================================================================
   5. TABLE ENHANCEMENTS
   ========================================================================== */

/* Enhanced Table Header */
.table thead tr {
  background-color: var(--gd-gray-50);
}

.table thead th {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gd-gray-500);
  border-bottom: 2px solid var(--gd-gray-200) !important;
  padding: 1rem 0.75rem;
}

/* Table Row Hover */
.table tbody tr {
  transition: background-color var(--gd-transition-fast);
}

.table tbody tr:hover {
  background-color: rgba(var(--gd-primary-rgb), 0.04);
}

/* DataTable Selected Row - Override DataTables CSS Variables */
:root {
  --dt-row-selected: var(--gd-primary-rgb);
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 255, 255, 255;
}

/* DataTable Selected Row - Teal Theme */
table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(var(--gd-primary-rgb), 0.15) !important;
  color: var(--gd-gray-900) !important;
}

table.table.dataTable > tbody > tr.selected a {
  color: var(--gd-primary-dark) !important;
  text-decoration: none !important;
}

/* Remove dots/underline from action buttons in selected rows */
.table tbody tr.selected .btn,
.table tbody tr.selected a.btn,
table.dataTable tbody tr.selected .btn,
table.dataTable tbody tr.selected a.btn {
  text-decoration: none !important;
}

.table tbody tr.selected .btn i,
.table tbody tr.selected .btn .ki-duotone,
table.dataTable tbody tr.selected .btn i,
table.dataTable tbody tr.selected .btn .ki-duotone {
  text-decoration: none !important;
}

table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1).selected > * {
  box-shadow: inset 0 0 0 9999px rgba(var(--gd-primary-rgb), 0.18) !important;
}

table.table.dataTable.table-hover > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(var(--gd-primary-rgb), 0.22) !important;
}

/* Fallback for other DataTable configurations */
.table tbody tr.selected,
.table tbody tr.selected:hover,
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected:hover {
  background-color: rgba(var(--gd-primary-rgb), 0.15) !important;
}

.table tbody tr.selected td,
table.dataTable tbody tr.selected td {
  color: var(--gd-gray-900) !important;
}

/* Action Buttons in Tables - Enhanced Visibility */
.table tbody tr .btn-light-info,
.table tbody tr .btn-light-warning,
.table tbody tr .btn-light-danger,
.table tbody tr .btn-light-success,
.table tbody tr .btn-light-primary {
  background-color: white !important;
  border: 1px solid var(--gd-gray-200) !important;
  box-shadow: var(--gd-shadow-sm);
  transition: all var(--gd-transition-fast);
}

.table tbody tr .btn-light-info {
  color: var(--gd-info) !important;
}

.table tbody tr .btn-light-warning {
  color: var(--gd-warning) !important;
}

.table tbody tr .btn-light-danger {
  color: var(--gd-danger) !important;
}

.table tbody tr .btn-light-success {
  color: var(--gd-success) !important;
}

.table tbody tr .btn-light-primary {
  color: var(--gd-primary) !important;
}

/* Action Buttons Hover State */
.table tbody tr .btn-light-info:hover {
  background-color: var(--gd-info) !important;
  border-color: var(--gd-info) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--gd-shadow-md);
}

.table tbody tr .btn-light-warning:hover {
  background-color: var(--gd-warning) !important;
  border-color: var(--gd-warning) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--gd-shadow-md);
}

.table tbody tr .btn-light-danger:hover {
  background-color: var(--gd-danger) !important;
  border-color: var(--gd-danger) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--gd-shadow-md);
}

.table tbody tr .btn-light-success:hover {
  background-color: var(--gd-success) !important;
  border-color: var(--gd-success) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--gd-shadow-md);
}

.table tbody tr .btn-light-primary:hover {
  background-color: var(--gd-primary) !important;
  border-color: var(--gd-primary) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: var(--gd-shadow-md);
}

/* Pagination - Teal Theme */
.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--gd-primary) !important;
  border-color: var(--gd-primary) !important;
  color: white !important;
}

.pagination .page-link:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--gd-primary-light) !important;
  border-color: var(--gd-primary-light) !important;
  color: white !important;
}

.pagination .page-link:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--gd-primary-rgb), 0.25) !important;
}

.pagination .page-link {
  color: var(--gd-gray-700);
  transition: all var(--gd-transition-fast);
}


/* ==========================================================================
   6. WORKFLOW BADGES
   ========================================================================== */

/* Base Workflow Badge */
.badge-workflow {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--gd-radius-full);
  transition: transform var(--gd-transition-fast);
}

.badge-workflow:hover {
  transform: scale(1.05);
}

/* CAD Stage Badge */
.badge-cad,
.badge-stage-cad {
  background: rgba(var(--gd-stage-cad-rgb), 0.15);
  color: var(--gd-stage-cad);
  border: 1px solid rgba(var(--gd-stage-cad-rgb), 0.3);
}

/* CAM Stage Badge */
.badge-cam,
.badge-stage-cam {
  background: rgba(var(--gd-stage-cam-rgb), 0.15);
  color: var(--gd-stage-cam);
  border: 1px solid rgba(var(--gd-stage-cam-rgb), 0.3);
}

/* Ceramic Stage Badge */
.badge-ceramic,
.badge-stage-ceramic {
  background: rgba(var(--gd-stage-ceramic-rgb), 0.15);
  color: var(--gd-stage-ceramic);
  border: 1px solid rgba(var(--gd-stage-ceramic-rgb), 0.3);
}

/* Finished Stage Badge */
.badge-finished,
.badge-stage-finished {
  background: rgba(var(--gd-stage-finished-rgb), 0.15);
  color: var(--gd-stage-finished);
  border: 1px solid rgba(var(--gd-stage-finished-rgb), 0.3);
}

/* Override default badge colors */
.badge-info {
  background: rgba(var(--gd-stage-cad-rgb), 0.15) !important;
  color: var(--gd-stage-cad) !important;
}

.badge-warning {
  background: rgba(var(--gd-stage-cam-rgb), 0.15) !important;
  color: var(--gd-stage-cam) !important;
}

.badge-primary {
  background: rgba(var(--gd-stage-ceramic-rgb), 0.15) !important;
  color: var(--gd-stage-ceramic) !important;
}

.badge-success {
  background: rgba(var(--gd-success-rgb), 0.15) !important;
  color: var(--gd-success) !important;
}

.badge-danger {
  background: rgba(var(--gd-danger-rgb), 0.15) !important;
  color: var(--gd-danger) !important;
}

/* Light Badges */
.badge-light-success {
  background-color: rgba(var(--gd-success-rgb), 0.12) !important;
  color: var(--gd-success) !important;
}

.badge-light-danger {
  background-color: rgba(var(--gd-danger-rgb), 0.12) !important;
  color: var(--gd-danger) !important;
}

.badge-light-info {
  background-color: rgba(var(--gd-info-rgb), 0.12) !important;
  color: var(--gd-info) !important;
}

.badge-light-warning {
  background-color: rgba(var(--gd-warning-rgb), 0.12) !important;
  color: var(--gd-warning) !important;
}

/* ==========================================================================
   7. FORM ENHANCEMENTS
   ========================================================================== */

/* Input Focus States */
.form-control:focus,
.form-select:focus {
  border-color: var(--gd-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--gd-primary-rgb), 0.15) !important;
}

.form-control-solid {
  background-color: var(--gd-gray-100);
  border: 1px solid var(--gd-gray-200);
  transition: all var(--gd-transition);
}

.form-control-solid:focus {
  background-color: white;
  border-color: var(--gd-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--gd-primary-rgb), 0.15);
}

/* Form Labels */
.form-label {
  font-weight: 600;
  color: var(--gd-gray-700);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   8. SIDEBAR NAVIGATION
   ========================================================================== */

/* Sidebar Base */
.app-sidebar {
  background: var(--gd-gradient-sidebar) !important;
}

/* Menu Item Styling */
.menu-item.menu-item-sidebar .menu-link {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin: 0.25rem 0.75rem;
  border-radius: var(--gd-radius-md);
  transition: all var(--gd-transition-smooth);
  overflow: hidden;
}

.menu-item.menu-item-sidebar .menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 70%;
  background: var(--gd-primary-light);
  border-radius: 0 2px 2px 0;
  transition: transform var(--gd-transition-smooth);
}

.menu-item.menu-item-sidebar .menu-link:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.menu-item.menu-item-sidebar .menu-link:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.menu-item.menu-item-sidebar .menu-link.active {
  background: rgba(var(--gd-primary-rgb), 0.2);
}

.menu-item.menu-item-sidebar .menu-link.active::before {
  transform: translateY(-50%) scaleY(1);
  background: var(--gd-primary);
}

/* Menu Icon Color */
.menu-item.menu-item-sidebar .menu-link .menu-icon {
  transition: color var(--gd-transition);
}

.menu-item.menu-item-sidebar .menu-link:hover .menu-icon,
.menu-item.menu-item-sidebar .menu-link.active .menu-icon {
  color: var(--gd-primary-light) !important;
}

/* Menu Section Header */
.menu-content .menu-heading {
  color: var(--gd-gray-400);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   9. SYMBOL/ICON BACKGROUNDS
   ========================================================================== */

.symbol-label.bg-light-primary {
  background-color: rgba(var(--gd-primary-rgb), 0.1) !important;
}

.symbol-label.bg-light-success {
  background-color: rgba(var(--gd-success-rgb), 0.1) !important;
}

.symbol-label.bg-light-info {
  background-color: rgba(var(--gd-info-rgb), 0.1) !important;
}

.symbol-label.bg-light-warning {
  background-color: rgba(var(--gd-warning-rgb), 0.1) !important;
}

.symbol-label.bg-light-danger {
  background-color: rgba(var(--gd-danger-rgb), 0.1) !important;
}

/* Icon Text Colors */
.text-primary {
  color: var(--gd-primary) !important;
}

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

.text-info {
  color: var(--gd-info) !important;
}

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

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

/* ==========================================================================
   10. ANIMATIONS
   ========================================================================== */

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

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* Stagger Animation Classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

/* Shimmer Loading Effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--gd-gray-200) 25%,
    var(--gd-gray-100) 50%,
    var(--gd-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--gd-radius);
}

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

.animate-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}

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

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

/* Results Section Reveal Animation */
.results-section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.results-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Summary Table Row Animations */
@keyframes tableRowFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#summaryTableBody tr,
#productSummaryTableBody tr {
  opacity: 0;
  animation: tableRowFadeIn 0.3s ease-out forwards;
}

#summaryTableBody tr:nth-child(1),
#productSummaryTableBody tr:nth-child(1) { animation-delay: 0.05s; }
#summaryTableBody tr:nth-child(2),
#productSummaryTableBody tr:nth-child(2) { animation-delay: 0.1s; }
#summaryTableBody tr:nth-child(3),
#productSummaryTableBody tr:nth-child(3) { animation-delay: 0.15s; }
#summaryTableBody tr:nth-child(4),
#productSummaryTableBody tr:nth-child(4) { animation-delay: 0.2s; }
#summaryTableBody tr:nth-child(5),
#productSummaryTableBody tr:nth-child(5) { animation-delay: 0.25s; }
#summaryTableBody tr:nth-child(n+6),
#productSummaryTableBody tr:nth-child(n+6) { animation-delay: 0.3s; }

#summaryTableFooter tr {
  opacity: 0;
  animation: tableRowFadeIn 0.4s ease-out 0.35s forwards;
}

/* ==========================================================================
   11. MODAL ENHANCEMENTS
   ========================================================================== */

.modal-content {
  border: none;
  border-radius: var(--gd-radius-xl);
  box-shadow: var(--gd-shadow-xl);
  overflow: hidden;
}

.modal-header {
  background: var(--gd-gray-50);
  border-bottom: 1px solid var(--gd-gray-200);
  padding: 1.25rem 1.5rem;
}

.modal-footer {
  background: var(--gd-gray-50);
  border-top: 1px solid var(--gd-gray-200);
  padding: 1rem 1.5rem;
}

.modal-backdrop.show {
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   12. LOADING & SPINNER
   ========================================================================== */

.spinner-border {
  color: var(--gd-primary);
}

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

/* ==========================================================================
   13. HERO SECTIONS
   ========================================================================== */

.hero-gradient {
  background: var(--gd-gradient-hero);
  border-radius: var(--gd-radius-xl);
  box-shadow: var(--gd-shadow-lg);
}

.hero-gradient-auth {
  background: var(--gd-gradient-auth);
}

/* ==========================================================================
   14. CHART COLOR OVERRIDES
   ========================================================================== */

/* ApexCharts colors are set via JS, but we can override tooltip styles */
.apexcharts-tooltip {
  background: white !important;
  border: 1px solid var(--gd-gray-200) !important;
  border-radius: var(--gd-radius-md) !important;
  box-shadow: var(--gd-shadow-lg) !important;
}

.apexcharts-tooltip-title {
  background: var(--gd-gray-50) !important;
  border-bottom: 1px solid var(--gd-gray-200) !important;
}

/* Remove shadow/highlight effects from x-axis labels */
.apexcharts-xaxis-label,
.apexcharts-xaxis text,
.apexcharts-xaxis-texts-g text {
  text-shadow: none !important;
  filter: none !important;
}

.apexcharts-xaxis-label tspan {
  text-shadow: none !important;
}

/* Hide x-axis crosshair tooltip and active label highlight */
.apexcharts-xcrosshairs,
.apexcharts-xaxis-annotation-label,
.apexcharts-xaxis-tooltip,
.apexcharts-xaxistooltip,
.apexcharts-xaxistooltip-bottom,
.apexcharts-xaxistooltip-top {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Hide the title element inside x-axis labels that causes duplicate text */
.apexcharts-xaxis-label title,
.apexcharts-text.apexcharts-xaxis-label title,
.apexcharts-xaxis text title {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   15. UTILITY CLASSES
   ========================================================================== */

/* Background Utilities */
.bg-gd-primary { background-color: var(--gd-primary) !important; }
.bg-gd-success { background-color: var(--gd-success) !important; }
.bg-gd-info { background-color: var(--gd-info) !important; }
.bg-gd-warning { background-color: var(--gd-warning) !important; }
.bg-gd-danger { background-color: var(--gd-danger) !important; }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gd-gradient-primary) !important; }
.bg-gradient-hero { background: var(--gd-gradient-hero) !important; }

/* Border Utilities */
.border-gd-primary { border-color: var(--gd-primary) !important; }
.border-gd-success { border-color: var(--gd-success) !important; }
.border-gd-info { border-color: var(--gd-info) !important; }
.border-gd-warning { border-color: var(--gd-warning) !important; }
.border-gd-danger { border-color: var(--gd-danger) !important; }

/* Shadow Utilities */
.shadow-gd { box-shadow: var(--gd-shadow) !important; }
.shadow-gd-md { box-shadow: var(--gd-shadow-md) !important; }
.shadow-gd-lg { box-shadow: var(--gd-shadow-lg) !important; }
.shadow-gd-lift { box-shadow: var(--gd-shadow-lift) !important; }

/* Rounded Utilities */
.rounded-gd { border-radius: var(--gd-radius) !important; }
.rounded-gd-md { border-radius: var(--gd-radius-md) !important; }
.rounded-gd-lg { border-radius: var(--gd-radius-lg) !important; }
.rounded-gd-xl { border-radius: var(--gd-radius-xl) !important; }

/* ==========================================================================
   16. WORKFLOW PIPELINE VISUALIZATION
   ========================================================================== */

.workflow-pipeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
}

.workflow-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border-radius: var(--gd-radius-lg);
  background: white;
  box-shadow: var(--gd-shadow-sm);
  transition: all var(--gd-transition-smooth);
  position: relative;
}

.workflow-stage:hover {
  transform: translateY(-2px);
  box-shadow: var(--gd-shadow-md);
}

.workflow-stage.stage-cad {
  border-bottom: 3px solid var(--gd-stage-cad);
}

.workflow-stage.stage-cam {
  border-bottom: 3px solid var(--gd-stage-cam);
}

.workflow-stage.stage-ceramic {
  border-bottom: 3px solid var(--gd-stage-ceramic);
}

.workflow-stage.stage-finished {
  border-bottom: 3px solid var(--gd-stage-finished);
}

.workflow-stage .stage-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.workflow-stage.stage-cad .stage-icon {
  background: rgba(var(--gd-stage-cad-rgb), 0.15);
  color: var(--gd-stage-cad);
}

.workflow-stage.stage-cam .stage-icon {
  background: rgba(var(--gd-stage-cam-rgb), 0.15);
  color: var(--gd-stage-cam);
}

.workflow-stage.stage-ceramic .stage-icon {
  background: rgba(var(--gd-stage-ceramic-rgb), 0.15);
  color: var(--gd-stage-ceramic);
}

.workflow-stage.stage-finished .stage-icon {
  background: rgba(var(--gd-stage-finished-rgb), 0.15);
  color: var(--gd-stage-finished);
}

.workflow-connector {
  width: 40px;
  height: 2px;
  background: var(--gd-gray-300);
  position: relative;
}

.workflow-connector::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid var(--gd-gray-300);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* ==========================================================================
   17. QUICK PERIOD BUTTONS
   ========================================================================== */

/* Quick period buttons on white/light backgrounds */
#quickPeriodGroup .btn {
  background-color: rgba(var(--gd-primary-rgb), 0.1);
  color: var(--gd-primary);
  border: 1px solid transparent;
  transition: all var(--gd-transition-smooth);
}

#quickPeriodGroup .btn:hover {
  background-color: rgba(var(--gd-primary-rgb), 0.2);
  color: var(--gd-primary-dark);
}

#quickPeriodGroup .btn.active {
  background-color: var(--gd-primary) !important;
  color: white !important;
  box-shadow: var(--gd-shadow-sm);
}

/* Trend period buttons inside hero cards (on gradient background) */
#trend-period-filter .btn {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--gd-gray-700);
  border: 1px solid transparent;
  transition: all var(--gd-transition-smooth);
  font-weight: 500;
}

#trend-period-filter .btn:hover {
  background-color: white;
  color: var(--gd-gray-900);
  box-shadow: var(--gd-shadow-sm);
}

#trend-period-filter .btn.active {
  background-color: white !important;
  color: var(--gd-primary) !important;
  font-weight: 600;
  box-shadow: var(--gd-shadow-md);
}

/* ==========================================================================
   18. RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .workflow-pipeline {
    flex-direction: column;
  }

  .workflow-connector {
    width: 2px;
    height: 24px;
  }

  .workflow-connector::after {
    right: 50%;
    top: auto;
    bottom: -4px;
    transform: translateX(50%) rotate(90deg);
  }

  .card-stat::before {
    width: 100%;
    height: 3px;
    bottom: auto;
    top: 0;
  }
}

/* ==========================================================================
   20. MOBILE & TABLET RESPONSIVE UTILITIES
   ========================================================================== */

/* Responsive width utilities - full width on mobile, fixed on tablet+ */
@media (max-width: 767.98px) {
  .w-md-250px,
  .w-md-175px,
  .w-md-300px {
    width: 100% !important;
  }

  /* Search inputs responsive */
  .form-control.w-250px,
  .form-control.w-300px,
  .form-select.w-175px,
  .form-select.w-250px,
  .form-select.w-300px,
  [data-kt-filter="search"].w-250px {
    width: 100% !important;
  }

  /* Card header toolbar stacking */
  .card-header .card-title,
  .card-header .card-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }

  .card-header .card-title .d-flex {
    flex-direction: column;
    gap: 0.75rem;
  }

  .card-header.align-items-center {
    flex-direction: column;
    align-items: stretch !important;
  }

  .card-toolbar.flex-row-fluid {
    flex-direction: column;
    gap: 0.75rem !important;
  }

  .card-toolbar.flex-row-fluid .btn {
    width: 100%;
    justify-content: center;
  }

  /* Quick period button groups - stack vertically on mobile */
  #quickPeriodGroup,
  #trend-period-filter {
    flex-direction: column;
    width: 100%;
  }

  #quickPeriodGroup .btn,
  #trend-period-filter .btn {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  /* Hero card period filter row */
  .card-hero .row.align-items-center {
    flex-direction: column;
  }

  .card-hero .col-md-6 {
    width: 100%;
    margin-bottom: 1rem;
  }

  .card-hero .d-flex.justify-content-end {
    justify-content: flex-start !important;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Date range picker responsive */
  .card-hero input.form-control.w-250px {
    width: 100% !important;
  }

  /* Filter dropdowns on finished orders page */
  .card-title .d-flex.align-items-center {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .card-title .ms-5 {
    margin-left: 0 !important;
    width: 100%;
  }

  /* Table min-width overrides - allow table to be responsive */
  .table th.min-w-100px,
  .table th.min-w-120px,
  .table th.min-w-150px,
  .table th.min-w-175px,
  .table th.min-w-200px {
    min-width: auto !important;
  }

  /* Chart container responsive height */
  [id$="_chart"] {
    min-height: 250px !important;
    max-height: 350px !important;
  }

  /* Dashboard dental technique table card toolbar */
  .card .card-toolbar.d-flex.flex-row.flex-nowrap {
    flex-wrap: wrap !important;
    gap: 0.5rem;
  }

  .card .card-toolbar select.w-250px {
    width: 100% !important;
  }
}

/* Small mobile (xs) specific adjustments */
@media (max-width: 575.98px) {
  /* Even more compact on very small screens */
  .card-header {
    padding: 1rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Summary cards on IndexFinished - stack in single column */
  .row.g-5.g-xl-8 > [class*="col-xl-3"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Make btn-group wrap on very small screens */
  .btn-group[role="group"] {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Report page quick buttons */
  #quickPeriodGroup .btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
}

/* Tablet (sm/md) adjustments */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Quick period buttons can be 2-3 per row */
  #quickPeriodGroup,
  #trend-period-filter {
    flex-wrap: wrap;
  }

  #quickPeriodGroup .btn,
  #trend-period-filter .btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 140px;
  }

  /* Hero card filter row side-by-side */
  .card-hero .d-flex.justify-content-end {
    flex-wrap: wrap;
  }
}

/* Desktop (lg+) restore fixed widths */
@media (min-width: 768px) {
  .w-md-250px {
    width: 250px !important;
  }

  .w-md-175px {
    width: 175px !important;
  }

  .w-md-300px {
    width: 300px !important;
  }
}

/* Table responsive enhancements */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Scroll shadow indicator for tables */
.table-responsive::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.table-responsive.has-scroll::after {
  opacity: 1;
}

/* ==========================================================================
   21. REDUCED MOTION ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-scale-in,
  .animate-slide-in-right,
  .animate-pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .stagger-1, .stagger-2, .stagger-3,
  .stagger-4, .stagger-5, .stagger-6 {
    animation-delay: 0s !important;
  }

  .card-stat:hover .symbol-label {
    animation: none !important;
  }

  .card-glass:hover,
  .card-stat:hover,
  .card-lift:hover,
  .btn-gd-primary:hover,
  .btn-primary:hover {
    transform: none !important;
  }

  .results-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #summaryTableBody tr,
  #productSummaryTableBody tr,
  #summaryTableFooter tr {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   19. PRINT STYLES
   ========================================================================== */

@media print {
  .card-glass,
  .card-stat,
  .card-lift {
    box-shadow: none !important;
    border: 1px solid var(--gd-gray-200);
  }

  .animate-fade-in-up,
  .animate-scale-in,
  .animate-slide-in-right {
    animation: none !important;
  }
}